Skip to content

D
dlink
Commit cd33d563 authored by wenmo's avatar wenmo
Browse files
Options

运维中心生命周期显示

parent 4de764f7
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 52 deletions
dlink-web/src/components/Common/JobLifeCycle.tsx 0 → 100644
View file @ cd33d563
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
View file @ cd33d563
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
View file @ cd33d563
......@@ -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
View file @ cd33d563
......@@ -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
View file @ cd33d563
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
View file @ cd33d563
......@@ -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>
))}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment