From 2c472e3c8fb7c029046d36e36013184f5fa62913 Mon Sep 17 00:00:00 2001 From: jo-hnny Date: Tue, 19 Apr 2022 09:44:06 +0800 Subject: [PATCH] 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 --- web/console/.nvmrc | 2 +- web/console/Wrapper.tsx | 2 + web/console/index.tke.tsx | 2 + .../ff-redux/libs/qcloud-nmc/utils/Page.ts | 14 +-- web/console/package-lock.json | 55 ++++----- web/console/package.json | 10 +- .../modules/cluster/WebAPI/K8sResourceAPI.ts | 10 +- .../cluster/actions/resourcePodActions.ts | 58 +++++---- .../ClusterPlugInfoPanel.tsx | 19 +-- .../resourceDetail/ResourcePodActionPanel.tsx | 3 + .../ResourceActionPanel.tsx | 22 ++-- .../common/components/tipdialog/TipDialog.tsx | 4 +- .../logStash/actions/editLogStashActions.ts | 80 ++++++------- .../logStash/actions/namespaceActions.ts | 33 +++--- .../EditOriginContainerFilePanel.tsx | 19 ++- .../EditOriginContainerItemPanel.tsx | 8 +- .../src/modules/logStash/constants/Config.ts | 16 +-- .../logStash/reducers/LogStashEditReducer.ts | 12 +- .../components/group/create/BaseInfoPanel.tsx | 110 +++++++++--------- web/console/webpack/webpack.dev.js | 2 +- 20 files changed, 247 insertions(+), 234 deletions(-) diff --git a/web/console/.nvmrc b/web/console/.nvmrc index e00efe40d..e038d63f6 100644 --- a/web/console/.nvmrc +++ b/web/console/.nvmrc @@ -1 +1 @@ -v12.22.4 \ No newline at end of file +v14.17.4 \ No newline at end of file diff --git a/web/console/Wrapper.tsx b/web/console/Wrapper.tsx index 0cf90cf34..0bf1693f8 100644 --- 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 index e6c9be221..80259cd19 100644 --- 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 { 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 index 518667961..e478dc2a1 100644 --- 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(`
`, 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 index bb308469a..7e9e5d770 100644 --- a/web/console/package-lock.json +++ b/web/console/package-lock.json @@ -1358,14 +1358,14 @@ "dev": true }, "@types/prop-types": { - "version": "15.7.3", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "@types/react": { - "version": "16.14.5", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz", - "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==", + "version": "17.0.44", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz", + "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1373,12 +1373,12 @@ } }, "@types/react-dom": { - "version": "16.9.12", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz", - "integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==", + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz", + "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==", "dev": true, "requires": { - "@types/react": "^16" + "@types/react": "*" } }, "@types/react-transition-group": { @@ -1416,9 +1416,9 @@ } }, "@types/scheduler": { - "version": "0.16.1", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", - "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==" + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/sizzle": { "version": "2.3.3", @@ -9305,13 +9305,11 @@ "dev": true }, "react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz", + "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" + "loose-envify": "^1.1.0" } }, "react-addons-css-transition-group": { @@ -9372,14 +9370,12 @@ } }, "react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", - "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz", + "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==", "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.19.1" + "scheduler": "^0.21.0" } }, "react-dropzone": { @@ -10131,12 +10127,11 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "scheduler": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", - "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz", + "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==", "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "schema-utils": { diff --git a/web/console/package.json b/web/console/package.json index 082da5c41..0b6174b34 100644 --- 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 index 949788552..2149e5c76 100644 --- 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,7 +209,8 @@ export async function fetchResourceList( namespace, specificName: isNeedSpecific ? search : '', clusterId, - meshId + meshId, + extraResource }); } else { k8sUrl = reduceK8sRestfulPath({ @@ -215,7 +218,8 @@ export async function fetchResourceList( 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 index 321b3f1aa..64a1d4070 100644 --- 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,23 +61,23 @@ 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, @@ -85,26 +85,38 @@ const fetchPodActions = generateFetcherActionCreator({ '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/web/console/src/modules/cluster/components/resource/clusterInfomation/ClusterPlugInfoPanel.tsx b/web/console/src/modules/cluster/components/resource/clusterInfomation/ClusterPlugInfoPanel.tsx index 4351f53dc..311ccb0db 100644 --- a/web/console/src/modules/cluster/components/resource/clusterInfomation/ClusterPlugInfoPanel.tsx +++ b/web/console/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,8 +68,6 @@ export const ClusterPlugInfoPanel: React.FC = ({ cluster, actions, ro key: 'action', header: '操作', render({ action, type }) { - const disabled = type === PlugType.LogAgent && isContainerd; - return action ? ( <> ) : ( - - - + ); } } @@ -110,12 +106,7 @@ export const ClusterPlugInfoPanel: React.FC = ({ cluster, actions, ro {cluster.list.fetched !== true || cluster.list.fetchState === FetchState.Fetching ? ( ) : ( - type === PlugType.LogAgent && isContainerd} - /> +
)} ); diff --git a/web/console/src/modules/cluster/components/resource/resourceDetail/ResourcePodActionPanel.tsx b/web/console/src/modules/cluster/components/resource/resourceDetail/ResourcePodActionPanel.tsx index e8d6f2bb3..d5377ec29 100644 --- a/web/console/src/modules/cluster/components/resource/resourceDetail/ResourcePodActionPanel.tsx +++ b/web/console/src/modules/cluster/components/resource/resourceDetail/ResourcePodActionPanel.tsx @@ -169,6 +169,9 @@ export class ResourcePodActionPanel extends React.Component 0; + return isShow ? (