+
diff --git a/src/global.less b/src/global.less
index 6fb64b57..bf82dbdf 100644
--- a/src/global.less
+++ b/src/global.less
@@ -207,8 +207,14 @@ body {
.ant-pro-layout {
.ant-pro-sider {
.ant-menu {
+ .ant-menu-item:not(.ant-menu-item-selected) {
+ color: var(--ant-color-text);
+ }
.ant-menu-item:hover {
- color: inherit;
+ color: var(--ant-color-text);
+ }
+ .ant-menu-item.ant-menu-item-selected:hover {
+ color: var(--ant-color-primary);
}
}
}
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 8c73c1e7..1dc21170 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -91,6 +91,7 @@ export default (props: any) => {
};
const formatMessage = undefined;
+
const runtimeConfig = pluginManager.applyPlugins({
key: 'layout',
type: 'modify',
@@ -101,7 +102,7 @@ export default (props: any) => {
}
});
console.log(
- 'clientRoute===========',
+ 'clientRoute==========2=',
clientRoutes,
runtimeConfig,
initialInfo
diff --git a/src/layouts/rightRender.tsx b/src/layouts/rightRender.tsx
index ad05aad8..ba84ffa7 100644
--- a/src/layouts/rightRender.tsx
+++ b/src/layouts/rightRender.tsx
@@ -71,6 +71,8 @@ export function getRightRenderContent(opts: {
]
};
// antd@5 和 4.24 之后推荐使用 menu，性能更好
+
+ console.log('version+++++++++=', opts.runtimeConfig, version);
let dropdownProps;
if (version.startsWith('5.') || version.startsWith('4.24.')) {
dropdownProps = { menu: langMenu };
diff --git a/src/pages/dashboard/components/gpu-utilization.tsx b/src/pages/dashboard/components/gpu-utilization.tsx
new file mode 100644
index 00000000..ca5fb14f
--- /dev/null
+++ b/src/pages/dashboard/components/gpu-utilization.tsx
@@ -0,0 +1,42 @@
+import { Pie } from '@ant-design/plots';
+import numeral from 'numeral';
+
+const TooltipContent = (props: any) => {
+ return (
+
+
{props.x}
+
{props.y}
+
+ );
+};
+const GPUUtilization: React.FC = () => {
+ const data = [
+ { label: 'Idle GPUs', value: 20 },
+ { label: 'Allocated GPUs', value: 120 }
+ ];
+ return (
+
{
+ return `${item.label}: ${numeral(item.value).format('0,0')}`;
+ }
+ }}
+ />
+ );
+};
+
+export default GPUUtilization;
diff --git a/src/pages/dashboard/components/model-bills.tsx b/src/pages/dashboard/components/model-bills.tsx
new file mode 100644
index 00000000..0699c6e4
--- /dev/null
+++ b/src/pages/dashboard/components/model-bills.tsx
@@ -0,0 +1,191 @@
+import PageTools from '@/components/page-tools';
+import { Column } from '@ant-design/plots';
+import { DatePicker, Select, Space } from 'antd';
+import { useState } from 'react';
+
+const { RangePicker } = DatePicker;
+
+const ModelBills: React.FC = () => {
+ const [selectName, setSelectName] = useState('model1');
+ const handleNameChange = (value: string) => {
+ setSelectName(value);
+ };
+ const models = [
+ {
+ value: 'model1',
+ label: 'model1'
+ },
+ {
+ value: 'model2',
+ label: 'model2'
+ },
+ {
+ value: 'model3',
+ label: 'model3'
+ }
+ ];
+ const config = {
+ data: [
+ {
+ time: '2021-01',
+ name: 'model1',
+ value: 3.9
+ },
+ {
+ time: '2021-01',
+ name: 'model2',
+ value: 4.3
+ },
+ {
+ time: '2021-01',
+ name: 'model3',
+ value: 3.8
+ },
+ {
+ time: '2021-02',
+ name: 'model1',
+ value: 4.1
+ },
+ {
+ time: '2021-02',
+ name: 'model2',
+ value: 5.7
+ },
+ {
+ time: '2021-02',
+ name: 'model3',
+ value: 3.9
+ },
+ {
+ time: '2021-03',
+ name: 'model1',
+ value: 5.6
+ },
+ {
+ time: '2021-03',
+ name: 'model2',
+ value: 7.3
+ },
+ {
+ time: '2021-03',
+ name: 'model3',
+ value: 4.9
+ },
+ {
+ time: '2021-04',
+ name: 'model1',
+ value: 7.2
+ },
+ {
+ time: '2021-04',
+ name: 'model2',
+ value: 9.6
+ },
+ {
+ time: '2021-04',
+ name: 'model3',
+ value: 6.3
+ },
+ {
+ time: '2021-05',
+ name: 'model1',
+ value: 9.3
+ },
+ {
+ time: '2021-05',
+ name: 'model2',
+ value: 11.9
+ },
+ {
+ time: '2021-05',
+ name: 'model3',
+ value: 8.6
+ },
+ {
+ time: '2021-06',
+ name: 'model1',
+ value: 10.3
+ },
+ {
+ time: '2021-06',
+ name: 'model2',
+ value: 13.9
+ },
+ {
+ time: '2021-06',
+ name: 'model3',
+ value: 9.6
+ }
+ ],
+ xField: 'time',
+ yField: 'value',
+ colorField: 'name',
+ group: true,
+ legend: {
+ color: {
+ position: 'top',
+ layout: {
+ justifyContent: 'center'
+ }
+ }
+ },
+ axis: {
+ x: {
+ xAxis: true
+ }
+ },
+
+ split: {
+ type: 'line',
+ line: {
+ color: 'red',
+ style: {
+ color: 'red',
+ lineDash: [4, 5]
+ }
+ }
+ },
+
+ style: {
+ radiusTopLeft: 10,
+ radiusTopRight: 10,
+ width: 25
+ }
+ };
+
+ const handleSelectDate = (value: any) => {
+ console.log(value);
+ };
+ return (
+ <>
+ Bills by model}
+ right={
+
+
+ {
+ console.log('Selected Time: ', value);
+ console.log('Formatted Selected Time: ', dateString);
+ }}
+ onOk={handleSelectDate}
+ />
+
+ }
+ >
+
+
+ );
+};
+
+export default ModelBills;
diff --git a/src/pages/dashboard/components/model-nodes.tsx b/src/pages/dashboard/components/model-nodes.tsx
new file mode 100644
index 00000000..176085f3
--- /dev/null
+++ b/src/pages/dashboard/components/model-nodes.tsx
@@ -0,0 +1,268 @@
+import PageTools from '@/components/page-tools';
+import StatusTag from '@/components/status-tag';
+import useTableRowSelection from '@/hooks/use-table-row-selection';
+import { NodeItem } from '@/pages/nodes/config/types';
+import { Progress, Select, Space, Table } from 'antd';
+import _ from 'lodash';
+import { memo, useMemo, useState } from 'react';
+const { Column } = Table;
+
+const models = [
+ { value: 'llama3:latest', label: 'llama3:latest' },
+ { value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
+ { value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
+];
+const dataSource: NodeItem[] = [
+ {
+ id: 1,
+ name: '192.168.1.2',
+ address: '192.168.1.2',
+ hostname: 'node-1',
+ labels: {},
+ resources: {
+ capacity: {
+ cpu: 4,
+ gpu: 2,
+ memory: '64 GiB',
+ gram: '24 Gib'
+ },
+ allocable: {
+ cpu: 2.5,
+ gpu: 1.6,
+ memory: '64',
+ gram: '24 Gib'
+ }
+ },
+ state: 'ALIVE'
+ },
+ {
+ id: 1,
+ name: '192.168.1.2',
+ address: '192.168.1.5',
+ hostname: 'node-2',
+ labels: {},
+ resources: {
+ capacity: {
+ cpu: 4,
+ gpu: 2,
+ memory: '64 GiB',
+ gram: '24 Gib'
+ },
+ allocable: {
+ cpu: 2,
+ gpu: 1.5,
+ memory: '32 GiB',
+ gram: '12 Gib'
+ }
+ },
+ state: 'ALIVE'
+ },
+ {
+ id: 3,
+ name: '192.168.1.3',
+ address: '192.168.1.3',
+ hostname: 'node-3',
+ labels: {},
+ resources: {
+ capacity: {
+ cpu: 4,
+ gpu: 2,
+ memory: '64 GiB',
+ gram: '24 Gib'
+ },
+ allocable: {
+ cpu: 1,
+ gpu: 0.5,
+ memory: '28 GiB',
+ gram: '6 Gib'
+ }
+ },
+ state: 'ALIVE'
+ }
+];
+
+const Models: React.FC = () => {
+ const rowSelection = useTableRowSelection();
+
+ const [selectName, setSelectName] = useState('llama3:latest');
+ const [loading, setLoading] = useState(false);
+ const [queryParams, setQueryParams] = useState({
+ current: 1,
+ pageSize: 10,
+ name: ''
+ });
+ const handleShowSizeChange = (current: number, size: number) => {
+ console.log(current, size);
+ };
+
+ const handlePageChange = (page: number, pageSize: number | undefined) => {
+ console.log(page, pageSize);
+ };
+
+ const handleTableChange = (pagination: any, filters: any, sorter: any) => {
+ // console.log('handleTableChange=======', pagination, filters, sorter);
+ };
+
+ const fetchData = async () => {
+ console.log('fetchData');
+ };
+ const handleSearch = (e: any) => {
+ fetchData();
+ };
+
+ const handleNameChange = (value: string) => {
+ setSelectName(value);
+ setQueryParams({
+ ...queryParams,
+ name: value
+ });
+ };
+
+ const RenderProgress = memo(
+ (props: { record: NodeItem; dataIndex: string }) => {
+ const { record, dataIndex } = props;
+ const value1 = useMemo(() => {
+ let value = _.get(record, ['resources', 'allocable', dataIndex]);
+ if (['gram', 'memory'].includes(dataIndex)) {
+ value = _.toNumber(value.replace(/GiB|Gib/, ''));
+ }
+ return value;
+ }, [record, dataIndex]);
+
+ const value2 = useMemo(() => {
+ let value = _.get(record, ['resources', 'capacity', dataIndex]);
+ if (['gram', 'memory'].includes(dataIndex)) {
+ value = _.toNumber(value.replace(/GiB|Gib/, ''));
+ }
+ return value;
+ }, [record, dataIndex]);
+
+ if (!value1 || !value2) {
+ return ;
+ }
+ const percent = _.round(value1 / value2, 2) * 100;
+ const strokeColor = useMemo(() => {
+ if (percent <= 50) {
+ return 'var(--ant-color-primary)';
+ }
+ if (percent <= 80) {
+ return 'var(--ant-color-warning)';
+ }
+ return 'var(--ant-color-error)';
+ }, [percent]);
+ return (
+