Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:Add monitoring of tenant detail page #219

Merged
merged 3 commits into from
Mar 5, 2024
Merged

feat:Add monitoring of tenant detail page #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fa58b37
feat:Add monitor of tenant detail page
yang1666204 Mar 4, 2024
ac2f2e2
delete console
yang1666204 Mar 4, 2024
adb19cf
complete text
yang1666204 Mar 4, 2024
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
19 changes: 10 additions & 9 deletions ui/src/components/MonitorComp/LineGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { POINT_NUMBER } from '@/constants';
import { useRequestOfMonitor } from '@/hook/useRequestOfMonitor';
import type { QueryRangeType } from '@/pages/Cluster/Detail/Monitor';
import { getNSName } from '@/pages/Cluster/Detail/Overview/helper';
import type { QueryRangeType } from '@/components/MonitorDetail';
import { queryMetricsReq } from '@/services';
import { Line } from '@antv/g2plot';
import { useInViewport, useUpdateEffect } from 'ahooks';
Expand All @@ -22,34 +21,35 @@ export interface LineGraphProps {
metrics: MetricType[];
labels: API.MetricsLabels;
queryRange: QueryRangeType;
groupLabels:API.LableKeys[];
height?: number;
isRefresh?: boolean;
type?: API.MonitorUserFor;
type?: API.MonitorUseTarget;
useFor: API.MonitorUseFor;
}

export default function LineGraph({
id,
metrics,
labels,
queryRange,
groupLabels,
height = 186,
isRefresh = false,
type = 'DETAIL',
useFor
}: LineGraphProps) {
const [, chooseClusterName] = getNSName();
const [isEmpty, setIsEmpty] = useState<boolean>(true);
const [isloading, setIsloading] = useState<boolean>(true);
const lineGraphRef = useRef(null);
const lineInstanceRef = useRef<Line | null>(null);
const [inViewport] = useInViewport(lineGraphRef);
// 进入可见区域次数,只在第一次进入可见区域发起网络请求
const [inViewportCount, setInViewportCount] = useState<number>(0);
const groupLabels = _.uniq(labels.map((label) => label.key));

const getQueryParms = () => {
let metricsKeys: string[] = [metrics[0].key],
realLabels = labels;
if (chooseClusterName) {
if (type === 'DETAIL') {
metricsKeys = metrics.map((metric: MetricType) => metric.key);
}
if (type === 'OVERVIEW') realLabels = [];
Expand All @@ -58,7 +58,8 @@ export default function LineGraph({
labels: realLabels, //为空则查询全部集群
metrics: metricsKeys,
queryRange,
type
type,
useFor
};
};

Expand All @@ -67,7 +68,7 @@ export default function LineGraph({
for (let metric of metricsData) {
values.push(metric.value);
}

const config = {
data: metricsData,
xField: 'date',
Expand Down
34 changes: 27 additions & 7 deletions ui/src/components/MonitorComp/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { QuestionCircleOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { useRequest } from 'ahooks';
import { Card, Col, Row, Tooltip } from 'antd';
import { Card,Col,Row,Tooltip } from 'antd';
import { useState } from 'react';

import type { QueryRangeType } from '@/pages/Cluster/Detail/Monitor';
import type { QueryRangeType } from '@/components/MonitorDetail';
import { getAllMetrics } from '@/services';
import LineGraph, { LineGraphProps, MetricType } from './LineGraph';
import LineGraph,{ LineGraphProps,MetricType } from './LineGraph';
import styles from './index.less';

//查询的label
Expand All @@ -22,22 +22,25 @@ interface MonitorCompProps {
queryRange: QueryRangeType;
isRefresh?: boolean;
queryScope:API.EventObjectType;
type: API.MonitorUserFor;
type: API.MonitorUseTarget;
groupLabels:API.LableKeys[];
useFor?: API.MonitorUseFor;
}

export default function MonitorComp({
filterLabel,
queryRange,
isRefresh = false,
type,
queryScope
queryScope,
groupLabels,
useFor='cluster'
}: MonitorCompProps) {
const { data: allMetrics } = useRequest(getAllMetrics, {
defaultParams: [queryScope],
});
const [visible, setVisible] = useState(false);
const [modalProps, setModalProps] = useState<LineGraphProps>({});

const Title = ({
metrics,
name,
Expand Down Expand Up @@ -78,7 +81,7 @@ export default function MonitorComp({
<ProCard bodyStyle={{ padding: 0 }}>
<div>
<div className={styles.monitorHeader}>
{type === 'overview' ? (
{type === 'OVERVIEW' ? (
<h2>{container.name}</h2>
) : (
<p className={styles.headerText}>{container.name}</p>
Expand All @@ -91,6 +94,21 @@ export default function MonitorComp({
<div className={styles.graphHeader}>
<span className={styles.graphHeaderText}>
{graphContainer.name}
{graphContainer.metrics[0].unit &&
`(
${graphContainer.metrics[0].unit}
${
(graphContainer.metrics[0].unit && type) ===
'OVERVIEW'
? ','
: ''
}
${
type === 'OVERVIEW'
? graphContainer.metrics[0].key
: ''
}
)`}
</span>
{/* <Tooltip title="放大查看">
<FullscreenOutlined
Expand Down Expand Up @@ -121,7 +139,9 @@ export default function MonitorComp({
queryRange={queryRange}
metrics={graphContainer.metrics}
labels={filterLabel}
groupLabels={groupLabels}
type={type}
useFor={useFor}
/>
</Card>
),
Expand Down
127 changes: 66 additions & 61 deletions ...ges/Cluster/Detail/Monitor/DataFilter.tsx → ...c/components/MonitorDetail/DataFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { POINT_NUMBER, REFRESH_FREQUENCY } from '@/constants';
import { POINT_NUMBER,REFRESH_FREQUENCY } from '@/constants';
import { intl } from '@/utils/intl';
import { ProCard } from '@ant-design/pro-components';
import { useUpdateEffect } from 'ahooks';
import { Col, DatePicker, Row, Select, Switch } from 'antd';
import { Col,DatePicker,Row,Select,Switch } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import moment from 'moment';
import { useEffect, useState } from 'react';
import { useEffect,useState } from 'react';
import { caculateStep } from './helper';
import type {
FilterDataType,
Label,
LabelType,
OptionType,
QueryRangeType,
FilterDataType,
Label,
LabelType,
OptionType,
QueryRangeType,
} from './index';
import styles from './index.less';

Expand All @@ -26,7 +26,7 @@ interface DataFilterProps {
queryRange: QueryRangeType;
setQueryRange: React.Dispatch<React.SetStateAction<QueryRangeType>>;
setIsRefresh: React.Dispatch<React.SetStateAction<boolean>>;
setFilterLable: React.Dispatch<React.SetStateAction<LabelType[]>>;
setFilterLabel: React.Dispatch<React.SetStateAction<LabelType[]>>;
setFilterData: React.Dispatch<React.SetStateAction<FilterDataType>>;
}
const { RangePicker } = DatePicker;
Expand Down Expand Up @@ -91,16 +91,14 @@ const DateSelectOption: OptionType[] = [

type RangeValue = [Dayjs | null, Dayjs | null] | null;

//选择时间下拉框改变右边时间选择框
//所以右边时间选择框需要value属性 受控
export default function DataFilter({
isRefresh,
realTime,
filterData,
filterLabel, //发送请求的label
queryRange, //defaultVAlue
setIsRefresh,
setFilterLable,
setFilterLabel,
setQueryRange,
}: DataFilterProps) {
const [zoneOption, setZoneOption] = useState<OptionType[]>([]);
Expand Down Expand Up @@ -190,10 +188,10 @@ export default function DataFilter({
let isClear: boolean = !Boolean(val),
currentLable = [...filterLabel];
if (isClear) {
//清空obzone&svr_ip
//clear obzone&svr_ip
currentLable = clearLabel(clearLabel(filterLabel, 'obzone'), 'svr_ip');
} else {
//更新zone后清空server
//clear the server after updating the zone
currentLable = clearLabel(
updateLable(filterLabel, 'obzone', val!),
'svr_ip',
Expand All @@ -205,16 +203,18 @@ export default function DataFilter({
const zoneSelectChange = (val: string | undefined) => {
setSelectZone(val);
setSelectServer(undefined);
setFilterLable(handleLabel(val));
//清空
if (typeof val === 'undefined') {
setServerOption(filterData.serverList);
return;
setFilterLabel(handleLabel(val));
//clear
if(filterData.serverList){
if (typeof val === 'undefined') {
setServerOption(filterData.serverList);
return;
}
const filterServers = filterData.serverList.filter((server: OptionType) => {
return server.zone === val;
});
setServerOption(filterServers);
}
const filterServers = filterData.serverList.filter((server: OptionType) => {
return server.zone === val;
});
setServerOption(filterServers);
};

const serverSelectChange = (val: string | undefined) => {
Expand All @@ -225,7 +225,7 @@ export default function DataFilter({
} else {
lable = updateLable(lable, 'svr_ip', val!);
}
setFilterLable(lable);
setFilterLabel(lable);
setSelectServer(val);
};

Expand Down Expand Up @@ -276,10 +276,10 @@ export default function DataFilter({
};

useUpdateEffect(() => {
if (filterData.zoneList.length) {
if (filterData?.zoneList?.length) {
setZoneOption(filterData.zoneList);
}
if (filterData.serverList.length) {
if (filterData?.serverList?.length) {
setServerOption(filterData.serverList);
}
}, [filterData]);
Expand Down Expand Up @@ -319,41 +319,46 @@ export default function DataFilter({
extra={<AutoRefresh />}
>
<Row gutter={12} style={{ alignItems: 'center' }}>
<Col span={5}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<span style={{ marginRight: 8 }}>Zone:</span>
<Select
value={selectZone}
onChange={zoneSelectChange}
allowClear
style={{ width: '100%' }}
showSearch
placeholder={intl.formatMessage({
id: 'OBDashboard.Detail.Monitor.DataFilter.All',
defaultMessage: '全部',
})}
options={zoneOption}
/>
</div>
</Col>
<Col span={5}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{' '}
<span style={{ marginRight: 8 }}>OBServer:</span>
<Select
value={selectServer}
onChange={serverSelectChange}
allowClear
style={{ width: '100%' }}
showSearch
placeholder={intl.formatMessage({
id: 'OBDashboard.Detail.Monitor.DataFilter.All',
defaultMessage: '全部',
})}
options={serverOption}
/>{' '}
</div>
</Col>
{filterData.zoneList && (
<Col span={5}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<span style={{ marginRight: 8 }}>Zone:</span>
<Select
value={selectZone}
onChange={zoneSelectChange}
allowClear
style={{ width: '100%' }}
showSearch
placeholder={intl.formatMessage({
id: 'OBDashboard.Detail.Monitor.DataFilter.All',
defaultMessage: '全部',
})}
options={zoneOption}
/>
</div>
</Col>
)}

{filterData.serverList && (
<Col span={5}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{' '}
<span style={{ marginRight: 8 }}>OBServer:</span>
<Select
value={selectServer}
onChange={serverSelectChange}
allowClear
style={{ width: '100%' }}
showSearch
placeholder={intl.formatMessage({
id: 'OBDashboard.Detail.Monitor.DataFilter.All',
defaultMessage: '全部',
})}
options={serverOption}
/>{' '}
</div>
</Col>
)}
<Col span={14}>
<div
className={styles.selectRangeTimeContainer}
Expand Down
Loading
Loading