add fe page

2026-01-10 09:04:26 +08:00 · 2021-01-25 15:34:07 +08:00
parent 850d43df63
commit 7f115c1b3e
35 changed files with 329 additions and 225 deletions
--- a/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx
+++ b/kafka-manager-console/src/container/alarm/add-alarm/filter-form.tsx
@@ -11,6 +11,7 @@ import { filterKeys } from 'constants/strategy';
 import { VirtualScrollSelect } from 'component/virtual-scroll-select';
 import { IsNotNaN } from 'lib/utils';
 import { searchProps } from 'constants/table';
+import { toJS } from 'mobx';

 interface IDynamicProps {
  form?: any;
@@ -33,6 +34,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
  public monitorType: string = null;
  public clusterId: number = null;
  public clusterName: string = null;
+  public clusterIdentification: string | number = null;
  public topicName: string = null;
  public consumerGroup: string = null;
  public location: string = null;
@@ -45,16 +47,18 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
    this.props.form.validateFields((err: Error, values: any) => {
      if (!err) {
        monitorType = values.monitorType;
-        const index = cluster.clusterData.findIndex(item => item.clusterId === values.cluster);
+        const index = cluster.clusterData.findIndex(item => item.clusterIdentification === values.cluster);
        if (index > -1) {
+          values.clusterIdentification = cluster.clusterData[index].clusterIdentification;
          values.clusterName = cluster.clusterData[index].clusterName;
        }
        for (const key of Object.keys(values)) {
          if (filterKeys.indexOf(key) > -1) { // 只有这几种值可以设置
            filterList.push({
-              tkey: key === 'clusterName' ? 'cluster' : key, // 传参需要将clusterName转成cluster
+              tkey: key === 'clusterName' ? 'cluster' : key, // clusterIdentification
              topt: '=',
              tval: [values[key]],
+              clusterIdentification: values.clusterIdentification
            });
          }
        }
@@ -74,13 +78,13 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {

  public resetFormValue(
    monitorType: string = null,
-    clusterId: number = null,
+    clusterIdentification: any = null,
    topicName: string = null,
    consumerGroup: string = null,
    location: string = null) {
    const { setFieldsValue } = this.props.form;
    setFieldsValue({
-      cluster: clusterId,
+      cluster: clusterIdentification,
      topic: topicName,
      consumerGroup,
      location,
@@ -88,18 +92,18 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
    });
  }

-  public getClusterId = (clusterName: string) => {
+  public getClusterId = async (clusterIdentification: any) => {
    let clusterId = null;
-    const index = cluster.clusterData.findIndex(item => item.clusterName === clusterName);
+    const index = cluster.clusterData.findIndex(item => item.clusterIdentification === clusterIdentification);
    if (index > -1) {
      clusterId = cluster.clusterData[index].clusterId;
    }
    if (clusterId) {
-      cluster.getClusterMetaTopics(clusterId);
+      await cluster.getClusterMetaTopics(clusterId);
      this.clusterId = clusterId;
      return this.clusterId;
-    }
-    return this.clusterId = clusterName as any;
+    };
+    return this.clusterId = clusterId as any;
  }

  public async initFormValue(monitorRule: IRequestParams) {
@@ -108,17 +112,19 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
    const topicFilter = strategyFilterList.filter(item => item.tkey === 'topic')[0];
    const consumerFilter = strategyFilterList.filter(item => item.tkey === 'consumerGroup')[0];

-    const clusterName = clusterFilter ? clusterFilter.tval[0] : null;
+    const clusterIdentification = clusterFilter ? clusterFilter.tval[0] : null;
    const topic = topicFilter ? topicFilter.tval[0] : null;
    const consumerGroup = consumerFilter ? consumerFilter.tval[0] : null;
    const location: string = null;
    const monitorType = monitorRule.strategyExpressionList[0].metric;
    alarm.changeMonitorStrategyType(monitorType);
-
-    await this.getClusterId(clusterName);
+    //增加clusterIdentification替代原来的clusterName
+    this.clusterIdentification = clusterIdentification;
+    await this.getClusterId(this.clusterIdentification);
+    //
    await this.handleSelectChange(topic, 'topic');
    await this.handleSelectChange(consumerGroup, 'consumerGroup');
-    this.resetFormValue(monitorType, this.clusterId, topic, consumerGroup, location);
+    this.resetFormValue(monitorType, this.clusterIdentification, topic, consumerGroup, location);
  }

  public clearFormData() {
@@ -130,11 +136,12 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
    this.resetFormValue();
  }

-  public async handleClusterChange(e: number) {
-    this.clusterId = e;
+  public async handleClusterChange(e: any) {
+    this.clusterIdentification = e;
    this.topicName = null;
    topic.setLoading(true);
-    await cluster.getClusterMetaTopics(e);
+    const clusterId = await this.getClusterId(e);
+    await cluster.getClusterMetaTopics(clusterId);
    this.resetFormValue(this.monitorType, e, null, this.consumerGroup, this.location);
    topic.setLoading(false);
  }
@@ -170,7 +177,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
    }
    this.consumerGroup = null;
    this.location = null;
-    this.resetFormValue(this.monitorType, this.clusterId, this.topicName);
+    this.resetFormValue(this.monitorType, this.clusterIdentification, this.topicName);
    topic.setLoading(false);
  }

@@ -213,17 +220,24 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
      },
      rules: [{ required: true, message: '请选择监控指标' }],
    } as IVritualScrollSelect;
+    const clusterData = toJS(cluster.clusterData);
+    const options = clusterData?.length ? clusterData.map(item => {
+      return {
+        label: `${item.clusterName}${item.description ? '（' + item.description + '）' : ''}`,
+        value: item.clusterIdentification
+      }
+    }) : null;

    const clusterItem = {
      label: '集群',
-      options: cluster.clusterData,
-      defaultValue: this.clusterId,
+      options,
+      defaultValue: this.clusterIdentification,
      rules: [{ required: true, message: '请选择集群' }],
      attrs: {
        placeholder: '请选择集群',
-        className: 'middle-size',
+        className: 'large-size',
        disabled: this.isDetailPage,
-        onChange: (e: number) => this.handleClusterChange(e),
+        onChange: (e: any) => this.handleClusterChange(e),
      },
      key: 'cluster',
    } as unknown as IVritualScrollSelect;
@@ -241,7 +255,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
      }),
      attrs: {
        placeholder: '请选择Topic',
-        className: 'middle-size',
+        className: 'large-size',
        disabled: this.isDetailPage,
        onChange: (e: string) => this.handleSelectChange(e, 'topic'),
      },
@@ -329,7 +343,7 @@ export class DynamicSetFilter extends React.Component<IDynamicProps> {
            key={v.value || v.key || index}
            value={v.value}
          >
-            {v.label.length > 25 ? <Tooltip placement="bottomLeft" title={v.label}>
+            {v.label?.length > 25 ? <Tooltip placement="bottomLeft" title={v.label}>
              {v.label}
            </Tooltip> : v.label}
          </Select.Option>
--- a/kafka-manager-console/src/container/alarm/add-alarm/index.less
+++ b/kafka-manager-console/src/container/alarm/add-alarm/index.less
@@ -43,21 +43,23 @@
    Icon {
      margin-left: 8px;
    }
+    .ant-form-item-label {
+      // padding-left: 10px;
+      width: 118px;
+      text-align: right !important;
+    }

    &.type-form {
-      padding-top: 10px; 
+      padding-top: 10px;
      .ant-form{
        min-width: 755px;
      }
      .ant-form-item {
-        width: 30%;
+        width: 45%;
        min-width: 360px;
      }
-      .ant-form-item-label {
-        padding-left: 10px;
-      }
      .ant-form-item-control {
-        width: 220px;
+        width: 300px;
      }
    }

--- a/kafka-manager-console/src/container/alarm/add-alarm/index.tsx
+++ b/kafka-manager-console/src/container/alarm/add-alarm/index.tsx
@@ -12,7 +12,6 @@ import { alarm } from 'store/alarm';
 import { app } from 'store/app';
 import Url from 'lib/url-parser';
 import { IStrategyExpression, IRequestParams } from 'types/alarm';
-
@observer
 export class AddAlarm extends SearchAndFilterContainer {
  public isDetailPage = window.location.pathname.includes('/alarm-detail'); // 判断是否为详情
@@ -90,8 +89,8 @@ export class AddAlarm extends SearchAndFilterContainer {
    const filterObj = this.typeForm.getFormData().filterObj;
    // tslint:disable-next-line:max-line-length
    if (!actionValue || !timeValue || !typeValue || !strategyList.length || !filterObj || !filterObj.filterList.length) {
-       message.error('请正确填写必填项');
-       return null;
+      message.error('请正确填写必填项');
+      return null;
    }

    if (filterObj.monitorType === 'online-kafka-topic-throttled') {
@@ -101,13 +100,17 @@ export class AddAlarm extends SearchAndFilterContainer {
        tval: [typeValue.app],
      });
    }
+    this.id && filterObj.filterList.forEach((item: any) => {
+      if (item.tkey === 'cluster') {
+        item.tval = [item.clusterIdentification]
+      }
+    })
    strategyList = strategyList.map((row: IStrategyExpression) => {
      return {
        ...row,
        metric: filterObj.monitorType,
      };
    });
-
    return {
      appId: typeValue.app,
      name: typeValue.alarmName,
@@ -129,7 +132,7 @@ export class AddAlarm extends SearchAndFilterContainer {
  public renderAlarmStrategy() {
    return (
      <div className="config-wrapper">
-        <span className="span-tag">报警策略</span>
+        <span className="span-tag" data-set={alarm.monitorType}>报警策略</span>
        <div className="info-wrapper">
          <WrappedDynamicSetStrategy wrappedComponentRef={(form: any) => this.strategyForm = form} />
        </div>
@@ -139,9 +142,9 @@ export class AddAlarm extends SearchAndFilterContainer {

  public renderTimeForm() {
    return (
-     <>
-      <WrappedTimeForm wrappedComponentRef={(form: any) => this.timeForm = form} />
-     </>
+      <>
+        <WrappedTimeForm wrappedComponentRef={(form: any) => this.timeForm = form} />
+      </>
    );
  }

@@ -164,7 +167,7 @@ export class AddAlarm extends SearchAndFilterContainer {
          {this.renderAlarmStrategy()}
          {this.renderTimeForm()}
          <ActionForm ref={(actionForm) => this.actionForm = actionForm} />
-          </div>
+        </div>
      </Spin>
    );
  }
--- a/kafka-manager-console/src/container/alarm/add-alarm/strategy-form.tsx
+++ b/kafka-manager-console/src/container/alarm/add-alarm/strategy-form.tsx
@@ -5,6 +5,7 @@ import { IStringMap } from 'types/base-type';
 import { IRequestParams } from 'types/alarm';
 import { IFormSelect, IFormItem, FormItemType } from 'component/x-form';
 import { searchProps } from 'constants/table';
+import { alarm } from 'store/alarm';

 interface IDynamicProps {
  form: any;
@@ -27,6 +28,7 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
  public crudList = [] as ICRUDItem[];
  public state = {
    shouldUpdate: false,
+    monitorType: alarm.monitorType
  };

  public componentDidMount() {
@@ -130,7 +132,7 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {

          if (lineValue.func === 'happen' && paramsArray.length > 1 && paramsArray[0] < paramsArray[1]) {
            strategyList = []; // 清空赋值
-            return message.error('周期值应大于次数') ;
+            return message.error('周期值应大于次数');
          }

          lineValue.params = paramsArray.join(',');
@@ -292,8 +294,39 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
    }
    return element;
  }
-
-  public renderFormList(row: ICRUDItem) {
+  public unit(monitorType: string) {
+    let element = null;
+    switch (monitorType) {
+      case 'online-kafka-topic-msgIn':
+        element = "条/秒"
+        break;
+      case 'online-kafka-topic-bytesIn':
+        element = "字节/秒"
+        break;
+      case 'online-kafka-topic-bytesRejected':
+        element = "字节/秒"
+        break;
+      case 'online-kafka-topic-produce-throttled':
+        element = "1表示被限流"
+        break;
+      case 'online-kafka-topic-fetch-throttled':
+        element = "1表示被限流"
+        break;
+      case 'online-kafka-consumer-maxLag':
+        element = "条"
+        break;
+      case 'online-kafka-consumer-lag':
+        element = "条"
+        break;
+      case 'online-kafka-consumer-maxDelayTime':
+        element = "秒"
+        break;
+    }
+    return (
+      <span>{element}</span>
+    )
+  }
+  public renderFormList(row: ICRUDItem, monitorType: string) {
    const key = row.id;
    const funcType = row.func;

@@ -309,6 +342,7 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
          key: key + '-func',
        } as IFormSelect)}
        {this.getFuncItem(row)}
+        {row.func !== 'c_avg_rate_abs' && row.func !== 'pdiff' ? this.unit(monitorType) : null}
      </div>
    );
  }
@@ -340,8 +374,8 @@ class DynamicSetStrategy extends React.Component<IDynamicProps> {
      <Form>
        {crudList.map((row, index) => {
          return (
-            <div key={index}>
-              {this.renderFormList(row)}
+            <div key={`${index}-${this.state.monitorType}`}>
+              {this.renderFormList(row, alarm.monitorType)}
              {
                crudList.length > 1 ? (
                  <Icon
--- a/kafka-manager-console/src/container/alarm/add-alarm/type-form.tsx
+++ b/kafka-manager-console/src/container/alarm/add-alarm/type-form.tsx
@@ -50,23 +50,23 @@ export class TypeForm extends React.Component {

    return (
      <>
-      <div className="config-wrapper">
-        <span className="span-tag">基本信息</span>
-        <div className="alarm-x-form type-form">
-          <XFormComponent
-            ref={form => this.$form = form}
-            formData={formData}
-            formMap={xTypeFormMap}
-            layout="inline"
-          />
-        </div>
-      </div >
-      <div className="config-wrapper">
-        <span className="span-tag">选择指标</span>
-        <div className="alarm-x-form type-form">
-          <WrappedDynamicSetFilter wrappedComponentRef={(form: any) => this.filterForm = form} />
-        </div>
-      </div >
+        <div className="config-wrapper">
+          <span className="span-tag">基本信息</span>
+          <div className="alarm-x-form type-form">
+            <XFormComponent
+              ref={form => this.$form = form}
+              formData={formData}
+              formMap={xTypeFormMap}
+              layout="inline"
+            />
+          </div>
+        </div >
+        <div className="config-wrapper">
+          <span className="span-tag">选择指标</span>
+          <div className="alarm-x-form type-form">
+            <WrappedDynamicSetFilter wrappedComponentRef={(form: any) => this.filterForm = form} />
+          </div>
+        </div >
      </>
    );
  }