feat(console): rm kalfka and fix some other issues (#1845)

* feat(console): rm kalfka in log * feat(console): set node version to v14.17.4 * feat(console): update to react18 * feat(console): rm disable for logagent in containerd * fix(console): fix fetch pods in workload parh error * fix(cosnole): disabled createresource when no namespace * fix(console): goback @types/react to 17 * fix(console): when role not is custom hide table * fix(console): can't clean workload tag search
tkestack · Apr 19, 2022 · 2c472e3 · 2c472e3
1 parent 137b576
commit 2c472e3
Show file tree

Hide file tree

Showing 20 changed files with 247 additions and 234 deletions.
diff --git a/web/console/.nvmrc b/web/console/.nvmrc
@@ -1 +1 @@
-v12.22.4
+v14.17.4
diff --git a/web/console/Wrapper.tsx b/web/console/Wrapper.tsx
@@ -274,6 +274,8 @@ interface ConsoleWrapperProps {
 
   /** 是否需要侧边导航栏 */
   sideBar?: boolean;
+
+  children: React.ReactNode;
 }
 
 interface UserInfo {

diff --git a/web/console/index.tke.tsx b/web/console/index.tke.tsx
@@ -97,6 +97,8 @@ insertCSS(
 interface TempWrapperProps {
   /** 当前业务的businessKey */
   businessKey: string;
+
+  children: React.ReactNode;
 }
 
 class TempWrapper extends React.Component<TempWrapperProps, any> {

diff --git a/web/console/lib/ff-redux/libs/qcloud-nmc/utils/Page.ts b/web/console/lib/ff-redux/libs/qcloud-nmc/utils/Page.ts
@@ -15,10 +15,8 @@
  * WARRANTIES OF ANY KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations under the License.
  */
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
 
-import { isInWhitelist } from './Whitelist';
+import { createRoot, Root } from 'react-dom/client';
 
 export interface PageOptions {
   businessKey: string;
@@ -61,6 +59,7 @@ export class Page {
   private requires: any;
   private rendered: boolean;
   private destroyed: boolean;
+  private root: Root;
 
   constructor(options: PageOptions) {
     const { businessKey, id, title, component } = options;
@@ -115,15 +114,16 @@ export class Page {
       // 可能加载完依赖之后，用户已经切走了，此时 nmc.render() 不会执行
       nmc.render(`<div id="${this.id}"></div>`, this.businessKey);
       if ((this.container = document.getElementById(this.id))) {
-        currentReactRoot = ReactDom.render(this.component, this.container);
+        const root = createRoot(this.container);
+        root.render(this.component);
+        this.root = root;
       }
     });
   }
 
   destroy() {
-    if (this.container) {
-      ReactDom.unmountComponentAtNode(this.container);
-      this.container = null;
+    if (this.root) {
+      this.root.unmount();
     }
   }
 }
diff --git a/web/console/package-lock.json b/web/console/package-lock.json
diff --git a/web/console/package.json b/web/console/package.json
@@ -4,7 +4,7 @@
   "description": "Console web app for TKEStack",
   "main": "index.js",
   "engines": {
-    "node": ">=10.3.0"
+    "node": "v14.17.4"
   },
   "scripts": {
     "preinstall": "rm -rf node_modules",
@@ -53,11 +53,11 @@
     "moment": "^2.24.0",
     "promise.prototype.finally": "^3.1.3",
     "prop-types": "^15.6.2",
-    "react": "^16.14.0",
+    "react": "^18.0.0",
     "react-addons-css-transition-group": "^15.6.2",
     "react-codemirror": "^1.0.0",
     "react-codemirror2": "^5.1.0",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.0.0",
     "react-final-form-hooks": "^2.0.2",
     "react-hook-form": "^7.10.1",
     "react-i18next": "^9.0.2",
@@ -82,8 +82,8 @@
     "@types/lodash": "^4.14.172",
     "@types/marked": "^0.6.3",
     "@types/node": "^11.11.1",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^18.0.0",
     "@types/redux-logger": "^3.0.7",
     "@types/redux-thunk": "^2.1.0",
     "@types/uuid": "^8.3.1",

diff --git a/web/console/src/modules/cluster/WebAPI/K8sResourceAPI.ts b/web/console/src/modules/cluster/WebAPI/K8sResourceAPI.ts
@@ -181,6 +181,7 @@ export async function fetchResourceList(
     isNeedDes?: boolean;
     isNeedSpecific?: boolean;
     isContinue?: boolean;
+    extraResource?: string;
   }
 ) {
   let { filter, search, paging, continueToken } = query,
@@ -192,7 +193,8 @@ export async function fetchResourceList(
     k8sQueryObj = {},
     isNeedDes = false,
     isNeedSpecific = true,
-    isContinue = false
+    isContinue = false,
+    extraResource = ''
   } = options;
   let resourceList = [];
   let nextContinueToken: string;
@@ -207,15 +209,17 @@ export async function fetchResourceList(
         namespace,
         specificName: isNeedSpecific ? search : '',
         clusterId,
-        meshId
+        meshId,
+        extraResource
       });
     } else {
       k8sUrl = reduceK8sRestfulPath({
         resourceInfo,
         namespace,
         specificName: isNeedSpecific ? specificName : '',
         clusterId,
-        meshId
+        meshId,
+        extraResource
       });
     }
 

diff --git a/web/console/src/modules/cluster/actions/resourcePodActions.ts b/web/console/src/modules/cluster/actions/resourcePodActions.ts
@@ -44,7 +44,7 @@ const fetchPodActions = generateFetcherActionCreator({
   fetcher: async (getState: GetState, fetchOptions, dispatch) => {
     // fetch之前先清空之前的轮训
     dispatch(resourcePodActions.clearPollEvent());
-    const { subRoot, route, clusterVersion, namespaceSelection } = getState(),
+    const { subRoot, route, clusterVersion } = getState(),
       urlParams = router.resolve(route),
       { resourceDetailState, resourceInfo } = subRoot,
       { podQuery, podFilterInNode } = resourceDetailState;
@@ -61,50 +61,62 @@ const fetchPodActions = generateFetcherActionCreator({
     const podVersionInfo = apiVersion[ResourceConfigVersionMap(clusterVersion)]['pods'];
     const { podName, phase, namespace, ip } = podFilterInNode;
     // pods的resourceInfo的配置
-    const podResourceInfo: ResourceInfo = {
-      basicEntry: podVersionInfo.basicEntry,
-      version: podVersionInfo.version,
-      group: podVersionInfo.group,
-      namespaces: '',
-      requestType: {
-        list: 'pods'
-      }
-    };
 
-    let k8sQueryObj = {};
+    let fetchParams;
 
     if (isInNodeManager) {
       // pods的resourceInfo的配置
+      const podResourceInfo: ResourceInfo = {
+        basicEntry: podVersionInfo.basicEntry,
+        version: podVersionInfo.version,
+        group: podVersionInfo.group,
+        namespaces: '',
+        requestType: {
+          list: 'pods'
+        }
+      };
 
       // 过滤条件
-      k8sQueryObj = {
+      const k8sQueryObj = {
         fieldSelector: {
           'spec.nodeName': route.queries['resourceIns'] ? route.queries['resourceIns'] : undefined,
           'metadata.namespace': namespace ? namespace : undefined,
           'metadata.name': podName ? podName : undefined,
           'status.phase': phase ? phase : undefined
         }
       };
+
+      fetchParams = {
+        resourceInfo: podResourceInfo,
+        isClearData,
+        k8sQueryObj,
+        isNeedSpecific: false,
+        isContinue: true
+      };
     } else {
-      podResourceInfo.namespaces = 'namespaces';
-      k8sQueryObj = {
-        labelSelector: resourceDetailState?.resourceDetailInfo?.selection?.spec?.selector?.matchLabels,
+      const k8sQueryObj = {
         fieldSelector: {
           'metadata.name': podName ? podName : undefined,
           'status.phase': phase ? phase : undefined,
           'status.podIP': ip
         }
       };
+
+      fetchParams = {
+        resourceInfo,
+        isClearData,
+        k8sQueryObj,
+        isNeedSpecific: true,
+        isContinue: true,
+        extraResource: 'pods'
+      };
+
+      podQuery.search = '';
+
+      podQuery.filter.specificName = route?.queries?.resourceIns;
     }
 
-    k8sQueryObj = JSON.parse(JSON.stringify(k8sQueryObj));
-    const { records, continueToken } = await WebAPI.fetchResourceList(podQuery, {
-      resourceInfo: podResourceInfo,
-      isClearData,
-      k8sQueryObj,
-      isNeedSpecific: false,
-      isContinue: true
-    });
+    const { records, continueToken } = await WebAPI.fetchResourceList(podQuery, fetchParams);
 
     dispatch(resourcePodActions.changeContinueToken(continueToken));
 

diff --git a/...onsole/src/modules/cluster/components/resource/clusterInfomation/ClusterPlugInfoPanel.tsx b/...onsole/src/modules/cluster/components/resource/clusterInfomation/ClusterPlugInfoPanel.tsx
@@ -17,7 +17,7 @@
  */
 import React from 'react';
 import { FormPanel } from '@tencent/ff-component';
-import { Table, TableColumn, Button, Icon, Bubble } from '@tea/component';
+import { Table, TableColumn, Button, Icon } from '@tea/component';
 import { RootProps } from '../../ClusterApp';
 import { FetchState } from '@tencent/ff-redux';
 import { router } from '../../../router';
@@ -68,20 +68,16 @@ export const ClusterPlugInfoPanel: React.FC<RootProps> = ({ cluster, actions, ro
       key: 'action',
       header: '操作',
       render({ action, type }) {
-        const disabled = type === PlugType.LogAgent && isContainerd;
-
         return action ? (
           <>
             <Button type="link" onClick={close(type)}>
               关闭
             </Button>
           </>
         ) : (
-          <Bubble content={disabled ? '运行时为containerd的集群不支持开启日志采集' : ''}>
-            <Button type="link" disabled={disabled} onClick={open(type)}>
-              开启
-            </Button>
-          </Bubble>
+          <Button type="link" onClick={open(type)}>
+            开启
+          </Button>
         );
       }
     }
@@ -110,12 +106,7 @@ export const ClusterPlugInfoPanel: React.FC<RootProps> = ({ cluster, actions, ro
       {cluster.list.fetched !== true || cluster.list.fetchState === FetchState.Fetching ? (
         <Icon type="loading" />
       ) : (
-        <Table
-          columns={columns}
-          records={records}
-          recordKey="des"
-          rowDisabled={({ type }) => type === PlugType.LogAgent && isContainerd}
-        />
+        <Table columns={columns} records={records} recordKey="des" />
       )}
     </FormPanel>
   );

diff --git a/...console/src/modules/cluster/components/resource/resourceDetail/ResourcePodActionPanel.tsx b/...console/src/modules/cluster/components/resource/resourceDetail/ResourcePodActionPanel.tsx
@@ -169,6 +169,9 @@ export class ResourcePodActionPanel extends React.Component<RootProps, ResourceP
 
     const type = urlParams['type'];
     const isInNodeManage = IsInNodeManageDetail(type);
+
+    if (!isInNodeManage) return null;
+
     const { subRoot, namespaceList } = this.props;
 
     /** podFilter的选择项 */