feat(DashBoard): 优化echarts的css属性

src/components/DashBoard/baseCard.tsx

@@ -1,7 +1,7 @@
-import Header from './header';
 import type { HeaderProps } from './header';
-import Echarts from './echarts';
+import Header from './header';
 import type { EchartsProps } from './echarts';
+import Echarts from './echarts';
 import Style from './index.less';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
@@ -16,13 +16,13 @@ export default forwardRef((props: BaseCardProps, ref) => {
 
   return (
     <div
-      className={classNames(Style['dash-board-echarts'], className)}
+      className={classNames(Style['dash-board'], className)}
       style={{
         height: height || 200,
       }}
     >
       <Header ref={ref} {...formProps} />
-      <Echarts options={options} />
+      <Echarts options={options} className={Style['echarts']} />
     </div>
   );
 });

src/components/DashBoard/echarts.tsx

@@ -19,9 +19,11 @@ import { CanvasRenderer } from 'echarts/renderers';
 
 import Style from './index.less';
 import type { EChartsOption } from 'echarts';
+import classNames from 'classnames';
 
 export interface EchartsProps {
   options?: EChartsOption;
+  className?: string;
 }
 
 echarts.use([
@@ -93,7 +95,7 @@ export default (props: EchartsProps) => {
 
   return (
     <div
-      className={Style.content}
+      className={classNames(Style['content'], props.className)}
       ref={(ref) => {
         if (ref) {
           setTimeout(() => {

src/components/DashBoard/header.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import Style from './index.less';
 import { Col, Form, Row } from 'antd';
-import RangePicker from './timePicker';
 import type { TimeType } from './timePicker';
+import RangePicker from './timePicker';
 
 export interface HeaderProps {
   title: string;

src/components/DashBoard/index.less

@@ -1,4 +1,4 @@
-.dash-board-echarts {
+.dash-board {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -21,8 +21,12 @@
 }
 
 .content {
-  flex-grow: 1;
   width: 100%;
+  height: 100%;
+}
+
+.echarts {
+  flex-grow: 1;
   height: 0;
   margin-top: 12px;
 }

src/components/DashBoard/timePicker.tsx

@@ -1,5 +1,5 @@
-import { Radio, DatePicker } from 'antd';
 import type { DatePickerProps } from 'antd';
+import { DatePicker, Radio } from 'antd';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 

src/pages/device/components/Metadata/Base/Edit/index.tsx

@@ -704,6 +704,7 @@ const Edit = observer((props: Props) => {
                 edit: {
                   type: 'void',
                   'x-component': 'Editable.Popover',
+                  // 'x-reactions': '{{(field)=>field.title=field.query(".edit.name").get("value")||field.title}}',
                   title: '指标数据',
                   'x-reactions': {
                     dependencies: ['.edit.name'],

src/pages/device/components/Metadata/Import/index.tsx

@@ -181,7 +181,7 @@ const Import = (props: Props) => {
     const data = (await form.submit()) as any;
 
     if (data.metadata === 'alink') {
-      service.convertMetadata('to', 'alink', data.import).subscribe({
+      service.convertMetadata('from', 'alink', data.import).subscribe({
         next: async (meta) => {
           message.success('导入成功');
           await service.modify(param.id, { metadata: JSON.stringify(meta) });

src/pages/link/DashBoard/index.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import type { EChartsOption } from 'echarts';
 import { useRequest } from 'umi';
 import Service from './service';
+import moment from 'moment';
 
 type RefType = {
   getValues: Function;
@@ -24,13 +25,47 @@ export default () => {
     formatResult: (res) => res.result.map((item: any) => ({ label: item.name, value: item.id })),
   });
 
-  const getFormValues = () => {
+  const getNetworkEcharts = () => {
     const data = NETWORKRef.current!.getValues();
-    console.log(data);
+    if (data) {
+      service.queryMulti([
+        {
+          dashboard: 'systemMonitor',
+          object: 'network',
+          measurement: 'traffic',
+          dimension: 'agg',
+          params: {
+            type: data.type,
+            interval: '1h',
+            from: moment(data.time[0]).format('YYYY-MM-DD HH:mm:ss'),
+            to: moment(data.time[1]).format('YYYY-MM-DD HH:mm:ss'),
+          },
+        },
+      ]);
+    }
+  };
+
+  const getCPUEcharts = () => {
+    const data = CPURef.current!.getValues();
+    if (data) {
+      service.queryMulti([
+        {
+          dashboard: 'systemMonitor',
+          object: 'cpu',
+          measurement: 'traffic',
+          dimension: 'agg',
+          params: {
+            type: data.type,
+            interval: '1h',
+            from: moment(data.time[0]).format('YYYY-MM-DD HH:mm:ss'),
+            to: moment(data.time[1]).format('YYYY-MM-DD HH:mm:ss'),
+          },
+        },
+      ]);
+    }
   };
 
-  const getEcharts = async (data: any) => {
-    console.log(data);
+  const getEcharts = async () => {
     setOptions({
       xAxis: {
         type: 'category',
@@ -50,7 +85,7 @@ export default () => {
 
   useEffect(() => {
     if (serverId) {
-      getFormValues();
+      getNetworkEcharts();
     }
   }, [serverId]);
 
@@ -91,7 +126,7 @@ export default () => {
             }}
             defaultTime={'week'}
             options={options}
-            onParamsChange={getEcharts}
+            onParamsChange={getNetworkEcharts}
           />
         </div>
         <div style={{ display: 'flex' }}>
@@ -102,7 +137,7 @@ export default () => {
             height={400}
             defaultTime={'week'}
             options={options}
-            onParamsChange={getEcharts}
+            onParamsChange={getCPUEcharts}
           />
           <DashBoard
             title={'JVM内存使用率趋势'}

src/pages/link/DashBoard/service.ts

@@ -7,10 +7,10 @@ class Service extends BaseService<any> {
     request(`/${SystemConst.API_BASE}/network/resources/clusters`, { method: 'GET' });
 
   /**
-   * 网络流量
+   * echarts数据
    */
-  networkMulti = (data: any) =>
-    request(`/${SystemConst.API_BASE}/dashboard_multi`, { method: 'POST', data });
+  queryMulti = (data: any) =>
+    request(`/${SystemConst.API_BASE}/dashboard/_multi`, { method: 'POST', data });
 }
 
 export default Service;

src/pages/media/DashBoard/index.less

@@ -31,6 +31,7 @@
       }
     }
   }
+
   .media-dash-board-body {
     border: 1px solid #f0f0f0;
   }

src/pages/notice/Config/Detail/doc/Webhook.tsx

@@ -0,0 +1,20 @@
+import './index.less';
+
+const Webhook = () => {
+  return (
+    <div className={'doc'}>
+      <h1>1. 概述</h1>
+      <div>
+        webhook是一个接收HTTP请求的URL（本平台默认只支持HTTP
+        POST请求），实现了Webhook的第三方系统可以基于该URL订阅本平台系统信息，本平台按配置把特定的事件结果推送到指定的地址，便于系统做后续处理。
+      </div>
+      <h1>2.通知配置说明</h1>
+      <h2>1. Webhook</h2>
+      <div>Webhook地址。</div>
+
+      <h2>2. 请求头</h2>
+      <div>支持根据系统提供的接口设置不同的请求头。如 Accept-Language 、Content-Type</div>
+    </div>
+  );
+};
+export default Webhook;

src/pages/notice/Config/Detail/index.tsx

@@ -34,6 +34,7 @@ import Email from '@/pages/notice/Config/Detail/doc/Email';
 import { PermissionButton } from '@/components';
 import usePermissions from '@/hooks/permission';
 import FAutoComplete from '@/components/FAutoComplete';
+import Webhook from './doc/Webhook';
 
 export const docMap = {
   weixin: {
@@ -54,7 +55,7 @@ export const docMap = {
     embedded: <Email />,
   },
   webhook: {
-    http: <div>webhook</div>,
+    http: <Webhook />,
   },
 };
 

src/pages/notice/Template/Detail/doc/Webhook.tsx

@@ -0,0 +1,18 @@
+import './index.less';
+
+const Webhook = () => {
+  return (
+    <div className="doc">
+      <h1>1. 概述</h1>
+      <div>
+        通知模板结合通知配置为告警消息通知提供支撑。通知模板只能调用同一类型的通知配置服务。
+      </div>
+      <h1>2.模板配置说明</h1>
+      <div>
+        1、请求体 请求体中的数据来自于发送通知时指定的所有变量,也可通过自定义的方式进行变量配置。
+        使用webhook通知时，系统会将该事件通过您指定的URL地址，以POST方式发送。
+      </div>
+    </div>
+  );
+};
+export default Webhook;

src/pages/notice/Template/Detail/index.tsx

@@ -47,6 +47,7 @@ import FAutoComplete from '@/components/FAutoComplete';
 import { PermissionButton } from '@/components';
 import usePermissions from '@/hooks/permission';
 import FMonacoEditor from '@/components/FMonacoEditor';
+import Webhook from './doc/Webhook';
 
 export const docMap = {
   weixin: {
@@ -67,7 +68,7 @@ export const docMap = {
     embedded: <Email />,
   },
   webhook: {
-    http: <div>webhook</div>,
+    http: <Webhook />,
   },
 };
 

src/pages/rule-engine/Alarm/Config/index.tsx

@@ -207,6 +207,7 @@ const Config = () => {
             const resp = await service.getDataExchange('consume');
             if (resp.status === 200) {
               f.setInitialValues(resp.result?.config.config);
+              f.setValuesIn('id', resp.result?.id);
             }
           });
         },
@@ -222,6 +223,7 @@ const Config = () => {
             const resp = await service.getDataExchange('producer');
             if (resp.status === 200) {
               f.setInitialValues(resp.result?.config.config);
+              f.setValuesIn('id', resp.result?.id);
             }
           });
         },
@@ -282,6 +284,10 @@ const Config = () => {
   const ioSchema: ISchema = {
     type: 'object',
     properties: {
+      id: {
+        'x-component': 'Input',
+        'x-hidden': true,
+      },
       kafka: {
         title: 'kafka地址',
         type: 'string',
@@ -351,6 +357,7 @@ const Config = () => {
       config: {
         config: inputConfig,
       },
+      id: inputConfig.id,
       sourceType: 'kafka',
       exchangeType: 'producer',
     });
@@ -359,6 +366,7 @@ const Config = () => {
         sourceType: 'kafka',
         config: outputConfig,
       },
+      id: outputConfig.id,
       sourceType: 'kafka',
       exchangeType: 'consume',
     });

src/pages/rule-engine/Alarm/Config/typing.d.ts

@@ -6,6 +6,7 @@ type LevelItem = {
 };
 
 type IOConfigItem = {
+  id?: string;
   address: string;
   topic: string;
   username: string;

src/pages/rule-engine/Dashboard/index.tsx

@@ -0,0 +1,37 @@
+import { PageContainer } from '@ant-design/pro-layout';
+// import {EChartsOption} from "echarts";
+// import {useState} from "react";
+
+const Dashboard = () => {
+  // const [options, setOptions] = useState<EChartsOption>({});
+  //
+  // const getEcharts = async (data: any) => {
+  //
+  // };
+  return (
+    <PageContainer>
+      123
+      {/*<StatisticCard*/}
+      {/*  title="今日告警"*/}
+      {/*  statistic={{*/}
+      {/*    value: 75,*/}
+      {/*    suffix: "次"*/}
+      {/*  }}*/}
+      {/*  chart={*/}
+      {/*    <img*/}
+      {/*      src="https://gw.alipayobjects.com/zos/alicdn/PmKfn4qvD/mubiaowancheng-lan.svg"*/}
+      {/*      width="100%"*/}
+      {/*      alt="进度条"*/}
+      {/*    />*/}
+      {/*  }*/}
+      {/*  footer={*/}
+      {/*    <>*/}
+      {/*      <Statistic value={15.1} title="当月告警" suffix="次" layout="horizontal"/>*/}
+      {/*    </>*/}
+      {/*  }*/}
+      {/*  style={{width: 250}}*/}
+      {/*/>*/}
+    </PageContainer>
+  );
+};
+export default Dashboard;

src/utils/menu/router.ts

@@ -64,6 +64,7 @@ export enum MENUS_CODE {
   'notice/Config/Detail' = 'notice/Config/Detail',
   'notice/Template' = 'notice/Template',
   'notice/Template/Detail' = 'notice/Template/Detail',
+  'rule-engine/DashBoard' = 'rule-engine/DashBoard',
   'rule-engine/Instance' = 'rule-engine/Instance',
   'rule-engine/SQLRule' = 'rule-engine/SQLRule',
   'rule-engine/Scene' = 'rule-engine/Scene',