diff --git a/src/pages/usage/apis/index.ts b/src/pages/usage/apis/index.ts deleted file mode 100644 index bb2d0661..00000000 --- a/src/pages/usage/apis/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { request } from '@umijs/max'; - -export const DASHBOARD_API = '/dashboard'; - -export async function queryDashboardData() { - return request(DASHBOARD_API); -} diff --git a/src/pages/usage/components/active-table.tsx b/src/pages/usage/components/active-table.tsx deleted file mode 100644 index 0569cdb1..00000000 --- a/src/pages/usage/components/active-table.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import PageTools from '@/components/page-tools'; -import { convertFileSize } from '@/utils'; -import { useIntl } from '@umijs/max'; -import { Col, Row, Table } from 'antd'; -import { useContext } from 'react'; -import { DashboardContext } from '../config/dashboard-context'; - -const projectColumns = [ - { - title: 'Name', - dataIndex: 'name', - key: 'name' - }, - { - title: 'Token Quota', - dataIndex: 'quota', - key: 'quota', - render: (text: any, record: any) => {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: 'vram', - render: (text: any, record: any) => { - return ( - - {convertFileSize(record.resource_claim?.vram || 0)} /{' '} - {convertFileSize(record.resource_claim?.ram || 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 deleted file mode 100644 index af0d48e3..00000000 --- a/src/pages/usage/components/dahboard-inner.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import PageTools from '@/components/page-tools'; -import BaseSelect from '@/components/seal-form/base/select'; -import { SyncOutlined } from '@ant-design/icons'; -import { useIntl } from '@umijs/max'; -import { Button, Input, 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 deleted file mode 100644 index f7913aeb..00000000 --- a/src/pages/usage/components/over-view.less +++ /dev/null @@ -1,26 +0,0 @@ -: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(--ant-color-border); - } -} - -: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 deleted file mode 100644 index 7c9bbb9b..00000000 --- a/src/pages/usage/components/over-view.tsx +++ /dev/null @@ -1,77 +0,0 @@ -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 ( - -
-
{label}
-
{value}
-
- - ); -}; -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 deleted file mode 100644 index e250c979..00000000 --- a/src/pages/usage/components/resource-utilization.tsx +++ /dev/null @@ -1,168 +0,0 @@ -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)' - }, - ram: { - 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)' - }, - vram: { - 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', 'ram', 'vram']; - - 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 deleted file mode 100644 index 0c7e1e20..00000000 --- a/src/pages/usage/components/system-load.tsx +++ /dev/null @@ -1,119 +0,0 @@ -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 SystemLoad; diff --git a/src/pages/usage/components/usage-inner/index.tsx b/src/pages/usage/components/usage-inner/index.tsx deleted file mode 100644 index 9ebc3747..00000000 --- a/src/pages/usage/components/usage-inner/index.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import PageTools from '@/components/page-tools'; - -import { useIntl } from '@umijs/max'; -import dayjs from 'dayjs'; -import _ from 'lodash'; -import { memo, useCallback, useContext } from 'react'; -import { DashboardContext } from '../../config/dashboard-context'; -import RequestTokenInner from './request-token-inner'; - -const baseColorMap = { - baseL2: 'rgba(13,171,219,0.8)', - baseL1: 'rgba(0,34,255,0.8)', - base: 'rgba(0,85,255,0.8)', - baseR1: 'rgba(0,255,233,0.8)', - baseR2: 'rgba(48,0,255,0.8)', - baseR3: 'rgba(85,167,255,0.8)' -}; - -const getCurrentMonthDays = () => { - const now = dayjs(); - const daysInMonth = now.daysInMonth(); - const year = dayjs().year(); - const month = dayjs().month() + 1; - - const dates = []; - for (let day = 1; day <= daysInMonth; day++) { - dates.push(dayjs(`${year}-${month}-${day}`).format('YYYY-MM-DD')); - } - return dates; -}; - -const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => { - const intl = useIntl(); - const currentDate = dayjs(); - const currentMonthDays = getCurrentMonthDays(); - let requestData: { - name: string; - color: string; - areaStyle: any; - data: { time: string; value: number }[]; - }[] = []; - let tokenData: { time: string; value: number }[] = []; - let userData: { name: string; value: number }[] = []; - const xAxisData: string[] = currentMonthDays; - let topUserList: string[] = []; - - const { model_usage } = useContext(DashboardContext); - const data = model_usage || {}; - - const handleSelectDate = (date: any) => { - // fetchData?.(); - }; - - const generateData = useCallback(() => { - const requestList: { - name: string; - color: string; - areaStyle: any; - data: { time: string; value: number }[]; - } = { - name: 'API requests', - areaStyle: {}, - color: baseColorMap.base, - data: [] - }; - - const completionData: any = { - name: 'Completion tokens', - color: baseColorMap.base, - data: [] - }; - const prompData: any = { - name: 'Prompt tokens', - color: baseColorMap.baseR3, - data: [] - }; - - const topUserPrompt: any = { - name: 'Prompt tokens', - color: baseColorMap.baseR3, - data: [] - }; - const topUserCompletion: any = { - name: 'Completion tokens', - color: baseColorMap.base, - data: [] - }; - - _.each(xAxisData, (date: string) => { - // tokens data - const item = _.find(data.completion_token_history, (item: any) => { - return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date; - }); - if (!item) { - completionData.data.push({ - titme: date, - value: 0 - }); - } else { - completionData.data.push({ - value: item.value, - time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD') - }); - } - - const promptItem = _.find(data.prompt_token_history, (item: any) => { - return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date; - }); - if (!promptItem) { - prompData.data.push({ - value: 0, - time: date - }); - } else { - prompData.data.push({ - value: promptItem.value, - time: dayjs(promptItem.timestamp * 1000).format('YYYY-MM-DD') - }); - } - - // ============== api request data ================= - const requestItem = _.find(data.api_request_history, (item: any) => { - return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date; - }); - - if (!requestItem) { - requestList.data.push({ - time: date, - value: 0 - }); - } else { - requestList.data.push({ - time: dayjs(requestItem.timestamp * 1000).format('YYYY-MM-DD'), - value: requestItem.value - }); - } - }); - - // ========== top users ============ - if (!data.top_users?.length) { - userData = []; - topUserList = []; - } else { - const users: string[] = []; - _.each(data.top_users, (item: any) => { - users.push(item.username); - topUserPrompt.data.push({ - name: item.username, - value: item.prompt_token_count - }); - topUserCompletion.data.push({ - name: item.username, - value: item.completion_token_count - }); - }); - topUserList = _.uniq(users); - userData = [topUserCompletion, topUserPrompt]; - } - - requestData = [requestList]; - tokenData = [completionData, prompData]; - }, [data, xAxisData]); - - generateData(); - - return ( - <> - - - - ); -}; - -export default memo(UsageInner); diff --git a/src/pages/usage/components/usage-inner/request-token-inner.tsx b/src/pages/usage/components/usage-inner/request-token-inner.tsx deleted file mode 100644 index 3e4dc141..00000000 --- a/src/pages/usage/components/usage-inner/request-token-inner.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import CardWrapper from '@/components/card-wrapper'; -import BarChart from '@/components/echarts/bar-chart'; -import LineChart from '@/components/echarts/line-chart'; -import { useIntl } from '@umijs/max'; -import { Col, Row } from 'antd'; -import dayjs from 'dayjs'; -import React from 'react'; - -interface RequestTokenInnerProps { - requestData: { - name: string; - color: string; - areaStyle: any; - data: { time: string; value: number }[]; - }[]; - tokenData: { time: string; value: number }[]; - xAxisData: string[]; -} -const RequestTokenInner: React.FC< - RequestTokenInnerProps & { paddingRight: string } -> = (props) => { - console.log('request token inner====================='); - const { requestData, tokenData, xAxisData, paddingRight } = props; - const intl = useIntl(); - const labelFormatter = (v: any) => { - return dayjs(v).format('MM-DD'); - }; - return ( - - - - - - - - - - - - - ); -}; - -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 deleted file mode 100644 index c82d79f9..00000000 --- a/src/pages/usage/components/usage-inner/top-user.tsx +++ /dev/null @@ -1,27 +0,0 @@ -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 deleted file mode 100644 index a5e677a5..00000000 --- a/src/pages/usage/components/usage.tsx +++ /dev/null @@ -1,23 +0,0 @@ -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 deleted file mode 100644 index fffb7358..00000000 --- a/src/pages/usage/config/dashboard-context.ts +++ /dev/null @@ -1,8 +0,0 @@ -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 deleted file mode 100644 index fe25e99c..00000000 --- a/src/pages/usage/config/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -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 deleted file mode 100644 index bfe5030e..00000000 --- a/src/pages/usage/config/types.ts +++ /dev/null @@ -1,46 +0,0 @@ -export interface DashboardProps { - resource_counts: { - worker_count: number; - gpu_count: number; - model_count: number; - model_instance_count: number; - }; - system_load: { - current: { - cpu: number; - ram: number; - gpu: number; - vram: number; - }; - history: { - cpu: { - timestamp: number; - value: number; - }[]; - ram: { - timestamp: number; - value: number; - }[]; - gpu: { - timestamp: number; - value: number; - }[]; - vram: { - 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 deleted file mode 100644 index d00cdf82..00000000 --- a/src/pages/usage/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -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 deleted file mode 100644 index 3ac537c8..00000000 --- a/src/pages/usage/styles/index.less +++ /dev/null @@ -1,17 +0,0 @@ -.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); - } -}