init

console/src/store/alarm.ts

@@ -0,0 +1,54 @@
+import { observable, action } from 'mobx';
+import { getAlarm, getAlarmConstant } from 'lib/api';
+import { IAlarmBase } from 'types/base-type';
+
+export interface IAlarm extends IAlarmBase {
+  gmtCreate: number;
+  gmtModify: number;
+  status: number;
+  key?: number;
+}
+
+export interface IConstant {
+  conditionTypeList: [];
+  ruleTypeList: [];
+  notifyTypeList: [];
+  metricTypeList: [];
+}
+
+class Alarm {
+  @observable
+  public data: IAlarm[] = [];
+
+  @observable
+  public alarmConstant: IConstant = null;
+
+  public curData: IAlarm = null;
+
+  public setCurData(data: IAlarm) {
+    this.curData = data;
+  }
+
+  @action.bound
+  public setAlarm(data: IAlarm[]) {
+    this.data = data.map((d, i) => {
+      d.key = i;
+      return d;
+    });
+  }
+
+  @action.bound
+  public setAlarmConstant(data: IConstant) {
+    this.alarmConstant = data;
+  }
+
+  public getAlarm() {
+    getAlarm().then(this.setAlarm);
+  }
+
+  public getAlarmConstant() {
+    getAlarmConstant().then(this.setAlarmConstant);
+  }
+}
+
+export const alarm = new Alarm();

console/src/store/broker.ts

@@ -0,0 +1,255 @@
+import { observable, action } from 'mobx';
+import { getBrokerBaseInfo, getBrokerList, getBrokerNetwork, getBrokerPartition, getOneBrokerNetwork, getBrokerTopic, getPartitions, getBrokerKeyMetrics, getBrokerTopicAnalyzer, getBrokerNameList } from 'lib/api';
+import { IFlowInfo } from 'component/flow-table';
+import { ITopic, IValueLabel } from 'types/base-type';
+import moment from 'moment';
+
+export interface IBrokerBaseInfo {
+  host: string;
+  jmxPort: number;
+  leaderCount: number;
+  partitionCount: number;
+  port: number;
+  startTime: number | string;
+  topicNum: number;
+}
+
+export interface IBroker {
+  brokerId: number;
+  byteIn: number;
+  byteOut: number;
+  host: string;
+  jmxPort: number;
+  port: number;
+  startTime: number;
+  status: string;
+  regionName: string;
+}
+
+export interface IBrokerNetworkInfo extends IFlowInfo {
+  produceRequest: number[];
+  fetchConsumerRequest: number[];
+}
+
+export interface IBrokerPartition extends IBroker {
+  leaderCount: number;
+  partitionCount: number;
+  notUnderReplicatedPartitionCount: number;
+  regionName: string;
+  bytesInPerSec: number;
+}
+
+export interface IPartitions {
+  followerPartitionIdList: number[];
+  leaderPartitionList: number[];
+  topicName: string;
+  underReplicated: boolean;
+  underReplicatedPartitionsIdList: number[];
+}
+
+export interface ITopicStatus {
+  BytesOutPerSec_rate: number;
+  BytesInPerSec_rate: number;
+}
+
+export interface IBrokerMetrics {
+  bytesIn?: number;
+  bytesOut?: number;
+  messagesIn?: number;
+  totalFetchRequests?: number;
+  totalProduceRequests?: number;
+}
+
+export interface IAnalyzerData extends IBrokerMetrics {
+  topicAnalysisVOList: [];
+  baseTime?: number;
+  brokerId?: number;
+}
+
+export type IOverviewKey = 'partitionCount' | 'leaderCount' | 'notUnderReplicatedPartitionCount';
+
+interface IBrokerOption {
+  host: string;
+  brokerId: string;
+}
+
+class Broker {
+  @observable
+  public brokerBaseInfo: IBrokerBaseInfo = {} as IBrokerBaseInfo;
+
+  @observable
+  public list: IBroker[] = [];
+
+  @observable
+  public network: IBrokerNetworkInfo = null;
+
+  @observable
+  public oneNetwork: IBrokerNetworkInfo = null;
+
+  @observable
+  public partitions: IBrokerPartition[] = [];
+
+  @observable
+  public topics: ITopic[] = [];
+
+  @observable
+  public topicPartitionsInfo: [] = [];
+
+  @observable
+  public openKeys: string[] = [];
+
+  @observable
+  public realPartitions: IBrokerPartition[] = [];
+
+  @observable
+  public analyzerData: IAnalyzerData = {topicAnalysisVOList: []};
+
+  @observable
+  public viewType: IOverviewKey = 'partitionCount';
+
+  @observable
+  public regionOption: any = ['all'];
+
+  @observable
+  public endTime = moment();
+
+  @observable
+  public startTime = moment().subtract(1, 'hour');
+
+  @observable
+  public BrokerOptions: IValueLabel[] = [{ value: null, label: '请选择Broker' }];
+
+  @action.bound
+  public setBrokerBaseInfo(data: IBrokerBaseInfo) {
+    data.startTime = moment(data.startTime).format('YYYY-MM-DD HH:mm:ss'),
+    this.brokerBaseInfo = data;
+  }
+
+  @action.bound
+  public setBrokerList(list: IBroker[]) {
+    this.list = list;
+  }
+
+  @action.bound
+  public setBrokerNetWork(network: IBrokerNetworkInfo) {
+    if (!network) return false;
+    this.network = network;
+  }
+
+  @action.bound
+  public setBrokerPartition(pars: IBrokerPartition[]) {
+    const res = new Map();
+    this.partitions = pars.map(i => {
+      i.status = i.notUnderReplicatedPartitionCount ? '是' : '否';
+      return i;
+    });
+    this.realPartitions = pars;
+    this.regionOption = pars.filter((a) => !res.has(a.regionName) && res.set(a.regionName, 1));
+  }
+
+  @action.bound
+  public setOneBrokerNetwork(network: IBrokerNetworkInfo) {
+    this.oneNetwork = network;
+  }
+
+  @action.bound
+  public setBrokerTopic(topics: ITopic[]) {
+    this.topics = topics;
+  }
+
+  @action.bound
+  public setPartitionsInfo(pI: []) {
+    this.topicPartitionsInfo = pI;
+  }
+
+  @action.bound
+  public handleOpen(key: string) {
+    if (this.openKeys.includes(key)) {
+      this.openKeys = this.openKeys.filter(k => k !== key);
+    } else {
+      this.openKeys.push(key);
+      this.openKeys = this.openKeys.slice(0);
+    }
+  }
+
+  @action.bound
+  public handleOverview(type: IOverviewKey) {
+    this.viewType = type;
+  }
+
+  @action.bound
+  public filterSquare(type: string) {
+    this.realPartitions = this.partitions;
+    if (type !== 'all') {
+      this.realPartitions = this.partitions.filter(i => i.regionName === type);
+    }
+  }
+
+  @action.bound
+  public setBrokerTopicAnalyzer(data: IAnalyzerData) {
+    for (const item of Object.keys(data)) {
+      if (item === 'bytesIn' || item === 'bytesOut') data[item] = +(data[item] / (1024 * 1024)).toFixed(2);
+    }
+    this.analyzerData = data;
+  }
+
+  @action.bound
+  public changeStartTime(value: moment.Moment) {
+    this.startTime = value;
+  }
+
+  @action.bound
+  public changeEndTime(value: moment.Moment) {
+    this.endTime = value;
+  }
+
+  @action.bound
+  public setBrokerOptions(data: IBrokerOption[]) {
+    this.BrokerOptions = data.map(i => ({
+      label: `BrokerID: ${i.brokerId}, Host: ${i.host}`,
+      value: i.brokerId,
+    }));
+  }
+
+  public getBrokerBaseInfo(clusterId: number, brokerId: number) {
+    getBrokerBaseInfo(clusterId, brokerId).then(this.setBrokerBaseInfo);
+  }
+
+  public getBrokerList(clusterId: number) {
+    getBrokerList(clusterId).then(this.setBrokerList);
+  }
+
+  public getBrokerNetwork(clusterId: number) {
+    getBrokerNetwork(clusterId).then(this.setBrokerNetWork);
+  }
+
+  public getBrokerPartition(clusterId: number) {
+    getBrokerPartition(clusterId).then(this.setBrokerPartition);
+  }
+
+  public getOneBrokerNetwork(clusterId: number, brokerId: number) {
+    getOneBrokerNetwork(clusterId, brokerId).then(this.setOneBrokerNetwork);
+  }
+
+  public getBrokerTopic(clusterId: number, brokerId: number) {
+    getBrokerTopic(clusterId, brokerId).then(this.setBrokerTopic);
+  }
+
+  public getPartitions(clusterId: number, brokerId: number) {
+    getPartitions(clusterId, brokerId).then(this.setPartitionsInfo);
+  }
+
+  public getBrokerKeyMetrics(clusterId: number, brokerId: number, startTime: string, endTime: string) {
+    return getBrokerKeyMetrics(clusterId, brokerId, startTime, endTime);
+  }
+
+  public getBrokerTopicAnalyzer(clusterId: number, brokerId: number) {
+    getBrokerTopicAnalyzer(clusterId, brokerId).then(this.setBrokerTopicAnalyzer);
+  }
+
+  public initBrokerOptions = (clusterId: number) => {
+    getBrokerNameList(clusterId).then(this.setBrokerOptions);
+  }
+}
+
+export const broker = new Broker();

console/src/store/cluster.ts

@@ -0,0 +1,128 @@
+import { observable, action } from 'mobx';
+import { getClusters, getKafkaVersion, getClusterMetricsHistory, getRebalanceStatus, getClustersBasic, getTopicMetriceInfo, getBrokerMetrics } from 'lib/api';
+import { getClusterMetricOption } from 'lib/charts-config';
+import { IClusterData, IClusterMetrics, IOptionType } from 'types/base-type';
+
+import moment from 'moment';
+
+class Cluster {
+  @observable
+  public data: IClusterData[] = [];
+
+  @observable
+  public active: number = null;
+
+  @observable
+  public kafkaVersions: string[] = [];
+
+  @observable
+  public startTime: moment.Moment;
+
+  @observable
+  public endTime: moment.Moment;
+
+  @observable
+  public clusterMetrics: IClusterMetrics[] = [];
+
+  @observable
+  public leaderStatus: string = '';
+
+  @observable
+  public type: IOptionType = 'byteIn/byteOut' ;
+
+  @action.bound
+  public setData(data: IClusterData[]) {
+    data.unshift({
+      clusterId: -1,
+      clusterName: '所有集群',
+    } as IClusterData);
+    this.data = data;
+    this.active = (this.data[0] || { clusterId: null }).clusterId;
+  }
+
+  @action.bound
+  public changeCluster(data: number) {
+    this.active = data;
+  }
+
+  @action.bound
+  public setKafkaVersion(data: string[]) {
+    this.kafkaVersions = data;
+  }
+
+  @action.bound
+  public setChartsOpton(data: IClusterMetrics[]) {
+    this.clusterMetrics = data;
+    return this.changeType(this.type);
+  }
+
+  @action.bound
+  public changeType(type: IOptionType) {
+    cluster.type = type;
+    return getClusterMetricOption(type, this.clusterMetrics);
+  }
+
+  @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  setLeaderStatus(type: string) {
+    this.leaderStatus = type;
+  }
+
+  public getClusters() {
+    getClusters().then(this.setData);
+  }
+
+  public getClustersBasic() {
+    getClustersBasic().then(this.setData);
+  }
+
+  public getKafkaVersions() {
+    getKafkaVersion().then(this.setKafkaVersion);
+  }
+
+  public getClusterMetricsHistory(clusterId: number) {
+    return getClusterMetricsHistory(clusterId,
+      this.startTime.format('x'),
+      this.endTime.format('x')).then(this.setChartsOpton);
+  }
+
+  public getMetriceInfo(clusterId: number, topicName: string) {
+    return getTopicMetriceInfo(clusterId, topicName,
+      this.startTime.format('x'),
+      this.endTime.format('x')).then(this.setChartsOpton);
+  }
+
+  public getRebalance(clusterId: number) {
+    return getRebalanceStatus(clusterId).then((type) => {
+      this.setLeaderStatus(type);
+      if (type === 'RUNNING') {
+        setTimeout(() => {
+          this.getRebalance(clusterId);
+        }, 1000 * 2);
+      }
+    });
+  }
+
+  public getBrokerMetrics(clusterId: number, brokerId: number) {
+    return getBrokerMetrics(clusterId, brokerId,
+      this.startTime.format('x'),
+      this.endTime.format('x')).then(this.setChartsOpton);
+  }
+}
+
+export const cluster = new Cluster();

console/src/store/consume.ts

@@ -0,0 +1,80 @@
+import { observable, action } from 'mobx';
+import { IConsumeInfo } from './topic';
+import { getConsumeInfo, resetOffset, getConsumeGroup } from 'lib/api';
+import { IOffset } from 'types/base-type';
+
+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();

console/src/store/controller.ts

@@ -0,0 +1,25 @@
+import { observable, action } from 'mobx';
+import { getController } from 'lib/api';
+
+export interface IController {
+  brokerId: number;
+  controllerTimestamp: number;
+  controllerVersion: number;
+  host: string;
+}
+
+class Controller {
+  @observable
+  public data: IController[] = [];
+
+  @action.bound
+  public setData(data: IController[]) {
+    this.data = data;
+  }
+
+  public getController(clusterId: number) {
+    getController(clusterId).then(this.setData);
+  }
+}
+
+export const controller = new Controller();

console/src/store/drawer.ts

@@ -0,0 +1,31 @@
+import { observable, action } from 'mobx';
+
+class Drawer {
+  @observable
+  public id: string = null;
+
+  @observable
+  public topicData: any = null;
+
+  @observable
+  public offsetDetail: any = null;
+
+  @action.bound
+  public showResetOffset(r: any) {
+    this.id = 'showResetOffset';
+    this.offsetDetail = r;
+  }
+
+  @action.bound
+  public showTopicSample({ clusterId, topicName }: any) {
+    this.id = 'showTopicSample';
+    this.topicData = { clusterId, topicName };
+  }
+
+  @action.bound
+  public close() {
+    this.id = null;
+  }
+}
+
+export const drawer = new Drawer();

console/src/store/index.ts

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

console/src/store/modal.ts

@@ -0,0 +1,147 @@
+import { observable, action } from 'mobx';
+import { alarm, IAlarm } from './alarm';
+import { IRegionData } from './region';
+import { operation, ITask } from './operation';
+import { IClusterData, IBaseOrder, ITopic } from 'types/base-type';
+import { getAdminPartitionOrder, getAdminTopicDetail } from 'lib/api';
+import { IUserDetail } from './users';
+import { topic, IConsumeInfo } from './topic';
+
+class Modal {
+  @observable
+  public id: string = null;
+
+  @observable
+  public orderDetail: IBaseOrder = {} as IBaseOrder;
+
+  @observable
+  public topicData: ITopic = null;
+
+  public topicDetail: IBaseOrder = null;
+  public regionData: IRegionData = null;
+  public currentCluster: IClusterData = {} as IClusterData;
+  public userDetail: IUserDetail = null;
+  public consumberGroup: IConsumeInfo = null;
+
+  @action.bound
+  public showNewTopic(r: ITopic) {
+    this.topicData = r;
+    this.id = 'showNewTopic';
+  }
+
+  @action.bound
+  public showNewCluster() {
+    this.id = 'showNewCluster';
+  }
+
+  @action.bound
+  public showModifyCluster(cluster: IClusterData) {
+    this.id = 'showModifyCluster';
+    this.currentCluster = cluster;
+  }
+
+  @action.bound
+  public setTopic(data: ITopic) {
+    this.topicData = data;
+  }
+
+  @action.bound
+  public showAdimTopic(r: ITopic) {
+    this.id = 'showAdimTopic';
+    this.topicData = r;
+    if (r) {
+      getAdminTopicDetail(r.clusterId, r.topicName).then(this.setTopic);
+      topic.getTopicMetaData(r.clusterId, r.topicName);
+    }
+  }
+
+  @action.bound
+  public showAlarm(r: IAlarm) {
+    alarm.setCurData(r);
+    this.id = 'showAlarm';
+  }
+
+  @action.bound
+  public showRegion(r: IRegionData) {
+    this.id = 'showRegion';
+    this.regionData = r;
+  }
+
+  @action.bound
+  public showExpandTopic(data: IBaseOrder) {
+    this.topicDetail = data;
+    this.id = 'showExpandTopic';
+  }
+
+  @action.bound
+  public showExpandAdmin(data: IBaseOrder) {
+    this.topicDetail = data;
+    this.id = 'showExpandAdmin';
+  }
+
+  @action.bound
+  public showResetOffset() {
+    this.id = 'showResetOffset';
+  }
+
+  @action.bound
+  public showLeaderRebalance() {
+    this.id = 'showLeaderRebalance';
+  }
+
+  @action.bound
+  public showTask(value: ITask, type?: string) {
+    this.id = type === 'detail' ? 'showTaskDetail' : 'showTask';
+    value ? operation.getTaskDetail(value.taskId) : operation.setTaskDetail(value);
+  }
+
+  @action.bound
+  public showOrderApprove(value: any, type: string) {
+    this.id = type === 'showOrderApprove' ? 'showOrderApprove' : 'showOrderDetail';
+    this.orderDetail = value;
+  }
+
+  @action.bound
+  public setDetail(data: any) {
+    if (data[0]) this.orderDetail = data[0];
+  }
+
+  @action.bound
+  public showPartition(value: any, type: string) {
+    this.orderDetail = value;
+    this.id = type === 'showPartition' ? 'showPartition' : 'showPartitionDetail';
+    getAdminPartitionOrder(value.orderId).then(this.setDetail);
+  }
+
+  @action.bound
+  public showNewUser(data: IUserDetail) {
+    this.userDetail = data;
+    this.id = 'showNewUser';
+  }
+
+  @action.bound
+  public shoeTopicConfig(data: IBaseOrder) {
+    this.topicDetail = data;
+    this.id = 'shoeTopicConfig';
+  }
+
+  @action.bound
+  public showAlarmModify(r: IAlarm) {
+    alarm.setCurData(r);
+    this.id = 'showAlarmModify';
+  }
+
+  @action.bound
+  public showConsumerTopic(r: IConsumeInfo) {
+    this.consumberGroup = r;
+    this.id = 'showConsumerTopic';
+  }
+
+  @action.bound
+  public close() {
+    this.id = null;
+    this.currentCluster = {} as IClusterData;
+  }
+}
+
+export const modal = new Modal();

console/src/store/operation.ts

@@ -0,0 +1,66 @@
+import { observable, action } from 'mobx';
+import { getTask, getRegions } from 'lib/api';
+import { ITaskBase } from 'types/base-type';
+
+interface IReassign {
+  [propname: string]: number[];
+}
+
+interface IMigration {
+  [index: string]: number;
+}
+
+export const taskMap = ['待执行', '执行中', '迁移成功', '迁移失败', '已撤销'];
+
+export interface ITask extends ITaskBase {
+  clusterName: string;
+  gmtCreate: number;
+  operator: string;
+  reassignmentMap?: IReassign;
+  migrationStatus?: IMigration;
+  regionList?: Array<[string, number[]]>;
+}
+
+class Operation {
+  @observable
+  public tasks: ITask[] = null;
+
+  @observable
+  public taskDetail: ITask = null;
+
+  @observable
+  public RegionOptions: any[] = ['请选择集群'];
+
+  @action.bound
+  public setTask(data: ITask[]) {
+    this.tasks = data;
+  }
+
+  @action.bound
+  public setTaskDetail(data: ITask) {
+    if (data) data.regionList = Object.keys(data.reassignmentMap).map(i => [i, data.reassignmentMap[i]]);
+    this.taskDetail = data;
+  }
+
+  @action.bound
+  public setRegionOptions(data: any) {
+    this.RegionOptions = data.map((i: any) => ({
+      value: i.regionId,
+      label: i.regionName,
+    }));
+  }
+
+  public getTask() {
+    getTask().then(this.setTask);
+  }
+
+  public initRegionOptions = (clusterId: number) => {
+    getRegions(clusterId).then(this.setRegionOptions);
+  }
+
+  public getTaskDetail(value: number) {
+    getTask(value).then(this.setTaskDetail);
+  }
+}
+
+export const operation = new Operation();

console/src/store/order.ts

@@ -0,0 +1,73 @@
+import { observable, action } from 'mobx';
+import { getTopicOrder, getPartitionOrder, getAdminTopicOrder, getAdminPartitionOrder } from 'lib/api';
+import { IBaseOrder } from 'types/base-type';
+
+const statusMap = ['待审批', '通过', '拒绝', '撤销'];
+export const tableStatusFilter = statusMap.map(i => ({text: i, value: i}));
+
+export interface IPartitionOrder extends IBaseOrder {
+  peakAvgBytesInPerSec: number;
+}
+
+class Order {
+  @observable
+  public topicOrder: IBaseOrder[] = [];
+
+  @observable
+  public partitionOrder: IPartitionOrder[] = [];
+
+  @observable
+  public adminTopicOrder: IBaseOrder[] = [];
+
+  @observable
+  public adminPartitionOrder: IPartitionOrder[] = [];
+
+  @observable
+  public pendingTopic: number = 0;
+
+  @observable
+  public pendingOrder: number = 0;
+
+  @action
+  public mapData(data: any, type?: 'pendingTopic' | 'pendingOrder') {
+    this[type] = 0;
+    return data.map((d: any) => {
+      if (!d.orderStatus) this[type] += 1;
+      d.statusStr = statusMap[d.orderStatus];
+      d.key = d.orderId;
+      return d;
+    });
+  }
+
+  @action.bound
+  public setTopicOrder(data: IBaseOrder[]) {
+    this.topicOrder = this.mapData(data);
+  }
+
+  @action.bound
+  public setPartitionOrder(data: IPartitionOrder[]) {
+    this.partitionOrder = this.mapData(data);
+  }
+
+   @action.bound
+  public setAdiminTopicOrder(data: IBaseOrder[]) {
+    this.adminTopicOrder = this.mapData(data, 'pendingTopic');
+  }
+
+  @action.bound
+  public setAdminPartitionOrder(data: IPartitionOrder[]) {
+    this.adminPartitionOrder = this.mapData(data, 'pendingOrder');
+  }
+
+  public getOrder() {
+    getTopicOrder().then(this.setTopicOrder);
+    getPartitionOrder().then(this.setPartitionOrder);
+  }
+
+  public getAdminOrder() {
+    getAdminTopicOrder().then(this.setAdiminTopicOrder);
+    getAdminPartitionOrder().then(this.setAdminPartitionOrder);
+  }
+}
+
+export const order = new Order();

console/src/store/region.ts

@@ -0,0 +1,36 @@
+import { observable, action } from 'mobx';
+import { getRegions, delRegion } from 'lib/api';
+
+export const statusMap = ['废弃', '正常', '容量已满'];
+export const levelMap =  ['普通', '重要'];
+export interface IRegionData {
+    brokerIdList: number[];
+    clusterId: number;
+    description: string;
+    gmtCreate: number;
+    gmtModify: number;
+    level: number;
+    regionId: number;
+    regionName: string;
+    status: number;
+}
+
+class Region {
+  @observable
+  public data: IRegionData[] = [];
+
+  @action.bound
+  public setData(data: IRegionData[]) {
+    this.data = data;
+  }
+
+  public getRegions(clusterId: number) {
+    getRegions(clusterId).then(this.setData);
+  }
+
+  public delRegion(regionId: number) {
+    return delRegion(regionId);
+  }
+}
+
+export const region = new Region();

console/src/store/topic.ts

@@ -0,0 +1,239 @@
+import { observable, action } from 'mobx';
+import { getTopic, getTopicBasicInfo, getTopicConsumeInfo, getTopicStatusInfo, getGroupInfo, getConsumeGroup, addSample, getTopicBroker, getTopicPartition, getTopicNameById, getTopicMetaData } from 'lib/api';
+import { IFlowInfo } from 'component/flow-table';
+import urlQuery from './url-query';
+import { ITopic, IOffset, ISample } from 'types/base-type';
+
+export interface ITopicBaseInfo {
+  brokerNum: number;
+  createTime: string;
+  description: string;
+  modifyTime: string;
+  partitionNum: number;
+  principals: string;
+  regionNames: string;
+  replicaNum: number;
+  retentionTime: number;
+  topicName: string;
+}
+
+export interface IConsumeInfo {
+  location: string;
+  consumerGroup: string;
+  clusterId?: number;
+  key?: string;
+}
+
+export interface ITopicStatusInfo extends IFlowInfo {
+  totalProduceRequest: number[];
+}
+
+export interface IGroupInfo {
+  clientId: string;
+  clusterId: number;
+  consumeOffset: number;
+  consumerGroup: string;
+  lag: number;
+  location: string;
+  partitionId: number;
+  partitionOffset: number;
+  topicName: string;
+  key?: string;
+}
+
+export interface ITopicBroker {
+  brokerId: number;
+  host: string;
+  leaderPartitionIdList: number[];
+  partitionIdList: number[];
+  partitionNum: number;
+}
+
+export interface ITopicPartition {
+  isrBrokerIdList: number[];
+  leaderBrokerId: number;
+  leaderEpoch: number;
+  offset: number;
+  partitionId: number;
+  preferredBrokerId: number;
+  replicaBrokerIdList: number[];
+  underReplicated: boolean;
+}
+
+export interface IAdminExpand {
+  brokerIdList: number[];
+  clusterId: number;
+  partitionNum: number;
+  replicaNum: number;
+  topicName: string;
+}
+
+class Topic {
+  @observable
+  public data: ITopic[] = [];
+
+  @observable
+  public favData: ITopic[] = [];
+
+  @observable
+  public comsumeTopics: string[] = [];
+
+  @observable
+  public baseInfo: ITopicBaseInfo = null;
+
+  @observable
+  public consumeInfo: IConsumeInfo[] = [];
+
+  @observable
+  public groupInfo: IGroupInfo[] = [];
+
+  @observable
+  public statusInfo: ITopicStatusInfo = null;
+
+  @observable
+  public sampleData: ISample[] = null;
+
+  @observable
+  public topicBrokers: ITopicBroker[] = [];
+
+  @observable
+  public topicPartitions: ITopicPartition[] = [];
+
+  @observable
+  public topicNameList: string[] = [];
+
+  @observable
+  public topicDetail: IAdminExpand = null;
+
+  public currentTopicName = '';
+  public currentClusterId: number = null;
+  public currentGroup: IOffset = null;
+
+  @action.bound
+  public setData(data: ITopic[]) {
+    this.data = data.map((i, index) => {
+      i.key = index;
+      return i;
+    });
+  }
+
+  @action.bound
+  public setFavData(data: ITopic[]) {
+    this.favData = data.map((i, index) => {
+      i.key = index;
+      return i;
+    });
+  }
+
+  @action.bound
+  public setTopicBaseInfo(data: ITopicBaseInfo) {
+    this.baseInfo = data;
+  }
+
+  @action.bound
+  public setTopicConsumeInfo(data: IConsumeInfo[]) {
+    this.consumeInfo = data.map(d => {
+      d.key = d.consumerGroup;
+      return d;
+    });
+  }
+
+  @action.bound
+  public setTopicStatusInfo(data: ITopicStatusInfo) {
+    this.statusInfo = data;
+  }
+
+  @action.bound
+  public setGroupInfo(data: IGroupInfo[]) {
+    this.groupInfo = data.map(d => { d.key = d.clientId; return d; });
+  }
+
+  @action.bound
+  public setComsumeTopics(topics: string[]) {
+    this.comsumeTopics = topics;
+  }
+
+  @action.bound
+  public setSampleData(data: ISample[]) {
+    this.sampleData = data;
+  }
+
+  @action.bound
+  public setTopicBrokers(tb: ITopicBroker[]) {
+    this.topicBrokers = tb;
+  }
+
+  @action.bound
+  public setTopicPartitions(tp: ITopicPartition[]) {
+    this.topicPartitions = tp;
+  }
+
+  @action.bound
+  public setTopicNameList(data: string[]) {
+    this.topicNameList = data;
+  }
+
+  @action.bound
+  public setTopicDetail(data: IAdminExpand) {
+    this.topicDetail = data;
+  }
+
+  public setCurrent({ topicName, clusterId }: ITopic) {
+    this.currentTopicName = topicName;
+    this.currentClusterId = clusterId;
+  }
+
+  public getTopics() {
+    getTopic(null, false).then(this.setData);
+    getTopic(null, true).then(this.setFavData);
+  }
+
+  public getAdminTopics(clusterId: number) {
+    getTopic(clusterId).then(this.setData);
+  }
+
+  public getTopicBasicInfo(topic: string, clusterId: number) {
+    getTopicBasicInfo(topic, clusterId).then(this.setTopicBaseInfo);
+  }
+
+  public getTopicConsumeInfo(clusterId: number, topicName: string) {
+    getTopicConsumeInfo(clusterId, topicName).then(this.setTopicConsumeInfo);
+  }
+
+  public getTopicStatusInfo(topic: string, clusterId: number) {
+    this.currentTopicName = topic;
+    this.currentClusterId = clusterId;
+    getTopicStatusInfo(topic, clusterId).then(this.setTopicStatusInfo);
+  }
+
+  public getGroupInfo(topicName: string, clusterId: number, consumerGroup: string, location: string) {
+    this.currentGroup = { topicName, clusterId, consumerGroup, location: location.toLowerCase() };
+    getGroupInfo(topicName, clusterId, consumerGroup, location).then(this.setGroupInfo);
+  }
+
+  public getConsumeGroup(group: string, location: string) {
+    return getConsumeGroup(urlQuery.clusterId, group, location).then(this.setComsumeTopics);
+  }
+
+  public addSample(params: ISample) {
+    return addSample(params).then(this.setSampleData);
+  }
+
+  public getTopicBroker(clusterId: number, topicName: string) {
+    return getTopicBroker(clusterId, topicName).then(this.setTopicBrokers);
+  }
+
+  public getTopicPartition(clusterId: number, topicName: string) {
+    return getTopicPartition(clusterId, topicName).then(this.setTopicPartitions);
+  }
+
+  public getTopicList = (value: number) => {
+    getTopicNameById(value).then(this.setTopicNameList);
+  }
+
+  public getTopicMetaData = (clusterId: number, topicName: string) => {
+    getTopicMetaData(clusterId, topicName).then(this.setTopicDetail);
+  }
+}
+
+export const topic = new Topic();

console/src/store/url-query.ts

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

console/src/store/users.ts

@@ -0,0 +1,34 @@
+import { observable, action } from 'mobx';
+import { getUsers } from 'lib/api';
+
+export interface IUserDetail {
+  password: number;
+  role: number;
+  username: string;
+}
+
+export class Users {
+  public roleMap = ['普通用户', '运维人员', '管理员'];
+  public filterRole = this.roleMap.map(i => ({ text: i, value: i }));
+
+  @observable
+  public userData: IUserDetail[] = [];
+
+  @action.bound
+  public setUserData(data: []) {
+    this.userData = data.map((d: any) => {
+      d.role = this.roleMap[d.role];
+      return d;
+    });
+  }
+
+  public mapRole(role: number) {
+    return this.roleMap[role];
+  }
+
+  public getUsers() {
+    getUsers().then(this.setUserData);
+  }
+}
+
+export const users = new Users();