fasdeploy frontend

frontend/packages/core/package.json

@@ -39,6 +39,18 @@
         "dist"
     ],
     "dependencies": {
+        "@antv/layout": "^0.3.7",
+        "@antv/x6": "^2.0.2",
+        "@antv/x6-plugin-clipboard": "^2.0.1",
+        "@antv/x6-plugin-dnd": "^2.0.2",
+        "@antv/x6-plugin-export": "^2.1.5",
+        "@antv/x6-plugin-history": "^2.1.1",
+        "@antv/x6-plugin-keyboard": "^2.1.2",
+        "@antv/x6-plugin-selection": "^2.1.3",
+        "@antv/x6-plugin-snapline": "^2.1.2",
+        "@antv/x6-plugin-stencil": "^2.0.1",
+        "@antv/x6-plugin-transform": "^2.0.1",
+        "@antv/x6-react-shape": "^2.0.0",
         "@material-ui/core": "^4.12.4",
         "@snowpack/plugin-sass": "^1.4.0",
         "@tippyjs/react": "4.2.5",
@@ -60,7 +72,6 @@
         "i18next-browser-languagedetector": "6.1.2",
         "i18next-fetch-backend": "3.0.0",
         "jszip": "3.7.1",
-        "lodash": "4.17.21",
         "mime-types": "2.1.32",
         "moment": "2.29.1",
         "nprogress": "0.2.0",
@@ -127,6 +138,7 @@
         "dotenv": "10.0.0",
         "enhanced-resolve": "5.8.2",
         "html-minifier": "4.0.0",
+        "lodash": "^4.17.21",
         "snowpack": "3.8.8",
         "snowpack-plugin-copy": "1.0.1",
         "typescript": "4.4.2"

frontend/packages/core/public/locales/en/Fastdeploy.json

@@ -0,0 +1,68 @@
+{
+    "Load-model": "Please select a model repository",
+    "Current-model": "Current model repository",
+    "ensemble-pipeline": "ensemble pipeline",
+    "variable": "variable",
+    "instance": "instance",
+    "Pre-trained": "Pre-trained model name",
+    "The-config": "The config file chosen as startup config will overwrite config.pbtxt, and a backup config.pbtxt  will be created first, please check to confirm",
+    "Confirm": "Confirm to shutdown server",
+    "Confirm-delete-config": "Confirm to delete config file",
+    "Confirm-delete-resource": "Confirm to delete resource file",
+    "load-model-repository": "load model repository",
+    "ensemble-configuration": "ensemble configuration",
+    "launch-server": "launch server",
+    "cancel": "cancel",
+    "launch": "launch",
+    "set-as-launch-config": "set as start up config",
+    "update": "update",
+    "log": "log",
+    "metric": "metric",
+    "ok": "ok",
+    "model-repository": "model repository",
+    "open-client": "open client",
+    "shutdown": "shutdown",
+    "updates": "update",
+    "Load-model-repository": "Load model repository",
+    "Download-pre-trained-model": "Download pre-trained model",
+    "Model-configuration": "Model configuration",
+    "Ensemble-configuration": "Ensemble configuration",
+    "Launch-parameters-configuration": "Launch parameters configuration",
+    "Delete-config-file": "Delete config file",
+    "Delete-resource-file": "Delete resource file",
+    "Rename-resource-file": "Rename resource file",
+    "Shutdown-server": "Shutdown server",
+    "Update-configuration-successfully": "update configuration successfully",
+    "Launch-server-successfully": "Launch server successfully",
+    "Update-successfully": "Update log and metric for successfully",
+    "Shutdown-server-successfully": "Shutdown server successfully",
+    "Download-successfully": "Download pre-trained model successfully",
+    "Set-successfully": "Set as startup config file successfully",
+    "Rename-successfully": "Rename resource file successfully",
+    "Delete-config-successfully": "Delete config file successfully",
+    "Delete-resource-successfully": "Delete resource file successfully",
+    "Backup-config": "Backup config file is not permitted to modify, please re-select",
+    "Model-name": "Model name",
+    "Execution-metric": "Execution metric",
+    "inference-request-success": "inference request success",
+    "inference-request-failure": "inference request failure",
+    "inference-count": "inference count",
+    "inference-exec-count": "inference exec count",
+    "inference-request-duration": "inference request duration",
+    "inference-queue-duration": "inference queue duration",
+    "inference-comput-input-duration": "inference comput input duration",
+    "inference-compute-infer-duration": "inference compute infer duration",
+    "inference-compute-output-duration": "inference compute output duration",
+    "Delay-metric": "Delay metric",
+    "Device-name": "Device name",
+    "Performance-metric": "Performance metric",
+    "Memory": "Memory",
+    "utilization": "utilization",
+    "power-usage": "power usage",
+    "power-limit": "power limit",
+    "energy-consumption": "energy consumption",
+    "total": "total",
+    "used": "used",
+    "Model-metrics": "Model metrics",
+    "GPU-metrics": "GPU metrics"
+}

frontend/packages/core/public/locales/zh/Fastdeploy.json

@@ -0,0 +1,68 @@
+{
+    "Load-model": "请载入模型库",
+    "Current-model": "当前模型库",
+    "ensemble-pipeline": "ensemble模型结构",
+    "variable": "变量",
+    "instance": "实例",
+    "Pre-trained": "预训练模型名",
+    "The-config": "设为启动配置文件即会将当前文件作为config.pbtxt,并覆盖之前的config.pbtxt的内容,被覆盖前的config.pbtxt会自动进行备份,是否继续",
+    "Confirm": "请确认是否关闭所启动服务",
+    "Confirm-delete-config": "请确认是否删除配置文件",
+    "Confirm-delete-resource": "请确认是否删除资源文件",
+    "load-model-repository": "载入模型库",
+    "ensemble-configuration": "ensemble配置",
+    "launch-server": "启动服务",
+    "cancel": "取消",
+    "launch": "启动",
+    "set-as-launch-config": "设为启动配置文件",
+    "update": "更新",
+    "log": "日志",
+    "metric": "性能",
+    "ok": "确定",
+    "model-repository": "模型库配置",
+    "open-client": "打开客户端",
+    "shutdown": "关闭服务",
+    "updates": "更新数据",
+    "Load-model-repository": "载入模型库",
+    "Download-pre-trained-model": "预训练模型下载",
+    "Model-configuration": "配置模型",
+    "Ensemble-configuration": "配置ensemble",
+    "Launch-parameters-configuration": "配置启动参数",
+    "Delete-config-file": "删除配置文件",
+    "Delete-resource-file": "删除资源文件",
+    "Rename-resource-file": "重命名文件",
+    "Shutdown-server": "关闭服务",
+    "Update-configuration-successfully": "更新配置成功",
+    "Launch-server-successfully": "启动服务成功",
+    "Update-successfully": "更新日志和性能数据成功",
+    "Shutdown-server-successfully": "关闭服务成功",
+    "Download-successfully": "下载预训练模型成功",
+    "Set-successfully": "设为启动配置成功",
+    "Rename-successfully": "重命名资源文件成功",
+    "Delete-config-successfully": "删除配置文件成功",
+    "Delete-resource-successfully": "删除资源文件成功",
+    "Backup-config": "该文件为备份配置文件不允许修改，请重新选择",
+    "Model-name": "模型名称",
+    "Execution-metric": "执行统计",
+    "inference-request-success": "请求处理成功数",
+    "inference-request-failure": "请求处理失败数",
+    "inference-count": "推理batch数",
+    "inference-exec-count": "推理样本数",
+    "inference-request-duration": "请求处理时间",
+    "inference-queue-duration": "任务队列等待时间",
+    "inference-comput-input-duration": "输入处理时间",
+    "inference-compute-infer-duration": "模型推理时间",
+    "inference-compute-output-duration": "输出处理时间",
+    "Delay-metric": "延迟统计",
+    "Device-name": "GPU",
+    "Performance-metric": "性能指标",
+    "Memory": "显存",
+    "utilization": "利用率",
+    "power-usage": "功率",
+    "power-limit": "功率限制",
+    "energy-consumption": "耗电量",
+    "total": "总量",
+    "used": "已使用",
+    "Model-metrics": "模型服务监控",
+    "GPU-metrics": "GPU监控"
+}

frontend/packages/core/snowpack.config.js

@@ -37,6 +37,8 @@ function isWorkspace() {
 const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons'));
 const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron'));
 const netronPath2 = path.dirname(resolve.sync(cwd, '@visualdl/netron2'));
+// const netronPath3 = path.dirname(resolve.sync(cwd, '@visualdl/netron3'));
+
 const TracePath = path.dirname(resolve.sync(cwd, './public/static'));
 const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm'));
 const dest = path.resolve(cwd, './dist/__snowpack__/link/packages');
@@ -102,6 +104,10 @@ export default {
                         source: [path.join(netronPath2, '**/*')],
                         destination: path.join(dest, 'netron2/dist')
                     },
+                    // {
+                    //     source: [path.join(netronPath3, '**/*')],
+                    //     destination: path.join(dest, 'netron3/dist')
+                    // },
                     {
                         source: [path.join(TracePath, '**/*')],
                         destination: path.join(dest, 'trace/dist')
@@ -120,7 +126,7 @@ export default {
     },
     packageOptions: {
         polyfillNode: true,
-        namedExports: ['gl-vec2', 'dagre'],
+        namedExports: [],
         // knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client']
         knownEntrypoints: ['chai', '@testing-library/react']
     },

frontend/packages/core/src/App.tsx

@@ -16,11 +16,11 @@
 
 // cSpell:words pageview inited
 import 'antd/dist/antd.css';
-import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo, useState} from 'react';
-import {Redirect, Route, BrowserRouter as Router, Switch, useLocation, useHistory} from 'react-router-dom';
+import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo} from 'react';
+import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom';
 import {THEME, matchMedia} from '~/utils/theme';
 import {actions, selectors} from '~/store';
-import {headerHeight, position, size, zIndexes, setRem} from '~/utils/style';
+import {headerHeight, position, size, zIndexes} from '~/utils/style';
 import {useDispatch, useSelector} from 'react-redux';
 import ErrorBoundary from '~/components/ErrorBoundary';
 import ErrorPage from '~/pages/error';
@@ -32,12 +32,19 @@ import {ToastContainer} from 'react-toastify';
 import {fetcher} from '~/utils/fetch';
 import routes from '~/routes';
 import styled from 'styled-components';
-import {setDefaults, useTranslation} from 'react-i18next';
+import {useTranslation} from 'react-i18next';
 
 const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
 
 const Main = styled.main`
     padding-top: ${headerHeight};
+    .ant-select-selector {
+        .ant-select-selection-item {
+            .select_icon {
+                display: none;
+            }
+        }
+    }
 `;
 
 const Header = styled.header`
@@ -74,10 +81,9 @@ const Telemetry: FunctionComponent = () => {
     }, [location.pathname]);
     return null;
 };
-
+const defaultRoute = '';
 const App: FunctionComponent = () => {
     const {t, i18n} = useTranslation('errors');
-    const [defaultRoute, setDefaultRoute] = useState('');
     const dir = useMemo(() => (i18n.language ? i18n.dir(i18n.language) : ''), [i18n]);
 
     const dispatch = useDispatch();

frontend/packages/core/src/components/BarsChart.tsx

@@ -14,9 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import * as chart from '~/utils/chart';
-
 import React, {useEffect, useImperativeHandle} from 'react';
 import {primaryColor} from '~/utils/style';
 import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
@@ -219,6 +216,7 @@ const Charts = React.forwardRef<BarChartRef, BarsChartProps>(
                 });
                 echart?.setOption(chartOptions, {notMerge: true});
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [options, data, title, theme, i18n.language, echart, isLegend, units, text]);
         return (
             <Wrapper ref={wrapper} className={className}>

frontend/packages/core/src/components/Check.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /**
  * Copyright 2020 Baidu Inc. All Rights Reserved.
  *

frontend/packages/core/src/components/CurvesPage/CurveChart.tsx

@@ -23,7 +23,6 @@ import {rem, size} from '~/utils/style';
 import Chart from '~/components/Chart';
 import {Chart as ChartLoader} from '~/components/Loader/ChartPage';
 import ChartToolbox from '~/components/ChartToolbox';
-import type {EChartsOption} from 'echarts';
 import TooltipTable from '~/components/TooltipTable';
 import {cycleFetcher} from '~/utils/fetch';
 import {format} from 'd3-format';

frontend/packages/core/src/components/DistributedChart.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as chart from '~/utils/chart';
+// import * as chart from '~/utils/chart';
 
 import React, {useEffect, useCallback} from 'react';
 import {primaryColor} from '~/utils/style';
@@ -59,6 +59,7 @@ export type LineChartRef = {
 
 const DistributedChart = React.forwardRef<LineChartRef, DistributedChartProps>(
     ({options, data, titles, loading, zoom, className, onInit}, ref) => {
+        console.log(ref);
         const {t} = useTranslation(['profiler', 'common']);
         const {i18n} = useTranslation();
 

frontend/packages/core/src/components/FastdeployGraph/CPUTables.tsx

@@ -0,0 +1,93 @@
+import {Table} from 'antd';
+import type {ColumnsType} from 'antd/es/table';
+import React, {FunctionComponent, useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+
+interface DataType {
+    key: string;
+    name: string;
+    money: string;
+    address: string;
+}
+
+type ArgumentProps = {
+    Datas: any;
+};
+const App: FunctionComponent<ArgumentProps> = ({Datas}) => {
+    const {t} = useTranslation(['Fastdeploy']);
+    const columns: ColumnsType<DataType> = [
+        {
+            title: t('Fastdeploy:Device-name'),
+            dataIndex: 'name',
+            key: 'name',
+            width: 100,
+            fixed: 'left'
+        },
+        {
+            title: t('Fastdeploy:Performance-metric'),
+            children: [
+                {
+                    title: `${t('Fastdeploy:utilization')}(%)`,
+                    dataIndex: 'nv_gpu_utilization',
+                    key: 'nv_gpu_utilization',
+                    width: 150
+                },
+                {
+                    title: `${t('Fastdeploy:power-usage')}(W)`,
+                    dataIndex: 'nv_gpu_power_usage',
+                    key: 'nv_gpu_power_usage',
+                    width: 150
+                },
+                {
+                    title: `${t('Fastdeploy:power-limit')}(W)`,
+                    dataIndex: 'nv_gpu_power_limit',
+                    key: 'nv_gpu_power_limit',
+                    width: 150
+                },
+                {
+                    title: `${t('Fastdeploy:energy-consumption')}(W)`,
+                    dataIndex: 'nv_energy_consumption',
+                    key: 'nv_energy_consumption',
+                    width: 150
+                }
+            ]
+        },
+        {
+            title: t('Fastdeploy:Memory'),
+            children: [
+                {
+                    title: `${t('Fastdeploy:total')}(GB)`,
+                    dataIndex: 'nv_gpu_memory_total_bytes',
+                    key: 'nv_gpu_memory_total_bytes',
+                    width: 150
+                },
+                {
+                    title: `${t('Fastdeploy:total')}(GB)`,
+                    dataIndex: 'nv_gpu_memory_used_bytes',
+                    key: 'nv_gpu_memory_used_bytes',
+                    width: 150
+                }
+            ]
+        }
+    ];
+    const [tabelData, setTabelData] = useState<any>();
+    useEffect(() => {
+        if (!Datas) {
+            return;
+        }
+        const arrays = Object.keys(Datas);
+        const data = arrays.map((name: string) => {
+            const model = Datas[name];
+
+            return {
+                ...model,
+                key: name,
+                name: name
+            };
+        });
+        setTabelData(data);
+    }, [Datas]);
+    return <Table columns={columns} dataSource={tabelData} bordered pagination={false} />;
+};
+
+export default App;