Feature: Main Dashboard
Relevant source files
The following files were used as context for generating this wiki page:- frontend/src/components/ModelExecutionDashboard.tsx
- frontend/src/components/dashboard/SummaryStats.tsx
- frontend/src/components/dashboard/BasePage.tsx
- frontend/src/components/LocationInfo.tsx
- frontend/src/components/VersionLeaderboard.tsx
- frontend/src/pages/Index.tsx
- frontend/src/components/dashboard/ModelList.tsx
1. Introduction
The Main Dashboard is the central feature of the LLaMa Leaks application, providing a real-time, data-rich overview of publicly exposed Ollama AI servers. Its primary purpose is to educate and raise security awareness by displaying aggregated statistics, lists of running models, and details about individual exposed servers. The dashboard is composed of several distinct, yet interconnected, components that collectively present a comprehensive picture of the exposed infrastructure. These components handle data fetching, state management for user interactions like filtering and sorting, and rendering of statistics and data tables.
The dashboard is not a single component but a collection of features presented on the main page, including the ModelExecutionDashboard, ServerStats (which includes LocationInfo and VersionLeaderboard), and other informational sections. This document focuses on the technical implementation and architecture of these data-driven dashboard components.
Sources: frontend/src/pages/Index.tsx:9-12, frontend/src/components/ModelExecutionDashboard.tsx:13-20, frontend/src/components/dashboard/BasePage.tsx:23-31
2. System Architecture & Data Flow
The dashboard's architecture is component-based, with a primary parent component (ModelExecutionDashboard) managing state and data flow for its children. Other high-level components like LocationInfo and VersionLeaderboard manage their own data fetching independently.
2.1. Component Hierarchy
The main page assembles several key dashboard components. The ModelExecutionDashboard itself is a self-contained unit with its own sub-components for rendering different parts of its UI.
The following diagram illustrates the primary component structure for the dashboard features.
This diagram shows how Index.tsx composes the main page, including the ModelExecutionDashboard and ServerStats (which contains LocationInfo and VersionLeaderboard).
Sources: frontend/src/pages/Index.tsx:9-12, frontend/src/components/ModelExecutionDashboard.tsx:8-12
2.2. Data Fetching Flow
Data for the dashboard comes from different sources. The ModelExecutionDashboard relies on the useModelData hook, while LocationInfo and VersionLeaderboard fetch data directly from a static JSON file.
The sequence diagram below shows the data fetching process for the different dashboard components.
This diagram illustrates that ModelExecutionDashboard uses a dedicated hook for its data, while LocationInfo and VersionLeaderboard independently fetch and process the live_servers.json file.
Sources: frontend/src/components/ModelExecutionDashboard.tsx:14-21, frontend/src/components/LocationInfo.tsx:40-54, frontend/src/components/VersionLeaderboard.tsx:49-61
3. Core Components
3.1. ModelExecutionDashboard.tsx
This is the main orchestrator for the model execution part of the dashboard. It integrates custom hooks (useModelData, useModelFilters) to manage state, data fetching, and user-driven filtering/sorting.
Responsibilities:
- Fetches model and server data via
useModelData. - Manages UI state for filters (search term, server, status), sorting (sort key, direction), and pagination.
- Handles model expansion state (
expandedModels). - Passes filtered and paginated data to child components (
ModelList). - Provides handlers for user actions like page changes and data refresh.
Sources: frontend/src/components/ModelExecutionDashboard.tsx
3.2. dashboard/BasePage.tsx
This component acts as a wrapper for dashboard pages, providing a consistent layout and handling loading and error states.
Features:
- Displays a
LoadingSpinnercomponent while data is being fetched (loadingprop is true). - Displays an
ErrorMessagecomponent if data fetching fails (errorprop is not null). - Renders a standard
DashboardHeaderwith a title and descriptive text. - Renders child components once data is successfully loaded.
The following flowchart shows the rendering logic of the BasePage component.
3.3. dashboard/SummaryStats.tsx
This component displays high-level aggregate statistics in a card-based layout. It receives data from its parent and uses utility functions to perform calculations.
Displayed Stats:
| Statistic | Description | Calculation Source |
|---|---|---|
| Unique Models | The total count of unique models discovered. | modelExecutions.length |
| Active Executions | The number of models currently in an active state. | calculateActiveExecutions(modelExecutions) |
| Total Servers | The total count of servers observed. | serverData.length |
| Total Model Size | The sum of the sizes of all unique models, formatted in GB. | formatBytesToGB(calculateTotalModelSize(modelExecutions)) |
All numerical values are rendered using an AnimatedCounter component for a dynamic effect.
Sources: frontend/src/components/dashboard/SummaryStats.tsx
3.4. LocationInfo.tsx
This component provides a "live evidence" section by fetching data for a single, randomly selected exposed server from /data/live_servers.json.
Features:
- Fetches all server data and selects one entry at random.
- Displays server details: IP:Port, status (live/offline), location, and version.
- Lists local and running models on the server.
- Integrates with a
Mapcomponent to show the server's geographical location. - Includes a "Random Server" button to fetch and display a new random server.
Sources: frontend/src/components/LocationInfo.tsx
3.5. VersionLeaderboard.tsx
This component creates a "Hall of Fame" by grouping servers from /data/live_servers.json by their Ollama version and ranking them.
Logic:
- Fetches all server data from
/data/live_servers.json. - Parses the major/minor version from each server's version string (e.g.,
0.5.7-0-ga420a45-dirtybecomes0.5). - Groups servers by this parsed version.
- Calculates aggregate stats for each version group: total servers, live servers, total models, and total model size.
- Sorts the groups by version number in ascending order (older versions first).
- Renders the top 10 groups in a ranked list, with special icons and styling for the top 3.
Sources: frontend/src/components/VersionLeaderboard.tsx:47-101
4. Data Structures
The dashboard relies on a well-defined data structure for servers, which is used across multiple components.
ServerData Interface
This interface, defined implicitly in LocationInfo.tsx and VersionLeaderboard.tsx, describes a single observed server.
| Field | Type | Description |
|---|---|---|
ip | string | Masked IP address of the server. |
port | number | The port number the Ollama service is running on. |
version | string | The Ollama version string. |
city | string | Geographic city. |
country | string | Two-letter country code. |
country_name | string | Full country name. |
region | string | Geographic region or state. |
latitude | string | Latitude coordinate. |
longitude | string | Longitude coordinate. |
local | ServerModel[] | An array of models available locally on the server. |
running | ServerModel[] | An array of models currently running on the server. |
first_seen_online | string | ISO timestamp of when the server was first seen. |
age | string | Human-readable age of the server record. |
status | string | The current status, e.g., 'live'. |
Sources: frontend/src/components/LocationInfo.tsx:13-28, frontend/src/components/VersionLeaderboard.tsx:18-34
5. User Interaction and State Management
The ModelExecutionDashboard provides a rich user experience for exploring data through filtering, sorting, and pagination. This logic is encapsulated within the useModelFilters custom hook.
Filtering and Sorting Flow
The following diagram details how user actions trigger a re-render of the model list.
This flow demonstrates a reactive UI where user input updates state via dedicated functions, which in turn causes the useModelFilters hook to re-compute the derived data, leading to a seamless update of the ModelList.
Sources: frontend/src/components/ModelExecutionDashboard.tsx:23-36, frontend/src/components/ModelExecutionDashboard.tsx:48-51
6. Conclusion
The Main Dashboard is a sophisticated and central part of the LLaMa Leaks frontend. It effectively combines multiple, independent data-driven components to present a unified and educational view of exposed Ollama servers. Through a clean, component-based architecture, the use of custom hooks for state management, and a clear separation of concerns, the dashboard provides a robust and interactive experience for the user. The combination of aggregated statistics, filterable lists, and detailed views of random servers successfully fulfills the project's goal of raising security awareness in an engaging way.
Sources: frontend/src/pages/About.tsx:50-55, frontend/src/components/dashboard/BasePage.tsx:23-31