Skip to content
This repository has been archived by the owner on Feb 21, 2022. It is now read-only.

system view issues #263

Merged
merged 2 commits into from
Nov 24, 2021
Merged

system view issues #263

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4642a3e
system view issues
sutcalag Nov 24, 2021
7bfbb4a
resolve comments
sutcalag Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion client/src/i18n/cn/systemView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ const systemViewTrans = {
diskTitle: 'disk',
memoryTitle: 'memory',
qpsTitle: 'qps',
letencyTitle: 'letency',
latencyTitle: 'latency',
hardwareTitle: 'hardware',
configTitle: 'config',
valueTitle: 'value',
systemTitle: 'system',
thName: 'Node Name',
Expand Down
3 changes: 2 additions & 1 deletion client/src/i18n/en/systemView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ const systemViewTrans = {
diskTitle: 'disk',
memoryTitle: 'memory',
qpsTitle: 'qps',
letencyTitle: 'letency',
latencyTitle: 'latency',
hardwareTitle: 'hardware',
configTitle: 'config',
valueTitle: 'value',
systemTitle: 'system',
thName: 'Node Name',
Expand Down
38 changes: 29 additions & 9 deletions client/src/plugins/system/DataCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,23 @@ const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> = (prop
const { t: commonTrans } = useTranslation();
const capacityTrans: { [key in string]: string } = commonTrans('capacity');
const { node, extend } = props;

const hardwareTitle = [t('hardwareTitle'), t('valueTitle')];
const hardwareContent = [];
const infos = node?.infos?.hardware_infos || {};

const configTitle = [t('configTitle'), t('valueTitle')];
const systemConfig: { label: string; value: any; }[] = [];

const systemTitle = [t('systemTitle'), t('valueTitle')];
const systemContent = [];

const {
created_time: create,
updated_time: update,
sutcalag marked this conversation as resolved.
Show resolved Hide resolved
system_info = {},
hardware_infos: infos = {},
system_configurations,
} = node?.infos || {};

const {
cpu_core_count: cpu = 0,
Expand All @@ -163,19 +177,20 @@ const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> = (prop
});
}

const systemTitle = [t('systemTitle'), t('valueTitle')];
const systemContent = [];
const sysInfos = node?.infos?.system_info || {};
if (system_configurations) {
Object.keys(system_configurations).forEach(key => {
systemConfig.push({ label: key, value: system_configurations[key] });
nameczz marked this conversation as resolved.
Show resolved Hide resolved
});
}

const {
system_version: version,
deploy_mode: mode = '',
created_time: create = '',
updated_time: update = '',
} = sysInfos;
} = system_info;
systemContent.push({ label: t('thVersion'), value: version });
systemContent.push({ label: t('thDeployMode'), value: mode });
systemContent.push({ label: t('thCreateTime'), value: create });
systemContent.push({ label: t('thUpdateTime'), value: update });
systemContent.push({ label: t('thCreateTime'), value: create ? new Date(create.substr(0, 37)).toLocaleString() : '' });
systemContent.push({ label: t('thUpdateTime'), value: update ? new Date(update.substr(0, 37)).toLocaleString() : '' });

return (
<div className={classes.root}>
Expand All @@ -188,6 +203,11 @@ const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> = (prop
</div>
{extend && <DataSection titles={hardwareTitle} contents={hardwareContent} />}
<DataSection titles={systemTitle} contents={systemContent} />
{systemConfig.length ?
<DataSection titles={configTitle} contents={systemConfig} />
:
null
}
</div>
);
};
Expand Down
11 changes: 10 additions & 1 deletion client/src/plugins/system/NodeListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const getStyles = makeStyles((theme: Theme) => ({
`"a a"
"b ."
"b d"`,
height: 'calc(100% - 28px)',
},
cardContainer: {
display: 'grid',
Expand Down Expand Up @@ -124,6 +123,16 @@ const NodeListView: FC<NodeListViewProps> = (props) => {
}
}, [selectedCord, childNodes, capacityTrans]);

useEffect(() => {
const timeoutID = window.setTimeout(() => {
sutcalag marked this conversation as resolved.
Show resolved Hide resolved
const el = document.querySelectorAll<HTMLElement>(".MuiDataGrid-row")[0];
if (el instanceof HTMLElement) {
el.click();
}
}, 300);
return () => window.clearTimeout(timeoutID);
}, [childNodes]);

return (
<div className={classes.root}>
<button className={classes.childCloseBtn} onClick={() => setCord(null)}>
Expand Down
16 changes: 9 additions & 7 deletions client/src/plugins/system/SystemView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const getStyles = makeStyles((theme: Theme) => ({
fontFamily: 'Roboto',
margin: '14px 40px',
position: 'relative',
height: 'calc(100vh - 80px)',
height: 'fit-content',
display: 'flex',
flexDirection: 'column',
},
Expand Down Expand Up @@ -48,10 +48,11 @@ const getStyles = makeStyles((theme: Theme) => ({
},
showChildView: {
top: 0,
maxHeight: 'auto',
minHeight: '100%',
height: 'fit-content',
},
hideChildView: {
top: '1000px',
top: '1500px',
maxHeight: 0,
},
childCloseBtn: {
Expand All @@ -68,7 +69,7 @@ const parseJson = (jsonData: any) => {

const system = {
// qps: Math.random() * 1000,
letency: Math.random() * 1000,
latency: Math.random() * 1000,
disk: 0,
diskUsage: 0,
memory: 0,
Expand All @@ -94,7 +95,6 @@ const parseJson = (jsonData: any) => {
return { nodes, childNodes, system };
}


const SystemView: any = () => {
useNavigationHook(ALL_ROUTER_TYPES.SYSTEM);
const { t } = useTranslation('systemView');
Expand Down Expand Up @@ -123,16 +123,18 @@ const SystemView: any = () => {
}, []);

let qps = system?.qps || 0;
const letency = system?.letency || 0;
const latency = system?.latency || 0;
const childView = useRef<HTMLInputElement>(null);



return (
<div className={classes.root}>
<div className={clsx(classes.cardContainer, selectedCord && classes.transparent)}>
<ProgressCard title={t('diskTitle')} usage={system.diskUsage} total={system.disk} />
<ProgressCard title={t('memoryTitle')} usage={system.memoryUsage} total={system.memory} />
<LineChartCard title={t('qpsTitle')} value={qps} />
<LineChartCard title={t('letencyTitle')} value={letency} />
<LineChartCard title={t('latencyTitle')} value={latency} />
</div>
<div className={classes.contentContainer}>
<Topo nodes={nodes} setNode={setNode} setCord={setCord} />
Expand Down
36 changes: 25 additions & 11 deletions client/src/plugins/system/Topology.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,13 @@ const getStyles = makeStyles((theme: Theme) => ({
transition: 'all .25s',
},

'&:hover, &:focus': {
'&:hover, &.selectedNode': {
transform: 'scale(1.1)',
filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .2))',
},

'&:focus': {
outline: 'none',
},

'&.selectedNode': {
'& circle': {
fill: '#06AFF2',
stroke: '#06AFF2',
Expand All @@ -57,14 +56,13 @@ const getStyles = makeStyles((theme: Theme) => ({
transition: 'all .25s',
},

'&:hover, &:focus': {
'&:hover, &.selectedNode': {
transform: 'scale(1.1)',
filter: 'drop-shadow(3px 3px 5px rgba(0, 0, 0, .2))',
},

'&:focus': {
outline: 'none',
},

'&.selectedNode': {
'& svg path': {
fill: 'white',
},
Expand Down Expand Up @@ -113,6 +111,20 @@ const capitalize = (s: string) => {
return s.charAt(0).toUpperCase() + s.slice(1);
}

const setSelected = (el: any) => {
const nodes = document.querySelectorAll<HTMLElement>('.selectedNode');
nodes.forEach(n => n.classList.remove('selectedNode'));

function getGParent(e: any): any {
if (e.tagName === 'g') {
return e;
} else {
return getGParent(e.parentElement);
}
}
getGParent(el).classList.add('selectedNode');
}

const Topo = (props: any) => {
const classes = getStyles();
const { nodes, setNode, setCord } = props;
Expand Down Expand Up @@ -221,8 +233,9 @@ const Topo = (props: any) => {
<g key={`${node?.infos?.name}`}>
<line x1={`${WIDTH / 2}`} y1={`${HEIGHT / 2}`} x2={nodeCenterX} y2={nodeCenterY} stroke="#06AFF2" />
{connectedLength && (<line x1={nodeCenterX} y1={nodeCenterY} x2={childNodeCenterX} y2={childNodeCenterY} stroke="#06AFF2" />)}
<g className={classes.childNode} tabIndex={0} onClick={() => {
<g className={classes.childNode} tabIndex={0} onClick={e => {
setNode(node);
setSelected(e.target);
}}
>
<circle cx={nodeCenterX} cy={nodeCenterY} r={R2} fill="white" stroke="#06AFF2" />
Expand Down Expand Up @@ -255,9 +268,10 @@ const Topo = (props: any) => {
}
return null;
})}
<g id="center" className={classes.rootNode} tabIndex={0} onClick={() => {
<g id="center" className={classes.rootNode} tabIndex={0} onClick={e => {
setNode(centerNode);
}} >
setSelected(e.target);
}}>
<circle cx={`${WIDTH / 2}`} cy={`${HEIGHT / 2}`} r={R1} fill="white" stroke="#06AFF2" />
<text fontFamily="Roboto" textAnchor="middle" alignmentBaseline="middle" fill="#06AFF2" fontWeight="700" fontSize="24" x={`${WIDTH / 2}`} y={`${HEIGHT / 2}`}>Milvus</text>
</g>
Expand Down
3 changes: 3 additions & 0 deletions client/src/plugins/system/Types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ export interface Node {
hardware_infos: any,
system_info: any,
name: string,
created_time: string,
updated_time: string,
system_configurations: any,
},
connected: {
connected_identifier: number,
Expand Down
1 change: 1 addition & 0 deletions client/src/plugins/system/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"client": {
"path": "system",
"auth": true,
"entry": "SystemView.tsx",
"label": "System View",
"iconName": "navSystem"
Expand Down