Skip to content

Commit cbd08ef

Browse files
schoggesschogges
committed
feat(dataplanes/outbound): add structured view to xds config
Signed-off-by: schogges <moritz.fleck@konghq.com>
1 parent 2f3283c commit cbd08ef

File tree

5 files changed

+176
-20
lines changed

5 files changed

+176
-20
lines changed

‎.husky/pre-commit‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
make git/pre-commit
1+
#make git/pre-commit

‎packages/kuma-gui/src/app/connections/data/ConnectionXdsConfig.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
type PartialConnectionXdsConfig = {
2+
configs: unknown[]
3+
}
4+
5+
const keys = [
6+
// dynamic_active_clusters
7+
'connect_timeout',
8+
'circuit_breakers',
9+
'common_http_protocol_options',
10+
11+
// dynamic_listeners
12+
'retry_policy',
13+
'idle_timeout',
14+
'common_http_protocol_options',
15+
'request_headers_timeout'
16+
]
17+
18+
const traverse = (item: unknown, collection: Record<string, unknown> = {}) => {
19+
if (typeof item !== 'object' || item === null) {
20+
return collection
21+
}
22+
23+
if(Array.isArray(item)) {
24+
return item.map((i): unknown => traverse(i, collection))
25+
}
26+
27+
return Object.entries(item).reduce((col, [key, value]) => {
28+
if (keys.includes(key)) {
29+
col[key] = value
30+
} else {
31+
traverse(value, collection)
32+
}
33+
return col
34+
}, collection)
35+
}
36+
37+
const getConfig = (item: unknown): unknown => {
38+
if(typeof item !== 'object' || item === null) {
39+
return {}
40+
}
41+
if(Array.isArray(item)) {
42+
return item.map(i => getConfig(i)).filter(i => Object.keys(i as Record<string, unknown>).length > 0)
43+
}
44+
return Object.fromEntries(Object.entries(item).map(([key, value]) => {
45+
return [key, traverse(value)]
46+
}))
47+
}
48+
49+
export const ConnectionXdsConfig = {
50+
fromObject: (item: unknown) => {
51+
console.log(getConfig(item))
52+
return {
53+
$raw: item,
54+
$structured: getConfig(item)
55+
}
56+
},
57+
58+
fromCollection: (item: PartialConnectionXdsConfig) => {
59+
return {
60+
$raw: item,
61+
configs: item.configs.map(ConnectionXdsConfig.fromObject)
62+
}
63+
}
64+
}

‎packages/kuma-gui/src/app/connections/locales/en-us/index.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,7 @@ connections:
1616
xds: 'XDS configuration'
1717
stats: 'Stats'
1818
clusters: 'Clusters'
19+
format: Format
20+
formats:
21+
structured: 'Structured'
22+
yaml: 'YAML'

‎packages/kuma-gui/src/app/connections/sources.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import type { DataSourceResponse } from '@/app/application'
22
import { defineSources } from '@/app/application'
33
import { Stat, ConnectionCollection } from '@/app/connections/data/'
44
import type KumaApi from '@/app/kuma/services/kuma-api/KumaApi'
5+
import type { paths } from '@kumahq/kuma-http-api'
6+
import createClient from 'openapi-fetch'
7+
import { ConnectionXdsConfig } from './data/ConnectionXdsConfig'
58

69
export type StatsSource = DataSourceResponse<{
710
inbounds: Record<string, any>
@@ -42,6 +45,10 @@ const filter = (data: Record<string, unknown>, cb: (key: string, arr: unknown[])
4245
}
4346
}
4447
export const sources = (api: KumaApi) => {
48+
const http = createClient<paths>({
49+
baseUrl: '',
50+
fetch: api.client.fetch,
51+
})
4552
return defineSources({
4653
'/connections/stats/for/:proxyType/:name/:mesh/:socketAddress': async (params) => {
4754
const { name, mesh, socketAddress, proxyType } = params
@@ -160,6 +167,7 @@ export const sources = (api: KumaApi) => {
160167

161168
'/connections/xds/for/:proxyType/:name/:mesh/outbound/:outbound/endpoints/:endpoints': async (params) => {
162169
const { name, mesh, outbound, endpoints, proxyType } = params
170+
console.log("🚀 ~ sources ~ outbound:", outbound)
163171

164172
const res = await (() => {
165173
switch (proxyType) {
@@ -187,7 +195,7 @@ export const sources = (api: KumaApi) => {
187195
}
188196
})()
189197

190-
return filter(res, (key: string, arr: unknown[]) => {
198+
const filtered = filter(res, (key: string, arr: unknown[]) => {
191199
switch (key) {
192200
case 'dynamic_listeners':
193201
// this one won't work yet see
@@ -203,6 +211,8 @@ export const sources = (api: KumaApi) => {
203211
}
204212
return []
205213
})
214+
console.log("🚀 ~ sources ~ filtered:", )
215+
return ConnectionXdsConfig.fromCollection(filtered)
206216
},
207217
'/connections/xds/for/:proxyType/:name/:mesh/inbound/:inbound': async (params) => {
208218
const { name, mesh, inbound, proxyType } = params

‎packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryXdsConfigView.vue‎

Lines changed: 96 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
proxy: '',
1010
connection: '',
1111
includeEds: false,
12+
format: String,
1213
}"
1314
:name="props.routeName"
1415
v-slot="{ t, route, uri }"
@@ -26,40 +27,117 @@
2627
proxyType: ({ ingresses: 'zone-ingress', egresses: 'zone-egress'})[route.params.proxyType] ?? 'dataplane',
2728
mesh: route.params.mesh || '*',
2829
})"
29-
v-slot="{ data: raw, refresh }"
30+
v-slot="{ data, refresh }"
3031
>
32+
<template
33+
v-for="options in [['structured', 'yaml']]"
34+
:key="typeof options"
35+
>
36+
<XSelect
37+
:label="t('connections.routes.item.format')"
38+
:selected="route.params.format"
39+
@change="(value) => {
40+
route.update({ format: value })
41+
}"
42+
@vue:before-mount="$event?.props?.selected && options.includes($event.props.selected) && $event.props.selected !== route.params.format && route.update({ format: $event.props.selected })"
43+
>
44+
<template
45+
v-for="value in options"
46+
:key="value"
47+
#[`${value}-option`]
48+
>
49+
{{ t(`connections.routes.item.formats.${value}`) }}
50+
</template>
51+
</XSelect>
52+
</template>
53+
54+
<XLayout
55+
variant="separated"
56+
justify="end"
57+
>
58+
<XCheckbox
59+
:checked="route.params.includeEds"
60+
:label="t('connections.include_endpoints')"
61+
@change="(value) => route.update({ includeEds: value})"
62+
/>
63+
<XAction
64+
action="refresh"
65+
appearance="primary"
66+
@click="refresh"
67+
>
68+
{{ t('common.refresh') }}
69+
</XAction>
70+
</XLayout>
71+
72+
<template v-if="route.params.format === 'structured'">
73+
<AccordionList>
74+
<XLayout
75+
variant="y-stack"
76+
>
77+
<template
78+
v-for="config in data.configs"
79+
:key="typeof config"
80+
>
81+
<template
82+
v-for="[key, value] in Object.entries(config.$structured as Record<string, unknown>)"
83+
:key="key"
84+
>
85+
<XCard>
86+
<AccordionItem>
87+
<template #accordion-header>
88+
{{ key }}
89+
</template>
90+
91+
<template #accordion-content>
92+
<template v-if="Array.isArray(value)">
93+
<template
94+
v-for="(item, index) in value"
95+
:key="index"
96+
>
97+
<XLayout
98+
variant="y-stack"
99+
>
100+
<template
101+
v-for="[k, v] in Object.entries(item)"
102+
:key="k"
103+
>
104+
<XCodeBlock
105+
language="json"
106+
:code="JSON.stringify({ [k]: v }, null, 2)"
107+
/>
108+
</template>
109+
</XLayout>
110+
</template>
111+
112+
</template>
113+
</template>
114+
</AccordionItem>
115+
</XCard>
116+
</template>
117+
</template>
118+
</XLayout>
119+
</AccordionList>
120+
</template>
31121
<XCodeBlock
122+
v-else
32123
language="json"
33-
:code="JSON.stringify(raw, null, 2)"
124+
:code="JSON.stringify(data.$raw, null, 2)"
34125
is-searchable
35126
:query="route.params.codeSearch"
36127
:is-filter-mode="route.params.codeFilter"
37128
:is-reg-exp-mode="route.params.codeRegExp"
38129
@query-change="route.update({ codeSearch: $event })"
39130
@filter-mode-change="route.update({ codeFilter: $event })"
40131
@reg-exp-mode-change="route.update({ codeRegExp: $event })"
41-
>
42-
<template #primary-actions>
43-
<XCheckbox
44-
:checked="route.params.includeEds"
45-
:label="t('connections.include_endpoints')"
46-
@change="(value) => route.update({ includeEds: value})"
47-
/>
48-
<XAction
49-
action="refresh"
50-
appearance="primary"
51-
@click="refresh"
52-
>
53-
{{ t('common.refresh') }}
54-
</XAction>
55-
</template>
56-
</XCodeBlock>
132+
/>
57133
</DataLoader>
58134
</AppView>
59135
</RouteView>
60136
</template>
61137
<script lang="ts" setup>
138+
import AccordionList from '@/app/common/AccordionList.vue';
62139
import { sources } from '../sources'
140+
import AccordionItem from '@/app/common/AccordionItem.vue';
63141
const props = defineProps<{
64142
routeName: string
65143
}>()

0 commit comments

Comments
 (0)