fix: Add rule reset modal (#4148)

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
kubesphere · Jun 25, 2023 · 0934d92 · 0934d92
1 parent 71fe8d3
commit 0934d92
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 2 deletions.
diff --git a/locales/en/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-details.js b/locales/en/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-details.js
@@ -33,6 +33,34 @@ module.exports = {
   ALERT_RULE_TEXT_PERCENT_MINUTE: '{alterTypeText} {comparator} {thresholds}% for {durationValue, plural, =1 {1 minute} other {# minutes}}',
   MESSAGE_SUMMARY: 'Summary',
   MESSAGE_DETAILS: 'Details',
+  VIEW_METRIC_DATA_TCAP: 'View Metric Data',
+  ALERT_RULE_TEXT_PERCENT_SECOND: '{alterTypeText} {comparator} {thresholds}% for {durationValue, plural, =1 {1 second} other {# seconds}}',
+  ALERT_RULE_TEXT_PERCENT_MINUTE: '{alterTypeText} {comparator} {thresholds}% for {durationValue, plural, =1 {1 minute} other {# minutes}}',
+  ALERT_RULE_TEXT_PERCENT_HOUR: '{alterTypeText} {comparator} {thresholds}% for {durationValue, plural, =1 {1 hour} other {# hours}}',
+  ALERT_RULE_TEXT_SECOND: '{alterTypeText} {comparator} {thresholds} {unit} for {durationValue, plural, =1 {1 second} other {# seconds}}',
+  ALERT_RULE_TEXT_MINUTE: '{alterTypeText} {comparator} {thresholds} {unit} for {durationValue, plural, =1 {1 minute} other {# minutes}}',
+  ALERT_RULE_TEXT_HOUR: '{alterTypeText} {comparator} {thresholds} {unit} for {durationValue, plural, =1 {1 hour} other {# hours}}',
+  // Alert Rules > View Metric Data
+  CPU_UTILIZATION_NO_PERCENT_TCAP: 'CPU Usage',
+  CPU_LOAD_1_TCAP: '1-Minute CPU Load Average',
+  CPU_LOAD_5_TCAP: '5-Minute CPU Load Average',
+  CPU_LOAD_15_TCAP: '15-Minute CPU Load Average',
+  MEMORY_UTILIZATION_NO_PERCENT_TCAP: 'Memory Usage',
+  MEMORY_AVAILABLE_TCAP: 'Available Memory',
+  DATA_SEND_RATE_TCAP: 'Network Data Sending Rate',
+  DATA_RECEIVE_RATE_TCAP: 'Network Data Receiving Rate',
+  DISK_SPACE_UTILIZATION_NO_PERCENT_TCAP: 'Local Disk Usage',
+  DISK_SPACE_AVAILABLE_TCAP: 'Available Local Disk Space',
+  INODE_UTILIZATION_NO_PERCENT_TCAP: 'Inode Usage',
+  DISK_READ_IOPS_TCAP: 'Local Disk Read IOPS',
+  DISK_WRITE_IOPS_TCAP: 'Local Disk Write IOPS',
+  DISK_READ_THROUGHPUT_TCAP: 'Local Disk Read Throughput',
+  DISK_WRITE_THROUGHPUT_TCAP: 'Local Disk Write Throughput',
+  UNAVAILABLE_POD_RATIO_NO_PERCENT_TCAP: 'Unavailable Pod Ratio',
+  POD_QUOTA_UTILIZATION_NO_PERCENT_TCAP: 'Pod Quota Usage',
+  MEMORY_USAGE_WO_CACHE_TCAP: 'Memory Usage Without Cache',
+  UNAVAILABLE_WORKLOAD_REPLICA_RATIO_NO_PERCENT_TCAP: 'Unavailable Replica Ratio',
+  THRESHOLD_VALUE: 'Threshold: {value}',
   // Alerting History
   NO_DATA_DESC: 'No Data Found',
 }
diff --git a/locales/en/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-list.js b/locales/en/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-list.js
@@ -54,6 +54,8 @@ module.exports = {
   // List > Create > Rule Settings > Rule List
   ADD_ALERTING_RULE: "Add Alert Rule",
   ADD_ALERTING_RULE_DESC: "Add an alert rule to the rule group.",
+  ENABLE_RULE: 'Enable rule',
+  DISABLE_RULE: 'Disable rule',
   // List > Create > Rule Settings > Rule Template
   RULE_NAME: 'Rule Name',
   CUSTOM_RULE_NAME_DESC: 'The rule name can contain any characters. The maximum length is 63 characters.',
@@ -109,4 +111,7 @@ module.exports = {
   // List > Delete
   ALERTING_POLICY: 'Rule Group',
   ALERTING_POLICY_LOW: 'rule group',
+  // List > reset
+  RESET_ALERTING_POLICY: 'Reset Rule Group',
+  RESET_ALERTING_POLICY_DESC: 'Are you sure you want to reset the rule group?',
 }
diff --git a/locales/zh/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-details.js b/locales/zh/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-details.js
@@ -32,6 +32,34 @@ module.exports = {
   ALERT_RULE_TEXT_PERCENT_MINUTE: '{alterTypeText} {comparator} {thresholds}% 持续 {durationValue, plural, =1 {1 分钟} other {# 分钟}}',
   MESSAGE_SUMMARY: '概要',
   MESSAGE_DETAILS: '详情',
+  VIEW_METRIC_DATA_TCAP: '查看指标数据',
+  ALERT_RULE_TEXT_PERCENT_SECOND: '{alterTypeText} {comparator} {thresholds}% 持续 {durationValue, plural, =1 {1 秒} other {# 秒}}',
+  ALERT_RULE_TEXT_PERCENT_MINUTE: '{alterTypeText} {comparator} {thresholds}% 持续 {durationValue, plural, =1 {1 分钟} other {# 分钟}}',
+  ALERT_RULE_TEXT_PERCENT_HOUR: '{alterTypeText} {comparator} {thresholds}% 持续 {durationValue, plural, =1 {1 小时} other {# 小时}}',
+  ALERT_RULE_TEXT_SECOND: '{alterTypeText} {comparator} {thresholds} {unit} 持续 {durationValue, plural, =1 {1 秒} other {# 秒}}',
+  ALERT_RULE_TEXT_MINUTE: '{alterTypeText} {comparator} {thresholds} {unit} 持续 {durationValue, plural, =1 {1 分钟} other {# 分钟}}',
+  ALERT_RULE_TEXT_HOUR: '{alterTypeText} {comparator} {thresholds} {unit} 持续 {durationValue, plural, =1 {1 小时} other {# 小时}}',
+  // Alert Rules > View Metric Data
+  CPU_UTILIZATION_NO_PERCENT_TCAP: 'CPU 用量',
+  CPU_LOAD_1_TCAP: '1 分钟 CPU 平均负载',
+  CPU_LOAD_5_TCAP: '5 分钟 CPU 平均负载',
+  CPU_LOAD_15_TCAP: '15 分钟 CPU 平均负载',
+  MEMORY_UTILIZATION_NO_PERCENT_TCAP: '内存用量',
+  MEMORY_AVAILABLE_TCAP: '可用内存',
+  DATA_SEND_RATE_TCAP: '网络数据发送速率',
+  DATA_RECEIVE_RATE_TCAP: '网络数据接收速率',
+  DISK_SPACE_UTILIZATION_NO_PERCENT_TCAP: '本地磁盘用量',
+  DISK_SPACE_AVAILABLE_TCAP: '本地磁盘可用空间',
+  INODE_UTILIZATION_NO_PERCENT_TCAP: 'Inode 用量',
+  DISK_READ_IOPS_TCAP: '本地磁盘读取 IOPS',
+  DISK_WRITE_IOPS_TCAP: '本地磁盘写入 IOPS',
+  DISK_READ_THROUGHPUT_TCAP: '本地磁盘读取吞吐量',
+  DISK_WRITE_THROUGHPUT_TCAP: '本地磁盘写入吞吐量',
+  UNAVAILABLE_POD_RATIO_NO_PERCENT_TCAP: '容器组不可用率',
+  POD_QUOTA_UTILIZATION_NO_PERCENT_TCAP: '容器组配额用量',
+  MEMORY_USAGE_WO_CACHE_TCAP: '内存用量不含缓存',
+  UNAVAILABLE_WORKLOAD_REPLICA_RATIO_NO_PERCENT_TCAP: '副本不可用率',
+  THRESHOLD_VALUE: '阈值：{value}',
   // Alerting History
   NO_DATA_DESC: '未发现数据'
 };
diff --git a/locales/zh/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-list.js b/locales/zh/l10n-clusterManagement-monitoring&Alerting-alertingPolicies-list.js
@@ -53,6 +53,8 @@ module.exports = {
   // List > Create > Rule Settings > Rule List
   ADD_ALERTING_RULE: '添加告警规则',
   ADD_ALERTING_RULE_DESC: '为规则组添加告警规则。',
+  ENABLE_RULE: '启用规则',
+  DISABLE_RULE: '禁用规则',
   // List > Create > Rule Settings > Rule Template
   RULE_NAME: '规则名称',
   CUSTOM_RULE_NAME_DESC: '规则名称可包含任意字符，最长 63 个字符。',
@@ -107,5 +109,8 @@ module.exports = {
   DISABLE_ALERTING_POLICY: '禁用规则组',
   // List > Delete
   ALERTING_POLICY: '规则组',
-  ALERTING_POLICY_LOW: '规则组'
+  ALERTING_POLICY_LOW: '规则组',
+  // List > reset
+  RESET_ALERTING_POLICY: '重置规则组',
+  RESET_ALERTING_POLICY_DESC: '您确定重置规则组吗？',
 };
diff --git a/src/actions/alerting.js b/src/actions/alerting.js
@@ -30,6 +30,7 @@ import EditYamlModal from 'components/Modals/EditYaml'
 import EditBasicInfoModal from 'components/Forms/AlertingPolicy/EditBasicInfo'
 import AlertingRules from 'components/Forms/AlertingPolicy/AlertingRules'
 import AlertMonitor from 'components/Modals/Monitoring/AlertMonitoring'
+import AlertConfirm from 'pages/projects/components/Modals/AlertingConfirm'
 
 import FORM_STEPS from 'configs/steps/alerting.policy'
 
@@ -343,6 +344,68 @@ export default {
     },
   },
   'alerting.rule.reset': {
-    on() {},
+    on({ store, detail, success, type }) {
+      const list = get(toJS(store.list), 'data', [])
+      const selectedRowKeys = get(toJS(store.list), 'selectedRowKeys', [])
+      const selectedPolicy = list.filter(
+        item => selectedRowKeys.indexOf(item.name) !== -1
+      )
+      const modal = Modal.open({
+        onOk: async () => {
+          if (selectedRowKeys.length > 0) {
+            const reqs = []
+            selectedPolicy.forEach(item => {
+              const originAnnotation = get(
+                item._originData,
+                'metadata.annotations',
+                ''
+              )
+              const initialConfig = get(
+                item._originData,
+                'metadata.annotations["alerting.kubesphere.io/initial-configuration"]',
+                ''
+              )
+              if (initialConfig === '') {
+                return
+              }
+              const data = JSON.parse(initialConfig)
+              const params = set(data, 'metadata.annotations', originAnnotation)
+              reqs.push(store.update({ ...item, type }, params))
+            })
+            await Promise.all(reqs)
+          } else {
+            const initialConfig = get(
+              detail._originData,
+              'metadata.annotations["alerting.kubesphere.io/initial-configuration"]',
+              ''
+            )
+            if (initialConfig === '') {
+              return
+            }
+            const data = JSON.parse(initialConfig)
+            const params = set(
+              data,
+              'metadata.annotations["alerting.kubesphere.io/initial-configuration"]',
+              initialConfig
+            )
+            await store.update({ ...detail, type }, params)
+          }
+          Notify.success({ content: t('RESET_SUCCESSFUL') })
+          Modal.close(modal)
+          success && success()
+        },
+        title:
+          selectedRowKeys.length > 0
+            ? t('RESET_MULTIPLE_ALERTING_POLICIES')
+            : t('RESET_ALERTING_POLICY'),
+        desc:
+          selectedRowKeys.length > 0
+            ? t.html('RESET_MULTIPLE_ALERTING_POLICIES_DESC', {
+                name: selectedRowKeys.join(','),
+              })
+            : t('RESET_ALERTING_POLICY_DESC'),
+        modal: AlertConfirm,
+      })
+    },
   },
 }
diff --git a/src/pages/projects/components/Modals/AlertingConfirm/index.jsx b/src/pages/projects/components/Modals/AlertingConfirm/index.jsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { Icon } from '@kube-design/components'
+import { Modal } from 'components/Base'
+
+import styles from './index.scss'
+
+const AlertConfirm = props => {
+  const { onCancel, title, visible, isSubmitting, desc, icon } = props
+
+  const handleOk = () => {
+    props.onOk()
+  }
+
+  const renderIcon = () => {
+    return icon ? (
+      <Icon name={icon} size={20} />
+    ) : (
+      <Icon name={'information'} size={20} className={styles.icon} />
+    )
+  }
+
+  return (
+    <Modal
+      width={600}
+      onOk={handleOk}
+      okText={t('OK')}
+      onCancel={onCancel}
+      visible={visible}
+      isSubmitting={isSubmitting}
+      hideHeader
+    >
+      <div className={styles.title}>
+        {renderIcon()}
+        {title}
+      </div>
+      <p className={styles.desc}>{desc}</p>
+    </Modal>
+  )
+}
+
+export default AlertConfirm
diff --git a/src/pages/projects/components/Modals/AlertingConfirm/index.scss b/src/pages/projects/components/Modals/AlertingConfirm/index.scss
@@ -0,0 +1,25 @@
+.icon {
+  margin-right: 4px;
+
+  :global {
+    svg {
+      color: rgba(255, 255, 255, 0.9);
+      fill: #329dce;
+    }
+  }
+}
+
+.title {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: #000000;
+}
+
+.desc {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  color: #242e42;
+  margin-top: 12px;
+}
diff --git a/src/pages/projects/containers/Alerting/Messages/index.jsx b/src/pages/projects/containers/Alerting/Messages/index.jsx
@@ -72,6 +72,12 @@ export default class AlertingPolicy extends React.Component {
   }
 
   get tabs() {
+    const { namespace } = this.props.match.params
+
+    if (namespace) {
+      return {}
+    }
+
     return {
       value: this.state.type,
       onChange: this.handleTabChange,