{
search: ''
});
- const fetchData = async () => {
+ const fetchData = useCallback(async () => {
setDataSource((pre) => {
pre.loading = true;
return { ...pre };
@@ -70,7 +70,7 @@ const Resources: React.FC = () => {
});
console.log('error', error);
}
- };
+ }, [queryParams]);
const handlePageChange = (page: number, perPage: number | undefined) => {
console.log(page, perPage);
@@ -81,9 +81,12 @@ const Resources: React.FC = () => {
});
};
- const handleTableChange = (pagination: any, filters: any, sorter: any) => {
- setSortOrder(sorter.order);
- };
+ const handleTableChange = useCallback(
+ (pagination: any, filters: any, sorter: any) => {
+ setSortOrder(sorter.order);
+ },
+ []
+ );
const handleSearch = (e: any) => {
fetchData();
@@ -207,6 +210,7 @@ const Resources: React.FC = () => {
}
>
{record.quota}k
+ },
+ {
+ title: 'Token Utilization',
+ dataIndex: 'utilization',
+ key: 'utilization',
+ render: (text: any, record: any) => {record.utilization}%
+ },
+ {
+ title: 'Members',
+ dataIndex: 'members',
+ key: 'members'
+ }
+];
+
+const projectData = [
+ {
+ id: 1,
+ name: 'copilot-dev',
+ quota: 100,
+ utilization: 50,
+ members: 4
+ },
+ {
+ id: 2,
+ name: 'rag-wiki',
+ quota: 200,
+ utilization: 70,
+ members: 3
+ },
+ {
+ id: 3,
+ name: 'smart-auto-agent',
+ quota: 100,
+ utilization: 20,
+ members: 5
+ },
+ {
+ id: 4,
+ name: 'office-auto-docs',
+ quota: 100,
+ utilization: 25,
+ members: 1
+ },
+ {
+ id: 5,
+ name: 'smart-customer-service',
+ quota: 100,
+ utilization: 46,
+ members: 2
+ }
+];
+const ActiveTable = () => {
+ const intl = useIntl();
+ const data = useContext(DashboardContext).active_models || [];
+ const modelColumns = [
+ {
+ title: intl.formatMessage({ id: 'common.table.name' }),
+ dataIndex: 'name',
+ key: 'name'
+ },
+ // {
+ // title: intl.formatMessage({ id: 'dashboard.gpuutilization' }),
+ // dataIndex: 'gpu_utilization',
+ // key: 'gpu_utilization',
+ // render: (text: any, record: any) => (
+ //
+ // )
+ // },
+ {
+ title: intl.formatMessage({ id: 'dashboard.allocatevram' }),
+ dataIndex: 'resource_claim.memory',
+ key: 'gpu_memory',
+ render: (text: any, record: any) => {
+ return (
+
+ {convertFileSize(record.resource_claim?.gpu_memory || 0)} /{' '}
+ {convertFileSize(record.resource_claim?.memory || 0)}
+
+ );
+ }
+ },
+ {
+ title: intl.formatMessage({ id: 'models.form.replicas' }),
+ dataIndex: 'instance_count',
+ key: 'instance_count'
+ },
+ {
+ title: intl.formatMessage({ id: 'dashboard.tokens' }),
+ dataIndex: 'token_count',
+ key: 'token_count'
+ }
+ ];
+ return (
+
+
+
+ {intl.formatMessage({ id: 'dashboard.activeModels' })}
+
+ }
+ right={false}
+ />
+
+
+
+ );
+};
+
+export default ActiveTable;
diff --git a/src/pages/usage/components/dahboard-inner.tsx b/src/pages/usage/components/dahboard-inner.tsx
new file mode 100644
index 00000000..e2d5ca4e
--- /dev/null
+++ b/src/pages/usage/components/dahboard-inner.tsx
@@ -0,0 +1,63 @@
+import PageTools from '@/components/page-tools';
+import { SyncOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Input, Select, Space } from 'antd';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { queryDashboardData } from '../apis';
+import DashboardContext from '../config/dashboard-context';
+import { DashboardProps } from '../config/types';
+import ActiveTable from './active-table';
+import Overview from './over-view';
+import Usage from './usage';
+
+const Page: React.FC<{ setLoading: (loading: boolean) => void }> = ({
+ setLoading
+}) => {
+ const intl = useIntl();
+ const [data, setData] = useState({} as DashboardProps);
+
+ const getDashboardData = useCallback(async () => {
+ try {
+ setLoading(true);
+ const res = await queryDashboardData();
+ setData(res);
+ setLoading(false);
+ } catch (error) {
+ setLoading(false);
+ setData({} as DashboardProps);
+ }
+ }, []);
+ useEffect(() => {
+ getDashboardData();
+ }, []);
+ return (
+
+
+ {/* */}
+
+
+
+
+
+ }
+ >
+
+
+
+ );
+};
+
+export default memo(Page);
diff --git a/src/pages/usage/components/over-view.less b/src/pages/usage/components/over-view.less
new file mode 100644
index 00000000..e3b421ef
--- /dev/null
+++ b/src/pages/usage/components/over-view.less
@@ -0,0 +1,26 @@
+:local(.card-body) {
+ box-shadow: none !important;
+
+ :global(.ant-card-body) {
+ height: 110px;
+ display: flex;
+ justify-content: space-around;
+ border-radius: var(--ant-border-radius-lg);
+ border: 1px solid var(--color-border-1);
+ }
+}
+
+:local(.row) {
+ :global(.ant-col-5) {
+ flex: 0 0 20%;
+ max-width: 20%;
+ }
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 14px;
+}
diff --git a/src/pages/usage/components/over-view.tsx b/src/pages/usage/components/over-view.tsx
new file mode 100644
index 00000000..e3c6c8c9
--- /dev/null
+++ b/src/pages/usage/components/over-view.tsx
@@ -0,0 +1,77 @@
+import { useIntl } from '@umijs/max';
+import { Card, Col, Row, Space } from 'antd';
+import _ from 'lodash';
+import React, { useContext } from 'react';
+import { overviewConfigs } from '../config';
+import { DashboardContext } from '../config/dashboard-context';
+import '../styles/index.less';
+import styles from './over-view.less';
+
+const renderCardItem = (data: {
+ label: string;
+ value: React.ReactNode;
+ bgColor: string;
+}) => {
+ const { label, value, bgColor } = data;
+ return (
+
+
+
+ );
+};
+const Overview: React.FC = () => {
+ const intl = useIntl();
+ const data = useContext(DashboardContext).resource_counts || {};
+ console.log('overview===');
+ const renderValue = (
+ value:
+ | number
+ | {
+ healthy: number;
+ warning: number;
+ error: number;
+ }
+ ) => {
+ if (typeof value === 'number') {
+ return value;
+ }
+ return (
+
+ {value.healthy}
+ {value.warning}
+ {value.error}
+
+ );
+ };
+ return (
+
+
+ {overviewConfigs.map((config, index) => (
+
+ {renderCardItem({
+ label: intl.formatMessage({ id: config.label }),
+ value: renderValue(_.get(data, config.key, 0)),
+ bgColor: config.backgroundColor
+ })}
+
+ ))}
+
+
+ );
+};
+
+export default Overview;
diff --git a/src/pages/usage/components/resource-utilization.tsx b/src/pages/usage/components/resource-utilization.tsx
new file mode 100644
index 00000000..0e0af920
--- /dev/null
+++ b/src/pages/usage/components/resource-utilization.tsx
@@ -0,0 +1,168 @@
+import LineChart from '@/components/echarts/line-chart';
+import { useIntl } from '@umijs/max';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import { memo, useContext, useMemo } from 'react';
+import { DashboardContext } from '../config/dashboard-context';
+
+const chartColorMap = {
+ tickLineColor: 'rgba(217,217,217,0.5)',
+ axislabelColor: 'rgba(0, 0, 0, 0.4)'
+};
+
+const TypeKeyMap = {
+ cpu: {
+ label: 'CPU',
+ type: 'CPU',
+ intl: false,
+ color: 'rgba(250, 173, 20,.8)'
+ },
+ memory: {
+ label: 'dashboard.memory',
+ type: 'Memory',
+ intl: true,
+ color: 'rgba(114, 46, 209,.8)'
+ },
+ gpu: {
+ label: 'GPU',
+ type: 'GPU',
+ intl: false,
+ color: 'rgba(84, 204, 152,.8)'
+ },
+ gpu_memory: {
+ label: 'dashboard.vram',
+ type: 'VRAM',
+ intl: true,
+ color: 'rgba(255, 107, 179, 80%)'
+ }
+};
+
+const option = {
+ title: {
+ text: ''
+ },
+ legend: {
+ itemWidth: 8,
+ itemHeight: 8,
+ data: []
+ },
+ grid: {
+ left: 0,
+ right: 20,
+ bottom: 20,
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter(params: any) {
+ let result = `${params[0].axisValue}`;
+ params.forEach((item: any) => {
+ result += `
+
+
+ ${item.seriesName}:
+
+ ${item.data.value}
+ `;
+ });
+ return `${result}
`;
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: true,
+ axisTick: {
+ show: true,
+ lineStyle: {
+ color: chartColorMap.tickLineColor
+ }
+ },
+ axisLabel: {
+ color: chartColorMap.axislabelColor,
+ // fontFamily: 'unset',
+ fontSize: 12
+ },
+ axisLine: {
+ show: false
+ },
+ data: []
+ },
+ yAxis: {
+ max: 100,
+ min: 0,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ axisLabel: {
+ color: chartColorMap.axislabelColor,
+ // fontFamily: 'unset',
+ fontSize: 12
+ },
+ axisTick: {
+ show: false
+ },
+ type: 'value'
+ },
+ series: []
+};
+
+const UtilizationOvertime: React.FC = () => {
+ console.log('systemload=====================');
+ const intl = useIntl();
+ const data = useContext(DashboardContext)?.system_load?.history || {};
+
+ const typeList = ['gpu', 'cpu', 'memory', 'gpu_memory'];
+
+ const tooltipValueFormatter = (value: any) => {
+ return !value ? value : `${value}%`;
+ };
+ const generateData = useMemo(() => {
+ const legendData: string[] = [];
+ const xAxisData: string[] = [];
+ let seriesData: { value: number; time: string; type: string }[] = [];
+ seriesData = _.map(typeList, (item: string) => {
+ const itemConfig = _.get(TypeKeyMap, item, {});
+ const name = itemConfig.intl
+ ? intl.formatMessage({ id: itemConfig.label })
+ : itemConfig.label;
+ legendData.push(name);
+ const itemDataList = _.get(data, item, []);
+ return {
+ name: name,
+ color: itemConfig.color,
+ data: _.map(itemDataList, (item: any) => {
+ xAxisData.push(dayjs(item.timestamp * 1000).format('HH:mm:ss'));
+ return {
+ time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
+ value: _.round(_.get(item, 'value', 0), 1)
+ };
+ })
+ };
+ });
+ return {
+ seriesData,
+ legendData,
+ xAxisData: _.uniq(xAxisData)
+ };
+ }, [data]);
+
+ return (
+ <>
+
+
+ );
+};
+
+export default memo(UtilizationOvertime);
diff --git a/src/pages/usage/components/system-load.tsx b/src/pages/usage/components/system-load.tsx
new file mode 100644
index 00000000..cd9e55d7
--- /dev/null
+++ b/src/pages/usage/components/system-load.tsx
@@ -0,0 +1,119 @@
+import CardWrapper from '@/components/card-wrapper';
+import GaugeChart from '@/components/echarts/gauge';
+import PageTools from '@/components/page-tools';
+import breakpoints from '@/config/breakpoints';
+import useWindowResize from '@/hooks/use-window-resize';
+import { useIntl } from '@umijs/max';
+import { Col, Row } from 'antd';
+import dayjs from 'dayjs';
+import _ from 'lodash';
+import { useContext, useEffect, useState } from 'react';
+import { DashboardContext } from '../config/dashboard-context';
+import ResourceUtilization from './resource-utilization';
+
+const strokeColorFunc = (percent: number) => {
+ if (percent <= 50) {
+ return 'rgb(84, 204, 152, 80%)';
+ }
+ if (percent <= 80) {
+ return 'rgba(250, 173, 20, 80%)';
+ }
+ return ' rgba(255, 77, 79, 80%)';
+};
+
+const SystemLoad = () => {
+ const intl = useIntl();
+ const data = useContext(DashboardContext)?.system_load?.current || {};
+ const { size } = useWindowResize();
+ const [paddingRight, setPaddingRight] = useState('20px');
+ const [smallChartHeight, setSmallChartHeight] = useState(190);
+ const [largeChartHeight, setLargeChartHeight] = useState(400);
+ const thresholds = [0.5, 0.7, 1];
+ const height = 400;
+ const currentDate = dayjs().format('YYYY-MM-DD');
+
+ const handleSelectDate = (date: any) => {};
+
+ useEffect(() => {
+ if (size.width < breakpoints.xl) {
+ setPaddingRight('0');
+ } else {
+ setPaddingRight('20px');
+ }
+ }, [size.width]);
+
+ return (
+
+
+
{intl.formatMessage({ id: 'dashboard.systemload' })}
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default React.memo(RequestTokenInner);
diff --git a/src/pages/usage/components/usage-inner/top-user.tsx b/src/pages/usage/components/usage-inner/top-user.tsx
new file mode 100644
index 00000000..c82d79f9
--- /dev/null
+++ b/src/pages/usage/components/usage-inner/top-user.tsx
@@ -0,0 +1,27 @@
+import CardWrapper from '@/components/card-wrapper';
+import HBar from '@/components/echarts/h-bar';
+import { useIntl } from '@umijs/max';
+import React from 'react';
+
+interface TopUserProps {
+ userData: { name: string; value: number }[];
+ topUserList: string[];
+}
+const TopUser: React.FC = (props) => {
+ console.log('TopUser=====================');
+ const { userData, topUserList } = props;
+ const intl = useIntl();
+
+ return (
+
+
+
+ );
+};
+
+export default React.memo(TopUser);
diff --git a/src/pages/usage/components/usage.tsx b/src/pages/usage/components/usage.tsx
new file mode 100644
index 00000000..a5e677a5
--- /dev/null
+++ b/src/pages/usage/components/usage.tsx
@@ -0,0 +1,23 @@
+import breakpoints from '@/config/breakpoints';
+import useWindowResize from '@/hooks/use-window-resize';
+import { useEffect, useState } from 'react';
+import UserInner from './usage-inner';
+
+const Usage = () => {
+ const {
+ size: { width }
+ } = useWindowResize();
+ const [paddingRight, setPaddingRight] = useState('20px');
+
+ useEffect(() => {
+ if (width < breakpoints.xl) {
+ setPaddingRight('0');
+ } else {
+ setPaddingRight('20px');
+ }
+ }, [width]);
+
+ return ;
+};
+
+export default Usage;
diff --git a/src/pages/usage/config/dashboard-context.ts b/src/pages/usage/config/dashboard-context.ts
new file mode 100644
index 00000000..fffb7358
--- /dev/null
+++ b/src/pages/usage/config/dashboard-context.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { DashboardProps } from './types';
+
+export const DashboardContext = createContext<
+ DashboardProps & { fetchData: () => Promise }
+>({} as DashboardProps & { fetchData: () => Promise });
+
+export default DashboardContext;
diff --git a/src/pages/usage/config/index.ts b/src/pages/usage/config/index.ts
new file mode 100644
index 00000000..fe25e99c
--- /dev/null
+++ b/src/pages/usage/config/index.ts
@@ -0,0 +1,23 @@
+export const overviewConfigs = [
+ {
+ key: 'worker_count',
+ label: 'dashboard.workers',
+ backgroundColor: 'var(--color-white-1)'
+ },
+ {
+ key: 'gpu_count',
+ label: 'dashboard.totalgpus',
+ backgroundColor: 'var(--color-white-1)'
+ },
+
+ {
+ key: 'model_count',
+ label: 'dashboard.models',
+ backgroundColor: 'var(--color-white-1)'
+ },
+ {
+ key: 'model_instance_count',
+ label: 'models.form.replicas',
+ backgroundColor: 'var(--color-white-1)'
+ }
+];
diff --git a/src/pages/usage/config/types.ts b/src/pages/usage/config/types.ts
new file mode 100644
index 00000000..fc83bc84
--- /dev/null
+++ b/src/pages/usage/config/types.ts
@@ -0,0 +1,46 @@
+export interface DashboardProps {
+ resource_counts: {
+ worker_count: number;
+ gpu_count: number;
+ model_count: number;
+ model_instance_count: number;
+ };
+ system_load: {
+ current: {
+ cpu: number;
+ memory: number;
+ gpu: number;
+ gpu_memory: number;
+ };
+ history: {
+ cpu: {
+ timestamp: number;
+ value: number;
+ }[];
+ memory: {
+ timestamp: number;
+ value: number;
+ }[];
+ gpu: {
+ timestamp: number;
+ value: number;
+ }[];
+ gpu_memory: {
+ timestamp: number;
+ value: number;
+ }[];
+ };
+ };
+ model_usage: {
+ api_request_history: any[];
+ completion_token_history: any[];
+ prompt_token_history: any[];
+ top_users: {
+ user_id: number;
+ username: string;
+ prompt_token_count: number;
+ completion_token_count: number;
+ }[];
+ };
+ active_models: any[];
+}
diff --git a/src/pages/usage/index.tsx b/src/pages/usage/index.tsx
new file mode 100644
index 00000000..99d9719c
--- /dev/null
+++ b/src/pages/usage/index.tsx
@@ -0,0 +1,20 @@
+import { PageContainer } from '@ant-design/pro-components';
+import { Spin } from 'antd';
+import { memo, useState } from 'react';
+import DashboardInner from './components/dahboard-inner';
+
+const Dashboard: React.FC = () => {
+ const [loading, setLoading] = useState(false);
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
+
+export default memo(Dashboard);
diff --git a/src/pages/usage/styles/index.less b/src/pages/usage/styles/index.less
new file mode 100644
index 00000000..3ac537c8
--- /dev/null
+++ b/src/pages/usage/styles/index.less
@@ -0,0 +1,17 @@
+.value-box {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+
+ .value-healthy {
+ color: var(--ant-green-6);
+ }
+
+ .value-warning {
+ color: var(--ant-gold-6);
+ }
+
+ .value-error {
+ color: var(--ant-red-6);
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 03da2f34..299e70a3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,4 +21,3 @@
},
"include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"]
}
-