kafka-manager 2.0

kafka-manager-console/src/store/admin-monitor.ts

@@ -0,0 +1,67 @@
+
+import { observable, action } from 'mobx';
+import { getBrokersMetricsHistory } from 'lib/api';
+import { IClusterMetrics } from 'types/base-type';
+
+class AdminMonitor {
+  @observable
+  public currentClusterId = null as number;
+
+  @observable
+  public currentBrokerId = null as number;
+
+  @observable
+  public brokersMetricsHistory: IClusterMetrics[];
+
+  public requestId = null as any;
+
+  @action.bound
+  public setCurrentClusterId(clusterId: number) {
+    this.currentClusterId = clusterId;
+  }
+
+  @action.bound
+  public setCurrentBrokerId(brokeId: number) {
+    this.currentBrokerId = brokeId;
+  }
+
+  @action.bound
+  public setRequestId(requestId: any) {
+    this.requestId = requestId;
+  }
+
+  @action.bound
+  public setBrokersChartsData(data: IClusterMetrics[]) {
+    this.brokersMetricsHistory = data;
+    this.setRequestId(null);
+    return data;
+  }
+
+  public getBrokersMetricsList = async (startTime: string, endTime: string) => {
+    if (this.requestId && this.requestId !== 'error') {
+      return new Promise((res, rej) => {
+        window.setTimeout(() => {
+          if (this.requestId === 'error') {
+            rej();
+          } else {
+            res(this.brokersMetricsHistory);
+          }
+        }, 800); // TODO: 该实现方式待优化
+      });
+    }
+
+    this.setRequestId('requesting');
+    return getBrokersMetricsHistory(this.currentClusterId, this.currentBrokerId, startTime, endTime)
+      .then(this.setBrokersChartsData).catch(() => this.setRequestId('error'));
+  }
+
+  public getBrokersChartsData = async (startTime: string, endTime: string, reload?: boolean) => {
+    if (this.brokersMetricsHistory && !reload) {
+      return new Promise(res => res(this.brokersMetricsHistory));
+    }
+
+    return this.getBrokersMetricsList(startTime, endTime);
+  }
+}
+
+export const adminMonitor = new AdminMonitor();

kafka-manager-console/src/store/admin.ts

@@ -0,0 +1,780 @@
+import { observable, action } from 'mobx';
+import { INewBulidEnums, ILabelValue, IClusterReal, IOptionType, IClusterMetrics, IClusterTopics, IKafkaFiles, IMetaData, IConfigure, IBrokerData, IOffset, IController, IBrokersBasicInfo, IBrokersStatus, IBrokersTopics, IBrokersPartitions, IBrokersAnalysis, IAnalysisTopicVO, IBrokersMetadata, IBrokersRegions, IThrottles, ILogicalCluster, INewRegions, INewLogical, ITaskManage, IPartitionsLocation, ITaskType, ITasksEnums, ITasksMetaData, ITaskStatusDetails, IKafkaRoles, IEnumsMap, IStaffSummary, IBill, IBillDetail } from 'types/base-type';
+import {
+  deleteCluster,
+  getBasicInfo,
+  getClusterRealTime,
+  getClusterMetrice,
+  getClusterTopics,
+  getTopicsBasicInfo,
+  getTasksKafkaFiles,
+  getMetaData,
+  getConfigure,
+  addNewConfigure,
+  editConfigure,
+  deleteConfigure,
+  getDataCenter,
+  getClusterBroker,
+  getClusterConsumer,
+  getControllerHistory,
+  getConsumerDetails,
+  getBrokersBasicInfo,
+  getPeakFlowStatus,
+  getBrokersStatus,
+  getBrokersMetrics,
+  getBrokersTopics,
+  getBrokersPartitions,
+  getBrokersAnalysis,
+  getBrokersMetricsHistory,
+  getBrokersMetadata,
+  getBrokersRegions,
+  addNewRegions,
+  editRegions,
+  getLogicalClusters,
+  queryLogicalClusters,
+  createLogicalClusters,
+  editLogicalClusters,
+  deteleLogicalClusters,
+  getClustersThrottles,
+  getTaskManagement,
+  getPartitionsLocation,
+  getClusterTasksEnums,
+  getTasksMetadata,
+  getSubtasksStatus,
+  getClusterTaskLog,
+  newlyBuildEcmTasks,
+  getConfigsTaskStatus,
+  getConfigsKafkaRoles,
+  deteleClusterBrokers,
+  getStaffSummary,
+  getBillStaffSummary,
+  getBillStaffDetail,
+  } from 'lib/api';
+import { getControlMetricOption, getClusterMetricOption } from 'lib/line-charts-config';
+
+import { copyValueMap } from 'constants/status-map';
+import { getPieChartOption } from 'lib/bar-pie-config';
+import { getBillBarOption } from 'lib/bar-pie-config';
+import { transBToMB } from 'lib/utils';
+
+import moment from 'moment';
+import { timestore } from './time';
+
+class Admin {
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public realClusterLoading: boolean = true;
+
+  @observable
+  public realBrokerLoading: boolean = false;
+
+  @observable
+  public basicInfo: IMetaData = null;
+
+  @observable
+  public clusterRealData: IClusterReal = null;
+
+  @observable
+  public clusterMetrics: IClusterMetrics[] = [];
+
+  @observable
+  public clusterTopics: IClusterTopics[] = [];
+
+  @observable
+  public topicsBasic: IClusterTopics = null;
+
+  @observable
+  public packageList = [] as IKafkaFiles[];
+
+  @observable
+  public serverPropertiesList = [] as IKafkaFiles[];
+
+  @observable
+  public metaList: IMetaData[] = [];
+
+  @observable
+  public configureList: IConfigure[] = [];
+
+  @observable
+  public dataCenterList: string[] = [];
+
+  @observable
+  public clusterBroker: IBrokerData[] = [];
+
+  @observable
+  public consumerData: IOffset[] = [];
+
+  @observable
+  public brokersBasicInfo: IBrokersBasicInfo;
+
+  @observable
+  public peakFlowStatusList: IEnumsMap[];
+
+  @observable
+  public peakValueMap = [] as string[];
+
+  @observable
+  public bytesInStatus: number[];
+
+  @observable
+  public replicaStatus: number[];
+
+  @observable
+  public peakValueList = [] as ILabelValue[];
+
+  @observable
+  public copyValueList = [] as ILabelValue[];
+
+  @observable
+  public brokersStatus: IBrokersStatus;
+
+  @observable
+  public brokersMetrics: IClusterReal;
+
+  @observable
+  public brokersMetricsHistory: IClusterMetrics[];
+
+  @observable
+  public brokersTopics: IBrokersTopics[];
+
+  @observable
+  public controllerHistory: IController[] = [];
+
+  @observable
+  public brokersPartitions: IBrokersPartitions[] = [];
+
+  @observable
+  public brokersAnalysis: IBrokersAnalysis;
+
+  @observable
+  public brokersAnalysisTopic: IAnalysisTopicVO[] = [];
+
+  @observable
+  public brokersMetadata: IBrokersMetadata[] = [];
+
+  @observable
+  public brokersRegions: IBrokersRegions[] = [];
+
+  @observable
+  public logicalClusters: ILogicalCluster[] = [];
+
+  @observable
+  public queryLogical: ILogicalCluster;
+
+  @observable
+  public regionIdList: number[] = [];
+
+  @observable
+  public clustersThrottles: IThrottles[] = [];
+
+  @observable
+  public partitionsLocation: IPartitionsLocation[] = [];
+
+  @observable
+  public taskManagement: ITaskManage[] = [];
+
+  @observable
+  public taskType: ITaskType;
+
+  @observable
+  public tasksEnums: ITasksEnums[];
+
+  @observable
+  public configsTaskStatus: IEnumsMap[];
+
+  @observable
+  public staffSummary: IStaffSummary[];
+
+  @observable
+  public billStaff: IBill[];
+
+  @observable
+  public billDetailStaffData: IBillDetail[] = [];
+
+  @observable
+  public tasksMetaData: ITasksMetaData;
+
+  @observable
+  public taskStatusDetails: ITaskStatusDetails;
+
+  @observable
+  public clusterTaskLog: string;
+
+  @observable
+  public kafkaRoles: IKafkaRoles[];
+
+  @observable
+  public controlType: IOptionType = 'byteIn/byteOut' ;
+
+  @observable
+  public type: IOptionType = 'byteIn/byteOut' ;
+
+  @observable
+  public currentClusterId = null as number;
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public getRealClusterLoading(value: boolean) {
+    this.realClusterLoading = value;
+  }
+
+  @action.bound
+  public setRealBrokerLoading(value: boolean) {
+    this.realBrokerLoading = value;
+  }
+
+  @action.bound
+  public setRegionIdList(value: number[]) {
+    this.regionIdList = value;
+  }
+
+  @action.bound
+  public setBasicInfo(data: IMetaData) {
+    this.basicInfo = data;
+  }
+
+  @action.bound
+  public setClusterRealTime(data: IClusterReal) {
+    this.clusterRealData =  data;
+    this.getRealClusterLoading(false);
+  }
+
+  @action.bound
+  public changeType(controlType: IOptionType) {
+    this.controlType = controlType;
+    return getControlMetricOption(controlType, this.clusterMetrics);
+  }
+
+  @action.bound
+  public setClusterMetrice(data: IClusterMetrics[]) {
+    this.clusterMetrics = data;
+    return this.changeType(this.controlType);
+  }
+
+  @action.bound
+  public setClusterTopics(data: IClusterTopics[]) {
+    this.clusterTopics = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setTopicsBasicInfo(data: IClusterTopics) {
+    return this.topicsBasic = data;
+  }
+
+  @action.bound
+  public setTasksKafkaFiles(data: IKafkaFiles[]) {
+    this.packageList = (data.filter(ele => ele.fileType === 0)).map((item => {
+      return {
+        ...item,
+        label: item.fileName,
+        value: item.fileName + ',' + item.fileMd5,
+      };
+    }));
+    this.serverPropertiesList = (data.filter(ele => ele.fileType === 1)).map((item => {
+      return {
+        ...item,
+        label: item.fileName,
+        value: item.fileName  + ',' + item.fileMd5,
+      };
+    }));
+  }
+
+  @action.bound
+  public setMetaList(data: IMetaData[]) {
+    this.setLoading(false);
+    this.metaList = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setConfigure(data: IConfigure[]) {
+    this.configureList = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setDataCenter(data: string[]) {
+    this.dataCenterList = data || [];
+  }
+
+  @action.bound
+  public setClusterBroker(data: IBrokerData[]) {
+    this.clusterBroker = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setClusterConsumer(data: IOffset[]) {
+    this.consumerData = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setControllerHistory(data: IController[]) {
+    this.controllerHistory = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setBrokersBasicInfo(data: IBrokersBasicInfo) {
+    this.brokersBasicInfo = data;
+  }
+
+  @action.bound
+  public setPeakFlowStatus(data: IEnumsMap[]) {
+    this.peakFlowStatusList = data;
+    data.forEach((ele: IEnumsMap) => {
+      this.peakValueMap.push(ele.message);
+    });
+  }
+
+  @action.bound
+  public setBrokersStatus(data: IBrokersStatus) {
+    this.brokersStatus = data;
+    this.bytesInStatus = data.brokerBytesInStatusList.slice(1);
+    const peakValueMap = this.peakValueMap.slice(1);
+    this.replicaStatus = data.brokerReplicaStatusList.slice(1);
+
+    this.bytesInStatus.forEach((item, index) => {
+      this.peakValueList.push({ name: peakValueMap[index], value: item});
+    });
+    this.replicaStatus.forEach((item, index) => {
+      this.copyValueList.push({name: copyValueMap[index], value: item});
+    });
+  }
+
+  @action.bound
+  public setBrokersMetrics(data: IClusterReal) {
+    this.brokersMetrics = data;
+    this.setRealBrokerLoading(false);
+  }
+
+  @action.bound
+  public changeBrokerType(type: IOptionType) {
+    this.type = type;
+    return getClusterMetricOption(type, this.brokersMetricsHistory);
+  }
+
+  @action.bound
+  public setBrokersMetricsHistory(data: IClusterMetrics[]) {
+    this.brokersMetricsHistory = data;
+    return this.changeBrokerType(this.type);
+  }
+
+  @action.bound
+  public setBrokersHistoryList(data: IClusterMetrics[]) {
+    this.brokersMetricsHistory = data;
+  }
+
+  @action.bound
+  public setBrokersTopics(data: IBrokersTopics[]) {
+    this.brokersTopics = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setBrokersPartitions(data: IBrokersPartitions[]) {
+    this.brokersPartitions = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setBrokersAnalysis(data: IBrokersAnalysis) {
+    data.bytesIn = transBToMB(data.bytesIn) as number;
+    data.bytesOut = transBToMB(data.bytesOut) as number;
+    this.brokersAnalysis = data;
+    this.brokersAnalysisTopic = data.topicAnalysisVOList ?
+      data.topicAnalysisVOList.map((item: IAnalysisTopicVO, index: number) => {
+        item.key = index;
+        return item;
+      }) : [];
+  }
+
+  @action.bound
+  public setBrokersMetadata(data: IBrokersMetadata[]) {
+    this.brokersMetadata = data ? data.map((item, index) => {
+        item.key = index;
+        return {
+          ...item,
+          text: `${item.host} （BrokerID：${item.brokerId}）`,
+          label: item.host,
+          value: item.brokerId,
+        };
+      }) : [];
+  }
+
+  @action.bound
+  public setBrokersRegions(data: IBrokersRegions[]) {
+    const regions = data ? data.map((item, index) => {
+      item.key = index;
+      const capacity = transBToMB(item.capacity) as number;
+      const estimateUsed = transBToMB(item.estimateUsed) as number;
+      const surplus = capacity - estimateUsed;
+      const text = `${item.name}(总容量${capacity} MB, 已使用${estimateUsed.toFixed(2)} MB, 剩余${surplus.toFixed(2)} MB)`;
+      const isCapacityFull = item.status === 1 ? `<容量已满>${text}` : text;
+      return {
+        ...item,
+        label: isCapacityFull,
+        value: item.id,
+        surplus,
+      };
+    }) : [];
+    regions.sort((a, b) => a.surplus < b.surplus ? 1 : -1);
+    const filterRegions = [] as any;
+    if (this.regionIdList && this.regionIdList.length) {
+      regions.forEach(ele => {
+        this.regionIdList.forEach(t => {
+          if (ele.id === t) {
+            filterRegions.push(ele);
+          }
+        });
+      });
+    }
+    this.brokersRegions = filterRegions.length ? filterRegions : regions;
+    return this.brokersRegions;
+  }
+
+  @action.bound
+  public setLogicalClusters(data: ILogicalCluster[]) {
+    this.logicalClusters = data ? data.map((item, index) => {
+        item.key = index;
+        return item;
+      }) : [];
+  }
+
+  @action.bound
+  public setQueryLogical(data: ILogicalCluster) {
+    this.queryLogical = data;
+  }
+
+  @action.bound
+  public setClustersThrottles(data: IThrottles[]) {
+    this.clustersThrottles = data ? data.map((item, index) => {
+        item.key = index;
+        return item;
+      }) : [];
+  }
+
+  @action.bound
+  public setPartitionsLocation(data: IPartitionsLocation[]) {
+    this.partitionsLocation = data ? data.map((item, index) => {
+        item.key = index;
+        return item;
+      }) : [];
+  }
+
+  @action.bound
+  public setTaskManagement(data: ITaskManage[]) {
+    this.taskManagement = data ? data.map((item, index) => {
+        item.key = index;
+        return item;
+      }) : [];
+  }
+
+  @action.bound
+  public setClusterTasksEnums(data: ITaskType) {
+    this.tasksEnums = data.taskType.map(ele => {
+      return {
+        ...ele,
+        label: ele.message,
+        value: ele.name,
+      };
+    });
+  }
+
+  @action.bound
+  public setTasksMetadata(data: ITasksMetaData) {
+    this.tasksMetaData = data;
+  }
+
+  @action.bound
+  public setSubtasksStatus(data: ITaskStatusDetails) {
+    this.taskStatusDetails = data;
+  }
+
+  @action.bound
+  public setClusterTaskLog(data: string) {
+    this.clusterTaskLog = data;
+  }
+
+  @action.bound
+  public setConfigsKafkaRoles(data: IKafkaRoles[]) {
+    this.kafkaRoles = data;
+  }
+
+  @action.bound
+  public setConfigsTaskStatus(data: IEnumsMap[]) {
+    this.configsTaskStatus = data;
+  }
+
+  @action.bound
+  public setStaffSummary(data: IStaffSummary[]) {
+    this.staffSummary = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setBillStaffSummary(data: IBill[] = []) {
+    this.loading = false;
+    if (data) {
+      this.billStaff = data.map((item, index) => ({
+        ...item,
+        cost: +item.cost.toFixed(2),
+        key: index,
+      }));
+    }
+
+    return getBillBarOption(this.billStaff);
+  }
+
+  @action.bound
+  public setBillStaffDetail(data: any) {
+    this.loading = false;
+    const billList = data.billList || [] as IBill[];
+    this.billDetailStaffData = billList.map((item: IBill, index: number) => ({
+      ...item,
+      cost: +item.cost.toFixed(2),
+      key: index,
+    }));
+  }
+
+  public deleteCluster(clusterId: number) {
+    return deleteCluster(clusterId).then(() => this.getMetaData(true));
+  }
+
+  public getPeakFlowChartData(value: ILabelValue[], map: string []) {
+    return getPieChartOption(value, map);
+  }
+
+  public getSideStatusChartData(value: ILabelValue[]) {
+    return getPieChartOption(value, copyValueMap);
+  }
+
+  public getBasicInfo(clusterId: number) {
+    return getBasicInfo(clusterId).then(this.setBasicInfo);
+  }
+
+  public getClusterRealTime(clusterId: number) {
+    this.getRealClusterLoading(true);
+    return getClusterRealTime(clusterId).then(this.setClusterRealTime);
+  }
+
+  public getClusterMetrice(clusterId: number) {
+    return getClusterMetrice(clusterId,
+      timestore.startTime.format('x'),
+      timestore.endTime.format('x')).then(this.setClusterMetrice);
+  }
+
+  public getClusterTopics(clusterId: number) {
+    this.setLoading(true);
+    return getClusterTopics(clusterId).then(this.setClusterTopics);
+  }
+
+  public getTopicsBasicInfo(clusterId: number, topicName: string) {
+    return getTopicsBasicInfo(clusterId, topicName).then(this.setTopicsBasicInfo);
+  }
+
+  public getTasksKafkaFiles(clusterId?: any) {
+    return getTasksKafkaFiles(clusterId || '').then(this.setTasksKafkaFiles);
+  }
+
+  public getMetaData(needDetail: boolean) {
+    this.setLoading(true);
+    getMetaData(needDetail).then(this.setMetaList);
+  }
+
+  public getConfigure() {
+    getConfigure().then(this.setConfigure);
+  }
+
+  public addNewConfigure(params: IConfigure) {
+    return addNewConfigure(params).then(() => this.getConfigure());
+  }
+
+  public editConfigure(params: IConfigure) {
+    return editConfigure(params).then(() => this.getConfigure());
+  }
+
+  public deleteConfigure(configKey: string) {
+    deleteConfigure(configKey).then(() => this.getConfigure());
+  }
+
+  public getDataCenter() {
+    getDataCenter().then(this.setDataCenter);
+  }
+
+  public getClusterBroker(clusterId: number) {
+    return getClusterBroker(clusterId).then(this.setClusterBroker);
+  }
+
+  public getClusterConsumer(clusterId: number) {
+    return getClusterConsumer(clusterId).then(this.setClusterConsumer);
+  }
+
+  public getControllerHistory(clusterId: number) {
+    return getControllerHistory(clusterId).then(this.setControllerHistory);
+  }
+
+  public getBrokersBasicInfo(clusterId: number, brokerId: number) {
+    return getBrokersBasicInfo(clusterId, brokerId).then(this.setBrokersBasicInfo);
+  }
+
+  public getPeakFlowStatus() {
+    return getPeakFlowStatus().then(this.setPeakFlowStatus);
+  }
+
+  public getBrokersStatus(clusterId: number) {
+    return getBrokersStatus(clusterId).then(this.setBrokersStatus);
+  }
+
+  public getBrokersMetrics(clusterId: number, brokerId: number) {
+    this.setRealBrokerLoading(true);
+    return getBrokersMetrics(clusterId, brokerId).then(this.setBrokersMetrics);
+  }
+
+  public getBrokersMetricsHistory(clusterId: number, brokerId: number) {
+    return getBrokersMetricsHistory(clusterId, brokerId,
+      timestore.startTime.format('x'), timestore.endTime.format('x')).then(this.setBrokersMetricsHistory);
+  }
+
+  // tslint:disable-next-line:max-line-length
+  public getBrokersHistoryList(clusterId: number, brokerId: number, startTime: string, endTime: string) {
+    return getBrokersMetricsHistory(clusterId, brokerId, startTime, endTime).then(
+      (data: IClusterMetrics[]) => this.setBrokersHistoryList(data));
+  }
+
+  public getBrokersTopics(clusterId: number, brokerId: number) {
+    return getBrokersTopics(clusterId, brokerId).then(this.setBrokersTopics);
+  }
+
+  public getBrokersPartitions(clusterId: number, brokerId: number) {
+    this.setRealBrokerLoading(true);
+    return getBrokersPartitions(clusterId, brokerId).then(this.setBrokersPartitions).finally(() => this.setRealBrokerLoading(false));
+  }
+
+  public getBrokersAnalysis(clusterId: number, brokerId: number) {
+    return getBrokersAnalysis(clusterId, brokerId).then(this.setBrokersAnalysis);
+  }
+
+  public getBrokersMetadata(clusterId: number) {
+    return getBrokersMetadata(clusterId).then(this.setBrokersMetadata);
+  }
+
+  public getBrokersRegions(clusterId: number) {
+    return getBrokersRegions(clusterId).then(this.setBrokersRegions);
+  }
+
+  public addNewRegions(clusterId: number, params: INewRegions) {
+    return addNewRegions(params).then(() => this.getBrokersRegions(clusterId));
+  }
+
+  public editRegions(clusterId: number, params: INewRegions) {
+    return editRegions(params).then(() => this.getBrokersRegions(clusterId));
+  }
+
+  public getLogicalClusters(clusterId: number) {
+    return getLogicalClusters(clusterId).then(this.setLogicalClusters);
+  }
+
+  public queryLogicalClusters(clusterId: number) {
+    return queryLogicalClusters(clusterId).then(this.setQueryLogical);
+  }
+
+  public createLogicalClusters(clusterId: number, params: INewLogical) {
+    return createLogicalClusters(params).then(() => this.getLogicalClusters(clusterId));
+  }
+
+  public editLogicalClusters(clusterId: number, params: INewLogical) {
+    return editLogicalClusters(params).then(() => this.getLogicalClusters(clusterId));
+  }
+
+  public deteleLogicalClusters(clusterId: number, id: number) {
+    return deteleLogicalClusters(id).then(() => this.getLogicalClusters(clusterId));
+  }
+
+  public getClustersThrottles(clusterId: number) {
+    return getClustersThrottles(clusterId).then(this.setClustersThrottles);
+  }
+
+  public getPartitionsLocation(clusterId: number, brokerId: number) {
+    return getPartitionsLocation(clusterId, brokerId).then(this.setPartitionsLocation);
+  }
+
+  public getTaskManagement() {
+    return getTaskManagement().then(this.setTaskManagement);
+  }
+
+  public getClusterTasksEnums() {
+    return getClusterTasksEnums().then(this.setClusterTasksEnums);
+  }
+
+  public getTasksMetadata(taskId: number) {
+    return getTasksMetadata(taskId).then(this.setTasksMetadata);
+  }
+
+  public getSubtasksStatus(taskId: number) {
+    return getSubtasksStatus(taskId).then(this.setSubtasksStatus);
+  }
+
+  public getClusterTaskLog(taskId: number, hostname: string) {
+    return getClusterTaskLog(taskId, hostname).then(this.setClusterTaskLog);
+  }
+
+  public getConfigsKafkaRoles() {
+    return getConfigsKafkaRoles().then(this.setConfigsKafkaRoles);
+  }
+
+  public addMigrationTask(params: INewBulidEnums) {
+    return newlyBuildEcmTasks(params).then(() => this.getTaskManagement());
+  }
+
+  public getConfigsTaskStatus() {
+    return getConfigsTaskStatus().then(this.setConfigsTaskStatus);
+  }
+
+  public deteleClusterBrokers(clusterId: number, brokerId: number) {
+    return deteleClusterBrokers(clusterId, brokerId).then(() => this.getClusterBroker(clusterId));
+  }
+
+  public getStaffSummary(timestamp: number) {
+    return getStaffSummary(timestamp).then(this.setStaffSummary);
+  }
+
+  public getBillStaffList(username: string, startTime: number, endTime: number) {
+    this.setLoading(true);
+    return getBillStaffSummary(username, startTime, endTime).then(this.setBillStaffSummary);
+  }
+
+  public getBillDetailStaffList(username: string, timestamp: number) {
+    this.setLoading(true);
+    return getBillStaffDetail(username, timestamp).then(this.setBillStaffDetail);
+  }
+}
+
+export const admin = new Admin();

kafka-manager-console/src/store/alarm.ts

@@ -0,0 +1,190 @@
+import { observable, action } from 'mobx';
+import { message } from 'component/antd';
+import { IMonitorStrategies, IMonitorAlerts, IMonitorSilences, IMonitorGroups, IAlertsDetail, IMonitorAlert, IMonitorMetric, IMonitorType } from 'types/base-type';
+import { getMonitorStrategies, deteleMonitorStrategies, getMonitorAlerts, getAlertsDetail, createSilences, getMonitorSilences, modifyMask, getSilencesDetail, deleteSilences, getMonitorType, addMonitorStrategy, getMonitorDetail, modifyMonitorStrategy, getMonitorNotifyGroups } from 'lib/api';
+import { getMonitorMetricOption } from 'lib/line-charts-config';
+import { IRequestParams, IMonitorStrategyDetail, IMonitorMetricType, IMetricType } from 'types/alarm';
+import { urlPrefix } from 'constants/left-menu';
+
+class Alarm {
+
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public monitorStrategies: IMonitorStrategies[] = [];
+
+  @observable
+  public monitorAlerts: IMonitorAlerts[] = [];
+
+  @observable
+  public alertsDetail: IAlertsDetail;
+
+  @observable
+  public monitorAlert: IMonitorAlert;
+
+  @observable
+  public monitorMetric: IMonitorMetric;
+
+  @observable
+  public monitorSilences: IMonitorSilences[] = [];
+
+  @observable
+  public silencesDetail: IMonitorSilences;
+
+  @observable
+  public monitorGroups: IMonitorGroups[] = [];
+
+  @observable
+  public monitorType: string = '';
+
+  @observable
+  public currentTopic: string = '';
+
+  @observable
+  public monitorTypeList: IMetricType[] = [];
+
+  @observable
+  public monitorStrategyDetail: IMonitorStrategyDetail = {} as IMonitorStrategyDetail;
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public changeMonitorStrategyType(type: string) {
+    this.monitorType = type;
+  }
+
+  @action.bound
+  public changeTopic(topic: string) {
+    this.currentTopic = topic;
+  }
+
+  @action.bound
+  public setMonitorStrategies(data: IMonitorStrategies[]) {
+    this.monitorStrategies = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setMonitorAlerts(data: IMonitorAlerts[]) {
+    this.monitorAlerts = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setAlertsDetail(data: IAlertsDetail) {
+    this.alertsDetail = data;
+    this.monitorAlert = data.monitorAlert;
+    this.monitorMetric = data.monitorMetric;
+  }
+
+  @action.bound
+  public setMonitorSilences(data: IMonitorSilences[]) {
+    this.monitorSilences = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+  @action.bound
+  public setMonitorType(data: IMonitorMetricType) {
+    this.monitorTypeList = data.metricNames || [];
+    this.monitorType = this.monitorTypeList[0].metricName;
+  }
+
+  @action.bound
+  public setMonitorStrategyDetail(data: IMonitorStrategyDetail) {
+    this.monitorStrategyDetail = data || {} as IMonitorStrategyDetail;
+  }
+
+  @action.bound
+  public setSilencesDetail(data: IMonitorSilences) {
+    this.silencesDetail = data;
+  }
+
+  @action.bound
+  public setMonitorGroups(data: IMonitorGroups[]) {
+    this.monitorGroups = data;
+  }
+
+  public getMetircHistoryChartOptions = () => {
+    return getMonitorMetricOption(this.monitorMetric.metric, this.monitorMetric.values);
+  }
+
+  public getMonitorStrategies() {
+    getMonitorStrategies().then(this.setMonitorStrategies);
+  }
+
+  public deteleMonitorStrategies(monitorId: number) {
+    return deteleMonitorStrategies(monitorId).then(() => this.getMonitorStrategies());
+  }
+
+  public getMonitorAlerts(monitorId: number, startTime: number, endTime: number) {
+    this.setLoading(true);
+    getMonitorAlerts(monitorId, startTime, endTime).then(this.setMonitorAlerts);
+  }
+
+  public getAlertsDetail(alertId: number) {
+    return getAlertsDetail(alertId).then(this.setAlertsDetail);
+  }
+
+  public createSilences(params: IMonitorSilences, monitorId: number) {
+    return createSilences(params).then(() => {
+      this.getMonitorSilences(monitorId);
+    });
+  }
+
+  public getMonitorSilences(monitorId: number) {
+    getMonitorSilences(monitorId).then(this.setMonitorSilences);
+  }
+
+  public modifyMask(params: IMonitorSilences, monitorId: number) {
+    return modifyMask(params).then(() => {
+      this.getMonitorSilences(monitorId);
+    });
+  }
+
+  public getSilencesDetail(silenceId: number) {
+    return getSilencesDetail(silenceId).then(this.setSilencesDetail);
+  }
+
+  public deleteSilences(monitorId: number, silenceId: number) {
+    return deleteSilences(monitorId, silenceId).then(() => {
+      this.getMonitorSilences(monitorId);
+    });
+  }
+
+  public getMonitorType() {
+    return getMonitorType().then(this.setMonitorType);
+  }
+
+  public addMonitorStategy(params: IRequestParams) {
+    this.setLoading(true);
+    return addMonitorStrategy(params).then(() => {
+      message.success('操作成功');
+      window.location.href = `${urlPrefix}/alarm`;
+    }).finally(() => this.setLoading(false));
+  }
+
+  public async getMonitorDetail(id: number) {
+    return getMonitorDetail(id).then(this.setMonitorStrategyDetail);
+  }
+
+  public modifyMonitorStrategy(params: IRequestParams) {
+    return modifyMonitorStrategy(params).then(() => {
+      message.success('操作成功');
+    }).finally(() => this.setLoading(false));
+  }
+
+  public getMonitorGroups() {
+    return getMonitorNotifyGroups(); // this.setMonitorGroups
+  }
+}
+export const alarm = new Alarm();

kafka-manager-console/src/store/app.ts

@@ -0,0 +1,185 @@
+import { observable, action } from 'mobx';
+import { getAppList, getAppDetail, getAppTopicList, applyOrder, modfiyApplication, modfiyAdminApp, getAdminAppList, getAppsConnections, getTopicAppQuota } from 'lib/api';
+import { IAppItem, IAppQuota, ITopic, IOrderParams, IConnectionInfo } from 'types/base-type';
+
+class App {
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public connectLoading: boolean = true;
+
+  @observable
+  public data: IAppItem[] = [];
+
+  @observable
+  public adminAppData: IAppItem[] = [];
+
+  @observable
+  public selectData: IAppItem[] = [{
+    appId: '-1',
+    name: '所有关联应用',
+    } as IAppItem,
+  ];
+
+  @observable
+  public active: string = '-1';
+
+  @observable
+  public baseInfo: IAppItem = {} as IAppItem;
+
+  @observable
+  public topicList: ITopic[] = [];
+
+  @observable
+  public currentTab: string = '1';
+
+  @observable
+  public appsConnections: IConnectionInfo[] = [];
+
+  @observable
+  public principal: string = '';
+
+  @observable
+  public appQuota: IAppQuota[] = [];
+
+  @action.bound
+  public changeActiveApp(data: string) {
+    this.active = data;
+  }
+
+  @action.bound
+  public setTopicAppQuota(data: IAppQuota[]) {
+    return this.appQuota = data.map((item, index) => {
+       return {
+         ...item,
+         label: item.appName,
+         value: item.appId,
+         key: index,
+       };
+    });
+  }
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public setConnectLoading(value: boolean) {
+    this.connectLoading = value;
+  }
+
+  @action.bound
+  public setData(data: IAppItem[] = []) {
+    this.data = data.map((item, index) => ({
+      ...item,
+      key: index,
+      principalList: item.principals ? item.principals.split(',') : [],
+    }));
+    const selectData = data.map((item) => ({
+      ...item,
+      label: item.name,
+      value: item.appId,
+    }));
+
+    this.selectData.push(...selectData);
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setAdminData(data: IAppItem[] = []) {
+    this.adminAppData = data.map((item, index) => ({
+      ...item,
+      key: index,
+      principalList: item.principals ? item.principals.split(',') : [],
+    }));
+
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setCurrentTab(data: string) {
+    this.currentTab = data;
+  }
+
+  @action.bound
+  public setAppDetail(data: IAppItem) {
+    this.baseInfo = data || {} as IAppItem;
+  }
+
+  @action.bound
+  public setTopicList(data: ITopic[]) {
+    this.topicList = data.map((item, index) => ({
+      ...item,
+      key: index,
+    }));
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setAppsConnections = (data: IConnectionInfo[]) => {
+    this.setConnectLoading(false);
+    this.appsConnections = (data || []).map((item, index) => {
+      return {
+        key: index,
+        ...item,
+      };
+    });
+  }
+
+  public getAppList() {
+    this.setLoading(true);
+    getAppList().then(this.setData);
+  }
+
+  public getTopicAppQuota(clusterId: number, topicName: string) {
+    return getTopicAppQuota(clusterId, topicName).then(this.setTopicAppQuota);
+  }
+
+  public getAdminAppList() {
+    this.setLoading(true);
+    getAdminAppList().then(this.setAdminData);
+  }
+
+  public getAppDetail(appId: string) {
+    getAppDetail(appId).then(this.setAppDetail);
+  }
+
+  public getAppTopicList(appId: string) {
+    this.setLoading(true);
+    const mine = this.currentTab === '1';
+    getAppTopicList(appId, mine).then(this.setTopicList);
+  }
+
+  public applyApplication(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public modfiyApplication(params: any, from?: string) {
+    return from === 'admin' ? this.modfiyAdminApp(params) : modfiyApplication(params).then(() => this.getAppList());
+  }
+
+  public modfiyAdminApp(params: any) {
+    return modfiyAdminApp(params).then(() => this.getAdminAppList());
+  }
+
+  public cancelProdPermission(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public applyAppOffline(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public getAppsConnections(appId: string) {
+    this.setConnectLoading(true);
+    return getAppsConnections(appId).then(this.setAppsConnections);
+  }
+
+  public applyExpand(params: IOrderParams) {
+    return applyOrder(params);
+  }
+}
+
+export const app = new App();

kafka-manager-console/src/store/bill.ts

@@ -0,0 +1,57 @@
+import { observable, action } from 'mobx';
+import { getBillList, getBillDetail } from 'lib/api';
+import { IBill, IBillDetail } from 'types/base-type';
+import { getBillBarOption } from 'lib/bar-pie-config';
+
+class Bill {
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public data: IBill[] = [];
+
+  @observable
+  public billDetailData: IBillDetail[] = [];
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public setData(data: IBill[] = []) {
+    this.loading = false;
+    if (data) {
+      this.data = data.map((item, index) => ({
+        ...item,
+        cost: +item.cost.toFixed(2),
+        key: index,
+      }));
+    }
+
+    return getBillBarOption(this.data);
+  }
+
+  @action.bound
+  public setDetailData(data: any) {
+    this.loading = false;
+    const billList = data.billList || [] as IBill[];
+    this.billDetailData = billList.map((item: IBill, index: number) => ({
+      ...item,
+      cost: +item.cost.toFixed(2),
+      key: index,
+    }));
+  }
+
+  public getList(startTime: number, endTime: number) {
+    this.setLoading(true);
+    return getBillList(startTime, endTime).then(this.setData);
+  }
+
+  public getDetailList(timestamp: number) {
+    this.setLoading(true);
+    return getBillDetail(timestamp).then(this.setDetailData);
+  }
+}
+
+export const bill = new Bill();

kafka-manager-console/src/store/cluster.ts

@@ -0,0 +1,285 @@
+import { observable, action } from 'mobx';
+import { getClusterMetaTopics, getClusters, getAllClusters, getClusterModes, applyOrder, getClusterComboList, getClusterBasicInfo, getClusterDetailRealTime, getClusterDetailMetrice, getClusterDetailTopics, getClusterDetailBroker, getClusterDetailThrottles } from 'lib/api';
+import { IClusterData, IConfigInfo, IOrderParams, IBasicInfo, IClusterReal, IClusterMetrics, IOptionType, IClusterTopics, IBrokerData, IThrottles } from 'types/base-type';
+import { getClusterMetricOption } from 'lib/line-charts-config';
+import { timestore } from './time';
+
+class Cluster {
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public realLoading: boolean = false;
+
+  @observable
+  public filterLoading: boolean = false;
+
+  @observable
+  public clusterData: IClusterData[] = [];
+
+  @observable
+  public selectData: IClusterData[] = [{
+    value: -1,
+    label: '所有集群',
+    } as IClusterData,
+  ];
+
+  @observable
+  public allData: IClusterData[] = [];
+
+  @observable
+  public selectAllData: IClusterData[] = [{
+    value: -1,
+    label: '所有集群',
+    } as IClusterData,
+  ];
+
+  @observable
+  public clusterComboList: IConfigInfo[] = [];
+
+  @observable
+  public active: number = -1;
+
+  @observable
+  public allActive: number = -1;
+
+  @observable
+  public clusterModes: IConfigInfo[] = [];
+
+  @observable
+  public clusterMode: IConfigInfo[] = [];
+
+  @observable
+  public basicInfo: IBasicInfo = null;
+
+  @observable
+  public clusterRealData: IClusterReal = null;
+
+  @observable
+  public clusterMetrics: IClusterMetrics[] = [];
+
+  @observable
+  public type: IOptionType = 'byteIn/byteOut' ;
+
+  @observable
+  public clusterTopics: IClusterTopics[] = [];
+
+  @observable
+  public clusterBroker: IBrokerData[] = [];
+
+  @observable
+  public clustersThrottles: IThrottles[] = [];
+
+  @observable
+  public clusterMetaTopics: IClusterTopics[] = [];
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public setRealLoading(value: boolean) {
+    this.realLoading = value;
+  }
+
+  @action.bound
+  public setFilterLoading(value: boolean) {
+    this.filterLoading = value;
+  }
+
+  @action.bound
+  public setData(data: IClusterData[]) {
+    data = data.map(item => {
+      return {
+        ...item,
+        label: `${item.clusterName}${item.description ? '（' + item.description + '）' : ''}`,
+        value: item.clusterId,
+      };
+    }) || [];
+    this.selectData.push(...data);
+    this.clusterData = data;
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public changeCluster(data: number) {
+    this.active = data;
+  }
+
+  @action.bound
+  public setAllData(data: IClusterData[]) {
+    data = data.map(item => {
+      return {
+        ...item,
+        label: `${item.clusterName}${item.description ? '（' + item.description + '）' : ''}`,
+        value: item.clusterId,
+      };
+    }) || [];
+    this.selectAllData.push(...data);
+    this.allData = data;
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public changeAllCluster(data: number) {
+    this.allActive = data;
+  }
+
+  @action.bound
+  public setClusterCombos(data: IConfigInfo[]) {
+    this.clusterComboList = data || [];
+    this.clusterComboList = this.clusterComboList.map(item => {
+     return {
+       ...item,
+       label: item.message,
+       value: item.code,
+     };
+    });
+  }
+
+  @action.bound
+  public setClusterModes(data: IConfigInfo[]) {
+    this.clusterModes = data;
+    this.clusterModes = this.clusterModes.map(item => {
+      return {
+        ...item,
+        label: item.message,
+        value: item.code,
+      };
+    });
+    this.clusterMode = (this.clusterModes && this.clusterModes.filter(ele => ele.code !== 0) ) || []; // 去除 0 共享集群
+  }
+
+  @action.bound
+  public setClusterBasicInfo(data: IBasicInfo) {
+    this.basicInfo = data;
+  }
+
+  @action.bound
+  public setClusterDetailRealTime(data: IClusterReal) {
+    this.clusterRealData =  data;
+    this.setRealLoading(false);
+  }
+
+  @action.bound
+  public changeType(type: IOptionType) {
+    this.type = type;
+    return getClusterMetricOption(type, this.clusterMetrics);
+  }
+
+  @action.bound
+  public setClusterDetailMetrice(data: IClusterMetrics[]) {
+    this.clusterMetrics = data;
+    return this.changeType(this.type);
+  }
+
+  @action.bound
+  public setClusterDetailTopics(data: IClusterTopics[]) {
+    this.clusterTopics = data;
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setClusterDetailBroker(data: IBrokerData[]) {
+    this.clusterBroker = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setClusterDetailThrottles(data: IThrottles[]) {
+    this.clustersThrottles = data ? data.map((item, index) => {
+        item.key = index;
+        return item;
+      }) : [];
+  }
+
+  @action.bound
+  public setClusterTopicsMeta(data: IClusterTopics[]) {
+    this.clusterMetaTopics = data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) || [];
+    const obj = {} as any;
+    this.clusterMetaTopics = this.clusterMetaTopics.reduce((current, next) => {
+      if (!obj[next.topicName]) {
+        obj[next.topicName] = true;
+        current.push(next);
+      }
+      return current;
+    }, []);
+    return this.clusterMetaTopics;
+  }
+
+  public getClusters() {
+    this.setLoading(true);
+    getClusters().then(this.setData);
+  }
+
+  public getAllClusters() {
+    this.setLoading(true);
+    getAllClusters().then(this.setAllData);
+  }
+
+  public getClusterComboList() {
+    getClusterComboList().then(this.setClusterCombos);
+  }
+
+  public getClusterModes() {
+    return getClusterModes().then(this.setClusterModes);
+  }
+
+  public applyCluster(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public applyClusterOffline(params: IOrderParams) {
+    return applyOrder(params).then(() => {
+      this.getClusters();
+    });
+  }
+
+  public applyCpacity(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public getClusterBasicInfo(clusterId: number) {
+    return getClusterBasicInfo(clusterId).then(this.setClusterBasicInfo);
+  }
+
+  public getClusterDetailRealTime(clusterId: number) {
+    this.setRealLoading(true);
+    return getClusterDetailRealTime(clusterId).then(this.setClusterDetailRealTime);
+  }
+
+  public getClusterDetailMetrice(clusterId: number) {
+    return getClusterDetailMetrice(clusterId,
+      timestore.startTime.format('x'),
+      timestore.endTime.format('x')).then(this.setClusterDetailMetrice);
+  }
+
+  public getClusterDetailTopics(clusterId: number) {
+    this.setLoading(true);
+    return getClusterDetailTopics(clusterId).then(this.setClusterDetailTopics);
+  }
+
+  public getClusterDetailBroker(clusterId: number) {
+    this.setLoading(true);
+    return getClusterDetailBroker(clusterId).then(this.setClusterDetailBroker);
+  }
+
+  public getClusterDetailThrottles(clusterId: number) {
+    return getClusterDetailThrottles(clusterId).then(this.setClusterDetailThrottles);
+  }
+
+  public getClusterMetaTopics(clusterId: number) {
+    this.setFilterLoading(true);
+    return getClusterMetaTopics(clusterId).then(this.setClusterTopicsMeta).finally(() => this.setFilterLoading(false));
+  }
+
+}
+
+export const cluster = new Cluster();

kafka-manager-console/src/store/consume.ts

@@ -0,0 +1,85 @@
+import { observable, action } from 'mobx';
+import { getConsumeInfo, resetOffset, getConsumeGroup } from 'lib/api';
+import { IOffset } from 'types/base-type';
+
+export interface IConsumeInfo {
+  location: string;
+  consumerGroup: string;
+  clusterId?: number;
+  key?: string;
+}
+export interface IConsumeDetail {
+  clientId: string;
+  clusterId: number;
+  consumeOffset: number;
+  consumerGroup: string;
+  lag: number;
+  location: string;
+  partitionId: number;
+  partitionOffset: number;
+  topicName: string;
+}
+
+export interface IOffsetlist {
+  offset: number;
+  partitionId: number;
+}
+
+class Consume {
+  @observable
+  public data: IConsumeInfo[] = [];
+
+  @observable
+  public consumeGroupDetail: IConsumeDetail[] = [];
+
+  @observable
+  public offsetList: IOffsetlist[] = [{ offset: null, partitionId: null }];
+
+  @observable
+  public consumerTopic: any[] = [];
+
+  @action.bound
+  public setData(data: IConsumeInfo[]) {
+    this.data = data.map(i => {
+      i.location = i.location.toLowerCase();
+      return i;
+    });
+  }
+
+  @action.bound
+  public selectChange(index: number, value: number) {
+    this.offsetList[index].partitionId = value;
+  }
+
+  @action.bound
+  public inputChange(index: number, event: any) {
+    this.offsetList[index].offset = event.target.value;
+  }
+
+  @action.bound
+  public handleList(index?: number) {
+    index ? this.offsetList.splice(index, 1) : this.offsetList.push({ offset: null, partitionId: null });
+    this.offsetList = this.offsetList.slice(0);
+  }
+
+  @action.bound
+  public offsetPartition(params: IOffset, type?: number) {
+    if (type) return resetOffset(Object.assign(params, { offsetList: this.offsetList }));
+    return resetOffset(params);
+  }
+
+  @action.bound
+  public setConsumerTopic(topic: string[]) {
+    this.consumerTopic = topic.map(i => ({ topicName: i }));
+  }
+
+  public getConsumeInfo(clusterId: number) {
+    getConsumeInfo(clusterId).then(this.setData);
+  }
+
+  public getConsumerTopic( clusterId: number, consumerGroup: string, location: string ) {
+    getConsumeGroup(clusterId, consumerGroup, location).then(this.setConsumerTopic);
+  }
+}
+
+export const consume = new Consume();

kafka-manager-console/src/store/curve-info.ts

@@ -0,0 +1,75 @@
+import { observable, action } from 'mobx';
+import moment = require('moment');
+import { EChartOption } from 'echarts/lib/echarts';
+import { ICurve } from 'container/common-curve/config';
+import { curveKeys, PERIOD_RADIO_MAP } from 'container/admin/data-curve/config';
+import { timeFormat } from 'constants/strategy';
+
+class CurveInfo {
+  @observable
+  public periodKey: string = 'oneHour';
+
+  @observable
+  public timeRange: [moment.Moment, moment.Moment] = PERIOD_RADIO_MAP.get(this.periodKey).dateRange;
+
+  @observable
+  public curveData: { [key: string]: EChartOption } = {};
+
+  @observable
+  public curveLoading: { [key: string]: boolean } = {};
+
+  @observable
+  public operators: string[] = [];
+
+  @observable
+  public currentOperator: string;
+
+  @action.bound
+  public setCurveData(key: curveKeys | string, data: EChartOption) {
+    this.curveData[key] = data;
+  }
+
+  @action.bound
+  public setCurveLoading(key: curveKeys | string, loading: boolean) {
+    this.curveLoading[key] = loading;
+  }
+
+  @action.bound
+  public setTimeRange(newRange: [moment.Moment, moment.Moment]) {
+    this.timeRange = newRange;
+  }
+
+  @action.bound
+  public setOperators(operators: string[]) {
+    this.operators = operators;
+  }
+
+  @action.bound
+  public setCurrentOperator(operator: string) {
+    this.currentOperator = operator;
+  }
+
+  public getStartTime = () => {
+    return this.timeRange[0].format(timeFormat);
+  }
+
+  public getEndTime = () => {
+    return this.timeRange[1].format(timeFormat);
+  }
+
+  public getCommonCurveData = (
+    options: ICurve,
+    parser: (option: ICurve, data: any[]) => EChartOption,
+    reload?: boolean) => {
+    const { path } = options;
+    this.setCurveData(path, null);
+    this.setCurveLoading(path, true);
+    return options.api(this.timeRange[0], this.timeRange[1], reload).then((data: any) => {
+      this.setCurveData(path, parser(options, data));
+    }).finally(() => {
+      this.setCurveLoading(path, false);
+    });
+  }
+}
+
+export const curveInfo = new CurveInfo();

kafka-manager-console/src/store/expert.ts

@@ -0,0 +1,178 @@
+import { observable, action } from 'mobx';
+import { IHotTopics, IReassignTasks, ITopicMetadata, ITasksDetail, IReassign, IPartition, IResource, IAnomalyFlow, IMetaData, ILabelValue, IExecute } from 'types/base-type';
+import { getHotTopics, getReassignTasks, getTaskTopicMetadata, getReassignTasksDetail, getReassignTasksStatus, getInsufficientPartition, getResourceManagement, getAnomalyFlow, getMetaData, getExecuteSubTask, getExecuteTask } from 'lib/api';
+import Moment from 'moment';
+
+interface IPartitionMap {
+  [key: string]: ILabelValue[];
+}
+class Expert {
+  @observable
+  public hotTopics: IHotTopics[] = [];
+
+  @observable
+  public reassignTasks: IReassignTasks[] = [];
+
+  @observable
+  public taskTopicMetadata: ITopicMetadata[] = [];
+
+  @observable
+  public partitionIdMap: IPartitionMap = {};
+
+  @observable
+  public tasksDetail: ITasksDetail;
+
+  @observable
+  public tasksStatus: IReassign[];
+
+  @observable
+  public partitionedData: IPartition[] = [];
+
+  @observable
+  public resourceData: IResource[] = [];
+
+  @observable
+  public anomalyFlowData: IAnomalyFlow[] = [];
+
+  @observable
+  public metaData: IMetaData[] = [];
+
+  @observable
+  public active: number = null;
+
+  @action.bound
+  public changePhysical(data: number) {
+    this.active = data;
+  }
+
+  @action.bound
+  public setHotTopics(data: IHotTopics[]) {
+    this.hotTopics = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setReassignTasks(data: IReassignTasks[]) {
+    this.reassignTasks = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setTaskTopicMetadata(data: ITopicMetadata[]) {
+    this.taskTopicMetadata = data ? data.map((item, index) => {
+      item.key = index;
+      this.partitionIdMap[item.topicName] = item.partitionIdList.map(item => {
+        return {
+          label: item + '',
+          value: item + '',
+        };
+      });
+      return {
+        ...item,
+        label: item.topicName,
+        value: item.topicName,
+      };
+    }) : [];
+  }
+
+  @action.bound
+  public setReassignTasksDetail(data: ITasksDetail) {
+    this.tasksDetail = data;
+  }
+
+  @action.bound
+  public setReassignTasksStatus(data: IReassign[]) {
+    this.tasksStatus = data ? data.map((item, index) => {
+      item.key = index;
+      item.reassignList.map((ele, i) => {
+        ele.key = i;
+      });
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setInsufficientPartition(data: IPartition[]) {
+    this.partitionedData = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setResourceManagement(data: IResource[]) {
+    this.resourceData = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setAnomalyFlow(data: IAnomalyFlow[]) {
+    this.anomalyFlowData = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setMetaData(data: IMetaData[]) {
+    data = data ? data : [];
+    data.unshift({
+      clusterId: -1,
+      clusterName: '所有物理集群',
+    } as IMetaData);
+    this.metaData = data;
+    this.active = (this.metaData[0] || { clusterId: null }).clusterId;
+  }
+
+  public getHotTopics() {
+    getHotTopics().then(this.setHotTopics);
+  }
+
+  public getReassignTasks() {
+    getReassignTasks().then(this.setReassignTasks);
+  }
+
+  public getTaskTopicMetadata(clusterId: number) {
+    return getTaskTopicMetadata(clusterId).then(this.setTaskTopicMetadata);
+  }
+
+  public getReassignTasksDetail(taskId: number) {
+    getReassignTasksDetail(taskId).then(this.setReassignTasksDetail);
+  }
+
+  public getReassignTasksStatus(taskId: number) {
+    getReassignTasksStatus(taskId).then(this.setReassignTasksStatus);
+  }
+
+  public getInsufficientPartition() {
+    getInsufficientPartition().then(this.setInsufficientPartition);
+  }
+
+  public getResourceManagement() {
+    getResourceManagement().then(this.setResourceManagement);
+  }
+
+  public getAnomalyFlow(timestamp: number) {
+    getAnomalyFlow(timestamp).then(this.setAnomalyFlow);
+  }
+
+  public getMetaData(needDetail: boolean) {
+    getMetaData(needDetail).then(this.setMetaData);
+  }
+
+  public getExecuteSubTask(params: IExecute, taskId: number) {
+    return getExecuteSubTask(params).then(() => this.getReassignTasksDetail(taskId));
+  }
+
+  public getExecuteTask(params: IExecute) {
+    return getExecuteTask(params).then(() => this.getReassignTasks());
+  }
+}
+
+export const expert = new Expert();

kafka-manager-console/src/store/full-screen.ts

@@ -0,0 +1,19 @@
+import { observable, action } from 'mobx';
+
+class FullScreen {
+  @observable
+  public content: JSX.Element = null;
+
+  @action.bound
+  public show(dom: JSX.Element) {
+    this.content = dom;
+  }
+
+  @action.bound
+  public close() {
+    this.content = null;
+  }
+
+}
+
+export const fullScreen = new FullScreen();

kafka-manager-console/src/store/index.ts

@@ -0,0 +1,5 @@
+import { configure } from 'mobx';
+configure({ enforceActions: 'observed' });
+
+export { wrapper } from './wrapper';
+export { region } from './region';

kafka-manager-console/src/store/modal.ts

@@ -0,0 +1,59 @@
+import { observable, action } from 'mobx';
+import { ITopic, IBatchData } from 'types/base-type';
+
+class CustomModal {
+  @observable
+  public modalId: string = null;
+
+  @observable
+  public drawerId: string = null;
+
+  @observable
+  public params: any = null;
+
+  @observable
+  public actionAfterClose: any = null;
+
+  @action.bound
+  public setAction(value: any) {
+    this.actionAfterClose = value;
+  }
+
+  @action.bound
+  public showOfflineTopicModal(value: ITopic) {
+    this.modalId = 'offlineTopicModal';
+    this.params = value;
+  }
+
+  @action.bound
+  public showOfflineAppModal(value: string) {
+    this.modalId = 'offlineAppModal';
+    this.params = value;
+  }
+
+  @action.bound
+  public showOrderOpResult() {
+    this.modalId = 'orderOpResult';
+  }
+
+  @action.bound
+  public showOfflineClusterModal(value: number) {
+    this.modalId = 'offlineClusterModal';
+    this.params = value;
+  }
+
+  @action.bound
+  public showCancelTopicPermission(value: object) {
+    this.modalId = 'cancelTopicPermission';
+    this.params = value;
+  }
+
+  @action.bound
+  public close() {
+    this.modalId = null;
+    this.drawerId = null;
+    this.params = null;
+  }
+}
+
+export const modal = new CustomModal();

kafka-manager-console/src/store/order.ts

@@ -0,0 +1,193 @@
+import { observable, action } from 'mobx';
+import { IBaseOrder, IOrderInfo, IStatusMap, IConfigInfo, IApprovalOrder, IBrokerMetadata, IBatchApproval, IBatchApprovalData, IBatchData } from 'types/base-type';
+import { getOrderTypeList, getApplyOrderList, getApprovalOrderList, getOrderDetail, cancelOrder, approvalOrder, getBrokerMetadata, getBrokerBasicInfo, batchApprovalOrders } from 'lib/api';
+import { setCookie, getCookie } from 'lib/utils';
+
+class Order {
+  @observable
+  public applyUnique: number = null;
+
+  @observable
+  public unique: number = null;
+
+  @observable
+  public apply: number = null;
+
+  @observable
+  public approval: number = null;
+
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public orderList: IBaseOrder[] = [];
+
+  @observable
+  public applyList: IBaseOrder[] = [];
+
+  @observable
+  public approvalList: IBaseOrder[] = [];
+
+  @observable
+  public orderTypeMap: IStatusMap = {};
+
+  @observable
+  public orderInfo: IOrderInfo = {
+    applicant: {},
+    detail: {},
+    approverList: [],
+  } as IOrderInfo;
+
+  @observable
+  public brokerMetadata: IBrokerMetadata[] = [];
+
+  @observable
+  public brokerBasicInfo: IBrokerMetadata[] = [];
+
+  @observable
+  public existence: number[] = [];
+
+  @observable
+  public batchApprovalList: IBatchData[] = [];
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public setOrderList(data: IBaseOrder[]) {
+    this.orderList = data;
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setApplyList(data: IBaseOrder[]) {
+    this.applyList = data;
+    if (this.applyUnique === 0) {
+      setCookie([{ key: 'apply', value: `${data.length}`, time: 1 }]);
+      this.apply = Number(getCookie('apply'));
+      if ( data && data.length ) {
+        this.apply = data.length;
+      }
+    }
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setApprovalList(data: IBaseOrder[]) {
+    this.approvalList = data;
+    if (this.unique === 0) {
+      setCookie([{ key: 'approval', value: `${data.length}`, time: 1 }]);
+      this.approval = Number(getCookie('approval'));
+      if ( data && data.length ) {
+        this.approval = data.length;
+      }
+    }
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setOrderDetail(data: IOrderInfo) {
+    this.orderInfo = data || {
+      applicant: {},
+      detail: {},
+      approverList: [],
+    } as IOrderInfo;
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setOrderTypeList(data: IConfigInfo[]) {
+    data.map(item => {
+      this.orderTypeMap[item.type] = item.message;
+    });
+  }
+
+  @action.bound
+  public setBrokerMetadata(data: IBrokerMetadata[]) {
+    this.brokerMetadata = data ? data.map((item, index) => {
+      item.key = index;
+      return {
+        ...item,
+        value: item.brokerId,
+        label: item.host,
+        text: `${item.host} （BrokerID：${item.brokerId}`,
+      };
+    }) : [];
+    return this.brokerMetadata;
+  }
+
+  @action.bound
+  public setBrokerBasicInfo(data: IBrokerMetadata[]) {
+    const existList = data.filter(ele => ele.logicClusterId);
+    this.existence = existList.map(ele => {
+      return ele.brokerId;
+    });
+    this.brokerBasicInfo = data ? data.map((item, index) => {
+      item.key = index;
+      return {
+        ...item,
+        value: item.brokerId,
+        lable: item.host,
+      };
+    }) : [];
+  }
+
+  @action.bound
+  public setBatchApprovalOrders(data: IBatchApprovalData[]) {
+    const failList = data.filter(ele => ele.result.code !== 0);
+    const successList = data.filter(ele => ele.result.code === 0);
+    const approvalData = failList.concat(successList);
+    return this.batchApprovalList = approvalData.map(ele => {
+      return {
+        id: ele.id,
+        code: ele.result.code,
+        message: ele.result.message,
+      };
+    });
+  }
+
+  public getOrderTypeList() {
+    getOrderTypeList().then(this.setOrderTypeList);
+  }
+
+  public getApplyOrderList(status: number) {
+    this.applyUnique = status;
+    this.setLoading(true);
+    getApplyOrderList(status).then(this.setApplyList);
+  }
+
+  public getApprovalList(status: number) {
+    this.unique = status;
+    this.setLoading(true);
+    getApprovalOrderList(status).then(this.setApprovalList);
+  }
+
+  public getOrderDetail(orderId: number) {
+    this.setLoading(true);
+    getOrderDetail(orderId).then(this.setOrderDetail);
+  }
+
+  public getBrokerMetadata(clusterId: number) {
+    return getBrokerMetadata(clusterId).then(this.setBrokerMetadata);
+  }
+
+  public getBrokerBasicInfo(clusterId: number) {
+    getBrokerBasicInfo(clusterId).then(this.setBrokerBasicInfo);
+  }
+
+  public approvalOrder(value: IApprovalOrder) {
+    return approvalOrder(value);
+  }
+
+  public cancelOrder(id: number) {
+    return cancelOrder(id);
+  }
+
+  public batchApprovalOrders(params: IBatchApproval) {
+    return batchApprovalOrders(params).then(this.setBatchApprovalOrders);
+  }
+}
+
+export const order = new Order();

kafka-manager-console/src/store/region.ts

@@ -0,0 +1,50 @@
+import { observable, action } from 'mobx';
+import { getRegionIdcs } from 'lib/api';
+import { setCookie, getCookie } from 'lib/utils';
+
+export interface IRegion {
+  value: string;
+  label: string;
+}
+
+export interface IRegionIdcs {
+  name: string;
+  idc: string;
+}
+
+class RegionCenter {
+  @observable
+  public regionName: string = getCookie('idcName') || '国内';
+
+  @observable
+  public currentRegion: string = getCookie('idc') || 'cn';
+
+  @observable
+  public regionIdcList: IRegionIdcs[] = [
+    { name: '国内', idc: 'cn' },
+    { name: '美东', idc: 'us' },
+    { name: '俄罗斯', idc: 'ru' },
+  ];
+
+  @action.bound
+  public setRegion(data: IRegionIdcs) {
+    this.regionName = data.name;
+    this.currentRegion = data.idc;
+    setCookie([{ key: 'idc', value: data.idc, time: 1 }, { key: 'idcName', value: data.name, time: 1 }]);
+  }
+
+  @action.bound
+  public setRegionIdcs(data: IRegionIdcs[]) {
+    this.regionIdcList = data;
+  }
+
+  public changeRegion = (value: IRegionIdcs) => {
+    this.setRegion(value);
+  }
+
+  public getRegionIdcs() {
+    getRegionIdcs().then(this.setRegionIdcs);
+  }
+}
+
+export const region = new RegionCenter();

kafka-manager-console/src/store/time.ts

@@ -0,0 +1,29 @@
+import { observable, action } from 'mobx';
+
+import moment from 'moment';
+
+class TimeStore {
+  @observable
+  public startTime: moment.Moment;
+
+  @observable
+  public endTime: moment.Moment;
+
+  @action.bound
+  public initTime() {
+    this.startTime = moment().startOf('date');
+    this.endTime =  moment();
+  }
+
+  @action.bound
+  public changeStartTime(value: moment.Moment) {
+    this.startTime = value;
+  }
+
+  @action.bound
+  public changeEndTime(value: moment.Moment ) {
+    this.endTime = value;
+  }
+}
+
+export const timestore = new TimeStore();

kafka-manager-console/src/store/topic.ts

@@ -0,0 +1,574 @@
+import { observable, action } from 'mobx';
+import { IAuthorities, IQuotaQuery, IOrderParams, IQuotaModelItem, ILimitsItem } from 'types/base-type';
+import { deferTopic, applyOrder, getMytopics, getExpiredTopics, updateTopic, getBaseInfo, getTopicBroker, getAllTopic, getAuthorities, getQuotaQuery, getTopicBasicInfo, getRealTimeTraffic, getRealConsume, getConnectionInfo, getConsumerGroups, getConsumeDetails, getPartitionsInfo, getBrokerInfo, getAppsIdInfo, getBillInfo, getTopicMetriceInfo, getTopicMetriceTake, getTopicBusiness } from 'lib/api';
+import { getClusterMetricOption, getClusterMetricTake } from 'lib/line-charts-config';
+import { getBillBarOption } from 'lib/bar-pie-config';
+import { message } from 'component/antd';
+
+import { ITopic, IBaseInfoItem, IClusterMetrics, ITakeMetric, IOptionType, ITakeType, IBill } from 'types/base-type';
+
+import moment from 'moment';
+
+export interface ITopicBroker {
+  alive: boolean;
+  brokerId: number;
+  host: string;
+  leaderPartitionIdList: number[];
+  partitionIdList: number[];
+  partitionNum: number;
+  clusterId: number;
+}
+
+export interface ITopicBaseInfo {
+  appId: string;
+  appName: string;
+  bootstrapServers: string;
+  clusterId: number;
+  createTime: string;
+  description: string;
+  modifyTime: number;
+  partitionNum: number;
+  principals: string;
+  regionNames: string;
+  replicaNum: number;
+  retentionTime: number;
+  score: number;
+  topicCodeC: string;
+  physicalClusterId: number;
+}
+
+export interface IRealTimeTraffic {
+  byteIn: number[];
+  byteOut: number[];
+  byteRejected: number[];
+  failedFetchRequest: number[];
+  failedProduceRequest: number[];
+  messageIn: number[];
+  totalFetchRequest: number[];
+  totalProduceRequest: number[];
+  [key: string]: number[];
+}
+
+export interface IRealTimeConsume {
+  [key: string]: IRealConsumeDetail;
+}
+
+export interface IRealConsumeDetail {
+  metricsName?: string;
+  localTimeMs: number;
+  remoteTimeMs: number;
+  requestQueueTimeMs: number;
+  responseQueueTimeMs: number;
+  responseSendTimeMs: number;
+  throttleTimeMs: number;
+  totalTimeMs: number;
+}
+
+export interface IConnectionInfo {
+  appId: string;
+  clientType: string;
+  clientVersion: string;
+  clusterId: number;
+  hostname: string;
+  ip: string;
+  topicName: string;
+  key?: number;
+}
+
+export interface IConsumerGroups {
+  appIds: string;
+  clusterId: number;
+  consumerGroup: string;
+  location: string;
+  key?: number;
+}
+
+export interface IConsumeDetails {
+  clientId: string;
+  clusterId: number;
+  consumeOffset: number;
+  consumerGroup: string;
+  lag: number;
+  location: string;
+  partitionId: number;
+  partitionOffset: number;
+  topicName: string;
+  consumerId: number;
+  key?: number;
+}
+
+export interface IPartitionsInfo {
+  endOffset: number;
+  isrBrokerIdList: number[];
+  leaderBrokerId: number;
+  leaderEpoch: number;
+  location: string;
+  logSize: number;
+  msgNum: number;
+  partitionId: number;
+  replicaBrokerIdList: number[];
+  beginningOffset: number;
+  underReplicated: boolean;
+  preferredBrokerId: number;
+  key?: number;
+}
+
+export interface IBrokerInfo {
+  brokerId: number;
+  host: string;
+  leaderPartitionIdList: number[];
+  partitionIdList: number[];
+  partitionNum: number;
+  key?: number;
+}
+
+export interface IAppsIdInfo {
+  appId: string;
+  appName: string;
+  appPrincipals: string;
+  clusterId: number;
+  consumerQuota: number;
+  fetchThrottled: boolean;
+  produceQuota: number;
+  produceThrottled: boolean;
+  topicName: string;
+  key?: number;
+  access?: number;
+  clusterName?: string;
+  isPhysicalClusterId?: boolean;
+}
+
+class Topic {
+
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public expiredLoading: boolean = false;
+
+  @observable
+  public consumeLoading: boolean = false;
+
+  @observable
+  public realLoading: boolean = false;
+
+  @observable
+  public allTopicData: ITopic[] = [];
+
+  @observable
+  public authorities: IAuthorities = null;
+
+  @observable
+  public quotaQueryData: IQuotaQuery[] = [];
+
+  @observable
+  public mytopicData: ITopic[] = [];
+
+  @observable
+  public baseInfoData: IBaseInfoItem[] = [];
+
+  @observable
+  public expireData: ITopic[] = [];
+
+  @observable
+  public baseInfo: ITopicBaseInfo = null;
+
+  @observable
+  public realTraffic: IRealTimeTraffic = null;
+
+  @observable
+  public realConsume: IRealTimeConsume = null;
+
+  @observable
+  public connectionInfo: IConnectionInfo[] = [];
+
+  @observable
+  public consumerGroups: IConsumerGroups[] = [];
+
+  @observable
+  public filterGroups: IConsumerGroups[] = [];
+
+  @observable
+  public consumeDetails: IConsumeDetails[] = [];
+
+  @observable
+  public partitionsInfo: IPartitionsInfo[] = [];
+
+  @observable
+  public brokerInfo: IBrokerInfo[] = [];
+
+  @observable
+  public appsIdInfo: IAppsIdInfo[] = [];
+
+  @observable
+  public appInfo: IAppsIdInfo[] = [];
+
+  @observable
+  public billInfo: IBill[] = [];
+
+  @observable
+  public topicBrokers: ITopicBroker[] = [];
+
+  @observable
+  public clusterMetrics: IClusterMetrics[] = [];
+
+  @observable
+  public takeMetrics: ITakeMetric[] = [];
+
+  @observable
+  public type: IOptionType = 'byteIn/byteOut';
+
+  @observable
+  public takeType: ITakeType = 'requestTime99thPercentile';
+
+  @observable
+  public startTime: moment.Moment;
+
+  @observable
+  public endTime: moment.Moment;
+
+  @observable
+  public appId: string = '';
+
+  @observable
+  public connectLoading: boolean = true;
+
+  @observable
+  public topicBusiness: ITopic = null;
+
+  @observable
+  public showConsumeDetail: boolean;
+
+  @action.bound
+  public setConsumeDetail(value: boolean) {
+    this.showConsumeDetail = value;
+  }
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public setExpireLoading(value: boolean) {
+    this.expiredLoading = value;
+  }
+
+  @action.bound
+  public setConsumeLoading(value: boolean) {
+    this.consumeLoading = value;
+  }
+
+  @action.bound
+  public setRealLoading(value: boolean) {
+    this.realLoading = value;
+  }
+
+  @action.bound
+  public setConnectLoading(value: boolean) {
+    this.connectLoading = value;
+  }
+
+  @action.bound
+  public setAllTopicData(data: ITopic[] = []) {
+    this.allTopicData = data.map((i, index) => {
+      i.key = index;
+      return i;
+    });
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setAuthorities(data: IAuthorities) {
+    this.authorities = data;
+    return data;
+  }
+
+  @action.bound
+  public setQuotaQuery(data: IQuotaQuery[]) {
+    return this.quotaQueryData = data;
+  }
+
+  @action.bound
+  public setTopicData(data: ITopic[]) {
+    this.mytopicData = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setBaseInfoData(data: IBaseInfoItem[]) {
+    this.baseInfoData = data;
+  }
+
+  @action.bound
+  public setExpireData(data: ITopic[]) {
+    this.expireData = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    this.setExpireLoading(false);
+  }
+
+  @action.bound
+  public setTopicBaseInfo(data: ITopicBaseInfo) {
+    this.baseInfo = data;
+  }
+
+  @action.bound
+  public setRealTimeTraffic(data: IRealTimeTraffic) {
+    this.realTraffic = data;
+    this.setRealLoading(false);
+  }
+
+  @action.bound
+  public setRealConsume(data: IRealTimeConsume) {
+    this.realConsume = data;
+    this.setConsumeLoading(false);
+  }
+
+  @action.bound
+  public setConnectionInfo(data: IConnectionInfo[]) {
+    this.setConnectLoading(false);
+    this.connectionInfo = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    return this.connectionInfo;
+  }
+
+  @action.bound
+  public setConsumerGroups(data: IConsumerGroups[]) {
+    const consumer = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+    const res = new Map();
+    this.consumerGroups = consumer.filter((ele: any) => !res.has(ele.consumerGroup) && res.set(ele.consumerGroup, 1));
+    this.filterGroups = consumer.filter((ele: any) => !res.has(ele.location) && res.set(ele.location, 1));
+  }
+
+  @action.bound
+  public setConsumeDetails(data: IConsumeDetails[]) {
+    this.consumeDetails = data ? data.map((item, index) => {
+      item.key = index;
+      return item;
+    }) : [];
+  }
+
+  @action.bound
+  public setPartitionsInfo(data: IPartitionsInfo[]) {
+    this.partitionsInfo = data.map((d, index) => {
+      d.key = index;
+      return d;
+    });
+  }
+
+  @action.bound
+  public setBrokerInfo(data: IBrokerInfo[]) {
+    this.brokerInfo = data.map((d, index) => {
+      d.key = index;
+      return d;
+    });
+  }
+
+  @action.bound
+  public setAppsIdInfo(data: IAppsIdInfo[]) {
+    this.appsIdInfo = data.map((d, index) => {
+      d.key = index;
+      return d;
+    });
+    this.appInfo = [{
+      appId: '',
+      appName: '请选择',
+    }].concat(this.appsIdInfo) as IAppsIdInfo[];
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setBillInfo(data: IBill[]) {
+    this.billInfo = data ? data.map((item, index) => ({
+      ...item,
+      cost: +item.cost.toFixed(2),
+      key: index,
+    })) : [];
+
+    return getBillBarOption(this.billInfo);
+  }
+
+  @action.bound
+  public setChartsOpton(data: IClusterMetrics[]) {
+    this.clusterMetrics = data;
+    return this.changeType(this.type);
+  }
+
+  @action.bound
+  public changeType(type: IOptionType) {
+    this.type = this.appId && type === 'byteIn/byteOut' ? 'byteIn/byteOut/appByteIn/appByteOut' : type;
+    return getClusterMetricOption(this.type, this.clusterMetrics);
+  }
+
+  @action.bound
+  public setChartsTake(data: ITakeMetric[]) {
+    this.takeMetrics = data;
+    return this.changeTakeType(this.takeType);
+  }
+
+  @action.bound
+  public changeTakeType(takeType: ITakeType) {
+    this.takeType = takeType;
+    return getClusterMetricTake(takeType, this.takeMetrics);
+  }
+
+  @action.bound
+  public changeStartTime(value: moment.Moment) {
+    this.startTime = value;
+  }
+
+  @action.bound
+  public changeEndTime(value: moment.Moment) {
+    this.endTime = value;
+  }
+
+  @action.bound
+  public initTime() {
+    this.startTime = moment().subtract(1, 'hour');
+    this.endTime = moment();
+  }
+
+  @action.bound
+  public setTopicBrokers(tb: ITopicBroker[]) {
+    this.topicBrokers = tb;
+  }
+
+  @action.bound
+  public setTopicBusiness(data: ITopic) {
+    this.topicBusiness = data;
+  }
+
+  public getTopic() {
+    this.setLoading(true);
+    getMytopics().then(this.setTopicData);
+  }
+
+  public getExpired() {
+    this.setExpireLoading(true);
+    getExpiredTopics().then(this.setExpireData);
+  }
+
+  public getbaseNews() {
+    getBaseInfo().then(this.setBaseInfoData);
+  }
+
+  public getTopicBroker(clusterId: number, topicName: string) {
+    return getTopicBroker(clusterId, topicName).then(this.setTopicBrokers);
+  }
+
+  public getAllTopic() {
+    this.setLoading(true);
+    getAllTopic().then(this.setAllTopicData);
+  }
+
+  public getAuthorities(appId: string, clusterId: number, topicName: string) {
+    return getAuthorities(appId, clusterId, topicName).then(this.setAuthorities);
+  }
+
+  public getQuotaQuery(appId: string, clusterId: number, topicName: string) {
+    return getQuotaQuery(appId, clusterId, topicName).then(this.setQuotaQuery);
+  }
+
+  public getTopicBasicInfo(clusterId: number, topicName: string) {
+    return getTopicBasicInfo(clusterId, topicName).then(this.setTopicBaseInfo);
+  }
+
+  public getRealTimeTraffic(clusterId: number, topicName: string) {
+    this.setRealLoading(true);
+    return getRealTimeTraffic(clusterId, topicName).then(this.setRealTimeTraffic);
+  }
+
+  public getRealConsume(clusterId: number, topicName: string) {
+    this.setConsumeLoading(true);
+    return getRealConsume(clusterId, topicName).then(this.setRealConsume);
+  }
+
+  public getConnectionInfo(clusterId: number, topicName: string, appId?: string) {
+    this.setConnectLoading(true);
+    return getConnectionInfo(clusterId, topicName, appId)
+      .then(this.setConnectionInfo)
+      .catch(() => {
+        this.setConnectLoading(false);
+        message.error('加载请求失败！');
+      });
+  }
+
+  public getConsumerGroups(clusterId: number, topicName: string) {
+    return getConsumerGroups(clusterId, topicName).then(this.setConsumerGroups);
+  }
+
+  public getConsumeDetails(clusterId: number, topicName: string, consumerGroup: string, location: string) {
+    return getConsumeDetails(clusterId, topicName, consumerGroup, location).then(this.setConsumeDetails);
+  }
+
+  public getPartitionsInfo(clusterId: number, topicName: string) {
+    return getPartitionsInfo(clusterId, topicName).then(this.setPartitionsInfo);
+  }
+
+  public getBrokerInfo(clusterId: number, topicName: string) {
+    return getBrokerInfo(clusterId, topicName).then(this.setBrokerInfo);
+  }
+
+  public getAppsIdInfo(clusterId: number, topicName: string) {
+    this.setLoading(true);
+    return getAppsIdInfo(clusterId, topicName).then(this.setAppsIdInfo);
+  }
+
+  public getBillInfo(clusterId: number, topicName: string, startTime: number, endTime: number) {
+    this.setLoading(false);
+    return getBillInfo(clusterId, topicName, startTime, endTime).then(this.setBillInfo);
+  }
+
+  public getMetriceInfo(clusterId: number, topicName: string) {
+    return getTopicMetriceInfo({
+      clusterId, topicName,
+      startTime: this.startTime.format('x'),
+      endTime: this.endTime.format('x'),
+      appId: this.appId,
+    }).then(this.setChartsOpton);
+  }
+
+  public getMetriceTake(clusterId: number, topicName: string) {
+    return getTopicMetriceTake({
+      clusterId, topicName,
+      startTime: this.startTime.format('x'),
+      endTime: this.endTime.format('x'),
+    }).then(this.setChartsTake);
+  }
+
+  public applyQuota(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public applyTopic(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public updateTopic(params: IQuotaModelItem) {
+    return updateTopic(params);
+  }
+
+  public deferTopic(params: ILimitsItem) {
+    return deferTopic(params);
+  }
+
+  public applyTopicOnline(params: IOrderParams) {
+    return applyOrder(params);
+  }
+
+  public getTopicBusiness(clusterId: number, topicName: string) {
+    return getTopicBusiness(clusterId, topicName).then(this.setTopicBusiness);
+  }
+}
+
+export const topic = new Topic();

kafka-manager-console/src/store/url-query.ts

@@ -0,0 +1,10 @@
+class UrlQuery {
+  public clusterId: number = null;
+  public brokerId: number = null;
+  public appId: string = null;
+  public group: string = '';
+  public location: string = '';
+  public topicName: string = '';
+}
+
+export default new UrlQuery();

kafka-manager-console/src/store/users.ts

@@ -0,0 +1,67 @@
+import { observable, action } from 'mobx';
+import { IUser, IStaff } from 'types/base-type';
+import { getAccount, getUserList, addUser, modfiyUser, deleteUser } from 'lib/api';
+import { roleMap } from 'constants/status-map';
+import { setCookie, getCookie } from 'lib/utils';
+export class Users {
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public currentUser: IUser = {
+    role: Number(getCookie('role')),
+    chineseName: getCookie('chineseName'),
+  } as IUser;
+
+  @observable
+  public userData: IUser[] = [];
+
+  @observable
+  public staff: IStaff[] = [];
+
+  @action.bound
+  public setAccount(data: IUser) {
+    setCookie([{ key: 'role', value: `${data.role}`, time: 1 }]);
+    setCookie([{ key: 'username', value: `${data.username}`, time: 1 }]);
+    data.chineseName = getCookie('chineseName');
+    this.currentUser = data;
+  }
+
+  @action.bound
+  public setUserData(data: IUser[]) {
+    this.userData = data.map((d: IUser, index: number) => {
+      d.roleName = roleMap[d.role];
+      d.key = index;
+      return d;
+    });
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  public getAccount() {
+    getAccount().then(this.setAccount);
+  }
+
+  public getUserList() {
+    this.setLoading(true);
+    getUserList().then(this.setUserData);
+  }
+
+  public deleteUser(username: string) {
+    deleteUser(username).then(() => this.getUserList());
+  }
+
+  public modfiyUser(params: IUser) {
+    return modfiyUser(params).then(() => this.getUserList());
+  }
+
+  public addUser(params: IUser) {
+    return addUser(params).then(() => this.getUserList());
+  }
+}
+
+export const users = new Users();

kafka-manager-console/src/store/version.ts

@@ -0,0 +1,133 @@
+import { observable, action } from 'mobx';
+import { IUploadFile, IConfigInfo } from 'types/base-type';
+import { getFileList, addFile, deleteFile, modfiyFile, getFileType, getConfigFiles } from 'lib/api';
+
+interface IEnum {
+  code: number;
+  message: string;
+  suffix?: string;
+}
+interface IUploadFileType {
+  fileEnum: IEnum[] ;
+  storageEnum: IEnum[];
+}
+
+export class Version {
+  @observable
+  public loading: boolean = false;
+
+  @observable
+  public fileSuffix: string = '';
+
+  @observable
+  public acceptFileType: string = '';
+
+  @observable
+  public configFiles: string = '';
+
+  @observable
+  public fileList: IUploadFile[] = [];
+
+  @observable
+  public storageTypes: IConfigInfo[] = [];
+
+  @observable
+  public currentFileType: number = 0;
+
+  @observable
+  public fileTypeList: IEnum[] = [];
+
+  @observable
+  public acceptFileMap = {} as {
+    [key: number]: string,
+  };
+
+  @action.bound
+  public setFileList(data: IUploadFile[]) {
+
+    this.fileList = (data || []).map((item, index) => {
+      return {
+        ...item,
+        configType: this.acceptFileMap[item.fileType],
+        key: index,
+      };
+    });
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setConfigFiles(data: string) {
+    this.configFiles = data;
+  }
+
+  @action.bound
+  public setFileTypeList(data: IUploadFileType) {
+    const fileTypeList = data && data.fileEnum || [];
+    const storageEnum = data && data.storageEnum || [];
+    this.fileTypeList = fileTypeList.map((item, index) => {
+      if (item.suffix) {
+        this.acceptFileMap[item.code] = item.message;
+      }
+
+      if (index === 0) { // 初始化文件上传类型
+        this.acceptFileType = item.suffix;
+      }
+
+      return {
+        ...item,
+        label: item.message,
+        value: item.code,
+      };
+    });
+
+    this.storageTypes = storageEnum.map(item => {
+      return {
+        ...item,
+        label: item.message,
+        value: item.message,
+      };
+    });
+    this.setLoading(false);
+  }
+
+  @action.bound
+  public setLoading(value: boolean) {
+    this.loading = value;
+  }
+
+  @action.bound
+  public setAcceptFileType(type: number) {
+    this.fileSuffix = this.fileTypeList[type].suffix;
+    this.currentFileType = type;
+    this.acceptFileType = this.acceptFileMap[type] || '';
+  }
+
+  public async getFileTypeList() {
+    this.setLoading(true);
+    getFileType().then(this.setFileTypeList);
+  }
+
+  public getFileList() {
+    this.setLoading(true);
+    getFileList().then(this.setFileList);
+  }
+
+  public deleteFile(id: number) {
+    deleteFile(id).then(() => this.getFileList());
+  }
+
+  public modfiyFile(params: IUploadFile) {
+    modfiyFile(params).then(() => this.getFileList());
+  }
+
+  public addFile(params: IUploadFile) {
+    params.clusterId = params.clusterId || -1;
+    addFile(params).then(() => this.getFileList());
+  }
+
+  public getConfigFiles(fileId: number) {
+    getConfigFiles(fileId).then(this.setConfigFiles);
+  }
+}
+
+export const version = new Version();

kafka-manager-console/src/store/wrapper.ts

@@ -0,0 +1,39 @@
+import { observable, action } from 'mobx';
+import { IXFormWrapper } from 'types/base-type';
+
+class Wrapper {
+  @observable
+  public ref: any = null;
+
+  @observable
+  public xFormWrapper: IXFormWrapper = {} as IXFormWrapper;
+
+  @action.bound
+  public close() {
+    this.xFormWrapper = {
+      ...this.xFormWrapper,
+      visible: false,
+    };
+  }
+
+  @action.bound
+  public open(xFormWrapper: IXFormWrapper) {
+    this.setXFormWrapper({
+      ...xFormWrapper,
+      visible: true,
+    });
+  }
+
+  @action.bound
+  public setXFormWrapper(xFormWrapper: IXFormWrapper) {
+    this.xFormWrapper = xFormWrapper;
+  }
+
+  @action.bound
+  public setXFormWrapperRef(ref: any) {
+    this.ref = ref;
+  }
+
+}
+
+export const wrapper = new Wrapper();