feat: change some fields of service

webzard-io · Jan 10, 2025 · d80d7b6 · d80d7b6
1 parent 3e71026
commit d80d7b6
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 29 deletions.
diff --git a/packages/refine/src/components/ServiceComponents/index.tsx b/packages/refine/src/components/ServiceComponents/index.tsx
@@ -1,4 +1,4 @@
-import { OverflowTooltip, Typo } from '@cloudtower/eagle';
+import { OverflowTooltip, Typo, Link } from '@cloudtower/eagle';
 import { css, cx } from '@linaria/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,10 +27,19 @@ const BreakLineStyle = css`
     display: block;
   }
 `;
+const LinkStyle = css`
+  &.ant-btn-link.ant-btn {
+    padding: 0;
+    height: 22px;
+  }
+`;
 
 export const ServiceOutClusterAccessComponent: React.FC<
-  Props & { breakLine?: boolean }
-> = ({ service, breakLine = true }) => {
+  Props & {
+    breakLine?: boolean;
+    clusterVip: string;
+  }
+> = ({ service, breakLine = true, clusterVip }) => {
   const { i18n } = useTranslation();
   const spec = service._rawYaml.spec;
   const status = service._rawYaml.status;
@@ -41,8 +50,29 @@ export const ServiceOutClusterAccessComponent: React.FC<
       if (!breakLine) {
         content = spec.ports
           ?.filter(v => !!v)
-          .map(p => `${i18n.t('dovetail.any_node_ip')}:${p.nodePort}`)
-          .join(', ');
+          .map(p => ([
+            <Link
+              href={`//${clusterVip}:${p.nodePort}`}
+              target="_blank"
+              key={p.name}
+              className={cx(LinkStyle, Typo.Label.l4_regular_title)}
+            >
+              {`${clusterVip}:${p.nodePort}`}
+            </Link>
+          ]));
+
+        if (content && content instanceof Array) {
+          const result = [];
+
+          for (let i = 0; i < content.length; i++) {
+            result.push(content[i]);
+            if (i < content.length - 1) {
+              result.push(',');
+            }
+          }
+
+          content = result;
+        }
         break;
       }
 
@@ -52,9 +82,13 @@ export const ServiceOutClusterAccessComponent: React.FC<
           <OverflowTooltip
             key={p.nodePort}
             content={
-              <span className={cx(Typo.Label.l4_regular_title, BreakLineStyle)}>
-                {i18n.t('dovetail.any_node_ip')}:{p.nodePort}
-              </span>
+              <Link
+                href={`//${clusterVip}:${p.nodePort}`}
+                target="_blank"
+                className={cx(Typo.Label.l4_regular_title, BreakLineStyle, LinkStyle)}
+              >
+                {clusterVip}:{p.nodePort}
+              </Link>
             }
             tooltip={`${i18n.t('dovetail.any_node_ip')}:${p.nodePort}`}
           />

diff --git a/packages/refine/src/components/ShowContent/fields.tsx b/packages/refine/src/components/ShowContent/fields.tsx
@@ -361,12 +361,12 @@ export const ServiceInnerClusterAccessField = <
 
 export const ServiceOutClusterAccessField = <
   Model extends ServiceModel,
->(): ShowField<Model> => ({
+>(clusterVip: string): ShowField<Model> => ({
   key: 'innerClusterAccess',
   title: <ServiceOutClusterAccessTitle />,
   path: [],
   renderContent: (_, record) => {
-    return <ServiceOutClusterAccessComponent service={record} breakLine={false} />;
+    return <ServiceOutClusterAccessComponent service={record} breakLine={false} clusterVip={clusterVip} />;
   },
 });
 

diff --git a/packages/refine/src/hooks/useEagleTable/columns.tsx b/packages/refine/src/hooks/useEagleTable/columns.tsx
@@ -417,7 +417,7 @@ export function ServiceOutClusterAccessTitle() {
 }
 export const ServiceOutClusterAccessColumnRenderer = <
   Model extends ServiceModel,
->(): Column<Model> => {
+>(clusterVip: string): Column<Model> => {
   return {
     key: 'outClusterAccess',
     title: <ServiceOutClusterAccessTitle />,
@@ -426,7 +426,7 @@ export const ServiceOutClusterAccessColumnRenderer = <
     width: 160,
     sorter: undefined,
     render(_, record) {
-      return <ServiceOutClusterAccessComponent service={record} />;
+      return <ServiceOutClusterAccessComponent service={record} clusterVip={clusterVip} />;
     },
   };
 };
@@ -584,7 +584,6 @@ export const DataKeysColumnRenderer = <Model extends ResourceModel>(
 
 export const PortMappingColumnRenderer = <Model extends ServiceModel>(
   i18n: I18nType,
-  clusterVip: string
 ): Column<Model> => {
   return {
     key: 'displayPortMapping',
@@ -602,19 +601,7 @@ export const PortMappingColumnRenderer = <Model extends ServiceModel>(
         <OverflowTooltip
           content={
             <span style={{ whiteSpace: 'pre' }}>
-              {record.displayType === 'NodePort' ? (
-                <Link
-                  href={`//${clusterVip}:${v.nodePort}`}
-                  target="_blank"
-                  className={css`
-                    padding: 0 !important;
-                  `}
-                >
-                  {v.servicePort}
-                </Link>
-              ) : (
-                v.servicePort
-              )}{' '}
+              {v.servicePort}{' '}
               &gt; {v.targetPort}/{v.protocol}
             </span>
           }

diff --git a/packages/refine/src/pages/services/index.tsx b/packages/refine/src/pages/services/index.tsx
@@ -31,7 +31,7 @@ export const ServicesConfig = (i18n: i18n): ResourceConfig<ServiceModel> => ({
   columns: () => [
     ServiceTypeColumnRenderer(i18n),
     ServiceInClusterAccessColumnRenderer(),
-    ServiceOutClusterAccessColumnRenderer(),
+    ServiceOutClusterAccessColumnRenderer('192.168.1.1'),
     {
       key: 'dnsRecord',
       title: i18n.t('dovetail.dns_record'),
@@ -48,7 +48,7 @@ export const ServicesConfig = (i18n: i18n): ResourceConfig<ServiceModel> => ({
         return <TextTags value={value} />;
       },
     },
-    PortMappingColumnRenderer(i18n, '192.168.1.1'),
+    PortMappingColumnRenderer(i18n),
     AgeColumnRenderer(i18n),
   ],
   showConfig: () => ({
@@ -66,7 +66,7 @@ export const ServicesConfig = (i18n: i18n): ResourceConfig<ServiceModel> => ({
                 path: ['dnsRecord'],
               },
               ServiceInnerClusterAccessField(),
-              ServiceOutClusterAccessField(),
+              ServiceOutClusterAccessField('192.168.1.1'),
             ],
           }),
           PodSelectorGroup(i18n),