From e93392021168b1a418471241fd169c5e17f9c50d Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 18 Sep 2024 16:45:13 +0100 Subject: [PATCH] feature: KumaPort component, for displaying a port consistently Signed-off-by: John Cowen --- .eslintrc.cjs | 1 + .../kuma/components/kuma-port/KumaPort.vue | 22 +++++ src/app/kuma/components/kuma-port/README.md | 89 +++++++++++++++++++ src/app/kuma/index.ts | 18 ++++ .../views/MeshExternalServiceDetailView.vue | 10 +-- .../views/MeshExternalServiceListView.vue | 10 +-- .../views/MeshExternalServiceSummaryView.vue | 10 +-- .../views/MeshMultiZoneServiceDetailView.vue | 11 +-- .../views/MeshMultiZoneServiceListView.vue | 11 +-- .../views/MeshMultiZoneServiceSummaryView.vue | 11 +-- .../services/views/MeshServiceDetailView.vue | 13 +-- .../services/views/MeshServiceListView.vue | 11 +-- .../services/views/MeshServiceSummaryView.vue | 11 +-- src/app/x/components/x-badge/README.md | 37 ++++++++ src/app/x/components/x-badge/XBadge.vue | 16 ++++ src/app/x/index.ts | 5 +- 16 files changed, 233 insertions(+), 53 deletions(-) create mode 100644 src/app/kuma/components/kuma-port/KumaPort.vue create mode 100644 src/app/kuma/components/kuma-port/README.md create mode 100644 src/app/x/components/x-badge/README.md create mode 100644 src/app/x/components/x-badge/XBadge.vue diff --git a/.eslintrc.cjs b/.eslintrc.cjs index f1632be22..99059e2de 100644 --- a/.eslintrc.cjs +++ b/.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 diff --git a/src/app/kuma/components/kuma-port/KumaPort.vue b/src/app/kuma/components/kuma-port/KumaPort.vue new file mode 100644 index 000000000..0bf52c164 --- /dev/null +++ b/src/app/kuma/components/kuma-port/KumaPort.vue @@ -0,0 +1,22 @@ + + diff --git a/src/app/kuma/components/kuma-port/README.md b/src/app/kuma/components/kuma-port/README.md new file mode 100644 index 000000000..93bc8cbcb --- /dev/null +++ b/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. + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + diff --git a/src/app/kuma/index.ts b/src/app/kuma/index.ts index 5a6aaf26b..90c294af4 100644 --- a/src/app/kuma/index.ts +++ b/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 +declare module 'vue' { + export interface GlobalComponents { + KumaPort: typeof KumaPort + } +} export const TOKENS = { httpClient: token('httpClient'), api: token('KumaApi'), @@ -68,6 +74,18 @@ export const services = (app: Record): ServiceDefinition[] => { app.notFoundView, ], }], + + [token('kuma.components'), { + service: () => { + return [ + ['KumaPort', KumaPort], + ] + }, + labels: [ + app.components, + ], + }], + ] } export const [ diff --git a/src/app/services/views/MeshExternalServiceDetailView.vue b/src/app/services/views/MeshExternalServiceDetailView.vue index 137b2a43d..2c1d3406c 100644 --- a/src/app/services/views/MeshExternalServiceDetailView.vue +++ b/src/app/services/views/MeshExternalServiceDetailView.vue @@ -60,13 +60,9 @@ - - {{ connection.port }}/{{ connection.protocol }} - + diff --git a/src/app/services/views/MeshExternalServiceSummaryView.vue b/src/app/services/views/MeshExternalServiceSummaryView.vue index f329b4e06..2fee361b8 100644 --- a/src/app/services/views/MeshExternalServiceSummaryView.vue +++ b/src/app/services/views/MeshExternalServiceSummaryView.vue @@ -91,13 +91,9 @@ - - {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }} - + :port="{ + ...connection, + targetPort: undefined, + }" + /> diff --git a/src/app/services/views/MeshMultiZoneServiceListView.vue b/src/app/services/views/MeshMultiZoneServiceListView.vue index 838d4fee8..88388e453 100644 --- a/src/app/services/views/MeshMultiZoneServiceListView.vue +++ b/src/app/services/views/MeshMultiZoneServiceListView.vue @@ -73,13 +73,14 @@ #ports="{ row: item }" > - - {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }} - + :port="{ + ...connection, + targetPort: undefined, + }" + /> diff --git a/src/app/services/views/MeshServiceDetailView.vue b/src/app/services/views/MeshServiceDetailView.vue index 7f06f110d..d49c8523f 100644 --- a/src/app/services/views/MeshServiceDetailView.vue +++ b/src/app/services/views/MeshServiceDetailView.vue @@ -77,13 +77,14 @@ #body > - - {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }} - + :port="{ + ...connection, + targetPort: undefined, + }" + /> diff --git a/src/app/services/views/MeshServiceListView.vue b/src/app/services/views/MeshServiceListView.vue index 5e52a19bf..e2a7b4202 100644 --- a/src/app/services/views/MeshServiceListView.vue +++ b/src/app/services/views/MeshServiceListView.vue @@ -114,13 +114,14 @@ #ports="{ row: item }" > - - {{ connection.port }}/{{ connection.appProtocol }}{{ connection.name && connection.name !== String(connection.port) ? ` (${connection.name})` : '' }} - + :port="{ + ...connection, + targetPort: undefined, + }" + /> diff --git a/src/app/x/components/x-badge/README.md b/src/app/x/components/x-badge/README.md new file mode 100644 index 000000000..a383fdd34 --- /dev/null +++ b/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. + + +
+ + Thing + + +
+
+ + This is a XBadge that doesn't automatically truncate + +
+
+ + This is a KBadge that does automatically truncate + +
+
+ + This is a 200px XBadge that does automatically truncate + +
+ diff --git a/src/app/x/components/x-badge/XBadge.vue b/src/app/x/components/x-badge/XBadge.vue new file mode 100644 index 000000000..2c5ac5347 --- /dev/null +++ b/src/app/x/components/x-badge/XBadge.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/app/x/index.ts b/src/app/x/index.ts index 9c1ac3028..0f97ef090 100644 --- a/src/app/x/index.ts +++ b/src/app/x/index.ts @@ -1,7 +1,8 @@ -import Kongponents, { KCard } from '@kong/kongponents' +import Kongponents, { KCard, KBadge } from '@kong/kongponents' import XAction from './components/x-action/XAction.vue' import XActionGroup from './components/x-action-group/XActionGroup.vue' +import XBadge from './components/x-badge/XBadge.vue' import XBreadcrumbs from './components/x-breadcrumbs/XBreadcrumbs.vue' import XCopyButton from './components/x-copy-button/XCopyButton.vue' import XDisclosure from './components/x-disclosure/XDisclosure.vue' @@ -26,6 +27,7 @@ declare module 'vue' { XAction: typeof XAction XActionGroup: typeof XActionGroup XCard: typeof KCard + XBadge: typeof KBadge XCopyButton: typeof XCopyButton XBreadcrumbs: typeof XBreadcrumbs XPrompt: typeof XPrompt @@ -59,6 +61,7 @@ export const services = (app: Record): ServiceDefinition[] => { return [ ['XAction', XAction], ['XActionGroup', XActionGroup], + ['XBadge', XBadge], ['XBreadcrumbs', XBreadcrumbs], ['XCard', KCard], ['XCopyButton', XCopyButton],