From cd603d73f18143924d53f4d4c87ac29b6ecf25c4 Mon Sep 17 00:00:00 2001 From: johnny19941216 Date: Wed, 27 Apr 2022 11:00:34 +0800 Subject: [PATCH 1/3] feat(console): add vm monitor panel --- .../virtual-machine/components/index.ts | 2 + .../components/vmMonitorDialog.tsx | 48 +++++++++++ .../virtual-machine/constants/index.tsx | 81 +++++++++++++++++++ .../pages/list/action-panel.tsx | 31 ++++--- .../virtual-machine/pages/list/index.tsx | 2 +- 5 files changed, 151 insertions(+), 13 deletions(-) create mode 100644 web/console/src/modules/cluster/components/resource/virtual-machine/components/vmMonitorDialog.tsx diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/components/index.ts b/web/console/src/modules/cluster/components/resource/virtual-machine/components/index.ts index ea8a10ca8..465f90cb6 100644 --- a/web/console/src/modules/cluster/components/resource/virtual-machine/components/index.ts +++ b/web/console/src/modules/cluster/components/resource/virtual-machine/components/index.ts @@ -5,3 +5,5 @@ export { DelButton } from './delButton'; export { ShutdownButton } from './shutdownButton'; export { VNCButton } from './vncButton'; + +export { VmMonitorDialog } from './vmMonitorDialog'; diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/components/vmMonitorDialog.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/components/vmMonitorDialog.tsx new file mode 100644 index 000000000..bd5f548fc --- /dev/null +++ b/web/console/src/modules/cluster/components/resource/virtual-machine/components/vmMonitorDialog.tsx @@ -0,0 +1,48 @@ +import React, { useMemo, useState } from 'react'; +import { Modal, Button } from 'tea-component'; +import { ChartInstancesPanel } from '@tencent/tchart'; +import { vmMonitorFields } from '../constants'; + +export const VmMonitorDialog = ({ clusterId, namespace, vmList }) => { + const [visible, setVisible] = useState(false); + + const monitorProps = useMemo(() => { + return { + tables: [ + { + fields: vmMonitorFields, + table: 'vm', + conditions: [ + ['tke_cluster_instance_id', '=', clusterId], + + ['namespace', '=', namespace] + ] + } + ], + + groupBy: [{ value: 'name' }], + + instance: { + columns: [{ key: 'name', name: 'vm 名称' }], + list: vmList.map(vm => ({ + name: vm?.name, + isChecked: [] + })) + } + }; + }, [clusterId, namespace, vmList]); + + return ( + <> + + + setVisible(false)}> + + + + + + ); +}; diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx index efc9f0ebb..a066c6d2a 100644 --- a/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx +++ b/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx @@ -63,3 +63,84 @@ export const VMDetailTabOptions = [ label: '事件' } ]; + +const mean = str => `mean(${str})`; +const sum = str => `sum(${str})`; + +export const vmMonitorFields: Array<{ + expr: string; + alias: string; + unit: string; +}> = [ + { + expr: mean('vm_cpu_core_total'), + alias: 'CPU 核数', + unit: '核' + }, + + { + expr: mean('vm_cpu_usage'), + alias: 'CPU 使用率', + unit: '%' + }, + + { + expr: mean('vm_memory_total'), + alias: '内存大小', + unit: 'MB' + }, + + { + expr: mean('vm_memory_usage'), + alias: '内存使用率', + unit: '%' + }, + + { + expr: mean('vm_network_transmit_bytes_bw'), + alias: '网络上行带宽 （基于每个网卡）', + unit: 'Mbps' + }, + + { + expr: mean('vm_network_receive_bytes_bw'), + alias: '网络下行带宽 （基于每个网卡）', + unit: 'Mbps' + }, + + { + expr: mean('vm_network_transmit_packets_rate'), + alias: '网络收包速率 （基于每个网卡）', + unit: 'PPS' + }, + + { + expr: mean('vm_network_receive_packets_rate'), + alias: '网络发包速率 （基于每个网卡）', + unit: 'PPS' + }, + + { + expr: mean('vm_storage_read_bw'), + alias: '磁盘读带宽 （基于每块磁盘）', + unit: 'MB/s' + }, + + { + expr: mean('vm_storage_write_bw'), + alias: '磁盘写带宽 （基于每块磁盘）', + unit: 'MB/s' + }, + + { + expr: mean('vm_storage_read_iops'), + alias: '磁盘读IOPS （基于每块磁盘）', + unit: 'IOPS' + }, + + { + expr: mean('vm_storage_write_iops'), + alias: '磁盘写IOPS （基于每块磁盘）', + unit: 'IOPS' + } +]; diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx index 3b3cf6426..d346b594f 100644 --- a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx +++ b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/action-panel.tsx @@ -1,26 +1,33 @@ import React, { useEffect, useState } from 'react'; import { Table, Justify, Button, Select, TagSearchBox, Text } from 'tea-component'; -import { useRecoilValueLoadable, useRecoilState } from 'recoil'; -import { namespaceListState, namespaceSelectionState } from '../../store/base'; +import { useRecoilValueLoadable, useRecoilState, useRecoilValue } from 'recoil'; +import { namespaceListState, namespaceSelectionState, clusterIdState } from '../../store/base'; import { router } from '@src/modules/cluster/router'; +import { VmMonitorDialog } from '../../components'; -export const VMListActionPanel = ({ route, reFetch }) => { +export const VMListActionPanel = ({ route, reFetch, vmList }) => { const namespaceListLoadable = useRecoilValueLoadable(namespaceListState); const [namespaceSelection, setNamespaceSelection] = useRecoilState(namespaceSelectionState); + const clusterId = useRecoilValue(clusterIdState); + return ( { - const urlParams = router.resolve(route); - router.navigate(Object.assign({}, urlParams, { mode: 'create' }), route.queries); - }} - > - 新建 - + <> + + + + } right={ <> diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx index 26efe007f..e047c45c5 100644 --- a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx +++ b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx @@ -165,7 +165,7 @@ export const VMListPanel = ({ route }) => { return ( <> - + Date: Fri, 6 May 2022 15:39:17 +0800 Subject: [PATCH 2/3] fix(console): fix create notify template error --- .../virtual-machine/constants/index.tsx | 8 ++++---- .../modules/notify/actions/resourceActions.ts | 19 ++++++++++--------- .../modules/notify/schema/templateSchema.ts | 17 ++++++++++++++--- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx index a066c6d2a..b2d25d9eb 100644 --- a/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx +++ b/web/console/src/modules/cluster/components/resource/virtual-machine/constants/index.tsx @@ -79,7 +79,7 @@ export const vmMonitorFields: Array<{ }, { - expr: mean('vm_cpu_usage'), + expr: mean('vm_cpu_usage_rate'), alias: 'CPU 使用率', unit: '%' }, @@ -91,19 +91,19 @@ export const vmMonitorFields: Array<{ }, { - expr: mean('vm_memory_usage'), + expr: mean('vm_memory_usage_rate'), alias: '内存使用率', unit: '%' }, { - expr: mean('vm_network_transmit_bytes_bw'), + expr: mean('vm_network_transmit_bw'), alias: '网络上行带宽 （基于每个网卡）', unit: 'Mbps' }, { - expr: mean('vm_network_receive_bytes_bw'), + expr: mean('vm_network_receive_bw'), alias: '网络下行带宽 （基于每个网卡）', unit: 'Mbps' }, diff --git a/web/console/src/modules/notify/actions/resourceActions.ts b/web/console/src/modules/notify/actions/resourceActions.ts index 3875e6876..9eb440564 100644 --- a/web/console/src/modules/notify/actions/resourceActions.ts +++ b/web/console/src/modules/notify/actions/resourceActions.ts @@ -24,7 +24,7 @@ import { router } from '../router'; import * as WebAPI from '../WebAPI'; type GetState = () => RootState; -let rc = resourceConfig(); +const rc = resourceConfig(); export const resourceActions = { channel: createFFListActionsFactory('channel'), @@ -37,13 +37,14 @@ function createFFListActionsFactory(resourceName) { return createFFListActions({ actionName: resourceName, fetcher: async (query, getState: GetState, fetchOptions) => { - let resourceInfo: ResourceInfo = rc[resourceName]; - let resourceItems = await WebAPI.fetchResourceList(query, resourceInfo); + const resourceInfo: ResourceInfo = rc[resourceName]; + // 这里获取列表的时候都不需要namespace，但是template的resourceInfo上namespaces为true + const resourceItems = await WebAPI.fetchResourceList(query, { ...resourceInfo, namespaces: false }); - let { route, receiverGroup } = getState(); - let urlParams = router.resolve(route); + const { route, receiverGroup } = getState(); + const urlParams = router.resolve(route); if (resourceName === 'receiver' && urlParams.resourceName === 'receiverGroup' && urlParams.mode === 'detail') { - let rg = receiverGroup.list.data.records.find(rg => rg.metadata.name === route.queries.resourceIns); + const rg = receiverGroup.list.data.records.find(rg => rg.metadata.name === route.queries.resourceIns); if (rg) { resourceItems.records = resourceItems.records.filter(item => rg.spec.receivers.find(r => r === item.metadata.name) @@ -56,12 +57,12 @@ function createFFListActionsFactory(resourceName) { } resourceItems.recordCount = resourceItems.records.length; - let response = resourceItems; + const response = resourceItems; // 告警编辑页里有receiver group 根据id过滤，选中对应id if (fetchOptions && fetchOptions.data) { fetchOptions.data.forEach(item => { - let finder = response.records.find(group => group.metadata.name === item); + const finder = response.records.find(group => group.metadata.name === item); finder && (finder.selected = true); }); } @@ -71,7 +72,7 @@ function createFFListActionsFactory(resourceName) { return getState()[resourceName]; }, onFinish: (record, dispatch) => { - let selects = record.data.records.filter(r => r.selected); + const selects = record.data.records.filter(r => r.selected); // 告警编辑页里有receiver group 根据id过滤，选中对应id if (selects) { dispatch(resourceActions[resourceName].selects(selects)); diff --git a/web/console/src/modules/notify/schema/templateSchema.ts b/web/console/src/modules/notify/schema/templateSchema.ts index 9375307ee..c3339dccf 100644 --- a/web/console/src/modules/notify/schema/templateSchema.ts +++ b/web/console/src/modules/notify/schema/templateSchema.ts @@ -47,7 +47,12 @@ export const templateSchema = { properties: { body: { ...TYPES.string, required: true, placeholder: '请输入body', bodyTip: true }, sign: { ...TYPES.string, required: true, placeholder: '请输入腾讯云短信服务签名ID', smsSignTip: true }, - templateID: { ...TYPES.string, required: true, placeholder: '请输入腾讯云短信服务消息模板ID', smsTemplateIDTip: true } + templateID: { + ...TYPES.string, + required: true, + placeholder: '请输入腾讯云短信服务消息模板ID', + smsTemplateIDTip: true + } } }, wechat: { @@ -60,10 +65,16 @@ export const templateSchema = { }, webhook: { properties: { - body: { ...TYPES.string, required: true, placeholder: '请输入body', bodyTip: true, value: '{{.summary}}' }, + body: { + ...TYPES.string, + required: true, + placeholder: '请输入body,例如：{{.summary}}', + bodyTip: true, + value: '' + }, header: { ...TYPES.string, required: true, placeholder: '请输入消息头' } } - }, + } } } } From d68a07e69d654af0c26ec83e50177bbdcd1e6691 Mon Sep 17 00:00:00 2001 From: johnny19941216 Date: Mon, 9 May 2022 19:30:33 +0800 Subject: [PATCH 3/3] feat(console): support create vm alarm --- web/console/src/modules/alarmPolicy/WebAPI.ts | 174 +++++++++++++----- .../alarmPolicy/actions/alarmPolicyActions.ts | 104 +++++------ .../alarmPolicy/actions/namespaceActions.ts | 10 +- .../components/AlarmPolicyTablePanel.tsx | 11 +- .../components/EditAlarmPolicyObject.tsx | 30 ++- .../components/EditAlarmPolicyPanel.tsx | 28 ++- .../components/EditAlarmPolicyVM.tsx | 139 ++++++++++++++ .../modules/alarmPolicy/constants/Config.ts | 136 ++++++++++++++ 8 files changed, 501 insertions(+), 131 deletions(-) create mode 100644 web/console/src/modules/alarmPolicy/components/EditAlarmPolicyVM.tsx diff --git a/web/console/src/modules/alarmPolicy/WebAPI.ts b/web/console/src/modules/alarmPolicy/WebAPI.ts index a6d377f04..fc67c9615 100644 --- a/web/console/src/modules/alarmPolicy/WebAPI.ts +++ b/web/console/src/modules/alarmPolicy/WebAPI.ts @@ -47,14 +47,14 @@ function humanizeDuration4Time(initSecons: number) { let result = ''; if (seconds > 3600) { - let hours = Math.floor(seconds / 3600); + const hours = Math.floor(seconds / 3600); result += hours >= 10 ? `${hours}:` : `0${hours}:`; seconds -= hours * 3600; } else { result += `00:`; } if (seconds > 60) { - let minutes = Math.floor(seconds / 60); + const minutes = Math.floor(seconds / 60); result += minutes >= 10 ? `${minutes}:` : `0${minutes}:`; seconds -= minutes * 60; } else { @@ -73,13 +73,13 @@ function operationResult(target: T[] | T, error?: any): OperationResult[] /**获取Alarm列表 */ export async function fetchAlarmPolicy(query: QueryState) { - let { + const { paging, filter: { clusterId, namespace, alarmPolicyType } } = query; let alarmPolicyList: AlarmPolicy[] = []; - let resourceInfo: ResourceInfo = resourceConfig().alarmPolicy; - let url = reduceK8sRestfulPath({ + const resourceInfo: ResourceInfo = resourceConfig().alarmPolicy; + const url = reduceK8sRestfulPath({ resourceInfo: { ...resourceInfo, requestType: { @@ -87,12 +87,12 @@ export async function fetchAlarmPolicy(query: QueryState) { } } }); - let params: RequestParams = { + const params: RequestParams = { method: Method.get, url }; if (paging) { - let { pageIndex, pageSize } = paging; + const { pageIndex, pageSize } = paging; params['page'] = pageIndex; params['page_size'] = pageSize; @@ -113,7 +113,7 @@ export async function fetchAlarmPolicy(query: QueryState) { let total = 0; let items = []; try { - let response = await reduceNetworkRequest(params); + const response = await reduceNetworkRequest(params); if (response.code === 0) { items = response.data.data.alarmPolicies.map(item => { return Object.assign({}, item, { id: uuid() }); @@ -130,12 +130,12 @@ export async function fetchAlarmPolicy(query: QueryState) { // let response = await sendCapiRequest('tke', 'DescribeAlarmPolicies', params, query.filter.regionId); alarmPolicyList = items.map(item => { - let alarmPolicyMetricsConfig = + const alarmPolicyMetricsConfig = (item.AlarmPolicySettings.AlarmPolicyType === 'cluster' ? AlarmPolicyMetrics['independentClusetr'] : AlarmPolicyMetrics[item.AlarmPolicySettings.AlarmPolicyType]) || []; item.ShieldSettings = item.ShieldSettings || {}; - let temp = { + const temp = { id: item.AlarmPolicyId || item.AlarmPolicySettings.AlarmPolicyName, alarmPolicyId: item.AlarmPolicyId || item.AlarmPolicySettings.AlarmPolicyName, clusterId: query.filter.clusterId, @@ -168,8 +168,8 @@ export async function fetchAlarmPolicy(query: QueryState) { temp.alarmObjetcs = item.AlarmPolicySettings.AlarmObjects ? item.AlarmPolicySettings.AlarmObjects.split(',') : []; } item.AlarmPolicySettings.AlarmMetrics.forEach(metric => { - let finder = alarmPolicyMetricsConfig.find(config => config.metricName === metric.MetricName); - let tempMetrics = { + const finder = alarmPolicyMetricsConfig.find(config => config.metricName === metric.MetricName); + const tempMetrics = { type: finder ? finder.type : 'percent', measurement: metric.Measurement, metricId: metric.MetricId, @@ -201,8 +201,93 @@ export async function fetchAlarmPolicy(query: QueryState) { return result; } +function getAlarmPolicyParams_({ + alarmPolicyEdition, + clusterId, + receiverGroups +}: { + alarmPolicyEdition: AlarmPolicyEdition; + clusterId: string; + receiverGroups: any; +}) { + let Namespace = undefined; + let WorkloadType = undefined; + const AlarmObjects = alarmPolicyEdition.alarmObjects.join(','); + + if (alarmPolicyEdition?.alarmPolicyType === 'pod' || alarmPolicyEdition?.alarmPolicyType === 'virtualMachine') { + if (alarmPolicyEdition?.alarmObjectsType === 'all') { + if (alarmPolicyEdition.alarmObjectNamespace !== 'ALL') { + Namespace = reduceNs(alarmPolicyEdition.alarmObjectNamespace); + } + if (alarmPolicyEdition.alarmObjectWorkloadType !== 'ALL') { + WorkloadType = alarmPolicyEdition.alarmObjectWorkloadType; + } + } else { + Namespace = reduceNs(alarmPolicyEdition?.alarmObjectNamespace); + WorkloadType = alarmPolicyEdition?.alarmObjectWorkloadType; + } + } + + return { + ClusterInstanceId: clusterId, + AlarmPolicyId: alarmPolicyEdition.alarmPolicyId, + AlarmPolicySettings: { + AlarmPolicyName: alarmPolicyEdition.alarmPolicyName, + AlarmPolicyDescription: alarmPolicyEdition.alarmPolicyDescription, + AlarmPolicyType: alarmPolicyEdition.alarmPolicyType, + statisticsPeriod: alarmPolicyEdition.statisticsPeriod * 60, + AlarmObjects, + AlarmObjectsType: alarmPolicyEdition.alarmObjectsType, + + AlarmMetrics: alarmPolicyEdition?.alarmMetrics + ?.filter(({ enable }) => enable) + ?.map( + ({ + measurement, + metricName, + metricDisplayName, + evaluatorType, + evaluatorValue, + continuePeriod, + unit, + metricId + }) => { + const isPodMem = ['k8s_pod_mem_no_cache_bytes', 'k8s_pod_mem_usage_bytes'].includes(metricName); + + return { + Measurement: measurement, + MetricName: metricName, + MetricDisplayName: metricDisplayName, + Evaluator: { + Type: evaluatorType, + Value: isPodMem ? +evaluatorValue * 1024 * 1024 + '' : evaluatorValue + }, + ContinuePeriod: continuePeriod, + Unit: isPodMem ? 'B' : unit, + MetricId: metricId || undefined + }; + } + ) + }, + NotifySettings: { + ReceiverGroups: receiverGroups?.selections?.map(group => group.metadata.name), + NotifyWay: alarmPolicyEdition?.notifyWays?.map(({ channel, template }) => ({ + ChannelName: channel, + TemplateName: template + })) + }, + + ShieldSettings: { + EnableShield: false + }, + + Namespace, + WorkloadType + }; +} + function getAlarmPolicyParams(alarmPolicyEdition: AlarmPolicyEdition[], opreator: AlarmPolicyOperator, receiverGroups) { - let params = { + const params = { ClusterInstanceId: opreator.clusterId, AlarmPolicyId: alarmPolicyEdition[0].alarmPolicyId, AlarmPolicySettings: { @@ -241,7 +326,7 @@ function getAlarmPolicyParams(alarmPolicyEdition: AlarmPolicyEdition[], opreator alarmPolicyEdition[0].alarmMetrics.forEach(item => { if (item.enable) { - let metrics = { + const metrics = { Measurement: item.measurement, // StatisticsPeriod: item.statisticsPeriod * 60, MetricName: item.metricName, @@ -273,10 +358,15 @@ export async function editAlarmPolicy( opreator: AlarmPolicyOperator, receiverGroup ) { - let params = getAlarmPolicyParams(alarmPolicyEdition, opreator, receiverGroup); - let clusterId = opreator.clusterId; + const clusterId = opreator.clusterId; + + const params = getAlarmPolicyParams_({ + alarmPolicyEdition: alarmPolicyEdition?.[0], + clusterId, + receiverGroups: receiverGroup + }); - let resourceInfo: ResourceInfo = resourceConfig().alarmPolicy; + const resourceInfo: ResourceInfo = resourceConfig().alarmPolicy; let url = reduceK8sRestfulPath({ resourceInfo: { ...resourceInfo, @@ -291,7 +381,7 @@ export async function editAlarmPolicy( } try { - let response = await reduceNetworkRequest({ + const response = await reduceNetworkRequest({ method: params.AlarmPolicyId ? Method.put : Method.post, data: params, url @@ -312,9 +402,9 @@ export async function editAlarmPolicy( /**删除告警设置列表 */ export async function deleteAlarmPolicy(alarmPolicys: AlarmPolicy[], opreator: AlarmPolicyOperator) { - let clusterId = opreator.clusterId; - let resourceInfo: ResourceInfo = resourceConfig().alarmPolicy; - let url = reduceK8sRestfulPath({ + const clusterId = opreator.clusterId; + const resourceInfo: ResourceInfo = resourceConfig().alarmPolicy; + const url = reduceK8sRestfulPath({ resourceInfo: { ...resourceInfo, requestType: { @@ -323,7 +413,7 @@ export async function deleteAlarmPolicy(alarmPolicys: AlarmPolicy[], opreator: A } }); try { - let response = await Promise.all( + const response = await Promise.all( alarmPolicys.map(alarmPolicy => reduceNetworkRequest({ method: Method.delete, @@ -350,11 +440,11 @@ export async function deleteAlarmPolicy(alarmPolicys: AlarmPolicy[], opreator: A * @param namespaceInfo 当前namespace查询api的配置 */ export async function fetchNamespaceList(query: QueryState, namespaceInfo: ResourceInfo) { - let { filter, search } = query; - let { clusterId, regionId } = filter; + const { filter, search } = query; + const { clusterId, regionId } = filter; let namespaceList = []; - let k8sUrl = `/${namespaceInfo.basicEntry}/${namespaceInfo.version}/${namespaceInfo.requestType['list']}`; + const k8sUrl = `/${namespaceInfo.basicEntry}/${namespaceInfo.version}/${namespaceInfo.requestType['list']}`; let url = k8sUrl; if (search) { @@ -362,7 +452,7 @@ export async function fetchNamespaceList(query: QueryState, nam } /** 构建参数 */ - let params: RequestParams = { + const params: RequestParams = { method: Method.get, url, apiParams: { @@ -381,10 +471,10 @@ export async function fetchNamespaceList(query: QueryState, nam }; try { - let response = await reduceNetworkRequest(params, clusterId); + const response = await reduceNetworkRequest(params, clusterId); if (response.code === 0) { - let list = JSON.parse(response.data.ResponseBody); + const list = JSON.parse(response.data.ResponseBody); if (list.items) { namespaceList = list.items.map(item => { return { @@ -421,15 +511,15 @@ export async function fetchNamespaceList(query: QueryState, nam * @param resourceInfo: ResouceInfo 当前请求数据url的基本配置 */ export async function fetchUserPortal(resourceInfo: ResourceInfo) { - let url = reduceK8sRestfulPath({ resourceInfo }); + const url = reduceK8sRestfulPath({ resourceInfo }); // 构建参数 - let params: RequestParams = { + const params: RequestParams = { method: Method.get, url }; - let response = await reduceNetworkRequest(params); + const response = await reduceNetworkRequest(params); return response.data; } @@ -438,25 +528,25 @@ export async function fetchUserPortal(resourceInfo: ResourceInfo) { * @param query Namespace查询的一些过滤条件 */ export async function fetchProjectNamespaceList(query: QueryState) { - let { filter } = query; - let NamespaceResourceInfo: ResourceInfo = resourceConfig().namespaces; - let url = reduceK8sRestfulPath({ + const { filter } = query; + const NamespaceResourceInfo: ResourceInfo = resourceConfig().namespaces; + const url = reduceK8sRestfulPath({ resourceInfo: NamespaceResourceInfo, specificName: filter.specificName, extraResource: 'namespaces' }); /** 构建参数 */ - let method = 'GET'; - let params: RequestParams = { + const method = 'GET'; + const params: RequestParams = { method, url }; - let response = await reduceNetworkRequest(params); + const response = await reduceNetworkRequest(params); let namespaceList = [], total = 0; if (response.code === 0) { - let list = response.data; + const list = response.data; total = list.items.length; namespaceList = list.items.map(item => { return Object.assign({}, item, { id: uuid(), name: item.metadata.name }); @@ -472,17 +562,17 @@ export async function fetchProjectNamespaceList(query: QueryState { return Object.assign({}, item, { id: uuid() }); diff --git a/web/console/src/modules/alarmPolicy/actions/alarmPolicyActions.ts b/web/console/src/modules/alarmPolicy/actions/alarmPolicyActions.ts index e26fbc5a7..032da869c 100644 --- a/web/console/src/modules/alarmPolicy/actions/alarmPolicyActions.ts +++ b/web/console/src/modules/alarmPolicy/actions/alarmPolicyActions.ts @@ -42,7 +42,7 @@ const _alarmPolicyActions = createFFListActions( return getState().alarmPolicy; }, onFinish: (record, dispatch, getState: GetState) => { - let { sub } = router.resolve(getState().route); + const { sub } = router.resolve(getState().route); if (sub !== '') { dispatch(alarmPolicyActions.initAlarmPolicyData()); } @@ -72,7 +72,7 @@ const editActions = { type: ActionType.InputAlarmPolicyType, payload: alarmpolicy.alarmPolicyType }); - if (alarmpolicy.alarmPolicyType === 'pod') { + if (alarmpolicy.alarmPolicyType === 'pod' || alarmpolicy.alarmPolicyType === 'virtualMachine') { dispatch({ type: ActionType.InputAlarmPolicyObjectsType, payload: 'part' @@ -101,40 +101,31 @@ const editActions = { type: ActionType.InputAlarmPolicyId, payload: alarmpolicy.alarmPolicyId }); + if (alarmpolicy.alarmPolicyType !== 'cluster') { dispatch(alarmPolicyActions.inputAlarmPolicyObjectsType(alarmpolicy.alarmObjetcsType)); //告警对象是workload且选择按工作负载选择初始化 + if (alarmpolicy.alarmPolicyType === 'pod') { - let namespace; - let workType; - if (alarmpolicy.alarmObjetcsType === 'part') { - namespace = reverseReduceNs(alarmpolicy.clusterId, alarmpolicy.alarmObjectNamespace); - workType = alarmpolicy.alarmObjectWorkloadType; - dispatch(alarmPolicyActions.inputAlarmPolicyObjects(alarmpolicy.alarmObjetcs)); - } else { - if (alarmpolicy.alarmObjectNamespace) { - namespace = reverseReduceNs(alarmpolicy.clusterId, alarmpolicy.alarmObjectNamespace); - } else { - namespace = 'ALL'; - } - if (alarmpolicy.alarmObjectWorkloadType) { - workType = alarmpolicy.alarmObjectWorkloadType; - } else { - workType = 'ALL'; - } - } + dispatch(alarmPolicyActions.inputAlarmObjectWorkloadType(alarmpolicy.alarmObjectWorkloadType)); + } + + if (alarmpolicy.alarmPolicyType === 'pod' || alarmpolicy.alarmPolicyType === 'virtualMachine') { + const hasNamespace = alarmpolicy?.alarmObjetcsType === 'part' || alarmpolicy?.alarmObjectNamespace; + dispatch({ type: ActionType.InputAlarmWorkLoadNameSpace, - payload: namespace + payload: hasNamespace ? reverseReduceNs(alarmpolicy.clusterId, alarmpolicy.alarmObjectNamespace) : 'ALL' }); - dispatch(alarmPolicyActions.inputAlarmObjectWorkloadType(alarmpolicy.alarmObjectWorkloadType)); + + dispatch(alarmPolicyActions.inputAlarmPolicyObjects(alarmpolicy.alarmObjetcs)); } } }; }, initAlarmPolicyData: () => { return (dispatch, getState: GetState) => { - let { route, alarmPolicy } = getState(), + const { route, alarmPolicy } = getState(), urlParams = router.resolve(route), mode = urlParams['sub']; dispatch(resourceActions.channel.fetch()); @@ -155,8 +146,8 @@ const editActions = { dispatch(alarmPolicyActions.inputAlarmPolicyType('pod')); /// #endif } else if (mode === 'update' || mode === 'copy') { - let alarmPolicyId = route.queries['alarmPolicyId']; - let finder = alarmPolicy.list.data.records.find(item => item.id === alarmPolicyId); + const alarmPolicyId = route.queries['alarmPolicyId']; + const finder = alarmPolicy.list.data.records.find(item => item.id === alarmPolicyId); dispatch( resourceActions.receiverGroup.fetch({ @@ -165,7 +156,7 @@ const editActions = { ); //初始化workload列表不使用初始值 /// #if tke - if (mode === 'update' && finder.alarmPolicyType === 'pod') { + if (mode === 'update' && ['pod', 'virtualMachine'].includes(finder?.alarmPolicyType)) { dispatch( namespaceActions.applyFilter({ regionId: route.queries['rid'], @@ -190,8 +181,8 @@ const editActions = { dispatch(alarmPolicyActions.initAlarmPolicyEditionForCopy(finder)); } } else if (mode === 'detail') { - let alarmPolicyId = route.queries['alarmPolicyId']; - let finder = alarmPolicy.list.data.records.find(item => item.id === alarmPolicyId); + const alarmPolicyId = route.queries['alarmPolicyId']; + const finder = alarmPolicy.list.data.records.find(item => item.id === alarmPolicyId); dispatch(alarmPolicyActions.fetchAlarmPolicyDetail(finder)); } }; @@ -231,14 +222,14 @@ const editActions = { }); }; }, - //策略类型cluster//nodo//pod + //策略类型cluster//nodo//pod/vm inputAlarmPolicyType: alarmPolicyType => { return (dispatch, getState: GetState) => { dispatch({ type: ActionType.InputAlarmPolicyType, payload: alarmPolicyType }); - let defaultAlarmPolicyObjectsType = alarmPolicyType === 'pod' ? 'part' : 'all'; + const defaultAlarmPolicyObjectsType = 'all'; dispatch({ type: ActionType.InputAlarmPolicyObjectsType, payload: defaultAlarmPolicyObjectsType @@ -268,7 +259,7 @@ const editActions = { //alarm选择告警对象类型 inputAlarmPolicyObjectsType: objectType => { return (dispatch, getState: GetState) => { - let { alarmPolicyEdition, namespaceList } = getState(); + const { alarmPolicyEdition, namespaceList } = getState(); dispatch({ type: ActionType.InputAlarmPolicyObjectsType, payload: objectType @@ -298,9 +289,9 @@ const editActions = { inputAlarmMetrics: (id: string, Obj: Object) => { return (dispatch, getState: GetState) => { - let { alarmPolicyEdition } = getState(), + const { alarmPolicyEdition } = getState(), { alarmMetrics } = alarmPolicyEdition; - let newAlarmMetrics = deepClone(alarmMetrics), + const newAlarmMetrics = deepClone(alarmMetrics), index = newAlarmMetrics.findIndex(e => e.id === id), objKeys = Object.keys(Obj); objKeys.forEach(item => { @@ -316,20 +307,12 @@ const editActions = { //将配置中 initAlarmMetricsForUpdate: (alarmMetrics, alarmPolicyType) => { return (dispatch, getState: GetState) => { - let finalType = alarmPolicyType; - if (alarmPolicyType === 'cluster') { - let { cluster } = getState(), - finder = cluster.list.data.records.find( - record => cluster.selection && record.metadata.name === cluster.selection.metadata.name - ); - // if (finder.clusterType === 'INDEPENDENT_CLUSTER') { - // finalType = 'independentClusetr'; - // } - } - let alarmPolicyMetricsConfig = deepClone(AlarmPolicyMetrics[finalType]); - let initalarmMetrics = alarmMetrics.length + const finalType = alarmPolicyType; + + const alarmPolicyMetricsConfig = deepClone(AlarmPolicyMetrics[finalType]); + const initalarmMetrics = alarmMetrics.length ? alarmMetrics.map(item => { - let index = alarmPolicyMetricsConfig.findIndex(metrics => metrics.metricName === item.metricName); + const index = alarmPolicyMetricsConfig.findIndex(metrics => metrics.metricName === item.metricName); if (index !== -1) { alarmPolicyMetricsConfig.splice(index, 1); } @@ -360,9 +343,9 @@ const editActions = { //告警设置不同类型不同初始值 initAlarmMetrics: (type: string) => { return (dispatch, getState: GetState) => { - let finalType = type; + const finalType = type; if (type === AlarmPolicyType[0].value) { - let { cluster } = getState(), + const { cluster } = getState(), finder = cluster.list.data.records.find( record => cluster.selection && record.metadata.name === cluster.selection.metadata.name ); @@ -371,7 +354,7 @@ const editActions = { // } } - let items = AlarmPolicyMetrics[finalType], + const items = AlarmPolicyMetrics[finalType], alarmMetrics = items ? items.map(item => { return Object.assign({}, item, { @@ -389,7 +372,7 @@ const editActions = { inputAlarmNotifyWays: notifyWays => { return (dispatch, getState: GetState) => { - let newNotifyWays = deepClone(notifyWays); + const newNotifyWays = deepClone(notifyWays); dispatch({ type: ActionType.InputAlarmNotifyWay, @@ -400,9 +383,9 @@ const editActions = { inputAlarmNotifyWay: (id: string, obj: Object) => { return (dispatch, getState: GetState) => { - let { alarmPolicyEdition } = getState(), + const { alarmPolicyEdition } = getState(), { notifyWays } = alarmPolicyEdition; - let newNotifyWays = deepClone(notifyWays), + const newNotifyWays = deepClone(notifyWays), index = newNotifyWays.findIndex(e => e.id === id), objKeys = Object.keys(obj); objKeys.forEach(item => { @@ -417,9 +400,9 @@ const editActions = { deleteAlarmNotifyWay: (id: string) => { return (dispatch, getState: GetState) => { - let { alarmPolicyEdition } = getState(), + const { alarmPolicyEdition } = getState(), { notifyWays } = alarmPolicyEdition; - let newNotifyWays = deepClone(notifyWays), + const newNotifyWays = deepClone(notifyWays), index = newNotifyWays.findIndex(e => e.id === id); newNotifyWays.splice(index, 1); dispatch({ @@ -431,9 +414,9 @@ const editActions = { addAlarmNotifyWay: () => { return (dispatch, getState: GetState) => { - let { alarmPolicyEdition } = getState(), + const { alarmPolicyEdition } = getState(), { notifyWays } = alarmPolicyEdition; - let newNotifyWays = deepClone(notifyWays); + const newNotifyWays = deepClone(notifyWays); newNotifyWays.push({ id: uuid(), channel: undefined, template: undefined }); dispatch({ type: ActionType.InputAlarmNotifyWay, @@ -496,7 +479,7 @@ const editActions = { }, selectsWorkLoadNamespace: namespace => { return (dispatch, getState: GetState) => { - let { regionSelection, cluster, alarmPolicyEdition } = getState(); + const { regionSelection, cluster, alarmPolicyEdition } = getState(); dispatch({ type: ActionType.InputAlarmWorkLoadNameSpace, payload: namespace @@ -505,7 +488,10 @@ const editActions = { type: ActionType.InputAlarmPolicyObjects, payload: [] }); - if (alarmPolicyEdition.alarmPolicyType === 'pod' && alarmPolicyEdition.alarmObjectsType === 'all') { + if ( + (alarmPolicyEdition.alarmPolicyType === 'pod' && alarmPolicyEdition.alarmObjectsType === 'all') || + alarmPolicyEdition.alarmPolicyType === 'virtualMachine' + ) { // } else { dispatch( @@ -521,7 +507,7 @@ const editActions = { }, inputAlarmObjectWorkloadType: (type: string) => { return (dispatch, getState: GetState) => { - let { regionSelection, cluster, alarmPolicyEdition } = getState(); + const { regionSelection, cluster, alarmPolicyEdition } = getState(); dispatch({ type: ActionType.InputAlarmObjectWorkloadType, payload: type diff --git a/web/console/src/modules/alarmPolicy/actions/namespaceActions.ts b/web/console/src/modules/alarmPolicy/actions/namespaceActions.ts index e1d20d34f..beb05d2b8 100644 --- a/web/console/src/modules/alarmPolicy/actions/namespaceActions.ts +++ b/web/console/src/modules/alarmPolicy/actions/namespaceActions.ts @@ -32,16 +32,16 @@ type GetState = () => RootState; const fetchNamespaceActions = generateFetcherActionCreator({ actionType: ActionType.FetchNamespaceList, fetcher: async (getState: GetState, fetchOptions, dispatch: Redux.Dispatch) => { - let { clusterVersion } = getState(); - let namespaceInfo: ResourceInfo = resourceConfig(clusterVersion)['np']; - let response = await WebAPI.fetchNamespaceList(getState().namespaceQuery, namespaceInfo); + const { clusterVersion } = getState(); + const namespaceInfo: ResourceInfo = resourceConfig(clusterVersion)['np']; + const response = await WebAPI.fetchNamespaceList(getState().namespaceQuery, namespaceInfo); return response; }, finish: (dispatch: Redux.Dispatch, getState: GetState) => { - let { namespaceList, route, namespaceQuery } = getState(); + const { namespaceList, route, namespaceQuery } = getState(); if (namespaceQuery.filter.default) { - let defauleNamespace = + const defauleNamespace = (namespaceList.data.recordCount && namespaceList.data.records.find(n => n.name === 'default').name) || 'default'; diff --git a/web/console/src/modules/alarmPolicy/components/AlarmPolicyTablePanel.tsx b/web/console/src/modules/alarmPolicy/components/AlarmPolicyTablePanel.tsx index 417e30380..2af7efe7f 100644 --- a/web/console/src/modules/alarmPolicy/components/AlarmPolicyTablePanel.tsx +++ b/web/console/src/modules/alarmPolicy/components/AlarmPolicyTablePanel.tsx @@ -59,7 +59,16 @@ export class AlarmPolicyTablePanel extends React.Component { key: 'PolicyType', header: t('策略类型'), width: '8%', - render: x => (x.alarmPolicyType === 'cluster' ? t('集群') : x.alarmPolicyType === 'node' ? t('节点') : 'Pod') + render: x => { + const map = { + cluster: t('集群'), + node: t('节点'), + pod: t('Pod'), + virtualMachine: t('虚拟机') + }; + + return map?.[x?.alarmPolicyType] ?? '-'; + } }, { key: 'PolicyRule', diff --git a/web/console/src/modules/alarmPolicy/components/EditAlarmPolicyObject.tsx b/web/console/src/modules/alarmPolicy/components/EditAlarmPolicyObject.tsx index ecbb0335a..7b049e92b 100644 --- a/web/console/src/modules/alarmPolicy/components/EditAlarmPolicyObject.tsx +++ b/web/console/src/modules/alarmPolicy/components/EditAlarmPolicyObject.tsx @@ -27,14 +27,14 @@ import { RootProps } from './AlarmPolicyApp'; export class EditAlarmPolicyObject extends React.Component { renderPodList() { - let Tip = content => { + const Tip = content => { return (
{content}
); }; - let { workloadList, alarmPolicyEdition, actions } = this.props; + const { workloadList, alarmPolicyEdition, actions } = this.props; if (workloadList.fetchState === FetchState.Fetching) { return Tip(t('加载中')); } else if (workloadList.fetchState === FetchState.Failed) { @@ -43,37 +43,31 @@ export class EditAlarmPolicyObject extends React.Component { return Tip(t('该命名空间下无workload')); } else { // 根据 PodList 初始化 checkedList - let checkedList = []; - let checkboxList = workloadList.data.records.map(workload => { - let checkbox = {workload.metadata.name}; - if (alarmPolicyEdition.alarmObjects.find(object => object === workload.metadata.name)) { - checkedList.push(workload.metadata.name); - } + const workloadOptions = workloadList?.data?.records?.map(workload => workload?.metadata?.name) ?? []; + + const checkedList = alarmPolicyEdition?.alarmObjects?.filter(item => workloadOptions.includes(item)); - return checkbox; - }); return ( { - // let checkedArray = items.map(item => item); actions.alarmPolicy.inputAlarmPolicyObjects(items); }} value={checkedList} layout="column" > - {checkboxList} + {workloadOptions.map(name => {name}) ?? null} ); } } renderRadioList(type) { - let { alarmPolicyEdition, actions, namespaceList, addons } = this.props; + const { alarmPolicyEdition, actions, namespaceList, addons } = this.props; if (type === 'cluster' || type === '') { return