-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: KumaPort component, for displaying a port consistently (#2970)
Adds a KumaPort component in order to display ports consistently. Globally added along with a `Kuma*` namespace as we are likely to use these sorts of thing all over the place (we'll probably end up with others such as `KumaTargetRef`) Signed-off-by: John Cowen <john.cowen@konghq.com>
- Loading branch information
Showing
16 changed files
with
233 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Oops, something went wrong.