feat: improve node taint form select

webzard-io · Oct 23, 2024 · 9093f4d · 9093f4d
1 parent e5a7a81
commit 9093f4d
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 30 deletions.
diff --git a/packages/refine/package.json b/packages/refine/package.json
@@ -10,8 +10,8 @@
   "module": "./dist/refine.js",
   "types": "./lib/index.d.ts",
   "dependencies": {
-    "@cloudtower/eagle":  "^0.31.18",
-    "@cloudtower/icons-react": "^0.31.18",
+    "@cloudtower/eagle":  "^0.31.19",
+    "@cloudtower/icons-react": "^0.31.19",
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-log-viewer": "^5.0.0",
     "@refinedev/core": "^4.47.2",

diff --git a/packages/refine/src/components/DropdownMenuItems/index.ts b/packages/refine/src/components/DropdownMenuItems/index.ts
@@ -1,2 +1,3 @@
 export * from './EditLabelDropdownMenuItem';
 export * from './EditAnnotationDropdownMenuItem';
+export * from './EditNodeTaintDropdownMenuItem';
diff --git a/packages/refine/src/components/EditMetadataForm/EditNodeTaintForm.tsx b/packages/refine/src/components/EditMetadataForm/EditNodeTaintForm.tsx
@@ -1,4 +1,9 @@
-import { Select } from '@cloudtower/eagle';
+import { Select, Tooltip, getOptions, Icon } from '@cloudtower/eagle';
+import {
+  InfoICircleFill16Gray70Icon,
+  InfoICircleFill16GrayIcon,
+} from '@cloudtower/icons-react';
+import { css } from '@linaria/core';
 import { useUpdate } from '@refinedev/core';
 import { Unstructured } from 'k8s-api-provider';
 import { Node, Taint } from 'kubernetes-types/core/v1';
@@ -8,6 +13,11 @@ import { ResourceModel } from '../../models';
 import { pruneBeforeEdit } from '../../utils/k8s';
 import { KeyValueTableFormForm } from './KeyValueTableForm';
 
+const UlStyle = css`
+  list-style: disc;
+  padding-left: 2em;
+`;
+
 interface EditNodeTaintFormProps {
   nodeModel: ResourceModel<Unstructured & Node>;
 }
@@ -71,6 +81,35 @@ export const EditNodeTaintForm = React.forwardRef<
     [nodeModel, mutateAsync, t]
   );
 
+  const noScheduleTooltip = (
+    <div>
+      <b>NoSchedule</b>
+      <ul className={UlStyle}>
+        <li>{t('dovetail.taint_effect_NoSchedule_tooltip_1')}</li>
+        <li>{t('dovetail.taint_effect_NoSchedule_tooltip_2')}</li>
+      </ul>
+    </div>
+  );
+
+  const preferNoScheduleTooltip = (
+    <div>
+      <b>PreferNoSchedule</b>
+      <ul className={UlStyle}>
+        <li>{t('dovetail.taint_effect_PreferNoSchedule_tooltip_1')}</li>
+        <li>{t('dovetail.taint_effect_PreferNoSchedule_tooltip_2')}</li>
+        <li>{t('dovetail.taint_effect_PreferNoSchedule_tooltip_3')}</li>
+      </ul>
+    </div>
+  );
+
+  const noExecuteTooltip = (
+    <div>
+      <b>NoExecute</b>
+      <ul className={UlStyle}>
+        <li>{t('dovetail.taint_effect_NoExecute_tooltip_3')}</li>
+      </ul>
+    </div>
+  );
   return (
     <KeyValueTableFormForm
       ref={ref}
@@ -83,26 +122,48 @@ export const EditNodeTaintForm = React.forwardRef<
           title: t('dovetail.effect'),
           render: ({ value, onChange }) => {
             return (
-              <Select
-                input={{}}
-                value={value}
-                onChange={onChange}
-                size="small"
-                options={[
+              <Select input={{}} value={value} onChange={onChange} size="small">
+                {getOptions([
                   {
                     value: NodeTaintEffect.NoSchedule,
-                    label: t(`dovetail.node_taint_${NodeTaintEffect.NoSchedule}`),
+                    children: t(`dovetail.node_taint_${NodeTaintEffect.NoSchedule}`),
+                    suffix: (
+                      <Tooltip title={noScheduleTooltip}>
+                        <Icon
+                          src={InfoICircleFill16GrayIcon}
+                          hoverSrc={InfoICircleFill16Gray70Icon}
+                        />
+                      </Tooltip>
+                    ),
                   },
                   {
                     value: NodeTaintEffect.PreferNoSchedule,
-                    label: t(`dovetail.node_taint_${NodeTaintEffect.PreferNoSchedule}`),
+                    children: t(
+                      `dovetail.node_taint_${NodeTaintEffect.PreferNoSchedule}`
+                    ),
+                    suffix: (
+                      <Tooltip title={preferNoScheduleTooltip}>
+                        <Icon
+                          src={InfoICircleFill16GrayIcon}
+                          hoverSrc={InfoICircleFill16Gray70Icon}
+                        />
+                      </Tooltip>
+                    ),
                   },
                   {
                     value: NodeTaintEffect.NoExecute,
-                    label: t(`dovetail.node_taint_${NodeTaintEffect.NoExecute}`),
+                    children: t(`dovetail.node_taint_${NodeTaintEffect.NoExecute}`),
+                    suffix: (
+                      <Tooltip title={noExecuteTooltip}>
+                        <Icon
+                          src={InfoICircleFill16GrayIcon}
+                          hoverSrc={InfoICircleFill16Gray70Icon}
+                        />
+                      </Tooltip>
+                    ),
                   },
-                ]}
-              />
+                ])}
+              </Select>
             );
           },
           validator: ({ value }) => {

diff --git a/packages/refine/src/components/EditMetadataForm/KeyValueTableForm.tsx b/packages/refine/src/components/EditMetadataForm/KeyValueTableForm.tsx
@@ -95,7 +95,7 @@ function _KeyValueTableFormForm<RowType extends KeyValuePair>(
             type: 'input',
             validator: ({ value }) => {
               if (!value) return t('dovetail.key_empty_text');
-              const { isValid, errorMessage } = validateLabelKey(value || '');
+              const { isValid } = validateLabelKey(value || '');
               if (!isValid) return t('dovetail.format_error');
             },
             render: renderTextAreaFunc,

diff --git a/packages/refine/src/locales/zh-CN/dovetail.json b/packages/refine/src/locales/zh-CN/dovetail.json
@@ -225,5 +225,11 @@
   "suffix_format_rule_3": "后跟斜杠 (/)，即第一个 (/) 前的内容是前缀。如有 (/) ，前缀不可为空",
   "name_format_rule_1": "由字母、数字、连字符 (-)、下划线(_) 或点 (.) 组成",
   "name_format_rule_2": "以字母或数字开头和结尾",
-  "name_format_rule_3": "不超过 63 个字符"
+  "name_format_rule_3": "不超过 63 个字符",
+  "taint_effect_NoSchedule_tooltip_1": "正在节点上运行的 Pod 不会被驱逐。",
+  "taint_effect_NoSchedule_tooltip_2": "新 Pod 不会调度到污点节点，除非有匹配的容忍度。",
+  "taint_effect_PreferNoSchedule_tooltip_1": "不容忍污点的 Pod 将被立即驱逐。",
+  "taint_effect_PreferNoSchedule_tooltip_2": "容忍污点但未设置容忍时长的 Pod 将继续运行。",
+  "taint_effect_PreferNoSchedule_tooltip_3": "容忍污点并设置了容忍时长的 Pod 将按指定时间运行，时间结束后被驱逐。",
+  "taint_effect_NoExecute_tooltip_3": "控制平面将尝试避免将不能容忍污点的 Pod 调度到节点上，但无法保证完全避免。"
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1658,13 +1658,13 @@
   resolved "https://registry.npmmirror.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cloudtower/eagle@^0.31.18":
-  version "0.31.18"
-  resolved "https://registry.npmjs.org/@cloudtower/eagle/-/eagle-0.31.18.tgz#3af14e7da0967367cdede79f936f5af8446b4fbe"
-  integrity sha512-vinMOb/6B4xgDsgHp+gBH++YPtgm2XivdQrM6S4sosd5BV5aKWNtHRlOlRlWySTW7lJJNrG3TGc6xY5mPeRzyA==
+"@cloudtower/eagle@^0.31.19":
+  version "0.31.19"
+  resolved "https://registry.npmjs.org/@cloudtower/eagle/-/eagle-0.31.19.tgz#f361101a67d70e0260d1693fadcedf36a8b16547"
+  integrity sha512-lL8nUIlVlNTKDnW2HOa/Pb+jowN2/9bzAEFT63ULwzgDxzi613Qa73S1+fXgQbUvkWFp5bwtfKFE603ZYQmGvA==
   dependencies:
-    "@cloudtower/icons-react" "^0.31.18"
-    "@cloudtower/parrot" "^0.31.18"
+    "@cloudtower/icons-react" "^0.31.19"
+    "@cloudtower/parrot" "^0.31.19"
     "@cloudtower/rc-notification" "^4.6.1"
     "@linaria/core" "^4.2.2"
     "@linaria/react" "^4.3.0"
@@ -1682,15 +1682,15 @@
     redux "^4.2.0"
     timezones.json "^1.6.1"
 
-"@cloudtower/icons-react@^0.31.18":
-  version "0.31.18"
-  resolved "https://registry.npmjs.org/@cloudtower/icons-react/-/icons-react-0.31.18.tgz#0acb96dfa3b40c24c2995965bedff7204b0a3fff"
-  integrity sha512-/fbmCKbvJGFoxD+n1+cwIGN9RdsCF0ANzceoxyrtTl7rjll2tB1GE4WkePoKjcw2H4uLLAsSFUn+PtGsUXFmjg==
+"@cloudtower/icons-react@^0.31.19":
+  version "0.31.19"
+  resolved "https://registry.npmjs.org/@cloudtower/icons-react/-/icons-react-0.31.19.tgz#fe214c5295a60199e2a6081ba3c6164e337d2f25"
+  integrity sha512-P4S4zIM3bxxrzZ9zl6proLVgmvzBi7SVJueqiVsx8kfUr0rbG8ey0M5TBeqWLHt58F1eMP0k019Kk7Q74tVdEg==
 
-"@cloudtower/parrot@^0.31.18":
-  version "0.31.18"
-  resolved "https://registry.npmjs.org/@cloudtower/parrot/-/parrot-0.31.18.tgz#4ca3b005684e978b72ef1386e6f199853e1f55b0"
-  integrity sha512-luCE2alfj0+h98Gws9431EFl8IhNSF4lnDGFFoLHy2PAUdHSreQCP+n8FxTmaLbnsCWozxzUL9Et8/Of7wN4Nw==
+"@cloudtower/parrot@^0.31.19":
+  version "0.31.19"
+  resolved "https://registry.npmjs.org/@cloudtower/parrot/-/parrot-0.31.19.tgz#896f1b355726a7ed29f487406b1571bc1cd92857"
+  integrity sha512-lgYWBzD/5Iv4vikpx+55gtBORPotqZfgnUrrN0ph++9alDjuqNUfWK26U0yMJS0FQL9P3ilFo0W/gxsvbW3cCA==
   dependencies:
     i18next "^23.2.3"
     lodash.merge "^4.6.2"