kafka-manager 2.0

2026-01-13 11:32:20 +08:00 · 2020-09-28 15:46:34 +08:00
parent 28d985aaf1
commit c6e4b60424
1253 changed files with 82183 additions and 37179 deletions
--- a/kafka-manager-console/src/container/admin/operation-detail/index.tsx
+++ b/kafka-manager-console/src/container/admin/operation-detail/index.tsx
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Tabs, PageHeader, Button, notification, Popconfirm, Spin } from 'antd';
+import { handleTabKey } from 'lib/utils';
+import { EassentialInfo } from './essential-info';
+import { TaskStatusDetails } from './taskStatus-details';
+import { ITasksMetaData, ITrigger } from 'types/base-type';
+import { triggerClusterTask } from 'lib/api';
+import { handlePageBack } from 'lib/utils';
+import { admin } from 'store/admin';
+import Url from 'lib/url-parser';
+import './index.less';
+
+const { TabPane } = Tabs;
+let showStatus: boolean = false;
+let showContinue: boolean = false;
+
+@observer
+export class OperationDetail extends React.Component {
+  public taskId: number;
+  public taskName: string;
+
+  public state = {
+    showContinue: false,
+  };
+
+  constructor(props: any) {
+    super(props);
+    const url = Url();
+    this.taskId = Number(url.search.taskId);
+  }
+
+  public bindClick() {
+    const type = showContinue ? 'start' : 'pause';
+    const params = {
+      taskId: this.taskId,
+      action: type,
+      hostname: '',
+    } as ITrigger;
+    triggerClusterTask(params).then(data => {
+      admin.getSubtasksStatus(this.taskId);
+      notification.success({ message: `${showContinue ? '继续部署' : '暂停'}成功！` });
+    });
+  }
+
+  public callBackOrCancel(type: string) {
+    const params = {
+      taskId: this.taskId,
+      action: type,
+      hostname: '',
+    } as ITrigger;
+    triggerClusterTask(params).then(data => {
+      admin.getSubtasksStatus(this.taskId);
+      notification.success({ message: `${type === 'rollback' ? '回滚任务' : '取消'}成功` });
+    });
+  }
+  public handleVal(value: number) {
+    showStatus = (value + '').includes('100') ? true : false;
+  }
+
+  public componentDidMount() {
+    admin.getTasksMetadata(this.taskId);
+    admin.getSubtasksStatus(this.taskId);
+  }
+
+  public render() {
+    // 任务状态: 30:运行中(展示暂停), 40:暂停(展示开始), 100:完成(都置灰)
+    showStatus = admin.taskStatusDetails && admin.taskStatusDetails.status === 100 ? true : false;
+    showContinue = admin.taskStatusDetails && admin.taskStatusDetails.status === 40 ? true : false;
+    const showRollBack = admin.taskStatusDetails && admin.taskStatusDetails.rollback;
+    let tasks = {} as ITasksMetaData;
+    tasks = admin.tasksMetaData ? admin.tasksMetaData : tasks;
+    return (
+      <>
+      <Spin spinning={admin.loading}>
+      <PageHeader
+        className="detail hotspot-header"
+        onBack={() => handlePageBack('/admin/operation#1')}
+        title={`任务名称${tasks.taskName ? '/' + tasks.taskName : ''}`}
+        extra={[
+          <Button key="1" type="primary" disabled={showStatus} >
+            <Popconfirm
+              title={`确定${showContinue ? '开始' : '暂停'}？`}
+              onConfirm={() => this.bindClick()}
+            >
+              <a>{showContinue ? '开始' : '暂停'}</a>
+            </Popconfirm>
+          </Button>,
+          <Button
+            key="2"
+            type="primary"
+            disabled={showRollBack || showStatus}
+          >
+            <Popconfirm
+              title={`确定回滚？`}
+              onConfirm={() => this.callBackOrCancel('rollback')}
+            >
+              <a>回滚</a>
+            </Popconfirm>
+          </Button>,
+          <Button
+            key="3"
+            type="primary"
+            disabled={showStatus}
+          >
+            <Popconfirm
+              title={`确定回滚？`}
+              onConfirm={() => this.callBackOrCancel('cancel')}
+            >
+              <a>取消</a>
+            </Popconfirm>
+          </Button>,
+        ]}
+      >
+      <Tabs activeKey={location.hash.substr(1) || '1'} type="card" onChange={handleTabKey}>
+        <TabPane tab="基本信息" key="1">
+          <EassentialInfo tasksMetaData={tasks} />
+        </TabPane>
+        <TabPane tab="任务状态详情" key="2">
+          <TaskStatusDetails handleVal={(value: number) => this.handleVal(value)} />
+        </TabPane>
+      </Tabs>
+      </PageHeader>
+      </Spin>
+      </>
+    );
+  }
+}