Skip to content

V
VisualDL

PaddlePaddle / VisualDL
大约 1 年 前同步成功

通知 88
Star 4655
Fork 642
V
VisualDL
未验证 提交 acd6c6df 编写于 作者: R RotPublic 提交者： GitHub
浏览文件
操作

fasdeploy frontend (#1198) 

* end

* end2

* end3

* end4

* end5

* end6

* end7
Co-authored-by: Nchenjian <chenjian26@baidu.com>
上级 9583bf7c
展开全部 隐藏空白更改
内联 并排
Showing with 7581 addition and 160 deletion
frontend/packages/core/package.json
浏览文件 @ acd6c6df
...@@ -39,6 +39,18 @@ ...@@ -39,6 +39,18 @@
"dist" "dist"
], ],
"dependencies": { "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", "@material-ui/core": "^4.12.4",
"@snowpack/plugin-sass": "^1.4.0", "@snowpack/plugin-sass": "^1.4.0",
"@tippyjs/react": "4.2.5", "@tippyjs/react": "4.2.5",
...@@ -60,7 +72,6 @@ ...@@ -60,7 +72,6 @@
"i18next-browser-languagedetector": "6.1.2", "i18next-browser-languagedetector": "6.1.2",
"i18next-fetch-backend": "3.0.0", "i18next-fetch-backend": "3.0.0",
"jszip": "3.7.1", "jszip": "3.7.1",
"lodash": "4.17.21",
"mime-types": "2.1.32", "mime-types": "2.1.32",
"moment": "2.29.1", "moment": "2.29.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
...@@ -127,6 +138,7 @@ ...@@ -127,6 +138,7 @@
"dotenv": "10.0.0", "dotenv": "10.0.0",
"enhanced-resolve": "5.8.2", "enhanced-resolve": "5.8.2",
"html-minifier": "4.0.0", "html-minifier": "4.0.0",
"lodash": "^4.17.21",
"snowpack": "3.8.8", "snowpack": "3.8.8",
"snowpack-plugin-copy": "1.0.1", "snowpack-plugin-copy": "1.0.1",
"typescript": "4.4.2" "typescript": "4.4.2"
......
frontend/packages/core/public/locales/en/Fastdeploy.json 0 → 100644
浏览文件 @ acd6c6df
{
"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 → 100644
浏览文件 @ acd6c6df
{
"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
浏览文件 @ acd6c6df
...@@ -37,6 +37,8 @@ function isWorkspace() { ...@@ -37,6 +37,8 @@ function isWorkspace() {
const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons')); const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons'));
const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron')); const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron'));
const netronPath2 = path.dirname(resolve.sync(cwd, '@visualdl/netron2')); 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 TracePath = path.dirname(resolve.sync(cwd, './public/static'));
const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm')); const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm'));
const dest = path.resolve(cwd, './dist/__snowpack__/link/packages'); const dest = path.resolve(cwd, './dist/__snowpack__/link/packages');
...@@ -102,6 +104,10 @@ export default { ...@@ -102,6 +104,10 @@ export default {
source: [path.join(netronPath2, '**/*')], source: [path.join(netronPath2, '**/*')],
destination: path.join(dest, 'netron2/dist') destination: path.join(dest, 'netron2/dist')
}, },
// {
// source: [path.join(netronPath3, '**/*')],
// destination: path.join(dest, 'netron3/dist')
// },
{ {
source: [path.join(TracePath, '**/*')], source: [path.join(TracePath, '**/*')],
destination: path.join(dest, 'trace/dist') destination: path.join(dest, 'trace/dist')
...@@ -120,7 +126,7 @@ export default { ...@@ -120,7 +126,7 @@ export default {
}, },
packageOptions: { packageOptions: {
polyfillNode: true, polyfillNode: true,
namedExports: ['gl-vec2', 'dagre'], namedExports: [],
// knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client'] // knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client']
knownEntrypoints: ['chai', '@testing-library/react'] knownEntrypoints: ['chai', '@testing-library/react']
}, },
......
frontend/packages/core/src/App.tsx
浏览文件 @ acd6c6df
...@@ -16,11 +16,11 @@ ...@@ -16,11 +16,11 @@
// cSpell:words pageview inited // cSpell:words pageview inited
import 'antd/dist/antd.css'; import 'antd/dist/antd.css';
import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo, useState} from 'react'; import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo} from 'react';
import {Redirect, Route, BrowserRouter as Router, Switch, useLocation, useHistory} from 'react-router-dom'; import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom';
import {THEME, matchMedia} from '~/utils/theme'; import {THEME, matchMedia} from '~/utils/theme';
import {actions, selectors} from '~/store'; 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 {useDispatch, useSelector} from 'react-redux';
import ErrorBoundary from '~/components/ErrorBoundary'; import ErrorBoundary from '~/components/ErrorBoundary';
import ErrorPage from '~/pages/error'; import ErrorPage from '~/pages/error';
...@@ -32,12 +32,19 @@ import {ToastContainer} from 'react-toastify'; ...@@ -32,12 +32,19 @@ import {ToastContainer} from 'react-toastify';
import {fetcher} from '~/utils/fetch'; import {fetcher} from '~/utils/fetch';
import routes from '~/routes'; import routes from '~/routes';
import styled from 'styled-components'; 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 BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
const Main = styled.main` const Main = styled.main`
padding-top: ${headerHeight}; padding-top: ${headerHeight};
.ant-select-selector {
.ant-select-selection-item {
.select_icon {
display: none;
}
}
}
`; `;
const Header = styled.header` const Header = styled.header`
...@@ -74,10 +81,9 @@ const Telemetry: FunctionComponent = () => { ...@@ -74,10 +81,9 @@ const Telemetry: FunctionComponent = () => {
}, [location.pathname]); }, [location.pathname]);
return null; return null;
}; };
const defaultRoute = '';
const App: FunctionComponent = () => { const App: FunctionComponent = () => {
const {t, i18n} = useTranslation('errors'); const {t, i18n} = useTranslation('errors');
const [defaultRoute, setDefaultRoute] = useState('');
const dir = useMemo(() => (i18n.language ? i18n.dir(i18n.language) : ''), [i18n]); const dir = useMemo(() => (i18n.language ? i18n.dir(i18n.language) : ''), [i18n]);
const dispatch = useDispatch(); const dispatch = useDispatch();
......
frontend/packages/core/src/components/BarsChart.tsx
浏览文件 @ acd6c6df
...@@ -14,9 +14,6 @@ ...@@ -14,9 +14,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import * as chart from '~/utils/chart';
import React, {useEffect, useImperativeHandle} from 'react'; import React, {useEffect, useImperativeHandle} from 'react';
import {primaryColor} from '~/utils/style'; import {primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts'; import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
...@@ -219,6 +216,7 @@ const Charts = React.forwardRef<BarChartRef, BarsChartProps>( ...@@ -219,6 +216,7 @@ const Charts = React.forwardRef<BarChartRef, BarsChartProps>(
}); });
echart?.setOption(chartOptions, {notMerge: true}); echart?.setOption(chartOptions, {notMerge: true});
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options, data, title, theme, i18n.language, echart, isLegend, units, text]); }, [options, data, title, theme, i18n.language, echart, isLegend, units, text]);
return ( return (
<Wrapper ref={wrapper} className={className}> <Wrapper ref={wrapper} className={className}>
......
frontend/packages/core/src/components/Check.tsx
浏览文件 @ acd6c6df
/* eslint-disable react-hooks/exhaustive-deps */
/** /**
* Copyright 2020 Baidu Inc. All Rights Reserved. * Copyright 2020 Baidu Inc. All Rights Reserved.
* *
......
frontend/packages/core/src/components/CurvesPage/CurveChart.tsx
浏览文件 @ acd6c6df
...@@ -23,7 +23,6 @@ import {rem, size} from '~/utils/style'; ...@@ -23,7 +23,6 @@ import {rem, size} from '~/utils/style';
import Chart from '~/components/Chart'; import Chart from '~/components/Chart';
import {Chart as ChartLoader} from '~/components/Loader/ChartPage'; import {Chart as ChartLoader} from '~/components/Loader/ChartPage';
import ChartToolbox from '~/components/ChartToolbox'; import ChartToolbox from '~/components/ChartToolbox';
import type {EChartsOption} from 'echarts';
import TooltipTable from '~/components/TooltipTable'; import TooltipTable from '~/components/TooltipTable';
import {cycleFetcher} from '~/utils/fetch'; import {cycleFetcher} from '~/utils/fetch';
import {format} from 'd3-format'; import {format} from 'd3-format';
......
frontend/packages/core/src/components/DistributedChart.tsx
浏览文件 @ acd6c6df
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
import * as chart from '~/utils/chart'; // import * as chart from '~/utils/chart';
import React, {useEffect, useCallback} from 'react'; import React, {useEffect, useCallback} from 'react';
import {primaryColor} from '~/utils/style'; import {primaryColor} from '~/utils/style';
...@@ -59,6 +59,7 @@ export type LineChartRef = { ...@@ -59,6 +59,7 @@ export type LineChartRef = {
const DistributedChart = React.forwardRef<LineChartRef, DistributedChartProps>( const DistributedChart = React.forwardRef<LineChartRef, DistributedChartProps>(
({options, data, titles, loading, zoom, className, onInit}, ref) => { ({options, data, titles, loading, zoom, className, onInit}, ref) => {
console.log(ref);
const {t} = useTranslation(['profiler', 'common']); const {t} = useTranslation(['profiler', 'common']);
const {i18n} = useTranslation(); const {i18n} = useTranslation();
......
frontend/packages/core/src/components/FastdeployGraph/CPUTables.tsx 0 → 100644
浏览文件 @ acd6c6df
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;
frontend/packages/core/src/components/FastdeployGraph/Clinet.tsx 0 → 100644
浏览文件 @ acd6c6df
import React, {FunctionComponent} from 'react';
import {useTranslation} from 'react-i18next';
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
// type ArgumentProps = {
// };
console.log('PUBLIC_PATH', PUBLIC_PATH, PUBLIC_PATH + '/api/fastdeploy/fastdeploy_client');
const ServerBox: FunctionComponent = () => {
// const {t} = useTranslation(['Fastdeploy']);
const {i18n} = useTranslation(['Fastdeploy']);
const language: string = i18n.language;
return (
<div
style={{
width: '100%',
height: '100%'
}}
>
<iframe
style={{
width: '100%',
height: '100%'
}}
src={PUBLIC_PATH + `/api/fastdeploy/fastdeploy_client?lang=${language}`}
// src={'https://www.baidu.com/'}
frameBorder={0}
scrolling="true"
marginWidth={0}
marginHeight={0}
></iframe>
</div>
);
};
export default ServerBox;
frontend/packages/core/src/components/FastdeployGraph/ModelTables.tsx 0 → 100644
浏览文件 @ acd6c6df
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 [tabelData, setTabelData] = useState<any>();
const {t} = useTranslation(['Fastdeploy']);
const columns: ColumnsType<DataType> = [
{
title: t('Fastdeploy:Model-name'),
dataIndex: 'name',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: t('Fastdeploy:Execution-metric'),
children: [
{
title: t('Fastdeploy:inference-request-success'),
dataIndex: 'nv_inference_request_success',
key: 'nv_inference_request_success',
width: 150
},
{
title: t('Fastdeploy:inference-request-failure'),
dataIndex: 'nv_inference_request_failure',
key: 'nv_inference_request_failure',
width: 150
},
{
title: t('Fastdeploy:inference-count'),
dataIndex: 'nv_inference_count',
key: 'nv_inference_count',
width: 150
},
{
title: t('Fastdeploy:inference-exec-count'),
dataIndex: 'nv_inference_exec_count',
key: 'nv_inference_exec_count',
width: 150
}
]
},
{
title: t('Fastdeploy:Delay-metric'),
children: [
{
title: `${t('Fastdeploy:inference-request-duration')}(ms)`,
dataIndex: 'nv_inference_request_duration_us',
key: 'nv_inference_request_duration_us',
width: 150
},
{
title: `${t('Fastdeploy:inference-queue-duration')}(ms)`,
dataIndex: 'nv_inference_queue_duration_us',
key: 'nv_inference_queue_duration_us',
width: 150
},
{
title: `${t('Fastdeploy:inference-comput-input-duration')}(ms)`,
dataIndex: 'nv_inference_compute_input_duration_us',
key: 'nv_inference_compute_input_duration_us',
width: 150
},
{
title: `${t('Fastdeploy:inference-compute-infer-duration')}(ms)`,
dataIndex: 'nv_inference_compute_infer_duration_us',
key: 'nv_inference_compute_infer_duration_us',
width: 150
},
{
title: `${t('Fastdeploy:inference-compute-output-duration')}(ms)`,
dataIndex: 'nv_inference_compute_output_duration_us',
key: 'nv_inference_compute_output_duration_us',
width: 150
}
]
}
];
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);
// for (let i = 0; i < 100; i++) {
// data.push({
// key: i,
// name: 'John Brown',
// age: i + 1,
// street: 'Lake Park',
// building: 'C',
// number: 2035,
// companyAddress: 'Lake Street 42',
// companyName: 'SoftLake Co',
// gender: 'M',
// });
}, [Datas]);
return <Table columns={columns} dataSource={tabelData} bordered pagination={false} />;
};
export default App;
frontend/packages/core/src/components/FastdeployGraph/serverBox.tsx 0 → 100644
浏览文件 @ acd6c6df
/* eslint-disable react-hooks/exhaustive-deps */
import React, {useEffect, useState, useRef, forwardRef, ForwardRefRenderFunction} from 'react';
import styled from 'styled-components';
import ModelTables from './ModelTables';
import CPUTables from './CPUTables';
import ServerConfig from './ServerConfig';
import {fetcher} from '~/utils/fetch';
import {rem} from '~/utils/style';
import {toast} from 'react-toastify';
import {useTranslation} from 'react-i18next';
// import type {left} from '@antv/x6/lib/registry/port-label-layout/side';
const TableTitle = styled.div`
margin-bottom: 20px;
margin-top: 20px;
font-size: 18px;
font-weight: 900;
`;
const Buttons = styled.div`
height: ${rem(36)};
line-height: ${rem(36)};
text-align: center;
font-size: 16px;
margin-left: 20px;
min-width: 100px;
width: auto;
border: 1px solid;
padding-left: 5px;
padding-right: 5px;
`;
const ButtonContent = styled.div`
display: flex;
justify-content: space-between;
padding-top: 20px;
padding-bottom: 20px;
`;
const ButtonLeft = styled.div`
display: flex;
justify-content: flex-end;
padding-top: 20px;
padding-bottom: 20px;
.backgrounds {
background-color: var(--navbar-background-color);
color: white;
border: none;
}
`;
const ButtonRight = styled.div`
display: flex;
justify-content: flex-end;
padding-top: 20px;
padding-bottom: 20px;
`;
type ArgumentProps = {
server_id: any;
Flag: number;
onEdit: () => any;
};
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
// type ArgumentProps = {
// };
export type serverBoxRef = {
outDatas(type: number): void;
};
console.log('PUBLIC_PATH', PUBLIC_PATH, PUBLIC_PATH + '/api/fastdeploy/fastdeploy_client');
const ServerBox: ForwardRefRenderFunction<serverBoxRef, ArgumentProps> = ({Flag, server_id, onEdit}) => {
const [flag, setFlag] = useState(0);
const [Datas, setDatas] = useState<any>({
text: '',
lengths: 0,
metric: null
});
const [configs, setConfigs] = useState<any>();
const {i18n, t} = useTranslation(['Fastdeploy']);
// const {i18n} = useTranslation(['Fastdeploy']);
const language: string = i18n.language;
useEffect(() => {
if (Flag === undefined) {
return;
}
isAlive();
}, [Flag]);
// useEffect(() => {
// const timer = setInterval(() => {
// setCount(count + 1);
// }, 10000);
// console.log('更新了', timer);
// return () => clearInterval(timer);
// }, [count]);
// Datas.metric
const isAlive = () => {
const serverId = server_id;
// const length = Datas.text.length;
fetcher(`/fastdeploy/check_server_alive?server_id=${serverId}`, {
method: 'GET'
}).then(
(res: any) => {
// debugger;
console.log('check_server_alive', res);
outDatas();
},
res => {
console.log('error_check_server_alive', res);
}
);
};
const outDatas = () => {
const serverId = server_id;
const length = Datas.text.length;
fetcher(`/fastdeploy/get_server_output?server_id=${serverId}` + `&length=${length}`, {
method: 'GET'
}).then(
(res: any) => {
console.log('get_server_output', res);
metricDatas(serverId, res);
getServe(serverId);
},
res => {
console.log('get_server_output', res);
}
);
};
const clickOutDatas = () => {
const serverId = server_id;
const length = Datas.text.length;
fetcher(`/fastdeploy/get_server_output?server_id=${serverId}` + `&length=${length}`, {
method: 'GET'
}).then(
(res: any) => {
console.log('get_server_output', res);
metricDatas(serverId, res);
getServe(serverId);
const message =
language === 'zh'
? `${serverId} 更新日志和性能数据成功`
: `Update log and metric for ${serverId} successfully`;
toast.success(message, {
autoClose: 2000
});
},
res => {
console.log('get_server_output', res);
}
);
};
const metricDatas = async (serverId: number, texts: any) => {
await fetcher(`/fastdeploy/get_server_metric?server_id=${serverId}`, {
method: 'GET'
}).then(
(res: any) => {
console.log('get_server_metric', res);
setDatas({
...Datas,
text: Datas.text + texts,
lengths: Datas.text.length + texts.length,
metric: res
});
},
res => {
console.log('get_server_output', res);
}
);
};
const getServe = async (serverId: number) => {
await fetcher(`/fastdeploy/get_server_config?server_id=${serverId}`, {
method: 'GET'
}).then(
(res: any) => {
console.log('get_server_config', res);
setConfigs(res);
},
res => {
console.log('get_server_output', res);
}
);
};
const cbRef: any = useRef();
useEffect(() => {
cbRef.current = outDatas;
});
useEffect(() => {
const callback = () => {
cbRef.current?.();
};
const timer = setInterval(() => {
callback();
}, 10000);
return () => clearInterval(timer);
}, []);
// useImperativeHandle(ref, () => ({
// outData(serverId: number) {
// outDatas(serverId);
// }
// }));
return (
<div>
{flag === 0 ? (
<div
style={{
whiteSpace: 'pre-wrap',
background: 'black',
color: 'white',
padding: '20px',
height: '650px',
overflowY: 'auto'
}}
>
{Datas.text}
</div>
) : flag === 1 ? (
<div
style={{
whiteSpace: 'pre-wrap',
// background: 'black',
// color: 'white',
padding: '20px',
height: '650px',
overflowY: 'auto'
}}
>
<div>
<TableTitle>{t('Fastdeploy:Model-metrics')}</TableTitle>
<ModelTables Datas={Datas?.metric?.Model}></ModelTables>
</div>
<div>
<TableTitle>{t('Fastdeploy:GPU-metrics')}</TableTitle>
<CPUTables Datas={Datas?.metric?.GPU}></CPUTables>
</div>
</div>
) : (
<div
style={{
whiteSpace: 'pre-wrap',
// background: 'black',
// color: 'white',
padding: '20px',
height: '650px',
overflowY: 'auto'
}}
>
<ServerConfig serverId={server_id} modelData={configs}></ServerConfig>
</div>
)}
<ButtonContent>
<ButtonLeft>
<Buttons
className={flag === 0 ? 'backgrounds' : ''}
onClick={() => {
setFlag(0);
}}
>
{t('Fastdeploy:log')}
</Buttons>
<Buttons
className={flag === 1 ? 'backgrounds' : ''}
onClick={() => {
setFlag(1);
}}
>
{t('Fastdeploy:metric')}
</Buttons>
<Buttons
className={flag === 2 ? 'backgrounds' : ''}
onClick={() => {
setFlag(2);
}}
>
{t('Fastdeploy:model-repository')}
</Buttons>
</ButtonLeft>
<ButtonRight>
<Buttons
onClick={() => {
const url =
PUBLIC_PATH +
`/api/fastdeploy/fastdeploy_client?server_id=${server_id}` +
`&lang=${language}`;
window.open(url);
}}
>
{t('Fastdeploy:open-client')}
</Buttons>
<Buttons onClick={onEdit}>{t('Fastdeploy:shutdown')}</Buttons>
<Buttons
onClick={() => {
clickOutDatas();
}}
>
{t('Fastdeploy:updates')}
</Buttons>
</ButtonRight>
</ButtonContent>
</div>
);
};
export default forwardRef(ServerBox);
frontend/packages/core/src/components/GraphPage/GraphDynamic.tsx
浏览文件 @ acd6c6df
/* eslint-disable react-hooks/exhaustive-deps */
/** /**
* Copyright 2020 Baidu Inc. All Rights Reserved. * Copyright 2020 Baidu Inc. All Rights Reserved.
* *
......
frontend/packages/core/src/components/GraphPage/GraphStatic.tsx
浏览文件 @ acd6c6df
...@@ -209,6 +209,7 @@ const Graph = React.forwardRef<GraphRef, GraphProps>( ...@@ -209,6 +209,7 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
}, [handler, dispatch]); }, [handler, dispatch]);
useEffect(() => { useEffect(() => {
console.log('GraphStaticss', files, ready);
(ready && dispatch('change-files', files)) || undefined; (ready && dispatch('change-files', files)) || undefined;
}, [dispatch, files, ready]); }, [dispatch, files, ready]);
useEffect( useEffect(
......
frontend/packages/core/src/components/GraphPage/GraphStatic2.tsx
浏览文件 @ acd6c6df
/* eslint-disable react-hooks/exhaustive-deps */
/** /**
* Copyright 2020 Baidu Inc. All Rights Reserved. * Copyright 2020 Baidu Inc. All Rights Reserved.
* *
...@@ -26,6 +27,7 @@ import styled from 'styled-components'; ...@@ -26,6 +27,7 @@ import styled from 'styled-components';
import {toast} from 'react-toastify'; import {toast} from 'react-toastify';
import useTheme from '~/hooks/useTheme'; import useTheme from '~/hooks/useTheme';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
console.log('netron2', netron2);
const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH; const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
......
frontend/packages/core/src/components/GraphPage/Uploader.tsx
浏览文件 @ acd6c6df
...@@ -120,12 +120,27 @@ const Uploader: FunctionComponent<UploaderProps> = ({onClickUpload, onDropFiles, ...@@ -120,12 +120,27 @@ const Uploader: FunctionComponent<UploaderProps> = ({onClickUpload, onDropFiles,
</DropZone> </DropZone>
<SupportTable> <SupportTable>
{Xpaddlae ? ( {Xpaddlae ? (
<tbody> // <tbody>
<tr> // <tr>
<td>{t('graph:supported-model')}</td> // <td>{t('graph:supported-model')}</td>
<td>{t('graph:supported-model-list-xpaddle')}</td> // <td>{t('graph:supported-model-list-xpaddle')}</td>
</tr> // </tr>
</tbody> // </tbody>
<div
style={{
display: 'flex',
fontSize: '18px'
}}
>
<div
// style={{
// fontSize: '1.1428571428571428em'
// }}
>
{t('graph:supported-model')}
</div>
<div>{t('graph:supported-model-list-xpaddle')}</div>
</div>
) : ( ) : (
<tbody> <tbody>
<tr> <tr>
......
frontend/packages/core/src/components/LineChart.tsx
浏览文件 @ acd6c6df
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
import * as chart from '~/utils/chart'; import * as chart from '~/utils/chart';
import React, {useEffect, useImperativeHandle, useState} from 'react'; import React, {useEffect, useImperativeHandle} from 'react';
import {WithStyled, primaryColor} from '~/utils/style'; import {WithStyled, primaryColor} from '~/utils/style';
import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts'; import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
......
frontend/packages/core/src/components/ProfilerPage/MemoryView/MemoryView.tsx
浏览文件 @ acd6c6df
...@@ -28,8 +28,8 @@ import SearchInput from '~/components/searchInput2'; ...@@ -28,8 +28,8 @@ import SearchInput from '~/components/searchInput2';
import GridLoader from 'react-spinners/GridLoader'; import GridLoader from 'react-spinners/GridLoader';
import {Wraper, Title, FullWidthSelect, Configure, EchartPie} from '../../components'; import {Wraper, Title, FullWidthSelect, Configure, EchartPie} from '../../components';
import type {devicesType, curveType, memory_events_type, Datum, op_memory_events_type, op_datum} from './type'; import type {devicesType, curveType, memory_events_type, Datum, op_memory_events_type, op_datum} from './type';
import {number} from 'echarts'; // import {number} from 'echarts';
import NumberInput from '../NumberInput'; // import NumberInput from '../NumberInput';
interface DataType { interface DataType {
key: React.Key; key: React.Key;
MemoryType: string; MemoryType: string;
...@@ -178,6 +178,7 @@ const MemoryView: FunctionComponent<MemoryViewProps> = ({runs, workers, spans, u ...@@ -178,6 +178,7 @@ const MemoryView: FunctionComponent<MemoryViewProps> = ({runs, workers, spans, u
const result = res as devicesType[]; const result = res as devicesType[];
const itemsLists = result.map(element => { const itemsLists = result.map(element => {
const regex1 = /\((.+?)\)/g; const regex1 = /\((.+?)\)/g;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const label: string = element.device.match(regex1)![0]; const label: string = element.device.match(regex1)![0];
const labels = label.substring(1, label.length - 1); const labels = label.substring(1, label.length - 1);
return {label: labels, value: element.device}; return {label: labels, value: element.device};
......
frontend/packages/core/src/components/ProfilerPage/OperatorView/tools.tsx
浏览文件 @ acd6c6df
import type {ColumnsType} from 'antd/lib/table'; // import type {ColumnsType} from 'antd/lib/table';
import React from 'react'; // import React from 'react';
import type {EChartsOption} from 'echarts'; import type {EChartsOption} from 'echarts';
export const options: EChartsOption = { export const options: EChartsOption = {
grid: { grid: {
......
frontend/packages/core/src/components/ProfilerPage/overview/PerformanceContent.tsx
浏览文件 @ acd6c6df
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
/* eslint-disable sort-imports */ /* eslint-disable sort-imports */
import React, {Fragment, FunctionComponent} from 'react'; import React, {Fragment, FunctionComponent} from 'react';
import {rem} from '~/utils/style'; import {rem} from '~/utils/style';
import {useTranslation} from 'react-i18next'; // import {useTranslation} from 'react-i18next';
import styled from 'styled-components'; import styled from 'styled-components';
import BarsChart from '~/components/BarsChart'; import BarsChart from '~/components/BarsChart';
import {Tabs} from 'antd'; import {Tabs} from 'antd';
......
frontend/packages/core/src/components/ProfilerPage/overview/overview.tsx
浏览文件 @ acd6c6df
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
import React, {FunctionComponent, useCallback, useEffect, useMemo, useState} from 'react'; import React, {FunctionComponent, useCallback, useEffect, useState} from 'react';
import type {ColumnsType} from 'antd/lib/table'; import type {ColumnsType} from 'antd/lib/table';
import PieChart from '~/components/pieChart'; import PieChart from '~/components/pieChart';
import StackColumnChart from '~/components/StackColumnChart'; import StackColumnChart from '~/components/StackColumnChart';
...@@ -129,10 +129,10 @@ interface chartDataType { ...@@ -129,10 +129,10 @@ interface chartDataType {
gpu: cpuData[]; gpu: cpuData[];
cpu: cpuData[]; cpu: cpuData[];
} }
type SelectListItem<T> = { // type SelectListItem<T> = {
value: T; // value: T;
label: string; // label: string;
}; // };
const OverView: FunctionComponent<overViewProps> = ({runs, views, workers, spans, units, descriptions}) => { const OverView: FunctionComponent<overViewProps> = ({runs, views, workers, spans, units, descriptions}) => {
const {t} = useTranslation(['profiler', 'common']); const {t} = useTranslation(['profiler', 'common']);
...@@ -144,10 +144,10 @@ const OverView: FunctionComponent<overViewProps> = ({runs, views, workers, spans ...@@ -144,10 +144,10 @@ const OverView: FunctionComponent<overViewProps> = ({runs, views, workers, spans
const [isExpend, setIsExpend] = useState(false); const [isExpend, setIsExpend] = useState(false);
const [tableData, setTableData] = useState<tableType[] | Cpu[]>(); const [tableData, setTableData] = useState<tableType[] | Cpu[]>();
const [tableLoading, settableLoading] = useState(true); const [tableLoading, settableLoading] = useState(true);
const [stepsList, setStepsList] = useState<SelectListItem<string>[]>([ // const [stepsList, setStepsList] = useState<SelectListItem<string>[]>([
{label: 'cpu', value: 'cpu'}, // {label: 'cpu', value: 'cpu'},
{label: 'gpu', value: 'gpu'} // {label: 'gpu', value: 'gpu'}
]); // ]);
const [TrainType, setTrainType] = useState<string>('cpu'); const [TrainType, setTrainType] = useState<string>('cpu');
const [PerformanceType, setPerformanceType] = useState<string>('cpu'); const [PerformanceType, setPerformanceType] = useState<string>('cpu');
const [tableData2, setTableData2] = useState<Event[]>(); const [tableData2, setTableData2] = useState<Event[]>();
......
frontend/packages/core/src/components/ScalarChart.tsx
浏览文件 @ acd6c6df
...@@ -21,7 +21,7 @@ import {rem, size} from '~/utils/style'; ...@@ -21,7 +21,7 @@ import {rem, size} from '~/utils/style';
import Chart from '~/components/Chart'; import Chart from '~/components/Chart';
import ChartToolbox from '~/components/ChartToolbox'; import ChartToolbox from '~/components/ChartToolbox';
import type {EChartsOption, LineSeriesOption} from 'echarts'; import type {EChartsOption} from 'echarts';
import TooltipTable from '~/components/TooltipTable'; import TooltipTable from '~/components/TooltipTable';
import {format} from 'd3-format'; import {format} from 'd3-format';
import {renderToStaticMarkup} from 'react-dom/server'; import {renderToStaticMarkup} from 'react-dom/server';
......
frontend/packages/core/src/components/StackColumnChart.tsx
浏览文件 @ acd6c6df
/* eslint-disable react-hooks/exhaustive-deps */
/** /**
* Copyright 2020 Baidu Inc. All Rights Reserved. * Copyright 2020 Baidu Inc. All Rights Reserved.
* *
......
frontend/packages/core/src/pages/Fastdeploy.tsx 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/core/src/pages/FastdeployClient.tsx 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/core/src/utils/fetch.ts
浏览文件 @ acd6c6df
...@@ -89,6 +89,7 @@ export async function fetcher<T = unknown>(url: string, options?: RequestInit): ...@@ -89,6 +89,7 @@ export async function fetcher<T = unknown>(url: string, options?: RequestInit):
// res = await fetch('http://10.181.196.14:8040/app/api/deploy/convert?format=onnx', addApiToken(options)); // res = await fetch('http://10.181.196.14:8040/app/api/deploy/convert?format=onnx', addApiToken(options));
res = await fetch(API_URL + url, addApiToken(options)); res = await fetch(API_URL + url, addApiToken(options));
console.log('ressponse', res);
} catch (e) { } catch (e) {
const t = await logErrorAndReturnT(e); const t = await logErrorAndReturnT(e);
throw new Error(t('errors:network-error')); throw new Error(t('errors:network-error'));
......
frontend/packages/mock/data/component_tabs.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/mock/data/fastdeploy/config_update.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/mock/data/fastdeploy/get_config.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/mock/data/fastdeploy/get_directory.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/mock/data/fastdeploy/start_server.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/mock/data/fastdeploy/stop_server.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/mock/data/graph_runs.js
浏览文件 @ acd6c6df
...@@ -14,4 +14,4 @@ ...@@ -14,4 +14,4 @@
* limitations under the License. * limitations under the License.
*/ */
export default {status: 0, msg: '', data: ['test_add_graph/', 'test_add_graph/test1']}; export default {status: 0, msg: '', data: ['dynamic_graph', 'x2paddle', 'fastdeploy_server']};
frontend/packages/netron3/.browserslistrc 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/netron3/README.md 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/netron3/package.json 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/netron3/postcss.config.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/netron3/src/index.html 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/netron3/src/index.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/packages/netron3/webpack.config.js 0 → 100644
浏览文件 @ acd6c6df
此差异已折叠。
frontend/yarn.lock
浏览文件 @ acd6c6df
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或