feat: update cmp container menu

locales/en.json

@@ -347,9 +347,11 @@
     "console": "console",
     "consume count": "consume count",
     "consumer": "consumer",
+    "container": "container",
     "container ID": "container ID",
     "container IP": "Container IP",
     "container monitor": "container monitor",
+    "container resource": "container resource",
     "content": "content",
     "content of notification object is missing, please complete!": "content of notification object is missing, please complete!",
     "copied successfully": "copied successfully",

locales/zh.json

@@ -347,9 +347,11 @@
     "console": "控制台",
     "consume count": "消费次数",
     "consumer": "消费者",
+    "container": "容器",
     "container ID": "容器ID",
     "container IP": "容器 IP",
     "container monitor": "容器监控",
+    "container resource": "容器资源",
     "content": "内容",
     "content of notification object is missing, please complete!": "通知对象内容缺失，请填写!",
     "copied successfully": "复制成功",

shell/app/common/utils/go-to.tsx

@@ -306,14 +306,16 @@ export enum pages {
   cloudSourceMq = '/{orgName}/cmp/cloudSource/mq',
   cloudSourceRedis = '/{orgName}/cmp/cloudSource/redis',
   cloudAccounts = '/{orgName}/cmp/cloudSource/accounts',
-  cmpClustersNodes = '/{orgName}/cmp/clusters/{clusterName}/nodes',
+
   cmpClustersDetail = '/{orgName}/cmp/clusters/{clusterName}/detail',
-  cmpClustersNodeDetail = '/{orgName}/cmp/clusters/{clusterName}/nodes/{nodeId}/detail',
-  cmpClustersPods = '/{orgName}/cmp/clusters/{clusterName}/pods',
-  cmpClustersPodDetail = '/{orgName}/cmp/clusters/{clusterName}/pods/{podId}/detail',
-  cmpClustersWorkload = '/{orgName}/cmp/clusters/{clusterName}/workload',
-  cmpClustersWorkloadDetail = '/{orgName}/cmp/clusters/{clusterName}/workload/{workloadId}/detail',
-  cmpClustersEventLog = '/{orgName}/cmp/clusters/{clusterName}/event-log',
+  cmpClustersContainer = '/{orgName}/cmp/container/{clusterName}',
+  cmpClustersNodes = '/{orgName}/cmp/container/{clusterName}/nodes',
+  cmpClustersNodeDetail = '/{orgName}/cmp/container/{clusterName}/nodes/{nodeId}/detail',
+  cmpClustersPods = '/{orgName}/cmp/container/{clusterName}/pods',
+  cmpClustersPodDetail = '/{orgName}/cmp/container/{clusterName}/pods/{clusterName}/{podId}/detail',
+  cmpClustersWorkload = '/{orgName}/cmp/container/{clusterName}/workload',
+  cmpClustersWorkloadDetail = '/{orgName}/cmp/container/{clusterName}/workload/{clusterName}/{workloadId}/detail',
+  cmpClustersEventLog = '/{orgName}/cmp/container/{clusterName}/event-log',
 
   // orgCenter
   orgCenterRoot = '/{orgName}/orgCenter/projects',

shell/app/interface/global.d.ts

@@ -337,6 +337,7 @@ type ROUTE_MARK =
   | 'orgMarket'
   | 'orgSetting'
   | 'clusterDetail'
+  | 'clusterContainer'
   | 'biCharts'
   | 'clusterAlarmReport'
   | 'msp'

shell/app/layout/pages/page-container/components/sub-sidebar.tsx

@@ -185,7 +185,6 @@ const SubSideBar = () => {
       openKeys: openKeys as string[],
     });
   };
-
   return (
     <SideNavigation
       openKeys={state.openKeys}

shell/app/locales/en.json

@@ -421,6 +421,7 @@
     "new dashboard": "new dashboard",
     "new report task": "new report task",
     "new strategy": "new strategy",
+    "no cluster available": "no cluster available",
     "no cluster currently exists, you can click <CreateClusterLink />, you can also view <DocumentationHref /> to learn more": "no cluster currently exists, you can click <CreateClusterLink />, you can also view <DocumentationHref /> to learn more",
     "no host address": "no host address",
     "no ip address": "no ip address",

shell/app/locales/zh.json

@@ -421,6 +421,7 @@
     "new dashboard": "新建仪表盘",
     "new report task": "新建报告任务",
     "new strategy": "新建策略",
+    "no cluster available": "无可用集群",
     "no cluster currently exists, you can click <CreateClusterLink />, you can also view <DocumentationHref /> to learn more": "当前没有任何集群存在，可以点击 <CreateClusterLink />，也可以通过浏览 <DocumentationHref /> 来详细了解",
     "no host address": "暂无主机地址",
     "no ip address": "暂无ip地址",

shell/app/menus/cmp.tsx

@@ -24,8 +24,10 @@ import {
   DatabaseAlert as IconDatabaseAlert,
 } from '@icon-park/react';
 import React from 'react';
+import { ErdaIcon } from 'common';
+import { EMPTY_CLUSTER } from 'cmp/pages/cluster-manage/config';
 
-export const getCmpMenu = () => {
+export const getCmpMenu = (chosenCluster = EMPTY_CLUSTER) => {
   return filterMenu(
     [
       {
@@ -60,6 +62,35 @@ export const getCmpMenu = () => {
           },
         ],
       },
+      {
+        key: 'containerResource',
+        icon: <ErdaIcon type="cloud-container" color="currentColor" />,
+        href: goTo.resolve.cmpClustersContainer({ clusterName: chosenCluster }),
+        text: i18n.t('container resource'),
+        subtitle: i18n.t('container'),
+        subMenu: [
+          {
+            key: 'clusterNodes',
+            href: goTo.resolve.cmpClustersNodes({ clusterName: chosenCluster }),
+            text: i18n.t('node'),
+          },
+          {
+            key: 'clusterPod',
+            href: goTo.resolve.cmpClustersPods({ clusterName: chosenCluster }),
+            text: 'Pods',
+          },
+          {
+            key: 'clusterWorkload',
+            href: goTo.resolve.cmpClustersWorkload({ clusterName: chosenCluster }),
+            text: i18n.t('cmp:Workload'),
+          },
+          {
+            key: 'clusterNodes',
+            href: goTo.resolve.cmpClustersEventLog({ clusterName: chosenCluster }),
+            text: i18n.t('cmp:Event Log'),
+          },
+        ],
+      },
       {
         key: 'cmpServices',
         icon: <IconListTwo />,

shell/app/modules/cmp/common/cluster-terminal/xterm-binary.tsx

@@ -121,8 +121,8 @@ export function destroyTerm(term: ITerminal) {
     window.removeEventListener('resize', term._onResize);
   }
 
-  if (term.socket) {
-    term.socket.close();
+  if (term.__socket) {
+    term.__socket.close();
   }
   if (term._pingInterval) {
     clearInterval(term._pingInterval);

shell/app/modules/cmp/common/cluster-terminal/xterm-channel.tsx

@@ -148,8 +148,8 @@ export function destroyTerm(term: ITerminal) {
     window.removeEventListener('resize', term._onResize);
   }
 
-  if (term.socket) {
-    term.socket.close();
+  if (term.__socket) {
+    term.__socket.close();
   }
 
   if (term._pingInterval) {

shell/app/modules/cmp/pages/cluster-manage/cluster-event-log.tsx → shell/app/modules/cmp/pages/cluster-container/cluster-event-log.tsx

@@ -17,8 +17,9 @@ import { getUrlQuery } from 'config-page/utils';
 import { updateSearch } from 'common/utils';
 import routeInfoStore from 'core/stores/route';
 import { K8sClusterTerminalButton } from './cluster-terminal';
+import { ClusterContainer } from './index';
 
-const ClusterNodes = () => {
+const ClusterEnvLog = () => {
   const [{ clusterName }, query] = routeInfoStore.useStore((s) => [s.params, s.query]);
   const [urlQuery, setUrlQuery] = React.useState(query);
 
@@ -31,7 +32,7 @@ const ClusterNodes = () => {
   const urlQueryChange = (val: Obj) => setUrlQuery((prev: Obj) => ({ ...prev, ...getUrlQuery(val) }));
 
   return (
-    <>
+    <ClusterContainer>
       <div className="top-button-group">
         <K8sClusterTerminalButton clusterName={clusterName} />
       </div>
@@ -48,8 +49,7 @@ const ClusterNodes = () => {
           },
         }}
       />
-    </>
+    </ClusterContainer>
   );
 };
-
-export default ClusterNodes;
+export default ClusterEnvLog;

shell/app/modules/cmp/pages/cluster-manage/cluster-nodes.tsx → shell/app/modules/cmp/pages/cluster-container/cluster-nodes.tsx

@@ -20,6 +20,7 @@ import { useUpdate } from 'common/use-hooks';
 import { PureClusterNodeDetail } from './cluster-nodes-detail';
 import { updateSearch } from 'common/utils';
 import { K8sClusterTerminalButton } from './cluster-terminal';
+import { ClusterContainer } from './index';
 
 interface IDetailData {
   nodeIP: string;
@@ -62,7 +63,7 @@ const ClusterNodes = () => {
   };
 
   return (
-    <>
+    <ClusterContainer>
       <div className="top-button-group">
         <K8sClusterTerminalButton clusterName={clusterName} />
       </div>
@@ -96,7 +97,7 @@ const ClusterNodes = () => {
           <PureClusterNodeDetail className="mt-4" clusterName={clusterName} {...detailData} />
         ) : null}
       </Drawer>
-    </>
+    </ClusterContainer>
   );
 };
 

shell/app/modules/cmp/pages/cluster-manage/cluster-pods.tsx → shell/app/modules/cmp/pages/cluster-container/cluster-pods.tsx

@@ -20,6 +20,7 @@ import { updateSearch } from 'common/utils';
 import { Drawer } from 'antd';
 import { useUpdate } from 'common/use-hooks';
 import { PureClusterPodDetail } from './cluster-pod-detail';
+import { ClusterContainer } from './index';
 
 interface IDetailData {
   podId: string;
@@ -33,7 +34,7 @@ interface IState {
   urlQuery: Obj;
 }
 
-const ClusterNodes = () => {
+const ClusterPods = () => {
   const [{ clusterName }, query] = routeInfoStore.useStore((s) => [s.params, s.query]);
   const [{ visible, detailData, urlQuery }, updater, update] = useUpdate<IState>({
     visible: false,
@@ -72,7 +73,7 @@ const ClusterNodes = () => {
   };
 
   return (
-    <>
+    <ClusterContainer>
       <div className="top-button-group">
         <K8sClusterTerminalButton clusterName={clusterName} />
       </div>
@@ -99,8 +100,8 @@ const ClusterNodes = () => {
           <PureClusterPodDetail className="mt-4" clusterName={clusterName} {...detailData} onDelete={onDeleteDetail} />
         ) : null}
       </Drawer>
-    </>
+    </ClusterContainer>
   );
 };
 
-export default ClusterNodes;
+export default ClusterPods;

shell/app/modules/cmp/pages/cluster-container/cluster-selector.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from 'react';
+import clusterStore from 'cmp/stores/cluster';
+import { Select } from 'antd';
+import { goTo } from 'common/utils';
+import { TYPE_K8S_AND_EDAS, EMPTY_CLUSTER, replaceContainerCluster } from 'cmp/pages/cluster-manage/config';
+import i18n from 'i18n';
+
+const ClusterSelector = () => {
+  const [list, chosenCluster] = clusterStore.useStore((s) => [s.list, s.chosenCluster]);
+  const { setChosenCluster } = clusterStore.reducers;
+
+  const useList = list?.filter((item: ORG_CLUSTER.ICluster) => TYPE_K8S_AND_EDAS.includes(item.type));
+
+  return (
+    <div className="flex items-center">
+      <span className="flex items-center font-bold text-lg">{i18n.t('container resource')}</span>
+      <span className="bg-dark-2 mx-5" style={{ width: 1, height: 12 }} />
+      <Select
+        bordered={false}
+        dropdownMatchSelectWidth={false}
+        className={'hover:bg-hover-gray-bg rounded'}
+        getPopupContainer={() => document.body}
+        value={chosenCluster === EMPTY_CLUSTER ? undefined : chosenCluster}
+        placeholder={i18n.t('choose cluster')}
+        onChange={(v) => {
+          setChosenCluster(v);
+          goTo(replaceContainerCluster(v));
+        }}
+      >
+        {useList?.map((item: ORG_CLUSTER.ICluster) => (
+          <Select.Option key={item.id} value={item.name}>
+            {item.displayName || item.name}
+          </Select.Option>
+        ))}
+      </Select>
+    </div>
+  );
+};
+
+export default ClusterSelector;

shell/app/modules/cmp/pages/cluster-manage/cluster-workload.tsx → shell/app/modules/cmp/pages/cluster-container/cluster-workload.tsx

@@ -20,6 +20,7 @@ import { updateSearch } from 'common/utils';
 import { useUpdate } from 'common/use-hooks';
 import { Drawer } from 'antd';
 import { PureClusterWorkloadDetail } from './cluster-workload-detail';
+import { ClusterContainer } from './index';
 
 interface IDetailData {
   workloadId: string;
@@ -31,7 +32,7 @@ interface IState {
   urlQuery: Obj;
 }
 
-const ClusterNodes = () => {
+const ClusterWorkload = () => {
   const [{ clusterName }, query] = routeInfoStore.useStore((s) => [s.params, s.query]);
   const [{ visible, detailData, urlQuery }, updater, update] = useUpdate<IState>({
     visible: false,
@@ -70,7 +71,7 @@ const ClusterNodes = () => {
   };
 
   return (
-    <>
+    <ClusterContainer>
       <div className="top-button-group">
         <K8sClusterTerminalButton clusterName={clusterName} />
       </div>
@@ -99,8 +100,8 @@ const ClusterNodes = () => {
           />
         ) : null}
       </Drawer>
-    </>
+    </ClusterContainer>
   );
 };
 
-export default ClusterNodes;
+export default ClusterWorkload;

shell/app/modules/cmp/pages/cluster-container/index.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from 'react';
+import routeInfoStore from 'core/stores/route';
+import { EmptyHolder } from 'common';
+import { EMPTY_CLUSTER } from 'cmp/pages/cluster-manage/config';
+import i18n from 'i18n';
+
+export const ClusterContainer = ({ children }: { children: React.ReactNode }) => {
+  const { clusterName } = routeInfoStore.useStore((s) => s.params);
+  if (EMPTY_CLUSTER === clusterName) {
+    return <EmptyHolder tip={i18n.t('cmp:no cluster available')} />;
+  }
+  return <div key={clusterName}>{children}</div>;
+};

shell/app/modules/cmp/pages/cluster-manage/cluster-detail.tsx

@@ -20,15 +20,12 @@ import { useLoading } from 'core/stores/loading';
 import routeInfoStore from 'core/stores/route';
 import clusterStore from '../../stores/cluster';
 import { manageTypeMap, statusMap } from './cluster-list';
-import { K8sClusterTerminalButton } from './cluster-terminal';
-import { TYPE_K8S_AND_EDAS } from 'cmp/pages/cluster-manage/config';
 
 import './cluster-detail.scss';
 
 const ClusterDetail = () => {
   const { params } = routeInfoStore.getState((s) => s);
   const { clusterName } = params;
-  const clusterDetail = clusterStore.useStore((s) => s.detail);
   const { getClusterNewDetail } = clusterStore.effects;
   const [loading] = useLoading(clusterStore, ['getClusterNewDetail']);
   const [detail, setDetail] = React.useState({} as any);
@@ -62,11 +59,6 @@ const ClusterDetail = () => {
 
   return (
     <div className="cluster-detail">
-      {TYPE_K8S_AND_EDAS.includes(clusterDetail.type) ? (
-        <div className="top-button-group">
-          <K8sClusterTerminalButton clusterName={clusterName} />
-        </div>
-      ) : null}
       <Spin spinning={loading}>{!isEmpty(detail) ? <KeyValueList data={detail} /> : <EmptyHolder relative />}</Spin>
     </div>
   );