Skip to content

Add Statistics Overview and card #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KUASWoodyLIN merged 1 commit into from
Dec 4, 2025
Merged

Add Statistics Overview and card #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions src/content/docs/basic/networking.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@ title: Networking
description: Manage networking in OtterScale.
---

import { Steps, Aside } from '@astrojs/starlight/components';
import { Steps, Aside, Card, CardGrid } from '@astrojs/starlight/components';

This page allows you to manage the network infrastructure for the OtterScale cluster. You can manage network fabrics, VLANs, and subnets for machine provisioning and service connectivity.

## Overview
### Statistics Overview

#### Networks
At the top of the page, a set of summary cards provides a quick overview of the configured networking resources.:

Displays the number of defined Fabric networks in the system.

#### Available subnets

Shows percentage and ratio of available (unallocated) IP addresses across all subnets.
This allows administrators to understand IP exhaustion trends and plan for expansion.
<CardGrid>
<Card title="Networks" icon="tabler:topology-star">
Total number of Fabrics available for network segmentation.
</Card>
<Card title="Available Subnets" icon="">

@gemini-code-assist gemini-code-assist Bot Dec 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The 'Available Subnets' card is missing an icon. Adding an icon would improve visual consistency with other cards and make the information easier to parse at a glance. An icon representing utilization, like tabler:chart-pie-filled, would be a good fit here.

	<Card title="Available Subnets" icon="tabler:chart-pie-filled">

Overall utilization of IP address space across all subnets.
</Card>
</CardGrid>

## Introduction

Expand Down
21 changes: 11 additions & 10 deletions src/content/docs/service/storage/01-osd.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,23 @@ title: OSD
description: Monitor and manage Object Storage Daemons (OSDs).
---

import { Steps, Aside } from '@astrojs/starlight/components';
import { Steps, Aside, Card, CardGrid } from '@astrojs/starlight/components';

The OSD (Object Storage Daemon) page provides a detailed overview of the storage daemons in your Ceph cluster.
Each OSD represents a logical disk that maps to an underlying physical device such as NVMe, SSD, or HDD.

## Overview
### Statistics Overview

At the top of the page, providing an overview of OSD status in the cluster.
At the top of the page, you will find a dashboard summarizing the state of OSD capacity and availability across the cluster:

#### Count

Shows the total number of OSDs detected by the cluster.

#### Usage

Displays the overall raw storage usage across all OSDs, including the used and total storage capacity.
<CardGrid>
<Card title="Count" icon="">

@gemini-code-assist gemini-code-assist Bot Dec 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The 'Count' card is missing an icon. To maintain visual consistency and improve readability, consider adding an icon. An icon like tabler:server-2 would be appropriate for representing the count of OSDs.

	<Card title="Count" icon="tabler:server-2">

The total number of OSDs detected by the cluster.
</Card>
<Card title="Usage" icon="">

@gemini-code-assist gemini-code-assist Bot Dec 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The 'Usage' card is missing an icon. Adding a visual cue would enhance the dashboard's usability. An icon like tabler:chart-pie-filled would effectively represent storage usage.

	<Card title="Usage" icon="tabler:chart-pie-filled">

The percentage of overall raw storage usage across all OSDs.
</Card>
</CardGrid>

## Introduction

Expand Down
13 changes: 8 additions & 5 deletions src/content/docs/service/storage/02-pool.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,19 @@ title: Pool
description: Manage Ceph storage pools.
---

import { Steps, Aside } from '@astrojs/starlight/components';
import { Steps, Aside, Card, CardGrid } from '@astrojs/starlight/components';

The Pool page allows you to manage Ceph storage pools, which are logical partitions for storing objects. Pools provide a layer of abstraction between clients and the underlying OSDs, allowing you to configure data durability, availability, and performance policies.

## Overview
### Statistics Overview

At the top of the page, providing an overview of the pool state in the cluster.
At the top of the page, you will find a dashboard summarizing the state of pool configuration within the cluster:

### Pool
Shows the total number of pools currently defined in the system.
<CardGrid>
<Card title="Pool" icon="tabler:stack">
The total number of storage pools currently defined in the system.
</Card>
</CardGrid>

## Introduction

Expand Down
20 changes: 11 additions & 9 deletions src/content/docs/service/storage/03-block-device.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,22 @@ title: Block Device
description: Manage Ceph RADOS Block Devices (RBD).
---

import { Steps, Aside } from '@astrojs/starlight/components';
import { Steps, Aside, Card, CardGrid } from '@astrojs/starlight/components';

The Block Device page allows you to manage Ceph RADOS Block Devices (RBD). RBDs are block-based storage devices that are striped across the cluster, providing high-performance and reliable storage for virtual machines, containers, and other applications.

## Overview
### Statistics Overview

At the top of the page, providing a quick overview of RBD usage in the cluster.
At the top of the page, you will find a dashboard summarizing the state of RBD images stored in the cluster:

### Images
Shows the total number of RADOS Block Device images currently stored across all pools.

### Usage
Displays the combined usage of all block device images.
Including the total used capacity and total provisioned quota, helping administrators assess storage consumption at a glance.
<CardGrid>
<Card title="Image" icon="tabler:database">
The total number of RADOS Block Device (RBD) images currently stored across all pools.
</Card>
<Card title="Usage" icon="tabler:chart-bar">
Displays the aggregated storage usage of all block device images, including total used capacity and total provisioned quota.
</Card>
</CardGrid>

## Introduction

Expand Down
22 changes: 15 additions & 7 deletions src/content/docs/service/storage/04-file-system.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: File System
description: Manage Ceph File Systems (CephFS) and NFS exports.
---

import { Steps, Aside } from '@astrojs/starlight/components';
import { Steps, Aside, Card, CardGrid } from '@astrojs/starlight/components';

The File System page allows you to manage Ceph File Systems (CephFS) and Network File System (NFS) exports. CephFS provides a POSIX-compliant file system on top of the Ceph cluster, while NFS exports allow you to share these file systems with standard NFS clients.

Expand All @@ -13,11 +13,15 @@ The page is divided into two main sections: **NFS** and **Group**.

The NFS section allows you to manage subvolumes and export them via NFS.

## Overview
### Statistics Overview

#### NFS
At the top of the page, you will find a dashboard summarizing the state of NFS exports configured in the system:

Shows the total number of NFS exports created from CephFS subvolumes.
<CardGrid>
<Card title="NFS" icon="">

@gemini-code-assist gemini-code-assist Bot Dec 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The 'NFS' card is missing an icon. For better visual consistency and quicker comprehension, please add a relevant icon. An icon like tabler:file-export would be suitable for NFS exports.

	<Card title="NFS" icon="tabler:file-export">

The total number of NFS exports created from CephFS subvolumes.
</Card>
</CardGrid>

### Introduction

Expand Down Expand Up @@ -111,11 +115,15 @@ The snapshot list displays the following information:

The Group section allows you to manage subvolume groups, which are used to organize subvolumes.

## Overview
### Statistics Overview

#### Group
At the top of the page, you will find a dashboard summarizing the state of subvolume groups configured in the file system:

Shows the total number of subvolume groups defined in the file system.
<CardGrid>
<Card title="Group" icon="">

@gemini-code-assist gemini-code-assist Bot Dec 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The 'Group' card is missing an icon. Adding an icon would improve the visual consistency of the statistics overview. An icon like tabler:users-group would be a good choice to represent subvolume groups.

	<Card title="Group" icon="tabler:users-group">

The total number of subvolume groups defined in the file system.
</Card>
</CardGrid>

### Introduction

Expand Down
14 changes: 8 additions & 6 deletions src/content/docs/service/storage/05-smb.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,19 @@ title: SMB
description: Manage Samba (SMB) shares.
---

import { Steps } from '@astrojs/starlight/components';
import { Steps, Card, CardGrid } from '@astrojs/starlight/components';

The SMB page allows you to manage Samba (SMB) shares, enabling file sharing across your network with Windows and other SMB-compatible clients. You can configure security modes, user access, and share properties.

## Overview
### Statistics Overview

At the top of the page, providing an overview of the SMB configuration.
At the top of the page, you will find a dashboard summarizing the state of SMB shares configured in the system:

### SMB Shares

Shows the total number of SMB shares created on the system.
<CardGrid>
<Card title="SMB Shares" icon="">

@gemini-code-assist gemini-code-assist Bot Dec 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The 'SMB Shares' card is missing an icon. To improve the visual appeal and consistency of the UI, consider adding an icon. tabler:share would be a fitting icon for SMB shares.

	<Card title="SMB Shares" icon="tabler:share">

The total number of SMB shares currently defined in the system.
</Card>
</CardGrid>

## Introduction

Expand Down
30 changes: 18 additions & 12 deletions src/content/docs/service/storage/06-object.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Object
description: Manage Ceph Object Gateway (RGW) buckets and users.
---

import { Steps, Aside } from '@astrojs/starlight/components';
import { Steps, Aside, Card, CardGrid } from '@astrojs/starlight/components';

The Object page allows you to manage the Ceph Object Gateway (RGW), which provides an S3-compatible object storage interface. You can manage buckets for storing objects and users for controlling access.

Expand All @@ -13,15 +13,18 @@ The page is divided into two main sections: **Bucket** and **User**.

The Bucket section allows you to manage S3 buckets.

## Overview
### Statistics Overview

At the top of the page, providing a quick overview of the RGW configuration.
At the top of the page, you will find a dashboard summarizing the state of S3 storage:

### Buckets
Shows the total number of S3 buckets created in the system.

### Usage
Shows the total storage consumption across all buckets, including object size and metadata.
<CardGrid>
<Card title="Bucket" icon="tabler:bucket">
The total number of S3 buckets currently defined in the system.
</Card>
<Card title="Usage" icon="tabler:chart-pie">
The combined storage consumption across all buckets, including object data and metadata overhead.
</Card>
</CardGrid>

### Introduction

Expand Down Expand Up @@ -85,12 +88,15 @@ Permanently removes a bucket and all its objects.

The User section allows you to manage RGW users and their access keys.

## Overview
### Statistics Overview

At the top of the page, providing a quick overview of the RGW configuration.
At the top of the page, you will find a dashboard summarizing the state of S3 user management:

### Users
Displays the total number of RGW users.
<CardGrid>
<Card title="User Shares" icon="tabler:users">

@gemini-code-assist gemini-code-assist Bot Dec 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The card title 'User Shares' is a bit misleading in this context. The description clarifies that it represents the total number of S3 users, not shares. Changing the title to 'Users' would be more accurate and align better with the previous documentation section title.

	<Card title="Users" icon="tabler:users">

The total number of S3 users registered in the system.
</Card>
</CardGrid>

### Introduction

Expand Down
Loading