fix: Fix loadbalancer info of service, ingress and gateway

Signed-off-by: leoliu <leoliu@yunify.com>
kubesphere · Aug 17, 2020 · 5b4d966 · 5b4d966
1 parent 999b20e
commit 5b4d966
Show file tree

Hide file tree

Showing 19 changed files with 118 additions and 129 deletions.
diff --git a/src/components/Forms/Route/RouteRules/RuleForm/index.jsx b/src/components/Forms/Route/RouteRules/RuleForm/index.jsx
@@ -108,8 +108,8 @@ export default class RuleForm extends React.Component {
     const { gateway } = this.props
     const service = get(data, 'http.paths[0].backend.serviceName')
     const _host = gateway.isHostName
-      ? gateway.loadBalancerIngress
-      : `${service}.${namespace}.${gateway.loadBalancerIngress}.nip.io`
+      ? gateway.defaultIngress
+      : `${service}.${namespace}.${gateway.defaultIngress}.nip.io`
     const namespace = gateway.namespace
 
     return host === _host ? 'auto' : 'specify'
@@ -164,8 +164,8 @@ export default class RuleForm extends React.Component {
             ...data,
             protocol: 'http',
             host: gateway.isHostName
-              ? gateway.loadBalancerIngress
-              : `${service}.${namespace}.${gateway.loadBalancerIngress}.nip.io`,
+              ? gateway.defaultIngress
+              : `${service}.${namespace}.${gateway.defaultIngress}.nip.io`,
           })
         } else {
           onSave(data)

diff --git a/src/core/containers/Base/Detail/BaseInfo/Attributes/index.scss b/src/core/containers/Base/Detail/BaseInfo/Attributes/index.scss
@@ -32,8 +32,8 @@
       display: block;
       margin-left: 111px;
       color: $text-color;
-
       @include break-all;
+      white-space: pre-wrap;
     }
   }
 }
diff --git a/src/pages/clusters/containers/Workload/Routes/index.jsx b/src/pages/clusters/containers/Workload/Routes/index.jsx
@@ -132,13 +132,7 @@ export default class Routers extends React.Component {
         dataIndex: 'loadBalancerIngress',
         isHideable: true,
         width: '22%',
-        render: loadBalancerIngress => (
-          <div>
-            {loadBalancerIngress.map((item, index) => (
-              <p key={index}>{item.ip || item.hostname}</p>
-            ))}
-          </div>
-        ),
+        render: loadBalancerIngress => loadBalancerIngress.join('; '),
       },
       {
         title: t('Project'),

diff --git a/src/pages/clusters/containers/Workload/Services/index.jsx b/src/pages/clusters/containers/Workload/Services/index.jsx
@@ -23,6 +23,7 @@ import { Avatar, Text } from 'components/Base'
 import Banner from 'components/Cards/Banner'
 import { withClusterList, ListPage } from 'components/HOCs/withList'
 import ResourceTable from 'clusters/components/ResourceTable'
+import ServiceAccess from 'projects/components/ServiceAccess'
 
 import { getLocalTime, getDisplayName } from 'utils'
 import { ICON_TYPES, SERVICE_TYPES } from 'utils/constants'
@@ -162,30 +163,7 @@ export default class Services extends React.Component {
         dataIndex: 'specType',
         isHideable: true,
         width: '20%',
-        render: (type, record) => {
-          if (type === 'ClusterIP') {
-            return '-'
-          }
-
-          if (type === 'NodePort') {
-            return (
-              <Text
-                description={type}
-                title={record.ports
-                  .filter(port => port.nodePort)
-                  .map(port => `${port.port}:${port.nodePort}/${port.protocol}`)
-                  .join(';')}
-              />
-            )
-          }
-
-          return (
-            <Text
-              description={type}
-              title={record.loadBalancerIngress || record.externalName}
-            />
-          )
-        },
+        render: (_, record) => <ServiceAccess data={record} />,
       },
       {
         title: t('Created Time'),

diff --git a/src/pages/fedprojects/containers/AdvancedSettings/InternetAccess/Access/index.jsx b/src/pages/fedprojects/containers/AdvancedSettings/InternetAccess/Access/index.jsx
@@ -127,7 +127,7 @@ class InternetAccess extends React.Component {
     let ip = '-'
 
     if (isEmpty(gateway.externalIPs)) {
-      ip = gateway.loadBalancerIngress
+      ip = gateway.loadBalancerIngresses.join(', ')
     } else {
       ip = gateway.externalIPs.join(', ')
     }
@@ -199,7 +199,7 @@ class InternetAccess extends React.Component {
             {gateway.type === 'NodePort' ? (
               <>
                 <Text
-                  title={gateway.loadBalancerIngress || '-'}
+                  title={gateway.loadBalancerIngress.join('; ') || '-'}
                   description={t('Gateway Address')}
                 />
                 <Text

diff --git a/src/pages/fedprojects/containers/Applications/Detail/AppIngresses/Ingresses/index.jsx b/src/pages/fedprojects/containers/Applications/Detail/AppIngresses/Ingresses/index.jsx
@@ -68,16 +68,16 @@ export default class Components extends Component {
       return '-'
     }
 
-    return gateway.ports.map(port => `${port.name}:${port.nodePort}`).join(', ')
+    return gateway.ports.map(port => `${port.name}:${port.nodePort}`).join('; ')
   }
 
   getExternalIP(gateway) {
     let ip = '-'
 
     if (isEmpty(gateway.externalIPs)) {
-      ip = gateway.loadBalancerIngress
+      ip = gateway.loadBalancerIngress.join('; ')
     } else {
-      ip = gateway.externalIPs.join(', ')
+      ip = gateway.externalIPs.join('; ')
     }
 
     return ip || '-'

diff --git a/src/pages/fedprojects/containers/Routes/Detail/ResourceStatus/Item/index.jsx b/src/pages/fedprojects/containers/Routes/Detail/ResourceStatus/Item/index.jsx
@@ -42,16 +42,16 @@ export default class Item extends React.Component {
       return '-'
     }
 
-    return gateway.ports.map(port => `${port.name}:${port.nodePort}`).join(', ')
+    return gateway.ports.map(port => `${port.name}:${port.nodePort}`).join('; ')
   }
 
   getExternalIP(gateway) {
     let ip = '-'
 
     if (isEmpty(gateway.externalIPs)) {
-      ip = gateway.loadBalancerIngress
+      ip = gateway.loadBalancerIngress.join('; ')
     } else {
-      ip = gateway.externalIPs.join(', ')
+      ip = gateway.externalIPs.join('; ')
     }
 
     return ip || '-'

diff --git a/src/pages/fedprojects/containers/Services/Detail/Ports/index.jsx b/src/pages/fedprojects/containers/Services/Detail/Ports/index.jsx
@@ -69,11 +69,9 @@ export default class Ports extends Component {
                     </Tooltip>
                   </div>
                 </div>
-                {gateway.loadBalancerIngress && (
+                {gateway.defaultIngress && (
                   <a
-                    href={`http://${gateway.loadBalancerIngress}:${
-                      port.nodePort
-                    }`}
+                    href={`http://${gateway.defaultIngress}:${port.nodePort}`}
                     target="_blank"
                   >
                     <Button className={styles.access} noShadow>

diff --git a/src/pages/projects/components/Cards/Services/Item.jsx b/src/pages/projects/components/Cards/Services/Item.jsx
@@ -54,7 +54,9 @@ export default class ServiceItem extends React.Component {
 
     const { type, clusterIP, loadBalancerIngress, externalName } = detail
     const content =
-      type === 'Virtual IP' ? clusterIP : loadBalancerIngress || externalName
+      type === 'Virtual IP'
+        ? clusterIP
+        : loadBalancerIngress.join(';') || externalName
 
     return (
       <div className={classnames(styles.item, className)}>

diff --git a/src/pages/projects/components/Modals/CreateApp/Routes/RuleForm/index.jsx b/src/pages/projects/components/Modals/CreateApp/Routes/RuleForm/index.jsx
@@ -87,7 +87,7 @@ export default class RuleForm extends React.Component {
 
     const { gateway } = this.props
     const service = get(data, 'http.paths[0].backend.serviceName')
-    const ip = gateway.loadBalancerIngress
+    const ip = gateway.defaultIngress
     const namespace = gateway.namespace
 
     return host === `${service}.${namespace}.${ip}.nip.io` ? 'auto' : 'specify'
@@ -129,8 +129,8 @@ export default class RuleForm extends React.Component {
         ...data,
         protocol: 'http',
         host: gateway.isHostName
-          ? gateway.loadBalancerIngress
-          : `${service}.${namespace}.${gateway.loadBalancerIngress}.nip.io`,
+          ? gateway.defaultIngress
+          : `${service}.${namespace}.${gateway.defaultIngress}.nip.io`,
       })
     } else {
       onOk(data)

diff --git a/src/pages/projects/components/Modals/CreateApp/index.jsx b/src/pages/projects/components/Modals/CreateApp/index.jsx
@@ -153,8 +153,8 @@ export default class ServiceDeployAppModal extends React.Component {
         formData.ingress,
         'spec.rules[0].host',
         gateway.isHostName
-          ? gateway.loadBalancerIngress
-          : `productpage.${namespace}.${gateway.loadBalancerIngress}.nip.io`
+          ? gateway.defaultIngress
+          : `productpage.${namespace}.${gateway.defaultIngress}.nip.io`
       )
 
       this.setState({ formData })

diff --git a/src/pages/projects/components/ServiceAccess/index.jsx b/src/pages/projects/components/ServiceAccess/index.jsx
@@ -0,0 +1,50 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * KubeSphere Console is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+
+import { Text } from 'components/Base'
+
+export default function ServiceAccess({ data }) {
+  if (data.specType === 'ClusterIP') {
+    return '-'
+  }
+
+  if (data.specType === 'NodePort') {
+    return (
+      <Text
+        description={data.specType}
+        title={data.ports
+          .filter(port => port.nodePort)
+          .map(port => `${port.port}:${port.nodePort}/${port.protocol}`)
+          .join(';')}
+      />
+    )
+  }
+
+  if (data.specType === 'LoadBalancer') {
+    return (
+      <Text
+        description={data.specType}
+        title={data.loadBalancerIngress.join('; ')}
+      />
+    )
+  }
+
+  return <Text description={data.specType} title={data.externalName} />
+}
diff --git a/src/pages/projects/containers/AdvancedSettings/InternetAccess/index.jsx b/src/pages/projects/containers/AdvancedSettings/InternetAccess/index.jsx
@@ -119,16 +119,16 @@ class InternetAccess extends React.Component {
       return '-'
     }
 
-    return gateway.ports.map(port => `${port.name}:${port.nodePort}`).join(', ')
+    return gateway.ports.map(port => `${port.name}:${port.nodePort}`).join('; ')
   }
 
   getExternalIP(gateway) {
     let ip = '-'
 
     if (isEmpty(gateway.externalIPs)) {
-      ip = gateway.loadBalancerIngress
+      ip = gateway.loadBalancerIngress.join('; ')
     } else {
-      ip = gateway.externalIPs.join(', ')
+      ip = gateway.externalIPs.join('; ')
     }
 
     return ip || '-'
@@ -196,7 +196,7 @@ class InternetAccess extends React.Component {
           {gateway.type === 'NodePort' ? (
             <>
               <div className={styles.item}>
-                <div>{gateway.loadBalancerIngress || '-'}</div>
+                <div>{gateway.loadBalancerIngress.join('; ') || '-'}</div>
                 <p>{t('Gateway Address')}</p>
               </div>
               <div className={styles.item}>

diff --git a/src/pages/projects/containers/Routes/Detail/index.jsx b/src/pages/projects/containers/Routes/Detail/index.jsx
@@ -139,15 +139,6 @@ export default class RouteDetail extends React.Component {
       return
     }
 
-    const { loadBalancerIngress = [] } = detail
-
-    let ips = []
-    loadBalancerIngress.forEach(item => {
-      item.ip && ips.push(item.ip)
-      item.hostname && ips.push(item.hostname)
-    })
-    ips = ips.map((ip, index) => <p key={index}>{ip}</p>)
-
     return [
       {
         name: t('Cluster'),
@@ -163,7 +154,7 @@ export default class RouteDetail extends React.Component {
       },
       {
         name: t('Gateway Address'),
-        value: ips,
+        value: detail.loadBalancerIngress.join('\r\n'),
       },
       {
         name: t('Created Time'),

diff --git a/src/pages/projects/containers/Routes/index.jsx b/src/pages/projects/containers/Routes/index.jsx
@@ -147,13 +147,7 @@ export default class Routers extends React.Component {
         dataIndex: 'loadBalancerIngress',
         isHideable: true,
         width: '22%',
-        render: loadBalancerIngress => (
-          <div>
-            {loadBalancerIngress.map((item, index) => (
-              <p key={index}>{item.ip || item.hostname}</p>
-            ))}
-          </div>
-        ),
+        render: loadBalancerIngress => loadBalancerIngress.join('; '),
       },
       {
         title: t('Application'),

diff --git a/src/pages/projects/containers/Services/Detail/Ports/index.jsx b/src/pages/projects/containers/Services/Detail/Ports/index.jsx
@@ -69,11 +69,9 @@ export default class Ports extends Component {
                     </Tooltip>
                   </div>
                 </div>
-                {gateway.loadBalancerIngress && (
+                {gateway.defaultIngress && (
                   <a
-                    href={`http://${gateway.loadBalancerIngress}:${
-                      port.nodePort
-                    }`}
+                    href={`http://${gateway.defaultIngress}:${port.nodePort}`}
                     target="_blank"
                   >
                     <Button className={styles.access} noShadow>

diff --git a/src/pages/projects/containers/Services/Detail/index.jsx b/src/pages/projects/containers/Services/Detail/index.jsx
@@ -146,9 +146,9 @@ export default class ServiceDetail extends React.Component {
     if (detail.type === 'ExternalName') {
       externalIP = detail.externalName
     } else if (detail.specType === 'LoadBalancer') {
-      externalIP = detail.loadBalancerIngress
+      externalIP = detail.loadBalancerIngress.join('\r\n')
     } else if (detail.externalIPs) {
-      externalIP = detail.externalIPs.join(', ')
+      externalIP = detail.externalIPs.join('\r\n')
     }
 
     const serviceType = get(detail, 'annotations["kubesphere.io/serviceType"]')

diff --git a/src/pages/projects/containers/Services/index.jsx b/src/pages/projects/containers/Services/index.jsx
@@ -22,6 +22,7 @@ import { Avatar, Text } from 'components/Base'
 import Banner from 'components/Cards/Banner'
 import { withProjectList, ListPage } from 'components/HOCs/withList'
 import Table from 'components/Tables/List'
+import ServiceAccess from 'projects/components/ServiceAccess'
 
 import { getLocalTime, getDisplayName } from 'utils'
 import { ICON_TYPES, SERVICE_TYPES } from 'utils/constants'
@@ -173,30 +174,7 @@ export default class Services extends React.Component {
         dataIndex: 'specType',
         isHideable: true,
         width: '20%',
-        render: (type, record) => {
-          if (type === 'ClusterIP') {
-            return '-'
-          }
-
-          if (type === 'NodePort') {
-            return (
-              <Text
-                description={type}
-                title={record.ports
-                  .filter(port => port.nodePort)
-                  .map(port => `${port.port}:${port.nodePort}/${port.protocol}`)
-                  .join(';')}
-              />
-            )
-          }
-
-          return (
-            <Text
-              description={type}
-              title={record.loadBalancerIngress || record.externalName}
-            />
-          )
-        },
+        render: (_, record) => <ServiceAccess data={record} />,
       },
       {
         title: t('Created Time'),