新增运维中心的异常信息、FlinkSQL、报警记录实现

README.md

@@ -88,6 +88,7 @@ Dinky（原 Dlink）：
 |  运维中心   |     主页     | 新增 任务实例列表                                 | 0.6.0 |
 |         |    作业监控    | 新增 作业总览                                   | 0.6.0 |
 |         |            | 新增 实时监控 Flink Job                         | 0.6.0 |
+|         |            | 新增 作业实例与历史切换                              | 0.6.0 |
 |         |            | 新增 自动告警                                   | 0.6.0 |
 |         |            | 新增 FlinkWebUI 跳转                          | 0.6.0 |
 |         |            | 新增 智能重启（重新上线）                             | 0.6.0 |
@@ -97,14 +98,14 @@ Dinky（原 Dlink）：
 |         |            | 新增 配置信息                                   | 0.6.0 |
 |         |            | 新增 集群信息                                   |  dev  |
 |         |            | 新增 作业快照                                   |  dev  |
-|         |            | 新增 异常信息                                   |  dev  |
+|         |            | 新增 异常信息                                   | 0.6.0 |
 |         |            | 新增 作业日志                                   |  dev  |
 |         |            | 新增 自动调优                                   |  dev  |
-|         |            | 新增 FlinkSQL                               |  dev  |
+|         |            | 新增 FlinkSQL                               | 0.6.0 |
 |         |            | 新增 数据地图                                   |  dev  |
 |         |            | 新增 即席查询                                   |  dev  |
 |         |            | 新增 历史版本                                   |  dev  |
-|         |            | 新增 告警记录                                   |  dev  |
+|         |            | 新增 告警记录                                   | 0.6.0 |
 |  注册中心   | Flink 集群实例 | 新增 外部 Flink 集群实例注册                        | 0.4.0 |
 |         |            | 新增 外部 Flink 集群实例心态检测与版本获取                 | 0.4.0 |
 |         |            | 新增 外部 Flink 集群手动一键回收                      | 0.4.0 |

dlink-admin/src/main/java/com/dlink/controller/AlertGroupController.java

@@ -3,7 +3,9 @@ package com.dlink.controller;
 import com.dlink.common.result.ProTableResult;
 import com.dlink.common.result.Result;
 import com.dlink.model.AlertGroup;
+import com.dlink.model.AlertHistory;
 import com.dlink.service.AlertGroupService;
+import com.dlink.service.AlertHistoryService;
 import com.fasterxml.jackson.databind.JsonNode;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -30,6 +32,8 @@ import java.util.List;
 public class AlertGroupController {
     @Autowired
     private AlertGroupService alertGroupService;
+    @Autowired
+    private AlertHistoryService alertHistoryService;
 
     /**
      * 新增或者更新
@@ -90,4 +94,12 @@ public class AlertGroupController {
     public Result listEnabledAll() {
         return Result.succeed(alertGroupService.listEnabledAll(),"获取成功");
     }
+
+    /**
+     * 动态查询列表
+     */
+    @PostMapping("/history")
+    public ProTableResult<AlertHistory> listAlertHistory(@RequestBody JsonNode para) {
+        return alertHistoryService.selectForProTable(para);
+    }
 }

dlink-admin/src/main/resources/mapper/AlertHistoryMapper.xml

@@ -9,6 +9,9 @@
         dlink_alert_history a
         <where>
             1=1
+            <if test='param.jobInstanceId!=null and param.jobInstanceId!=""'>
+                and a.job_instance_id = #{param.jobInstanceId}
+            </if>
             <if test='param.createTime!=null and param.createTime!=""'>
                 and a.create_time <![CDATA[>=]]> str_to_date( #{param.createTime},'%Y-%m-%d %H:%i:%s')
             </if>

dlink-web/src/components/Common/CodeShow.tsx

+import MonacoEditor from "react-monaco-editor";
+import * as _monaco from "monaco-editor";
+
+export type CodeShowFormProps = {
+  height?: string;
+  width?: string;
+  language: string;
+  theme?: string;
+  options?: any;
+  code: string;
+};
+
+const CodeShow = (props: CodeShowFormProps) => {
+
+  const {
+    height = '100%',
+    width = '100%',
+    language = 'sql',
+    theme = 'vs',
+    options = {
+      selectOnLineNumbers: true,
+      renderSideBySide: false,
+      autoIndent:'None',
+      readOnly:true ,
+    },
+    code,
+  } = props;
+
+
+  return (<>
+    <MonacoEditor
+      width={width}
+      height={height}
+      language={language}
+      value={code}
+      options={options}
+      theme={theme}
+    />
+  </>)
+};
+
+export default CodeShow;

dlink-web/src/pages/DevOps/JobInfo/Alert/index.tsx

+import { Typography} from 'antd';
+import ProTable from '@ant-design/pro-table';
+import {ProColumns} from "@ant-design/pro-table";
+import {queryData} from "@/components/Common/crud";
+
+const { Text } = Typography;
+type AlertHistoryTableListItem = {
+  title: string,
+  content: string,
+  status: number,
+  log: string,
+  createTime: string,
+}
+
+
+const Alert = (props: any) => {
+
+  const url = '/api/alertGroup';
+  const {job} = props;
+
+  const columns: ProColumns<AlertHistoryTableListItem>[] = [
+    {
+      title: '标题',
+      dataIndex: 'title',
+      render: (dom, entity) => {
+        return  <Text style={{ width: 200 }} ellipsis={{ tooltip:entity.title }}>{entity.title}</Text>;
+      },
+    },
+    {
+      title: '正文',
+      dataIndex: 'content',
+      render: (dom, entity) => {
+        return  <Text style={{ width: 500 }} ellipsis={{ tooltip:entity.content }}>{entity.content}</Text>;
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      sorter: true,
+      render: (dom, entity) => {
+        return  entity.status === 1?<Text type="success">成功</Text>:<Text type="danger">失败</Text>;
+      },
+    },
+    {
+      title: '日志',
+      dataIndex: 'log',
+      render: (dom, entity) => {
+        return  <Text style={{ width: 500 }} ellipsis={{ tooltip:entity.log }}>{entity.log}</Text>;
+      },
+    },
+    {
+      title: '报警时间',
+      dataIndex: 'createTime',
+      valueType: 'dateTime',
+    },
+  ];
+
+  return (<>
+    <ProTable
+      columns={columns}
+      style={{width: '100%'}}
+      request={(params, sorter, filter) => queryData(url+'/history', {...params, jobInstanceId:job.instance?.id,sorter, filter})}
+      rowKey="name"
+      pagination={{
+        pageSize: 10,
+      }}
+      toolBarRender={false}
+      search={false}
+      size="small"
+    />
+  </>)
+};
+
+export default Alert;

dlink-web/src/pages/DevOps/JobInfo/Exception/index.tsx

+import {Tabs, Empty} from 'antd';
+import CodeShow from "@/components/Common/CodeShow";
+
+const {TabPane} = Tabs;
+
+const Exception = (props: any) => {
+
+  const {job} = props;
+
+  return (<>
+    <Tabs defaultActiveKey="RootException" size="small" tabPosition="top" style={{
+      border: "1px solid #f0f0f0"
+    }}>
+      <TabPane tab={<span>Root Exception</span>} key="RootException">
+        <CodeShow code={job.jobHistory?.exceptions['root-exception'] as string} language='java' height='500px'/>
+      </TabPane>
+      <TabPane tab={<span>Exception History</span>} key="ExceptionHistory">
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+      </TabPane>
+    </Tabs>
+  </>)
+};
+
+export default Exception;

dlink-web/src/pages/DevOps/JobInfo/FlinkSQL/index.tsx

+import CodeShow from "@/components/Common/CodeShow";
+
+const FlinkSQL = (props: any) => {
+
+  const {job} = props;
+
+  return (<>
+    <CodeShow code={job.history?.statement} language='sql' height='500px'/>
+  </>)
+};
+
+export default FlinkSQL;

dlink-web/src/pages/DevOps/JobInfo/index.tsx

@@ -16,6 +16,9 @@ import JobStatus, {isStatusDone} from "@/components/Common/JobStatus";
 import {cancelJob, offLineTask, restartJob} from "@/components/Studio/StudioEvent/DDL";
 import {CODE} from "@/components/Common/crud";
 import JobLifeCycle from "@/components/Common/JobLifeCycle";
+import Exception from "@/pages/DevOps/JobInfo/Exception";
+import FlinkSQL from "@/pages/DevOps/JobInfo/FlinkSQL";
+import Alert from "@/pages/DevOps/JobInfo/Alert";
 
 const {Link} = Typography;
 
@@ -254,14 +257,14 @@ const JobInfo = (props: any) => {
         {tabKey === 'config' ? <Config job={job}/> : undefined}
         {tabKey === 'cluster' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
         {tabKey === 'snapshot' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
-        {tabKey === 'exception' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
+        {tabKey === 'exception' ? <Exception job={job}/> : undefined}
         {tabKey === 'log' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
         {tabKey === 'optimize' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
-        {tabKey === 'flinksql' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
+        {tabKey === 'flinksql' ? <FlinkSQL job={job}/> : undefined}
         {tabKey === 'datamap' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
         {tabKey === 'olap' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
         {tabKey === 'version' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
-        {tabKey === 'alert' ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : undefined}
+        {tabKey === 'alert' ? <Alert job={job} /> : undefined}
       </ProCard>
     </PageContainer>
   );

dlink-web/src/pages/Welcome.tsx

@@ -752,6 +752,15 @@ export default (): React.ReactNode => {
                 <li>
                   <Link>新增 运维中心的作业实例与历史切换</Link>
                 </li>
+                <li>
+                  <Link>新增 运维中心的异常信息实现</Link>
+                </li>
+                <li>
+                  <Link>新增 运维中心的FlinkSQL实现</Link>
+                </li>
+                <li>
+                  <Link>新增 运维中心的报警记录实现</Link>
+                </li>
               </ul>
             </Paragraph>
           </Timeline.Item>