> For the complete documentation index, see [llms.txt](https://asus-isg-aidc.gitbook.io/guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asus-isg-aidc.gitbook.io/guide/latest/portal/deploymentoverview.md).

# Deployment Overview

| Developer | Last modified |
| --------- | ------------- |
| AIDC Team | 2026/01/26    |

![Deployment Overview Feature](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/deploymentOverview/Deployment_Overview-1.png)

## Feature Goal

### Aim

The Deployment Overview feature provides a centralized dashboard for monitoring and managing deployment jobs across the system. It enables users to:

* Track deployment job statuses in real-time
* Analyze deployment trends over the past 7 days
* Review node distribution statistics
* Access detailed information about the latest 50 deployment jobs
* Quickly identify and investigate failed or in-progress deployments

### User Story

**As a** system administrator or DevOps engineer\
**I want** to view a comprehensive overview of all deployment jobs and their statuses\
**So that** I can quickly monitor deployment health, identify issues, and track deployment trends across the system

## Feature Description

### 3.1 Location

* **Route**: `/DeploymentOverview`
* **Navigation Path**:
  * Side Menu: `Deployment` → `Deployment Overview`
* **Access Level**: Requires authenticated user with active license

### 3.2 Reference Feature

**Related Features**:

* **Node Management** (`/NodeManagement`): Manage and configure system nodes
* **Deployment Template List** (`/DeploymentTemplateList`): Create and manage deployment job templates
* **System Overview** (`/SystemOverview`): High-level system health dashboard

**Dependencies**:

* Jobs API service for fetching deployment data
* Real-time data updates from deployment engine
* Node statistics from node management service

### 3.3 Operation Requirements

**Prerequisites**:

1. User must be authenticated and logged into the system
2. User must have deployment monitoring permissions
3. At least one deployment job must exist in the system (for meaningful data display)

**System Requirements**:

* Modern web browser (Chrome, Firefox, Edge, Safari)
* JavaScript enabled
* Minimum screen resolution: 1024x768 (responsive design supports mobile)
* Stable network connection for real-time updates

**Access Permissions**:

* View deployment jobs
* View node statistics
* Access job detail information

### 3.4 Operation Flow

**Main Workflow**:

1. **Initial Page Load**
   * System authenticates user
   * Fetches latest 50 deployment jobs
   * Retrieves deployment statistics and trends
   * Loads node distribution data
   * Displays summary metrics cards
2. **Monitoring Deployments**
   * User views summary cards for quick status overview
   * User analyzes trend charts for historical patterns
   * User reviews node distribution charts
   * System updates last refresh timestamp
3. **Filtering Job Executions**
   * User clicks on status card (e.g., "Failed Jobs") OR
   * User clicks filter button in job list header
   * System filters job execution list by selected status
   * Filtered results display in job execution list table
4. **Searching for Job Executions**
   * User enters keywords in search bar
   * User can add multiple keywords (AND logic)
   * System filters job executions matching all keywords
   * Results update dynamically
5. **Viewing Job Execution Details**
   * User clicks on a job execution row in the list
   * System highlights selected row
   * System fetches detailed job information
   * Job details display in right panel including:
     * Job metadata (name, triggered by, start time, duration)
     * Node-level status table
     * Individual node deployment results
   * User clicks "Logs" button on the Job Execution Detail card and open the detailed execution dialog
6. **Analyzing Trends**
   * User switches chart mode (Changes by Day / Sum by Day)
   * System updates trend chart visualization
   * User reviews 7-day deployment patterns
7. **Reviewing Node Distribution**
   * User switches node chart mode (By Model / By Group)
   * System updates pie chart with selected view
   * User analyzes node distribution patterns

### 3.5 UI Review

![Deployment Overview UI Interface](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/deploymentOverview/Deployment_Overview-2.png)

The Deployment Overview interface is organized into three main sections:

#### Section 1: Summary Metrics Cards

**Group 1 - Primary Metrics (No.1 & 2)** :

* **Total Nodes Card (No.1)**: Navigates to Node Management when clicked
* **Total Jobs Card (No.2)**: Navigates to Deployment Template List when clicked

**Group 2 - Status Metrics (No.3)**:

* Created Jobs, In Progress Jobs, Complete Jobs, Failed Jobs, Canceled Jobs
* Each card acts as a filter toggle when clicked

#### Section 2: Charts Area

**Deployment Trends Chart (No.4)**:

* Two modes available via dropdown selector:
  * "Changes by Day" - Shows daily incremental changes
  * "Sum by Day" - Shows cumulative totals
* Multi-line area chart covering last 7 days
* Five status lines: Created, In Progress, Completed, Failed, Cancelled
* Interactive tooltips on hover

**Node Statistics Chart (No.5)**:

* Two modes available via dropdown selector:
  * "By Model" - Hardware model distribution
  * "By Group" - Node group distribution
* Donut/Pie chart format
* Interactive tooltips showing counts and percentages
* Fade animation when switching modes

#### Section 3: Job Tables Area

**Job List Panel (No.6)**:

* Header with filter buttons and search bar
* Shows latest 50 deployment jobs
* Columns: Name, Status, Progress, Start Time
* Status pills with color coding (Green/Red/Blue/Yellow/Gray)
* Clickable rows for selection
* Virtual scrolling support

**Job Details Panel (No.7)**:

* Displays selected job information
* Job metadata: Name, Triggered by, Started time, Duration
* Node table showing: Node Group, Hostname, Model, Status
* Empty state when no job selected
* Loading spinner during data fetch

### 3.6 Operation & Expected Result

#### Operation 1: View Overall Deployment Status

**Steps**:

1. Navigate to `/DeploymentOverview`
2. Wait for page to load

**Expected Result**:

* Page loads and displays all components
* Summary cards show current metrics with count-up animation
* Trend chart displays last 7 days of data
* Node statistics chart shows distribution
* Job list displays latest 50 jobs with first job auto-selected
* Job details panel shows selected job information

***

#### Operation 2: Filter Jobs by Status

**Steps**:

1. Click on a status card or filter button in job list header

**Expected Result**:

* Selected filter highlights
* Job list shows only jobs with selected status
* First job in filtered list auto-selects
* Click again to clear filter and show all jobs

***

#### Operation 3: Search for Specific Jobs

**Steps**:

1. Enter keyword(s) in search bar (multiple keywords supported)

**Expected Result**:

* Job list filters in real-time showing jobs matching ALL keywords
* Search matches: Job name, Status, Triggered by, Start time
* First matching job auto-selects

***

#### Operation 4: View Job Execution Details

**Steps**:

1. Click on a job execution row in the list

**Expected Result**:

* Selected row highlights
* Right panel displays job metadata and node table
* Status pills show color-coded results
* Logs button displayson the right panel

***

#### Operation 5: Analyze Deployment Trends

**Steps**:

1. Click mode dropdown in trends chart
2. Select "Changes by Day" or "Sum by Day"

**Expected Result**:

* Chart updates to selected mode
* "Changes by Day" shows daily incremental changes
* "Sum by Day" shows cumulative totals

***

#### Operation 6: Review Node Distribution

**Steps**:

1. Click mode dropdown in node statistics chart
2. Select "By Model" or "By Group"

**Expected Result**:

* Chart smoothly transitions to selected view
* Pie chart shows distribution by selected category
* Hover displays detailed counts and percentages

***

#### Operation 7: Combine Filters and Search

**Steps**:

1. Apply status filter
2. Enter search keywords

**Expected Result**:

* System applies both filters simultaneously
* Results show jobs matching status AND keywords

***

#### Operation 8: Navigate to Related Features

**Steps**:

* Click "Total Nodes" card → Navigates to Node Management
* Click "Total Jobs" card → Navigates to Deployment Template List