Skip to content

Commit

Permalink
feat: customize cloud metrics (#88)
Browse files Browse the repository at this point in the history 
feat: update icon from fill to color
  • Loading branch information
@xigongdaEricyang
xigongdaEricyang authored Jul 6, 2022
1 parent 84f8dd0 commit 684c345
Show file tree
Hide file tree
Showing 14 changed files with 359 additions and 181 deletions.
120 changes: 83 additions & 37 deletions src/components/Charts/SpaceChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -60,41 +67,53 @@ function SpaceChart(props: IProps) {
return curInstances.map(instance => {
const displayInfos = getDisplayInfos(diskInfoMap[instance] || []);
return (
<div key={instance} className="disk-tr">
<div className='disk-tr-item disk-name'>
<Popover
content={instance}
placement='topLeft'
>
<div className='disk-tr-item-info text-overflow'>{instance}</div>
</Popover>
</div>
<div className='disk-tr-item'>
{
displayInfos.map(i => i.device).map((device, i) => (
<div key={instance} className="disk-tr" style={{ gridTemplateColumns: gridValue }}>
{
diskThs.name && (
<div className='disk-tr-item disk-name'>
<Popover
key={i}
content={device}
content={instance}
placement='topLeft'
>
<div className='disk-tr-item-info text-overflow'>{device}</div>
</Popover>
))
}
</div>
<div className='disk-tr-item'>
{
displayInfos.map(i => i.mountpoint).map((mountpoint, i) => (
<Popover
key={i}
content={mountpoint}
placement='top'
>
<div className='disk-tr-item-info text-overflow'>{mountpoint}</div>
<div className='disk-tr-item-info text-overflow'>{instance}</div>
</Popover>
))
}
</div>
</div>
)
}
{
diskThs.device && (
<div className='disk-tr-item'>
{
displayInfos.map(i => i.device).map((device, i) => (
<Popover
key={i}
content={device}
placement='topLeft'
>
<div className='disk-tr-item-info text-overflow'>{device}</div>
</Popover>
))
}
</div>
)
}
{
diskThs.mountpoint && (
<div className='disk-tr-item'>
{
displayInfos.map(i => i.mountpoint).map((mountpoint, i) => (
<Popover
key={i}
content={mountpoint}
placement='top'
>
<div className='disk-tr-item-info text-overflow'>{mountpoint}</div>
</Popover>
))
}
</div>
)
}
<div className='disk-tr-item'>
{
displayInfos.map((displayInfo, i) => (
Expand All @@ -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 (
<div className="disk-th" style={{ gridTemplateColumns: gridValue }}>
{
diskThs.name && <div>{intl.get('base.spaceChartInstance')}</div>
}
{
diskThs.device && <div>{intl.get('base.spaceChartDiskname')}</div>
}
{
diskThs.mountpoint && <div>{intl.get('base.spaceChartMountpoint')}</div>
}
<div>{intl.get('base.spaceChartDiskused')}</div>
</div>
)
}

return (
<div className="nebula-chart nebula-chart-space">
<div className='space-instance'>
<div className="disk-info-content">
<div className="disk-th">
<div>{intl.get('base.spaceChartInstance')}</div>
<div>{intl.get('base.spaceChartDiskname')}</div>
<div>{intl.get('base.spaceChartMountpoint')}</div>
<div>{intl.get('base.spaceChartDiskused')}</div>
</div>
{renderDiskTabelHead()}
</div>
{renderDiskInfo()}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Instruction/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/MetricsFilterPanel/index.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
10 changes: 6 additions & 4 deletions src/pages/MachineDashboard/Cards/DiskCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MachineDashboard/Cards/LoadCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MachineDashboard/Cards/MemoryCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MachineDashboard/Detail/DiskDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MachineDashboard/Detail/LoadDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MachineDashboard/Detail/MemoryDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});

Expand Down
10 changes: 5 additions & 5 deletions src/pages/MainPage/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
}

.menu-icon {
fill: #fff;
color: #fff;
width: 16px;
height: 16px;
margin-right: 10px;
Expand All @@ -57,7 +57,7 @@
.ant-menu-submenu-title {
// background-color: #1E2025;
.icon {
fill: #fff;
color: #fff;
width: 16px;
height: 16px;
margin-left: 0;
Expand Down Expand Up @@ -94,7 +94,7 @@
cursor: pointer;

.menu-btn {
fill: #fff;
color: #fff;
width: 16px;
height: 16px;
}
Expand All @@ -121,7 +121,7 @@
cursor: pointer;

.menu-collapse-icon {
fill: #fff;
color: #fff;
width: 16px;
height: 16px;
}
Expand Down Expand Up @@ -167,7 +167,7 @@
margin: 0 !important;

.menu-icon {
fill: #fff;
color: #fff;
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/store/models/machine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
35 changes: 32 additions & 3 deletions src/utils/dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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'];
Expand Down Expand Up @@ -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
}
}
Expand All @@ -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
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/utils/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,6 @@ export enum MetricScene {
CPU,
NETWORK,
DISK,
MEMORY,
LOAD,
}
Loading

0 comments on commit 684c345

Please sign in to comment.