diff --git a/src/components/Charts/SpaceChart.tsx b/src/components/Charts/SpaceChart.tsx index b5d90a00..bcaaccf5 100644 --- a/src/components/Charts/SpaceChart.tsx +++ b/src/components/Charts/SpaceChart.tsx @@ -29,6 +29,13 @@ function SpaceChart(props: IProps) { setSeletedInstance('all'); }, [instances]) + const diskThs = useMemo(() => ({ + name: diskInfos.some(i => !!i.name), + device: diskInfos.some(i => !!i.device), + mountpoint: diskInfos.some(i => !!i.mountpoint), + used: diskInfos.some(i => !!(i.size && i.used)) + }), [diskInfos]) + const getDisplayInfos = (infos: DiskMetricInfo[]) => { return infos.map((info) => { const { used, size: bytes, device, mountpoint, name } = info; @@ -60,41 +67,53 @@ function SpaceChart(props: IProps) { return curInstances.map(instance => { const displayInfos = getDisplayInfos(diskInfoMap[instance] || []); return ( -
-
- -
{instance}
- -
-
- { - displayInfos.map(i => i.device).map((device, i) => ( +
+ { + diskThs.name && ( +
-
{device}
- - )) - } -
-
- { - displayInfos.map(i => i.mountpoint).map((mountpoint, i) => ( - -
{mountpoint}
+
{instance}
 - )) - } -
+
+ ) + } + { + diskThs.device && ( +
+ { + displayInfos.map(i => i.device).map((device, i) => ( + +
{device}
+ + )) + } +
+ ) + } + { + diskThs.mountpoint && ( +
+ { + displayInfos.map(i => i.mountpoint).map((mountpoint, i) => ( + +
{mountpoint}
+ + )) + } +
+ ) + }
{ displayInfos.map((displayInfo, i) => ( @@ -117,16 +136,43 @@ function SpaceChart(props: IProps) { }) } + const gridValue = useMemo(() => { + const count = Object.values(diskThs).filter(t => t).length; + switch (count) { + case 2: + return '40% 60%' + case 3: + return '30% 40% 40%' + case 4: + return '20% 20% 20% 40%' + default: + return '20% 20% 20% 40%' + } + }, [diskThs]) + + const renderDiskTabelHead = () => { + + return ( +
+ { + diskThs.name &&
{intl.get('base.spaceChartInstance')}
+ } + { + diskThs.device &&
{intl.get('base.spaceChartDiskname')}
+ } + { + diskThs.mountpoint &&
{intl.get('base.spaceChartMountpoint')}
+ } +
{intl.get('base.spaceChartDiskused')}
+
+ ) + } + return (
-
-
{intl.get('base.spaceChartInstance')}
-
{intl.get('base.spaceChartDiskname')}
-
{intl.get('base.spaceChartMountpoint')}
-
{intl.get('base.spaceChartDiskused')}
-
+ {renderDiskTabelHead()}
{renderDiskInfo()}
diff --git a/src/components/Instruction/index.less b/src/components/Instruction/index.less index 9f014b48..7cb6a3db 100644 --- a/src/components/Instruction/index.less +++ b/src/components/Instruction/index.less @@ -3,7 +3,7 @@ .icon-instruction { margin: 0 5px; - fill: rgba(140, 140, 140, 1); + color: rgba(140, 140, 140, 1); width: 16px; height: 16px; } diff --git a/src/components/MetricsFilterPanel/index.module.less b/src/components/MetricsFilterPanel/index.module.less index 396fc160..4fbc37a1 100644 --- a/src/components/MetricsFilterPanel/index.module.less +++ b/src/components/MetricsFilterPanel/index.module.less @@ -37,13 +37,13 @@ border-color: @blue; border-right: 1px solid @blue; .freshIconItem { - fill: @blue; + color: @blue; } } } .freshIconItem { - fill: rgba(0,0,0,.85); + color: rgba(0,0,0,.85); width: 18px; height: 18px; } diff --git a/src/pages/MachineDashboard/Cards/DiskCard.tsx b/src/pages/MachineDashboard/Cards/DiskCard.tsx index ae424984..e5b8c3e6 100644 --- a/src/pages/MachineDashboard/Cards/DiskCard.tsx +++ b/src/pages/MachineDashboard/Cards/DiskCard.tsx @@ -3,14 +3,15 @@ import { connect } from 'react-redux'; import _ from 'lodash'; import { IRootState } from '@/store'; import SpaceChart from '@/components/Charts/SpaceChart'; -import { DiskMetricInfo } from '@/utils/interface'; +import { DiskMetricInfo, MetricScene } from '@/utils/interface'; +import { getMetricsUniqName } from '@/utils/dashboard'; const mapState = (state: IRootState) => { const { diskSizeStat, diskStat, metricsFilterValues } = state.machine; const { aliasConfig } = state.app; const { instanceList } = metricsFilterValues; - + return { // According to type, only the detail increases total diskUsageDetails: diskStat @@ -21,10 +22,11 @@ const mapState = (state: IRootState) => { if (diskSizeStat[idx]) { size = Number(diskSizeStat[idx].value[1]); } - const { instance: name, device, mountpoint } = instance.metric; + const { name } = getMetricsUniqName(MetricScene.DISK); + const { device, mountpoint } = instance.metric; return { size, - name: aliasConfig?.[name] || name, + name: aliasConfig?.[name] || instance.metric[name], used: latestValues ? Number(latestValues[1]) : 0, device, mountpoint diff --git a/src/pages/MachineDashboard/Cards/LoadCard.tsx b/src/pages/MachineDashboard/Cards/LoadCard.tsx index a52998d6..e039d0d4 100644 --- a/src/pages/MachineDashboard/Cards/LoadCard.tsx +++ b/src/pages/MachineDashboard/Cards/LoadCard.tsx @@ -15,7 +15,7 @@ const mapState = (state: IRootState) => { data: getDataByType({ data: loadStat, type: metricsFilterValues.instanceList, - nameObj: getMetricsUniqName(MetricScene.MACHINE), + nameObj: getMetricsUniqName(MetricScene.LOAD), aliasConfig, }), valueType: VALUE_TYPE.number, diff --git a/src/pages/MachineDashboard/Cards/MemoryCard.tsx b/src/pages/MachineDashboard/Cards/MemoryCard.tsx index 34e7147e..935f793a 100644 --- a/src/pages/MachineDashboard/Cards/MemoryCard.tsx +++ b/src/pages/MachineDashboard/Cards/MemoryCard.tsx @@ -13,7 +13,7 @@ const mapState = (state: IRootState) => { data: getDataByType({ data: memoryStat, type: metricsFilterValues.instanceList, - nameObj: getMetricsUniqName(MetricScene.MACHINE), + nameObj: getMetricsUniqName(MetricScene.MEMORY), aliasConfig, }), sizes: memorySizeStat, diff --git a/src/pages/MachineDashboard/Detail/DiskDetail.tsx b/src/pages/MachineDashboard/Detail/DiskDetail.tsx index dc4db756..591fd1bf 100644 --- a/src/pages/MachineDashboard/Detail/DiskDetail.tsx +++ b/src/pages/MachineDashboard/Detail/DiskDetail.tsx @@ -10,7 +10,7 @@ const mapState = (state: IRootState) => ({ type: 'disk', instances: state.machine.instanceList, metricOptions: SUPPORT_METRICS.disk, - dataTypeObj: getMetricsUniqName(MetricScene.MACHINE), + dataTypeObj: getMetricsUniqName(MetricScene.DISK), metricsFilterValues: state.machine.metricsFilterValues, loading: state.loading.effects.machine.asyncGetDiskStatByRange, }); diff --git a/src/pages/MachineDashboard/Detail/LoadDetail.tsx b/src/pages/MachineDashboard/Detail/LoadDetail.tsx index 40d32a22..51608840 100644 --- a/src/pages/MachineDashboard/Detail/LoadDetail.tsx +++ b/src/pages/MachineDashboard/Detail/LoadDetail.tsx @@ -10,7 +10,7 @@ const mapState = (state: IRootState) => ({ type: 'load', instances: state.machine.instanceList, metricOptions: SUPPORT_METRICS.load, - dataTypeObj: getMetricsUniqName(MetricScene.MACHINE), + dataTypeObj: getMetricsUniqName(MetricScene.LOAD), metricsFilterValues: state.machine.metricsFilterValues, loading: state.loading.effects.machine.asyncGetLoadByRange, }); diff --git a/src/pages/MachineDashboard/Detail/MemoryDetail.tsx b/src/pages/MachineDashboard/Detail/MemoryDetail.tsx index afbc30ca..ca304c10 100644 --- a/src/pages/MachineDashboard/Detail/MemoryDetail.tsx +++ b/src/pages/MachineDashboard/Detail/MemoryDetail.tsx @@ -9,7 +9,7 @@ import { MetricScene } from '@/utils/interface'; const mapState = (state: IRootState) => ({ type: 'memory', metricOptions: SUPPORT_METRICS.memory, - dataTypeObj: getMetricsUniqName(MetricScene.MACHINE), + dataTypeObj: getMetricsUniqName(MetricScene.MEMORY), loading: state.loading.effects.machine.asyncGetMemoryStatByRange, }); diff --git a/src/pages/MainPage/index.less b/src/pages/MainPage/index.less index be4d9539..eb14c30e 100644 --- a/src/pages/MainPage/index.less +++ b/src/pages/MainPage/index.less @@ -43,7 +43,7 @@ } .menu-icon { - fill: #fff; + color: #fff; width: 16px; height: 16px; margin-right: 10px; @@ -57,7 +57,7 @@ .ant-menu-submenu-title { // background-color: #1E2025; .icon { - fill: #fff; + color: #fff; width: 16px; height: 16px; margin-left: 0; @@ -94,7 +94,7 @@ cursor: pointer; .menu-btn { - fill: #fff; + color: #fff; width: 16px; height: 16px; } @@ -121,7 +121,7 @@ cursor: pointer; .menu-collapse-icon { - fill: #fff; + color: #fff; width: 16px; height: 16px; } @@ -167,7 +167,7 @@ margin: 0 !important; .menu-icon { - fill: #fff; + color: #fff; } } } diff --git a/src/store/models/machine.ts b/src/store/models/machine.ts index 0fd736f6..4f5fdaa2 100644 --- a/src/store/models/machine.ts +++ b/src/store/models/machine.ts @@ -22,12 +22,12 @@ export interface IState { metricsFilterValues: MetricsPanelValue; } -export function MachineModelWrapper(service, customizePromQL = (_clusterID) => ({})) { +export function MachineModelWrapper(service, customizePromQL?) { const getPromQL = (clusterID) => { - return { - ...PROMQL(clusterID), - ...customizePromQL(clusterID) + if (customizePromQL) { + return customizePromQL(clusterID) } + return PROMQL(clusterID) } return createModel({ state: { diff --git a/src/utils/dashboard.ts b/src/utils/dashboard.ts index 67a1a27d..7fad4fc1 100644 --- a/src/utils/dashboard.ts +++ b/src/utils/dashboard.ts @@ -2,6 +2,7 @@ import dayjs from 'dayjs'; import _ from 'lodash'; import { DashboardType, ILineChartMetric, IStatRangeItem, MetricScene } from '@/utils/interface'; import { VALUE_TYPE } from '@/utils/promQL'; +import { isCloudVersion } from '.'; export const DETAIL_DEFAULT_RANGE = 60 * 60 * 24 * 1000; export const CARD_RANGE = 60 * 60 * 24 * 1000; @@ -187,6 +188,28 @@ export const getDiskData = (payload: { const { type, data, nameObj } = payload; const { name, showName } = nameObj; const res = [] as ILineChartMetric[]; + if (isCloudVersion()) { + data.forEach(instance => { + instance.values.forEach(([timstamps, value]) => { + const _name = instance.metric[name] || instance.metric['container']; + // console.log('zzz', _name); + let shouldPush = false; + if (typeof type === 'string') { + shouldPush = (type === 'all' && _name !== 'total') || _name === type; + } else if (Array.isArray(type)) { + shouldPush = (type.includes('all') && _name !== 'total') || !!type.find(t => _name.includes(t)) + } + if (shouldPush) { + res.push({ + type: showName(_name), + value: Number(value), + time: timstamps, + }); + } + }); + }); + return res; + } data.forEach(instance => { instance.values.forEach(([timstamps, value]) => { const device = instance.metric['device']; @@ -403,9 +426,15 @@ export const getMetricsUniqName = (scene: MetricScene) => { showName: (name) => name ? name.slice(name.lastIndexOf('-') + 1) : name } } - if (scene === MetricScene.CPU || scene === MetricScene.NETWORK) { + if (scene === MetricScene.NETWORK) { + return { + name: 'pod', + showName: (name) => name ? name.slice(name.lastIndexOf('-') + 1) : name + } + } + if (scene === MetricScene.CPU || scene === MetricScene.MEMORY || scene === MetricScene.LOAD) { return { - name: 'instance', + name: 'container', showName: (name) => name ? name.slice(name.lastIndexOf('-') + 1) : name } } @@ -417,7 +446,7 @@ export const getMetricsUniqName = (scene: MetricScene) => { } if (scene === MetricScene.DISK) { return { - name: 'pod', + name: 'persistentvolumeclaim', showName: (name) => name ? name.slice(name.split('-').slice(2).join('-')) : name } } diff --git a/src/utils/interface.ts b/src/utils/interface.ts index ccf8ea0e..3f99ea73 100644 --- a/src/utils/interface.ts +++ b/src/utils/interface.ts @@ -80,4 +80,6 @@ export enum MetricScene { CPU, NETWORK, DISK, + MEMORY, + LOAD, } \ No newline at end of file diff --git a/src/utils/promQL.ts b/src/utils/promQL.ts index 7dafdcbb..08ab4042 100644 --- a/src/utils/promQL.ts +++ b/src/utils/promQL.ts @@ -2,6 +2,8 @@ * EXPLAIN: beacuse the metrics in each system are different, so dashboard need to load the detailed promql used by system */ +import { isCloudVersion } from "." + export const enum VALUE_TYPE { percentage = 'PERCENTAGE', byte = 'BYTE', @@ -11,122 +13,219 @@ export const enum VALUE_TYPE { numberSecond = 'numberSecond', } -export const SUPPORT_METRICS = { - cpu: [ - { - metric: 'cpu_utilization', - valueType: VALUE_TYPE.percentage, - }, - { - metric: 'cpu_idle', - valueType: VALUE_TYPE.percentage, - }, - { - metric: 'cpu_wait', - valueType: VALUE_TYPE.percentage, - }, - { - metric: 'cpu_user', - valueType: VALUE_TYPE.percentage, - }, - { - metric: 'cpu_system', - valueType: VALUE_TYPE.percentage, - }, - ], - memory: [ - { - metric: 'memory_utilization', - valueType: VALUE_TYPE.percentage, - }, - { - metric: 'memory_used', - valueType: VALUE_TYPE.byte, - }, - // { - // metric: 'memory_actual_used', - // valueType: VALUE_TYPE.byte, - // }, - { - metric: 'memory_free', - valueType: VALUE_TYPE.byte, - }, - ], - load: [ - { - metric: 'load_1m', - valueType: VALUE_TYPE.number, - }, - { - metric: 'load_5m', - valueType: VALUE_TYPE.number, - }, - { - metric: 'load_15m', - valueType: VALUE_TYPE.number, - }, - ], - disk: [ - { - metric: 'disk_used_percentage', - valueType: VALUE_TYPE.percentage, - }, - { - metric: 'disk_used', - valueType: VALUE_TYPE.byte, - }, - { - metric: 'disk_free', - valueType: VALUE_TYPE.byte, - }, - { - metric: 'disk_readbytes', - valueType: VALUE_TYPE.byteSecond, - }, - { - metric: 'disk_writebytes', - valueType: VALUE_TYPE.byteSecond, - }, - { - metric: 'disk_readiops', - valueType: VALUE_TYPE.numberSecond, - }, - { - metric: 'disk_writeiops', - valueType: VALUE_TYPE.numberSecond, - }, - { - metric: 'inode_utilization', - valueType: VALUE_TYPE.percentage, - }, - ], - network: [ - { - metric: 'network_in_rate', - valueType: VALUE_TYPE.byteSecond, - }, - { - metric: 'network_out_rate', - valueType: VALUE_TYPE.byteSecond, - }, - { - metric: 'network_in_errs', - valueType: VALUE_TYPE.numberSecond, - }, - { - metric: 'network_out_errs', - valueType: VALUE_TYPE.numberSecond, - }, - { - metric: 'network_in_packets', - valueType: VALUE_TYPE.numberSecond, - }, - { - metric: 'network_out_packets', - valueType: VALUE_TYPE.numberSecond, - }, - ], -}; +export const SUPPORT_METRICS = isCloudVersion() ? + { + cpu: [ + { + metric: 'cpu_utilization', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'cpu_user', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'cpu_system', + valueType: VALUE_TYPE.percentage, + }, + ], + memory: [ + { + metric: 'memory_utilization', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'memory_used', + valueType: VALUE_TYPE.byte, + }, + { + metric: 'memory_free', + valueType: VALUE_TYPE.byte, + }, + { + metric: 'memory_size', + valueType: VALUE_TYPE.byte, + } + ], + load: [ + { + metric: 'load', + valueType: VALUE_TYPE.number, + } + ], + disk: [ + { + metric: 'disk_used_percentage', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'disk_used', + valueType: VALUE_TYPE.byte, + }, + { + metric: 'disk_free', + valueType: VALUE_TYPE.byte, + }, + { + metric: 'disk_readbytes', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'disk_writebytes', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'disk_readiops', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'disk_writeiops', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'inode_utilization', + valueType: VALUE_TYPE.percentage, + }, + ], + network: [ + { + metric: 'network_in_rate', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'network_out_rate', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'network_in_errs', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'network_out_errs', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'network_in_packets', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'network_out_packets', + valueType: VALUE_TYPE.numberSecond, + }, + ], + } : + { + cpu: [ + { + metric: 'cpu_utilization', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'cpu_idle', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'cpu_wait', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'cpu_user', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'cpu_system', + valueType: VALUE_TYPE.percentage, + }, + ], + memory: [ + { + metric: 'memory_utilization', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'memory_used', + valueType: VALUE_TYPE.byte, + }, + { + metric: 'memory_free', + valueType: VALUE_TYPE.byte, + }, + ], + load: [ + { + metric: 'load_1m', + valueType: VALUE_TYPE.number, + }, + { + metric: 'load_5m', + valueType: VALUE_TYPE.number, + }, + { + metric: 'load_15m', + valueType: VALUE_TYPE.number, + }, + ], + disk: [ + { + metric: 'disk_used_percentage', + valueType: VALUE_TYPE.percentage, + }, + { + metric: 'disk_used', + valueType: VALUE_TYPE.byte, + }, + { + metric: 'disk_free', + valueType: VALUE_TYPE.byte, + }, + { + metric: 'disk_readbytes', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'disk_writebytes', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'disk_readiops', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'disk_writeiops', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'inode_utilization', + valueType: VALUE_TYPE.percentage, + }, + ], + network: [ + { + metric: 'network_in_rate', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'network_out_rate', + valueType: VALUE_TYPE.byteSecond, + }, + { + metric: 'network_in_errs', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'network_out_errs', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'network_in_packets', + valueType: VALUE_TYPE.numberSecond, + }, + { + metric: 'network_out_packets', + valueType: VALUE_TYPE.numberSecond, + }, + ], + }; export const SERVICE_SUPPORT_METRICS = { graph: [ @@ -437,19 +536,19 @@ export const LINUX = (cluster?) => { cpu_wait: `100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="iowait"${clusterSuffix1}}[1m])) / sum by (instance)(increase(node_cpu_seconds_total${clusterSuffix2}[1m])))`, cpu_user: `100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="user"${clusterSuffix1}}[1m])) / sum by (instance)(increase(node_cpu_seconds_total${clusterSuffix2}[1m])))`, cpu_system: `100 * (sum by (instance)(increase(node_cpu_seconds_total{mode="system"${clusterSuffix1}}[1m])) / sum by (instance)(increase(node_cpu_seconds_total${clusterSuffix2}[1m])))`, - + // memory relative: memory_utilization: `(1 - (node_memory_MemFree_bytes${clusterSuffix2}+ node_memory_Buffers_bytes${clusterSuffix2}+ node_memory_Cached_bytes${clusterSuffix2}) / node_memory_MemTotal_bytes${clusterSuffix2} )* 100`, memory_used: `node_memory_MemTotal_bytes${clusterSuffix2} - node_memory_MemFree_bytes${clusterSuffix2}- node_memory_Buffers_bytes${clusterSuffix2} - node_memory_Cached_bytes${clusterSuffix2}`, // memory_actual_used: `node_memory_MemTotal_bytes${clusterSuffix2} - node_memory_MemFree_bytes${clusterSuffix2} - node_memory_Buffers_bytes${clusterSuffix2} - node_memory_Cached_bytes${clusterSuffix2}`, memory_free: `node_memory_MemFree_bytes${clusterSuffix2}`, memory_size: `node_memory_MemTotal_bytes${clusterSuffix2}`, - + // node load relative: load_1m: `node_load1${clusterSuffix2}`, load_5m: `node_load5${clusterSuffix2}`, load_15m: `node_load15${clusterSuffix2}`, - + // disk relative: disk_used: `node_filesystem_size_bytes{${diskPararms}${clusterSuffix1}} - node_filesystem_free_bytes{${diskPararms}${clusterSuffix1}}`, disk_free: `node_filesystem_avail_bytes{${diskPararms}${clusterSuffix1}}`, @@ -459,7 +558,7 @@ export const LINUX = (cluster?) => { disk_writeiops: `irate(node_disk_writes_completed_total{device=~"(sd|nvme|hd)[a-z0-9]*"${clusterSuffix1}}[1m])`, inode_utilization: `(1- (node_filesystem_files_free{${diskPararms}${clusterSuffix1}}) / (node_filesystem_files{mountpoint="/",fstype!="rootfs"${clusterSuffix1}})) * 100`, disk_used_percentage: `(node_filesystem_size_bytes{${diskPararms}${clusterSuffix1}}-node_filesystem_free_bytes{${diskPararms}${clusterSuffix1}}) *100/(node_filesystem_avail_bytes {${diskPararms}${clusterSuffix1}}+(node_filesystem_size_bytes{${diskPararms}${clusterSuffix1}}-node_filesystem_free_bytes{${diskPararms}${clusterSuffix1}}))`, - + disk_size: `node_filesystem_size_bytes{${diskPararms}${clusterSuffix1}}`, network_in_rate: `ceil(sum by(instance)(irate(node_network_receive_bytes_total{device=~"(eth|en)[a-z0-9]*"${clusterSuffix1}}[1m])))`, network_out_rate: `ceil(sum by(instance)(irate(node_network_transmit_bytes_total{device=~"(eth|en)[a-z0-9]*"${clusterSuffix1}}[1m])))`,