运维中心生命周期显示

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

+import {Tag} from 'antd';
+import {
+  EditOutlined,
+  CameraOutlined,
+  CarryOutOutlined,
+} from "@ant-design/icons";
+
+export type JobLifeCycleFormProps = {
+  step: number|undefined;
+};
+
+export const JOB_LIFE_CYCLE = {
+  UNKNOWN: 0,
+  CREATE: 1,
+  DEVELOP: 2,
+  DEBUG: 3,
+  RELEASE: 4,
+  ONLINE: 5,
+  CANCEL: 6,
+};
+
+export const isDeletedTask = (taskStep: number) => {
+  if (taskStep && taskStep === JOB_LIFE_CYCLE.CANCEL) {
+    return true;
+  }
+  return false;
+};
+
+const JobLifeCycle = (props: JobLifeCycleFormProps) => {
+
+  const {step} = props;
+
+  const renderJobLifeCycle = () => {
+    switch (step){
+      case JOB_LIFE_CYCLE.DEVELOP:
+        return (<Tag icon={<EditOutlined />} color="default">开发中</Tag>);
+      case JOB_LIFE_CYCLE.RELEASE:
+        return (<Tag icon={<CameraOutlined />} color="green">已发布</Tag>);
+      case JOB_LIFE_CYCLE.ONLINE:
+        return (<Tag icon={<CarryOutOutlined />} color="blue">已上线</Tag>);
+      default:
+        return undefined;
+    }
+  };
+
+  return (<>{renderJobLifeCycle()}</>)
+};
+
+export default JobLifeCycle;

dlink-web/src/components/Studio/StudioMenu/index.tsx

 import styles from "./index.less";
-import {Menu, Dropdown, Tooltip, Row, Col, Popconfirm, notification, Modal, message} from "antd";
+import {Menu, Dropdown, Tooltip, Row, Col, notification, Modal, message} from "antd";
 import {
   PauseCircleTwoTone, CarryOutTwoTone, DeleteTwoTone, PlayCircleTwoTone, CameraTwoTone,SnippetsTwoTone,
   FileAddTwoTone, FolderOpenTwoTone, SafetyCertificateTwoTone, SaveTwoTone, FlagTwoTone,CodeTwoTone,
@@ -28,13 +28,11 @@ import React, {useCallback, useEffect, useState} from "react";
 import StudioExplain from "../StudioConsole/StudioExplain";
 import {
   DIALECT,
-  isDeletedTask,
   isExecuteSql,
   isOnline,
   isRunningTask,
   isSql,
   isTask,
-  TASKSTEPS
 } from "@/components/Studio/conf";
 import {
   ModalForm,
@@ -42,6 +40,7 @@ import {
 import SqlExport from "@/pages/FlinkSqlStudio/SqlExport";
 import {Dispatch} from "@@/plugin-dva/connect";
 import StudioTabs from "@/components/Studio/StudioTabs";
+import {isDeletedTask, JOB_LIFE_CYCLE} from "@/components/Common/JobLifeCycle";
 
 const menu = (
   <Menu>
@@ -289,7 +288,7 @@ const StudioMenu = (props: any) => {
         const res = releaseTask(current.task.id);
         res.then((result) => {
           if(result.code == CODE.SUCCESS) {
-            props.changeTaskStep(current.task.id,TASKSTEPS.RELEASE);
+            props.changeTaskStep(current.task.id,JOB_LIFE_CYCLE.RELEASE);
             message.success(`发布作业【${current.task.alias}】成功`);
           }else {
             message.error(`发布作业【${current.task.alias}】失败，原因：\n${result.msg}`);
@@ -308,7 +307,7 @@ const StudioMenu = (props: any) => {
       onOk: async () => {
         const res = developTask(current.task.id);
         res.then((result) => {
-          result.datas && props.changeTaskStep(current.task.id,TASKSTEPS.DEVELOP);
+          result.datas && props.changeTaskStep(current.task.id,JOB_LIFE_CYCLE.DEVELOP);
           if(result.code == CODE.SUCCESS) {
             message.success(`维护作业【${current.task.alias}】成功`);
           }
@@ -327,7 +326,7 @@ const StudioMenu = (props: any) => {
         const res = onLineTask(current.task.id);
         res.then((result) => {
           if(result.code === CODE.SUCCESS) {
-            props.changeTaskStep(current.task.id,TASKSTEPS.ONLINE);
+            props.changeTaskStep(current.task.id,JOB_LIFE_CYCLE.ONLINE);
             result.datas?.jobInstanceId && props.changeTaskJobInstance(current.task.id,result.datas?.jobInstanceId);
             message.success(`上线作业【${current.task.alias}】成功`);
           }else {
@@ -348,8 +347,8 @@ const StudioMenu = (props: any) => {
         const res = offLineTask(current.task.id,type);
         res.then((result) => {
           if(result.code === CODE.SUCCESS) {
-            if(current.task.step === TASKSTEPS.ONLINE){
-              props.changeTaskStep(current.task.id,TASKSTEPS.RELEASE);
+            if(current.task.step === JOB_LIFE_CYCLE.ONLINE){
+              props.changeTaskStep(current.task.id,JOB_LIFE_CYCLE.RELEASE);
             }
             props.changeTaskJobInstance(current.task.id,0);
             message.success(`停止作业【${current.task.alias}】成功`);
@@ -371,7 +370,7 @@ const StudioMenu = (props: any) => {
         const res = offLineTask(current.task.id,type);
         res.then((result) => {
           if(result.code === CODE.SUCCESS) {
-            props.changeTaskStep(current.task.id,TASKSTEPS.RELEASE);
+            props.changeTaskStep(current.task.id,JOB_LIFE_CYCLE.RELEASE);
             props.changeTaskJobInstance(current.task.id,0);
             message.success(`下线作业【${current.task.alias}】成功`);
           }else {
@@ -392,7 +391,7 @@ const StudioMenu = (props: any) => {
         const res = cancelTask(current.task.id);
         res.then((result) => {
           if(result.code === CODE.SUCCESS) {
-            props.changeTaskStep(current.task.id,TASKSTEPS.CANCEL);
+            props.changeTaskStep(current.task.id,JOB_LIFE_CYCLE.CANCEL);
             message.success(`注销作业【${current.task.alias}】成功`);
           }else {
             message.error(`注销作业【${current.task.alias}】失败，原因：\n${result.msg}`);
@@ -411,7 +410,7 @@ const StudioMenu = (props: any) => {
       onOk: async () => {
         const res = recoveryTask(current.task.id);
         res.then((result) => {
-          result.datas && props.changeTaskStep(current.task.id,TASKSTEPS.DEVELOP);
+          result.datas && props.changeTaskStep(current.task.id,JOB_LIFE_CYCLE.DEVELOP);
           if(result.code == CODE.SUCCESS) {
             message.success(`恢复作业【${current.task.alias}】成功`);
           }
@@ -592,7 +591,7 @@ const StudioMenu = (props: any) => {
                 </Tooltip>
               }
               <Divider type="vertical"/>
-              {current.task.step == TASKSTEPS.DEVELOP ?
+              {current.task.step == JOB_LIFE_CYCLE.DEVELOP ?
                 <Tooltip title="发布，发布后将无法修改">
                   <Button
                     type="text"
@@ -600,7 +599,7 @@ const StudioMenu = (props: any) => {
                     onClick={toReleaseTask}
                   />
                 </Tooltip>:undefined
-              }{current.task.step == TASKSTEPS.RELEASE ?
+              }{current.task.step == JOB_LIFE_CYCLE.RELEASE ?
               <><Tooltip title="维护，点击进入编辑状态">
                 <Button
                   type="text"
@@ -615,7 +614,7 @@ const StudioMenu = (props: any) => {
                     onClick={toOnLineTask}
                   />
                 </Tooltip></>:undefined
-            }{current.task.step == TASKSTEPS.ONLINE ?
+            }{current.task.step == JOB_LIFE_CYCLE.ONLINE ?
               <Tooltip title="下线，将进入最新发布状态">
                 <Button
                   type="text"
@@ -623,7 +622,7 @@ const StudioMenu = (props: any) => {
                   onClick={()=>toOffLineTask('cancel')}
                 />
               </Tooltip>:undefined
-            }{(current.task.step != TASKSTEPS.ONLINE && current.task.step != TASKSTEPS.CANCEL) ?
+            }{(current.task.step != JOB_LIFE_CYCLE.ONLINE && current.task.step != JOB_LIFE_CYCLE.CANCEL) ?
               <Tooltip title="注销，将进入回收站">
                 <Button
                   type="text"
@@ -631,7 +630,7 @@ const StudioMenu = (props: any) => {
                   onClick={toCancelTask}
                 />
               </Tooltip>:undefined
-            }{current.task.step == TASKSTEPS.CANCEL ?
+            }{current.task.step == JOB_LIFE_CYCLE.CANCEL ?
               <Tooltip title="恢复，将进入维护模式">
                 <Button
                   type="text"

dlink-web/src/components/Studio/conf.ts

@@ -101,19 +101,3 @@ export const isOnline = (type: string) => {
   }
 }
 
-export const TASKSTEPS = {
-  UNKNOWN: 0,
-  CREATE: 1,
-  DEVELOP: 2,
-  DEBUG: 3,
-  RELEASE: 4,
-  ONLINE: 5,
-  CANCEL: 6,
-};
-
-export const isDeletedTask = (step: number) => {
-  if (step && step === TASKSTEPS.CANCEL) {
-    return true;
-  }
-  return false;
-};

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

@@ -15,6 +15,7 @@ import Config from "@/pages/DevOps/JobInfo/Config";
 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";
 
 const {Link} = Typography;
 
@@ -154,7 +155,7 @@ const JobInfo = (props: any) => {
   return (
     <PageContainer
       header={{
-        title: `${job?.instance?.name}`,
+        title: (<><JobLifeCycle step={job?.instance?.step}/>{job?.instance?.name}</>),
         ghost: true,
         extra: getButtons(),
       }}

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

-import {Tag} from 'antd';
 import { history } from 'umi';
-import {
-  CheckCircleOutlined,
-  SyncOutlined, CloseCircleOutlined, MinusCircleOutlined, ClockCircleOutlined, DownOutlined
-} from "@ant-design/icons";
 import {queryData} from "@/components/Common/crud";
 import React, {useState} from "react";
 import type { ProColumns } from '@ant-design/pro-table';
 import ProTable from "@ant-design/pro-table";
 import {JobInstanceTableListItem} from "@/pages/DevOps/data";
 import moment from 'moment';
-import {RUN_MODE, TASKSTEPS} from "@/components/Studio/conf";
+import {RUN_MODE} from "@/components/Studio/conf";
 import JobStatus from "@/components/Common/JobStatus";
+import JobLifeCycle, {JOB_LIFE_CYCLE} from "@/components/Common/JobLifeCycle";
 
 const url = '/api/jobInstance';
 const JobInstanceTable = (props: any) => {
 
-  const {status, activeKey, dispatch} = props;
+  const {status, activeKey,isHistory, dispatch} = props;
   const [time, setTime] = useState(() => Date.now());
 
   const getColumns = () => {
@@ -31,27 +27,26 @@ const JobInstanceTable = (props: any) => {
       valueType: 'radio',
       valueEnum: {
         '': {text: '全部', status: 'ALL'},
-        1: {
-          text: '已创建',
-          status: TASKSTEPS.CREATE,
-        },
         2: {
           text: '开发中',
-          status: TASKSTEPS.DEVELOP,
+          status: JOB_LIFE_CYCLE.DEVELOP,
         },
         4: {
           text: '已发布',
-          status: TASKSTEPS.RELEASE,
+          status: JOB_LIFE_CYCLE.RELEASE,
         },
         5: {
           text: '已上线',
-          status: TASKSTEPS.ONLINE,
+          status: JOB_LIFE_CYCLE.ONLINE,
         },
         0: {
           text: '未知',
-          status: TASKSTEPS.UNKNOWN,
+          status: JOB_LIFE_CYCLE.UNKNOWN,
         },
       },
+      render: (_, row) => {
+        return (<JobLifeCycle step={row.step}/>);
+      }
     },{
       title: "运行模式",
       dataIndex: "type",
@@ -140,7 +135,7 @@ const JobInstanceTable = (props: any) => {
     <><ProTable
       request={(params, sorter, filter) => {
         setTime(Date.now());
-        return queryData(url, {...params,status, sorter: {id: 'descend'}, filter});
+        return queryData(url, {...params,status,isHistory, sorter: {id: 'descend'}, filter});
       }}
       columns={getColumns()}
       size="small"

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

@@ -6,12 +6,24 @@ import {useEffect, useState} from "react";
 import {StatusCount} from "@/pages/DevOps/data";
 import {JOB_STATUS} from "@/components/Common/JobStatus";
 
+import {Form, Switch} from "antd";
+
 const { Statistic } = StatisticCard;
 
 const DevOps = (props:any) => {
 
+  const [isHistory, setIsHistory] = useState<boolean>(false);
+
+  const handleHistorySwicthChange = (checked: boolean) => {
+    setIsHistory(checked);
+  };
+
+  const renderSwitch = () => {
+    return (<Switch checkedChildren="历史" unCheckedChildren="实例" onChange={handleHistorySwicthChange}/>);
+  };
+
   const statusCountDefault = [
-    { key: '', title: '全部', value: 0, total: true },
+    { key: '', title: renderSwitch(), value: 0, total: true },
     { key: JOB_STATUS.CREATED, status: 'default', title: '已创建', value: 0 },
     { key: JOB_STATUS.INITIALIZING, status: 'default', title: '初始化', value: 0 },
     { key: JOB_STATUS.RUNNING, status: 'success', title: '运行中', value: 0 },
@@ -32,7 +44,7 @@ const DevOps = (props:any) => {
     res.then((result)=>{
       const statusCountData: StatusCount = result.datas;
       const items: any = [
-        { key: '', title: '全部', value: statusCountData.all, total: true },
+        { key: '', title: renderSwitch(), value: statusCountData.all, total: true },
         { key: JOB_STATUS.CREATED, status: 'default', title: '已创建', value: statusCountData.created },
         { key: JOB_STATUS.INITIALIZING, status: 'default', title: '初始化', value: statusCountData.initializing },
         { key: JOB_STATUS.RUNNING, status: 'success', title: '运行中', value: statusCountData.running },
@@ -86,7 +98,7 @@ const DevOps = (props:any) => {
               backgroundColor: '#fafafa',
             }}
           >
-            <JobInstanceTable status={item.key} activeKey={activeKey}/>
+            <JobInstanceTable status={item.key} activeKey={activeKey} isHistory={isHistory}/>
           </div>
         </ProCard.TabPane>
       ))}