diff --git a/pkg/web/package-lock.json b/pkg/web/package-lock.json index f987a5bee..934685275 100644 --- a/pkg/web/package-lock.json +++ b/pkg/web/package-lock.json @@ -9,9 +9,9 @@ "version": "0.1.0", "dependencies": { "@emotion/react": "^11.10.0", - "@mantine/core": "5.1.4", - "@mantine/hooks": "5.1.4", - "@mantine/prism": "^5.1.4", + "@mantine/core": "^5.2.0", + "@mantine/hooks": "^5.2.0", + "@mantine/prism": "^5.2.0", "@reduxjs/toolkit": "^1.6.0", "axios": "^0.26.1", "axios-jsonp": "^1.0.4", @@ -2280,49 +2280,49 @@ "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==" }, "node_modules/@mantine/core": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.1.4.tgz", - "integrity": "sha512-+80FsYfhAqHbBeM+CtO1l1ShALsPoqg8xjqDcwd9f+APRSuu2j0eQ5h91kTKFRHkLuDBCYNsBjmWd+VY9HGKkQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.2.0.tgz", + "integrity": "sha512-FWR+TtSu+kJjSFHSGedVLVshfTX5J/2v3e/aU+jGlsZmZrm+UHWI4FbqRuDIWI6QSDbWcaNXn03RYbKJRpGXSQ==", "dependencies": { "@floating-ui/react-dom-interactions": "0.6.6", - "@mantine/styles": "5.1.4", - "@mantine/utils": "5.1.4", + "@mantine/styles": "5.2.0", + "@mantine/utils": "5.2.0", "@radix-ui/react-scroll-area": "1.0.0", "react-textarea-autosize": "8.3.4" }, "peerDependencies": { - "@mantine/hooks": "5.1.4", + "@mantine/hooks": "5.2.0", "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "node_modules/@mantine/hooks": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.1.4.tgz", - "integrity": "sha512-hK0f46+JDP2av7R4sD8s+jkunWszlo0SqX3L0wdFZ7BdjnGC7vTgRrESbu+/K6x0eWSXtAQ0GWXt+0R7jkO3Eg==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.2.0.tgz", + "integrity": "sha512-9pBlt12lxwzTOWUmigTlcbkW9eEHOYODALEXc65F0uMkbdYpjfMq2rJ0Pp4mEoQkXtl9m77vbD1b3RLrncVpfg==", "peerDependencies": { "react": ">=16.8.0" } }, "node_modules/@mantine/prism": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/prism/-/prism-5.1.4.tgz", - "integrity": "sha512-1/DrvbnX9NtgJlDnC8f52wCsFWiqFSABrjkPABpXPa+4OfoUvo8I+dBSMwDJ9Q4cr6CCXjWLHhuKdJZMh7RosQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/prism/-/prism-5.2.0.tgz", + "integrity": "sha512-V1efYnjDGjWYUOOC6JsY5QdccXVjm20IFfXejSaYcZbyctPBOdPa1fUmKt+gj+CD0JnOfYfszoYnlVB9OGr+gA==", "dependencies": { - "@mantine/utils": "5.1.4", + "@mantine/utils": "5.2.0", "prism-react-renderer": "^1.2.1" }, "peerDependencies": { - "@mantine/core": "5.1.4", - "@mantine/hooks": "5.1.4", + "@mantine/core": "5.2.0", + "@mantine/hooks": "5.2.0", "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "node_modules/@mantine/styles": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.1.4.tgz", - "integrity": "sha512-GMzI4km5sxxwPoAj1JMfOTgqfyHtrd+puMc0Nv+mlTTM22+P8Xp5yM00csL0PV94KP7oiuV1XDFJ7xiyRCamLA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.2.0.tgz", + "integrity": "sha512-0wUUqB+JmGGyUoMIrKig+7cd3s2A48tzAIexTu94LVixBQ4l7RnFjxh8/1ZPcWz76SVpmliljiCIHyQUV590Kg==", "dependencies": { "clsx": "1.1.1", "csstype": "3.0.9" @@ -2347,9 +2347,9 @@ "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" }, "node_modules/@mantine/utils": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.1.4.tgz", - "integrity": "sha512-f2lnKjvGkQrWXSqTRg5uNh2PZpeow1enjX8OFwlOn0B6bJDdKYiHl+YidWe2DObOi36WSvtLbaRS7yKQOG+1XQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.2.0.tgz", + "integrity": "sha512-wDJKbW5EYboTSNkWhIXKdyDgBVxGLmdkGL4O94iNtZbRy5zoouGaEP3sW88GgIhyFmeVlnu+Mdzzsd76IsX/NA==", "peerDependencies": { "react": ">=16.8.0" } @@ -10859,36 +10859,36 @@ "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==" }, "@mantine/core": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.1.4.tgz", - "integrity": "sha512-+80FsYfhAqHbBeM+CtO1l1ShALsPoqg8xjqDcwd9f+APRSuu2j0eQ5h91kTKFRHkLuDBCYNsBjmWd+VY9HGKkQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.2.0.tgz", + "integrity": "sha512-FWR+TtSu+kJjSFHSGedVLVshfTX5J/2v3e/aU+jGlsZmZrm+UHWI4FbqRuDIWI6QSDbWcaNXn03RYbKJRpGXSQ==", "requires": { "@floating-ui/react-dom-interactions": "0.6.6", - "@mantine/styles": "5.1.4", - "@mantine/utils": "5.1.4", + "@mantine/styles": "5.2.0", + "@mantine/utils": "5.2.0", "@radix-ui/react-scroll-area": "1.0.0", "react-textarea-autosize": "8.3.4" } }, "@mantine/hooks": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.1.4.tgz", - "integrity": "sha512-hK0f46+JDP2av7R4sD8s+jkunWszlo0SqX3L0wdFZ7BdjnGC7vTgRrESbu+/K6x0eWSXtAQ0GWXt+0R7jkO3Eg==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.2.0.tgz", + "integrity": "sha512-9pBlt12lxwzTOWUmigTlcbkW9eEHOYODALEXc65F0uMkbdYpjfMq2rJ0Pp4mEoQkXtl9m77vbD1b3RLrncVpfg==", "requires": {} }, "@mantine/prism": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/prism/-/prism-5.1.4.tgz", - "integrity": "sha512-1/DrvbnX9NtgJlDnC8f52wCsFWiqFSABrjkPABpXPa+4OfoUvo8I+dBSMwDJ9Q4cr6CCXjWLHhuKdJZMh7RosQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/prism/-/prism-5.2.0.tgz", + "integrity": "sha512-V1efYnjDGjWYUOOC6JsY5QdccXVjm20IFfXejSaYcZbyctPBOdPa1fUmKt+gj+CD0JnOfYfszoYnlVB9OGr+gA==", "requires": { - "@mantine/utils": "5.1.4", + "@mantine/utils": "5.2.0", "prism-react-renderer": "^1.2.1" } }, "@mantine/styles": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.1.4.tgz", - "integrity": "sha512-GMzI4km5sxxwPoAj1JMfOTgqfyHtrd+puMc0Nv+mlTTM22+P8Xp5yM00csL0PV94KP7oiuV1XDFJ7xiyRCamLA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.2.0.tgz", + "integrity": "sha512-0wUUqB+JmGGyUoMIrKig+7cd3s2A48tzAIexTu94LVixBQ4l7RnFjxh8/1ZPcWz76SVpmliljiCIHyQUV590Kg==", "requires": { "clsx": "1.1.1", "csstype": "3.0.9" @@ -10907,9 +10907,9 @@ } }, "@mantine/utils": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.1.4.tgz", - "integrity": "sha512-f2lnKjvGkQrWXSqTRg5uNh2PZpeow1enjX8OFwlOn0B6bJDdKYiHl+YidWe2DObOi36WSvtLbaRS7yKQOG+1XQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.2.0.tgz", + "integrity": "sha512-wDJKbW5EYboTSNkWhIXKdyDgBVxGLmdkGL4O94iNtZbRy5zoouGaEP3sW88GgIhyFmeVlnu+Mdzzsd76IsX/NA==", "requires": {} }, "@nodelib/fs.scandir": { diff --git a/pkg/web/package.json b/pkg/web/package.json index e4c839353..ec2a2a3c1 100644 --- a/pkg/web/package.json +++ b/pkg/web/package.json @@ -51,9 +51,9 @@ }, "dependencies": { "@emotion/react": "^11.10.0", - "@mantine/core": "5.1.4", - "@mantine/hooks": "5.1.4", - "@mantine/prism": "^5.1.4", + "@mantine/core": "^5.2.0", + "@mantine/hooks": "^5.2.0", + "@mantine/prism": "^5.2.0", "@reduxjs/toolkit": "^1.6.0", "axios": "^0.26.1", "axios-jsonp": "^1.0.4", diff --git a/pkg/web/src/pages/Recommend/ReplicaRecommend/index.tsx b/pkg/web/src/pages/Recommend/ReplicaRecommend/index.tsx index b5ffa686c..d08ecbfdd 100644 --- a/pkg/web/src/pages/Recommend/ReplicaRecommend/index.tsx +++ b/pkg/web/src/pages/Recommend/ReplicaRecommend/index.tsx @@ -14,6 +14,7 @@ import { useNavigate } from 'react-router-dom'; import JsYaml from 'js-yaml'; import { useTranslation } from 'react-i18next'; import { Prism } from '@mantine/prism'; +import { copyToClipboard } from "../../../utils/copyToClipboard"; const Editor = React.lazy(() => import('components/common/Editor')); @@ -251,20 +252,32 @@ export const SelectTable = () => { { - setCommandDialogVisible(false); - setCurrentSelection(null); - }} + cancelBtn={ + + } + confirmBtn={false} onClose={() => { setCommandDialogVisible(false); setCurrentSelection(null); }} > - - {`patchData=\`kubectl get recommend ${currentSelection?.metadata?.name} -n ${currentSelection?.spec?.targetRef?.namespace} -o jsonpath='{.status.recommendedInfo}'\`;kubectl patch ${currentSelection?.spec?.targetRef?.kind} ${currentSelection?.spec?.targetRef?.name} -n ${currentSelection?.spec?.targetRef?.namespace} --patch \"\${patchData}\"`} + + {`patchData=\`kubectl get recommend ${currentSelection?.metadata?.name} -n ${currentSelection?.spec?.targetRef?.namespace} -o jsonpath='{.status.recommendedInfo}'\`\nkubectl patch ${currentSelection?.spec?.targetRef?.kind} ${currentSelection?.spec?.targetRef?.name} -n ${currentSelection?.spec?.targetRef?.namespace} --patch \"\${patchData}\"`} diff --git a/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx b/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx index fa985ed37..93245a50a 100644 --- a/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx +++ b/pkg/web/src/pages/Recommend/ResourcesRecommend/index.tsx @@ -14,6 +14,7 @@ import { useNavigate } from 'react-router-dom'; import JsYaml from 'js-yaml'; import { useTranslation } from 'react-i18next'; import { Prism } from '@mantine/prism'; +import { copyToClipboard } from "../../../utils/copyToClipboard"; const Editor = React.lazy(() => import('components/common/Editor')); @@ -144,14 +145,15 @@ export const SelectTable = () => { colKey: 'status.currentInfo', cell({ row }) { console.log('row', row); - if (typeof row.status.currentInfo == 'string') { + if (typeof row.status.currentInfo === 'string') { const containers = JSON.parse(row?.status?.currentInfo).spec?.template?.spec?.containers || []; if (containers.length > 0) { return ( {containers.map((o: any, i: number) => ( - {o.name} / {o.resources.requests.cpu} / {Math.floor(parseFloat(o.resources.requests.memory) / 1048576)}Mi + {o.name} / {o.resources.requests.cpu} /{' '} + {Math.floor(parseFloat(o.resources.requests.memory) / 1048576)}Mi ))} @@ -282,18 +284,30 @@ export const SelectTable = () => { width={850} header={t('查看命令')} visible={commandDialogVisible} - cancelBtn={null} - onConfirm={() => { - setCommandDialogVisible(false); - setCurrentSelection(null); - }} + cancelBtn={ + + } + confirmBtn={false} onClose={() => { setCommandDialogVisible(false); setCurrentSelection(null); }} > - - {`patchData=\`kubectl get recommend ${currentSelection?.metadata?.name} -n ${currentSelection?.spec?.targetRef?.namespace} -o jsonpath='{.status.recommendedInfo}'\`;kubectl patch ${currentSelection?.spec?.targetRef?.kind} ${currentSelection?.spec?.targetRef?.name} -n ${currentSelection?.spec?.targetRef?.namespace} --patch \"\${patchData}\"`} + + {`patchData=\`kubectl get recommend ${currentSelection?.metadata?.name} -n ${currentSelection?.spec?.targetRef?.namespace} -o jsonpath='{.status.recommendedInfo}'\`\nkubectl patch ${currentSelection?.spec?.targetRef?.kind} ${currentSelection?.spec?.targetRef?.name} -n ${currentSelection?.spec?.targetRef?.namespace} --patch \"\${patchData}\"`} diff --git a/pkg/web/src/utils/copyToClipboard.ts b/pkg/web/src/utils/copyToClipboard.ts new file mode 100644 index 000000000..9961eb75e --- /dev/null +++ b/pkg/web/src/utils/copyToClipboard.ts @@ -0,0 +1,23 @@ +export const copyToClipboard = (textToCopy: string) => { + // navigator clipboard api needs a secure context (https) + if (navigator.clipboard && window.isSecureContext) { + // navigator clipboard api method' + return navigator.clipboard.writeText(textToCopy); + } + // text area method + const textArea = document.createElement('textarea'); + textArea.value = textToCopy; + // make the textarea out of viewport + textArea.style.position = 'fixed'; + textArea.style.left = '-999999px'; + textArea.style.top = '-999999px'; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + return new Promise((res, rej) => { + // here the magic happens + // eslint-disable-next-line no-unused-expressions + document.execCommand('copy') ? res() : rej(); + textArea.remove(); + }); +};