v2.1 fe

kafka-manager-console/src/container/cluster/cluster-detail/cluster-overview.tsx

@@ -31,8 +31,13 @@ export class ClusterOverview extends React.Component<IOverview> {
     const content = this.props.basicInfo as IBasicInfo;
     const clusterContent = [{
       value: content.clusterName,
-      label: '集群名称',
-    }, {
+      label: '集群中文名称',
+    },
+    {
+      value: content.clusterName,
+      label: '集群英文名称',
+    },
+    {
       value: clusterTypeMap[content.mode],
       label: '集群类型',
     }, {
@@ -55,23 +60,23 @@ export class ClusterOverview extends React.Component<IOverview> {
         <PageHeader className="detail" title="">
           <Descriptions size="small" column={3}>
             {clusterContent.map((item: ILabelValue, index: number) => (
-                <Descriptions.Item key={index} label={item.label} >
-                  {item.value}
-                </Descriptions.Item>
+              <Descriptions.Item key={index} label={item.label} >
+                {item.value}
+              </Descriptions.Item>
             ))}
             {clusterInfo.map((item: ILabelValue, index: number) => (
-                <Descriptions.Item key={index} label={item.label}>
-                  <Tooltip placement="bottomLeft" title={item.value}>
-                    <span className="overview-bootstrap">
-                      <Icon
-                        onClick={() => copyString(item.value)}
-                        type="copy"
-                        className="didi-theme overview-theme"
-                      />
-                      <i className="overview-boot">{item.value}</i>
-                    </span>
-                  </Tooltip>
-                </Descriptions.Item>
+              <Descriptions.Item key={index} label={item.label}>
+                <Tooltip placement="bottomLeft" title={item.value}>
+                  <span className="overview-bootstrap">
+                    <Icon
+                      onClick={() => copyString(item.value)}
+                      type="copy"
+                      className="didi-theme overview-theme"
+                    />
+                    <i className="overview-boot">{item.value}</i>
+                  </span>
+                </Tooltip>
+              </Descriptions.Item>
             ))}
           </Descriptions>
         </PageHeader>

kafka-manager-console/src/container/cluster/cluster-detail/cluster-topic.tsx

@@ -101,6 +101,7 @@ export class ClusterTopic extends SearchAndFilterContainer {
         dataIndex: 'updateTime',
         key: 'updateTime',
         width: '20%',
+        sorter: (a: IClusterTopics, b: IClusterTopics) => b.updateTime - a.updateTime,
         render: (t: number) => moment(t).format(timeFormat),
       },
       {

kafka-manager-console/src/container/cluster/config.tsx

@@ -13,10 +13,35 @@ const { confirm } = Modal;
 export const getClusterColumns = (urlPrefix: string) => {
   return [
     {
-      title: '集群名称',
+      title: '逻辑集群ID',
+      dataIndex: 'clusterId',
+      key: 'clusterId',
+      width: '9%',
+      sorter: (a: IClusterData, b: IClusterData) => b.clusterId - a.clusterId,
+    },
+    {
+      title: '逻辑集群中文名称',
       dataIndex: 'clusterName',
       key: 'clusterName',
-      width: '15%',
+      width: '13%',
+      onCell: () => ({
+        style: {
+          maxWidth: 120,
+          ...cellStyle,
+        },
+      }),
+      sorter: (a: IClusterData, b: IClusterData) => a.clusterName.charCodeAt(0) - b.clusterName.charCodeAt(0),
+      render: (text: string, record: IClusterData) => (
+        <Tooltip placement="bottomLeft" title={text} >
+          <a href={`${urlPrefix}/cluster/cluster-detail?clusterId=${record.clusterId}`}> {text} </a>
+        </Tooltip>
+      ),
+    },
+    {
+      title: '逻辑集群英文名称',
+      dataIndex: 'clusterName',
+      key: 'clusterName',
+      width: '13%',
       onCell: () => ({
         style: {
           maxWidth: 120,
@@ -34,21 +59,21 @@ export const getClusterColumns = (urlPrefix: string) => {
       title: 'Topic数量',
       dataIndex: 'topicNum',
       key: 'topicNum',
-      width: '10%',
+      width: '9%',
       sorter: (a: IClusterData, b: IClusterData) => b.topicNum - a.topicNum,
     },
     {
       title: '集群类型',
       dataIndex: 'mode',
       key: 'mode',
-      width: '10%',
+      width: '9%',
       render: (text: number) => (clusterTypeMap[text] || ''),
     },
     {
       title: '集群版本',
       dataIndex: 'clusterVersion',
       key: 'clusterVersion',
-      width: '25%',
+      width: '9%',
       onCell: () => ({
         style: {
           maxWidth: 200,
@@ -60,14 +85,14 @@ export const getClusterColumns = (urlPrefix: string) => {
       title: '接入时间',
       dataIndex: 'gmtCreate',
       key: 'gmtCreate',
-      width: '15%',
+      width: '13%',
       sorter: (a: IClusterData, b: IClusterData) => b.gmtCreate - a.gmtCreate,
       render: (t: number) => moment(t).format(timeFormat),
     }, {
       title: '修改时间',
       dataIndex: 'gmtModify',
       key: 'gmtModify',
-      width: '15%',
+      width: '13%',
       sorter: (a: IClusterData, b: IClusterData) => b.gmtModify - a.gmtModify,
       render: (t: number) => moment(t).format(timeFormat),
     },
@@ -75,7 +100,7 @@ export const getClusterColumns = (urlPrefix: string) => {
       title: '操作',
       dataIndex: 'action',
       key: 'action',
-      width: '10%',
+      width: '20%',
       render: (val: string, record: IClusterData) => (
         <>
           {
@@ -90,6 +115,6 @@ export const getClusterColumns = (urlPrefix: string) => {
   ];
 };
 
-export  const showConfirm = (record: IClusterData) => {
+export const showConfirm = (record: IClusterData) => {
   modal.showOfflineClusterModal(record.clusterId);
 };