Skip to content

Commit

Permalink
refactor(dataplane-summary-view): remove tab navigation
Browse files Browse the repository at this point in the history 
Signed-off-by: schogges <[email protected]>
  • Loading branch information
@schogges
schogges committed Dec 6, 2024
1 parent 6a814ae commit c271927
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 137 deletions.
9 changes: 0 additions & 9 deletions packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,3 @@ Feature: Dataplane summary
"""
When I visit the "/meshes/default/data-planes/test-data-plane-1?page=2&size=50" URL
Then the "$summary" element exists

Scenario: Summary URL offers tabs
When I visit the "/meshes/default/data-planes/test-data-plane-1?page=2&size=50" URL
Then the URL contains "/summary-overview"
And the "[data-testid='data-plane-summary-overview-view']" element exists
Then I click the "[data-testid='data-plane-summary-config-view-tab'] a" element
Then the URL contains "/summary-config"
And the "[data-testid='data-plane-summary-config-view']" element exists
And the "[data-testid='k-code-block']" element exists
1 change: 1 addition & 0 deletions packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ data-planes:
delegated-gateway-data-plane-summary-overview-view: Overview
delegated-gateway-data-plane-summary-config-view: YAML
gateway: 'Gateway'
config: YAML
inbounds: 'Inbounds'
inbound_name: '{service}'
port: ':{port}'
Expand Down
19 changes: 0 additions & 19 deletions packages/kuma-gui/src/app/data-planes/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,26 +66,7 @@ export const routes = () => {
props: () => ({
routeName: `${fullPrefix}data-plane-summary-view`,
}),
redirect: { name: `${fullPrefix}data-plane-summary-overview-view` },
component: () => import('@/app/data-planes/views/DataPlaneSummaryView.vue'),
children: [
{
path: 'summary-overview',
name: `${fullPrefix}data-plane-summary-overview-view`,
props: () => ({
routeName: `${fullPrefix}data-plane-summary-overview-view`,
}),
component: () => import('@/app/data-planes/views/DataPlaneSummaryOverviewView.vue'),
},
{
path: 'summary-config',
name: `${fullPrefix}data-plane-summary-config-view`,
props: () => ({
routeName: `${fullPrefix}data-plane-summary-config-view`,
}),
component: () => import('@/app/data-planes/views/DataPlaneSummaryConfigView.vue'),
},
],
},
]
}
Expand Down
83 changes: 0 additions & 83 deletions packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryOverviewView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,89 +161,6 @@
</div>
</div>
</div>

<DataCollection
v-if="props.data.dataplaneType === 'standard'"
:items="props.data.dataplane.networking.inbounds"
v-slot="{ items : inbounds }"
>
<div>
<h3>{{ t('data-planes.routes.item.inbounds') }}</h3>

<div
class="mt-4 stack"
>
<div
v-for="(inbound, index) in inbounds"
:key="index"
class="inbound"
>
<h4>
<TextWithCopyButton
:text="inbound.tags['kuma.io/service']"
>
{{ t('data-planes.routes.item.inbound_name', { service: inbound.tags['kuma.io/service'] }) }}
</TextWithCopyButton>
</h4>

<div
class="mt-2 stack-with-borders"
>
<DefinitionCard
layout="horizontal"
>
<template #title>
{{ t('http.api.property.state') }}
</template>

<template #body>
<XBadge
v-if="inbound.state === 'Ready'"
appearance="success"
>
{{ t(`http.api.value.${inbound.state}`) }}
</XBadge>

<XBadge
v-else
appearance="danger"
>
{{ t(`http.api.value.${inbound.state}`) }}
</XBadge>
</template>
</DefinitionCard>

<DefinitionCard
layout="horizontal"
>
<template #title>
{{ t('http.api.property.tags') }}
</template>

<template #body>
<TagList
alignment="right"
:tags="inbound.tags"
/>
</template>
</DefinitionCard>

<DefinitionCard
layout="horizontal"
>
<template #title>
{{ t('http.api.property.address') }}
</template>

<template #body>
<TextWithCopyButton :text="inbound.addressPort" />
</template>
</DefinitionCard>
</div>
</div>
</div>
</div>
</DataCollection>
</div>
</AppView>
</RouteView>
Expand Down
231 changes: 205 additions & 26 deletions packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@
<RouteView
:name="props.routeName"
:params="{
mesh: '',
dataPlane: '',
codeSearch: '',
codeFilter: false,
codeRegExp: false,
}"
v-slot="{ route, t }"
v-slot="{ route, t, uri }"
>
<DataCollection
:items="props.items"
Expand Down Expand Up @@ -48,34 +52,197 @@
</XAction>
</h2>
</template>
<XTabs
:selected="route.child()?.name"
>
<template
v-for="{ name } in route.children"
:key="name"
#[`${name}-tab`]

<XLayout type="stack">
<div
class="stack-with-borders"
>
<XAction
:to="{
name,
}"
<DefinitionCard
layout="horizontal"
>
{{ t(`data-planes.routes.item.navigation.${name}`) }}
</XAction>
</template>
</XTabs>

<RouterView
v-slot="{ Component }"
>
<component
:is="Component"
:data="item"
<template #title>
{{ t('http.api.property.status') }}
</template>

<template #body>
<div
class="status-with-reason"
>
<StatusBadge
:status="item.status"
/>
<DataCollection
v-if="item.dataplaneType === 'standard'"
:items="item.dataplane.networking.inbounds"
:predicate="item => item.state !== 'Ready'"
:empty="false"
v-slot="{ items : inbounds }"
>
<KTooltip
class="reason-tooltip"
>
<InfoIcon
:color="KUI_COLOR_BACKGROUND_NEUTRAL"
:size="KUI_ICON_SIZE_30"
/>
<template #content>
<ul>
<li
v-for="inbound in inbounds"
:key="`${inbound.service}:${inbound.port}`"
>
{{ t('data-planes.routes.item.unhealthy_inbound', { service: inbound.service, port: inbound.port }) }}
</li>
</ul>
</template>
</KTooltip>
</DataCollection>
</div>
</template>
</DefinitionCard>

<DefinitionCard
layout="horizontal"
>
<template #title>
Type
</template>

<template #body>
{{ t(`data-planes.type.${item.dataplaneType}`) }}
</template>
</DefinitionCard>

<DefinitionCard
v-if="item.namespace.length > 0"
layout="horizontal"
>
<template #title>
{{ t('data-planes.routes.item.namespace') }}
</template>

<template #body>
{{ item.namespace }}
</template>
</DefinitionCard>

<DefinitionCard
v-if="can('use zones') && item.zone"
layout="horizontal"
>
<template
#title
>
Zone
</template>
<template
#body
>
<XAction
:to="{
name: 'zone-cp-detail-view',
params: {
zone: item.zone,
},
}"
>
{{ item.zone }}
</XAction>
</template>
</DefinitionCard>
<DefinitionCard
layout="horizontal"
>
<template #title>
{{ t('http.api.property.modificationTime') }}
</template>

<template #body>
{{ t('common.formats.datetime', { value: Date.parse(item.modificationTime) }) }}
</template>
</DefinitionCard>
</div>

<div
v-if="item.dataplane.networking.gateway"
>
<slot name="default" />
</component>
</RouterView>
<h3>{{ t('data-planes.routes.item.gateway') }}</h3>

<div
class="mt-4"
>
<div
class="stack-with-borders"
>
<DefinitionCard
layout="horizontal"
>
<template #title>
{{ t('http.api.property.tags') }}
</template>

<template #body>
<TagList
alignment="right"
:tags="item.dataplane.networking.gateway.tags"
/>
</template>
</DefinitionCard>

<DefinitionCard
layout="horizontal"
>
<template #title>
{{ t('http.api.property.address') }}
</template>

<template #body>
<TextWithCopyButton
:text="`${item.dataplane.networking.address}`"
/>
</template>
</DefinitionCard>
</div>
</div>
</div>
</XLayout>

<div>
<h3>
{{ t('data-planes.routes.item.config') }}
</h3>

<div class="mt-4">
<ResourceCodeBlock
:resource="item.config"
language="yaml"
is-searchable
:query="route.params.codeSearch"
:is-filter-mode="route.params.codeFilter"
:is-reg-exp-mode="route.params.codeRegExp"
@query-change="route.update({ codeSearch: $event })"
@filter-mode-change="route.update({ codeFilter: $event })"
@reg-exp-mode-change="route.update({ codeRegExp: $event })"
v-slot="{ copy, copying }"
>
<DataSource
v-if="copying"
:src="uri(sources, `/meshes/:mesh/dataplanes/:name/as/kubernetes`, {
mesh: route.params.mesh,
name: route.params.dataPlane,
}, {
cacheControl: 'no-store',
})"
@change="(data) => {
copy((resolve) => resolve(data))
}"
@error="(e) => {
copy((_resolve, reject) => reject(e))
}"
/>
</ResourceCodeBlock>
</div>
</div>
</AppView>
</template>
</template>
Expand All @@ -84,7 +251,19 @@
</template>

<script lang="ts" setup>
import { KUI_COLOR_BACKGROUND_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
import { InfoIcon } from '@kong/icons'
import { DataplaneOverview } from '../data'
import { sources } from '../sources'
import { useCan } from '@/app/application'
import DefinitionCard from '@/app/common/DefinitionCard.vue'
import StatusBadge from '@/app/common/StatusBadge.vue'
import TagList from '@/app/common/TagList.vue'
import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'
import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
const can = useCan()
const props = defineProps<{
items: DataplaneOverview[]
Expand Down

0 comments on commit c271927

Please sign in to comment.