feature: KumaPort component, for displaying a port consistently

.eslintrc.cjs

@@ -145,6 +145,7 @@ const INLINE_NON_VOID_ELEMENTS = [
             'K[A-Z].*',
             //
             'X[A-Z].*',
+            'Kuma[A-Z].*',
             // @kong-ui-public/i18n
             'I18nT',
             // Application

src/app/kuma/components/kuma-port/KumaPort.vue

@@ -0,0 +1,22 @@
+<template>
+  <XBadge
+    appearance="info"
+  >
+    {{ props.port.port }}{{ props.port.targetPort ? `:${props.port.targetPort}` : '' }}{{ protocol ? `/${protocol}` : '' }}{{ props.port.name && props.port.name !== String(props.port.port) ? ` (${props.port.name})` : '' }}
+  </XBadge>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+const props = defineProps<{
+  port: {
+    port: number
+    targetPort?: number | string
+    name?: string
+    appProtocol?: string
+    protocol?: string
+  }
+}>()
+const protocol = computed(() => {
+  return typeof props.port.appProtocol !== 'undefined' ? props.port.appProtocol : typeof props.port.protocol !== 'undefined' ? props.port.protocol : ''
+})
+</script>

src/app/kuma/components/kuma-port/README.md

@@ -0,0 +1,89 @@
+# KumaPort
+
+Reusable component for displaying ports.
+
+You can mostly just pass an entire object from the API for this to "do the
+right thing".
+
+If you specifically want to **not** show a certain property such as
+`targetPort` use a spread syntax and overwrite the thing you don't want to show
+with `undefined` (see first example below).
+
+If the `port` is the same as the `name`, then the `(name)` will not show.
+
+<Story height="320">
+  <div>
+    <KumaPort
+      :port="{
+        ...{
+          name: 'nginx',
+          port: 80,
+          targetPort: 8080,
+          appProtocol: 'http',
+          protocol: 'tcp',
+        },
+        targetPort: undefined
+      }"
+    />
+  </div>
+  <div>
+    <KumaPort
+      :port="{
+        ...{
+          name: '80',
+          port: 80,
+          targetPort: 8080,
+          appProtocol: 'http',
+          protocol: 'tcp',
+        },
+      }"
+    />
+  </div>
+  <div>
+    <KumaPort
+      :port="{
+        name: 'nginx',
+        port: 80,
+        targetPort: 8080,
+        appProtocol: 'http',
+        protocol: 'tcp',
+      }"
+    />
+  </div>
+  <div>
+    <KumaPort
+      :port="{
+        port: 80
+      }"
+    />
+  </div>
+  <div>
+    <KumaPort
+      :port="{
+        port: 80,
+        targetPort: 8080
+      }"
+    />
+  </div>
+  <div>
+    <KumaPort
+      :port="{
+        port: 80,
+        targetPort: 8080,
+        protocol: 'tcp'
+      }"
+    />
+  </div>
+  <div>
+    <KumaPort
+      :port="{
+        port: 80,
+        targetPort: 8080,
+        appProtocol: 'http',
+        protocol: 'tcp',
+      }"
+    />
+  </div>
+</Story>
+
+

src/app/kuma/index.ts

@@ -1,5 +1,6 @@
 import locales from './locales/en-us/index.yaml'
 import type { EnvArgs } from '@/app/application/services/env/Env'
+import KumaPort from '@/app/kuma/components/kuma-port/KumaPort.vue'
 import { ApiError } from '@/app/kuma/services/kuma-api/ApiError'
 import KumaApi from '@/app/kuma/services/kuma-api/KumaApi'
 import { RestClient } from '@/app/kuma/services/kuma-api/RestClient'
@@ -8,6 +9,11 @@ import type { ServiceDefinition } from '@/services/utils'
 
 type Token = ReturnType<typeof token>
 
+declare module 'vue' {
+  export interface GlobalComponents {
+    KumaPort: typeof KumaPort
+  }
+}
 export const TOKENS = {
   httpClient: token<RestClient>('httpClient'),
   api: token<KumaApi>('KumaApi'),
@@ -68,6 +74,18 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
         app.notFoundView,
       ],
     }],
+
+    [token('kuma.components'), {
+      service: () => {
+        return [
+          ['KumaPort', KumaPort],
+        ]
+      },
+      labels: [
+        app.components,
+      ],
+    }],
+
   ]
 }
 export const [

src/app/services/views/MeshExternalServiceDetailView.vue

@@ -60,13 +60,9 @@
               <template
                 #body
               >
-                <KBadge
-                  v-for="connection in [data.spec.match]"
-                  :key="connection.port"
-                  appearance="info"
-                >
-                  {{ connection.port }}/{{ connection.protocol }}
-                </KBadge>
+                <KumaPort
+                  :port="data.spec.match"
+                />
               </template>
             </DefinitionCard>
             <DefinitionCard

src/app/services/views/MeshExternalServiceListView.vue

@@ -129,13 +129,9 @@
                       <template
                         v-if="item.spec.match"
                       >
-                        <KBadge
-                          v-for="connection in [item.spec.match]"
-                          :key="connection.port"
-                          appearance="info"
-                        >
-                          {{ connection.port }}/{{ connection.protocol }}
-                        </KBadge>
+                        <KumaPort
+                          :port="item.spec.match"
+                        />
                       </template>
                     </template>
 

src/app/services/views/MeshExternalServiceSummaryView.vue

@@ -91,13 +91,9 @@
                 <template
                   #body
                 >
-                  <KBadge
-                    v-for="connection in [item.spec.match]"
-                    :key="connection.port"
-                    appearance="info"
-                  >
-                    {{ connection.port }}/{{ connection.protocol }}
-                  </KBadge>
+                  <KumaPort
+                    :port="item.spec.match"
+                  />
                 </template>
               </DefinitionCard>
               <DefinitionCard

src/app/services/views/MeshMultiZoneServiceDetailView.vue

@@ -29,13 +29,14 @@
                 #body
               >
                 <KTruncate>
-                  <KBadge
+                  <KumaPort
                     v-for="connection in props.data.spec.ports"
                     :key="connection.port"
-                    appearance="info"
-                  >
-                    {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }}
-                  </KBadge>
+                    :port="{
+                      ...connection,
+                      targetPort: undefined,
+                    }"
+                  />
                 </KTruncate>
               </template>
             </DefinitionCard>

src/app/services/views/MeshMultiZoneServiceListView.vue

@@ -73,13 +73,14 @@
                   #ports="{ row: item }"
                 >
                   <KTruncate>
-                    <KBadge
+                    <KumaPort
                       v-for="connection in item.spec.ports"
                       :key="connection.port"
-                      appearance="info"
-                    >
-                      {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }}
-                    </KBadge>
+                      :port="{
+                        ...connection,
+                        targetPort: undefined,
+                      }"
+                    />
                   </KTruncate>
                 </template>
                 <template

src/app/services/views/MeshMultiZoneServiceSummaryView.vue

@@ -55,13 +55,14 @@
                   #body
                 >
                   <KTruncate>
-                    <KBadge
+                    <KumaPort
                       v-for="connection in item.spec.ports"
                       :key="connection.port"
-                      appearance="info"
-                    >
-                      {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }}
-                    </KBadge>
+                      :port="{
+                        ...connection,
+                        targetPort: undefined,
+                      }"
+                    />
                   </KTruncate>
                 </template>
               </DefinitionCard>

src/app/services/views/MeshServiceDetailView.vue

@@ -77,13 +77,14 @@
                 #body
               >
                 <KTruncate>
-                  <KBadge
-                    v-for="connection in data.spec.ports"
+                  <KumaPort
+                    v-for="connection in props.data.spec.ports"
                     :key="connection.port"
-                    appearance="info"
-                  >
-                    {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }}
-                  </KBadge>
+                    :port="{
+                      ...connection,
+                      targetPort: undefined,
+                    }"
+                  />
                 </KTruncate>
               </template>
             </DefinitionCard>

src/app/services/views/MeshServiceListView.vue

@@ -114,13 +114,14 @@
                   #ports="{ row: item }"
                 >
                   <KTruncate>
-                    <KBadge
+                    <KumaPort
                       v-for="connection in item.spec.ports"
                       :key="connection.port"
-                      appearance="info"
-                    >
-                      {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }}
-                    </KBadge>
+                      :port="{
+                        ...connection,
+                        targetPort: undefined,
+                      }"
+                    />
                   </KTruncate>
                 </template>
                 <template #actions="{ row: item }">

src/app/services/views/MeshServiceSummaryView.vue

@@ -126,13 +126,14 @@
                   #body
                 >
                   <KTruncate>
-                    <KBadge
+                    <KumaPort
                       v-for="connection in item.spec.ports"
                       :key="connection.port"
-                      appearance="info"
-                    >
-                      {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }}
-                    </KBadge>
+                      :port="{
+                        ...connection,
+                        targetPort: undefined,
+                      }"
+                    />
                   </KTruncate>
                 </template>
               </DefinitionCard>

src/app/x/components/x-badge/README.md

@@ -0,0 +1,37 @@
+# Xbadge
+
+A KBadge that doesn't automatically truncate.
+
+The vast majority of the time we don't want these to truncate. We either use
+them for 'small thing' like ports, or we use them with tags/labels which we
+generally put within a `KTruncate` (and when we don't we don't want them
+truncated!)
+
+XBadge doesn't truncate by default, but has all the same properties as a
+KBadge, so you can set it to truncate if you need to.
+
+<Story height="320">
+  <div>
+    <XBadge>
+      Thing
+    </XBadge>
+
+  </div>
+  <div>
+    <XBadge>
+      This is a XBadge that doesn't automatically truncate
+    </XBadge>
+  </div>
+  <div>
+    <KBadge>
+      This is a KBadge that does automatically truncate
+    </KBadge>
+  </div>
+  <div>
+    <XBadge
+      max-width="200px"
+    >
+      This is a 200px XBadge that does automatically truncate
+    </XBadge>
+  </div>
+</Story>

src/app/x/components/x-badge/XBadge.vue

@@ -0,0 +1,16 @@
+<template>
+  <KBadge
+    :max-width="props.maxWidth"
+  >
+    <slot name="default" />
+  </KBadge>
+</template>
+
+<script lang="ts" setup>
+import { KBadge } from '@kong/kongponents'
+const props = withDefaults(defineProps<{
+  maxWidth?: string
+}>(), {
+  maxWidth: 'auto',
+})
+</script>