-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(zones): add zone traffic drawers (#3509)
This PR replicates the Dataplane Traffic drawers from over in the dataplanes section into both ZoneIngress and ZoneEgress. I began by trying to make the code used for Dataplanes more reusable so I coulduse it for both ZoneIngress and ZoneEgress. I found that for several reasons this was overly complicated to do and would have required quite a lot of change within Dataplanes also. For instance: - explicitly named route params such as `params.dataPlane`, `params.zoneIngress` and `params.zoneEgress` - explicitly named route props such as `props.zoneIngress` and `props.zoneEgress` - explicitly named source URIs `zone-ingress`/`zone-egress` (this one was relatively easy to address and is addressed in this PR) - Dataplane Proxy URIs require a `mesh` specifying whereas Zone Proxy URIs don't - ...probably more edge cases Therefore I chose to mostly copy/paste over the approach from Dataplanes to ZoneIngress, and then again to ZoneEgress (ZoneIngress and ZoneEgress modules are mostly copy pasted anyway). --------- Signed-off-by: John Cowen <[email protected]>
- Loading branch information
Showing
32 changed files
with
963 additions
and
177 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
67 changes: 67 additions & 0 deletions
67
packages/kuma-gui/src/app/connections/views/zones/ConnectionInboundSummaryClustersView.vue
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,67 @@ | ||
| <template> | ||
| <RouteView | ||
| :params="{ | ||
| codeSearch: '', | ||
| codeFilter: false, | ||
| codeRegExp: false, | ||
| proxy: '', | ||
| proxyType: '', | ||
| connection: '', | ||
| }" | ||
| :name="props.routeName" | ||
| v-slot="{ route, uri }" | ||
| > | ||
| <RouteTitle | ||
| :render="false" | ||
| :title="`Clusters`" | ||
| /> | ||
| <AppView> | ||
| <DataLoader | ||
| :src="uri(sources, '/connections/clusters/for/:proxyType/:name', { | ||
| name: route.params.proxy, | ||
| proxyType: route.params.proxyType === 'ingresses' ? 'zone-ingress' : 'zone-egress', | ||
| })" | ||
| v-slot="{ data , refresh }" | ||
| > | ||
| <template | ||
| v-for="prefix in [route.params.connection.replace('_', ':')]" | ||
| :key="typeof prefix" | ||
| > | ||
| <DataCollection | ||
| :items="data.split('\n')" | ||
| :predicate="item => item.startsWith(`${prefix}::`)" | ||
| v-slot="{ items: lines }" | ||
| > | ||
| <XCodeBlock | ||
| language="json" | ||
| :code="lines.map(item => item.replace(`${prefix}::`, '')).join('\n')" | ||
| 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 })" | ||
| > | ||
| <template #primary-actions> | ||
| <XAction | ||
| action="refresh" | ||
| appearance="primary" | ||
| @click="refresh" | ||
| > | ||
| Refresh | ||
| </XAction> | ||
| </template> | ||
| </XCodeBlock> | ||
| </DataCollection> | ||
| </template> | ||
| </DataLoader> | ||
| </AppView> | ||
| </RouteView> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import { sources } from '@/app/connections/sources' | ||
| const props = defineProps<{ | ||
| routeName: string | ||
| }>() | ||
| </script> |
71 changes: 71 additions & 0 deletions
71
packages/kuma-gui/src/app/connections/views/zones/ConnectionInboundSummaryStatsView.vue
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,71 @@ | ||
| <template> | ||
| <RouteView | ||
| :params="{ | ||
| codeSearch: '', | ||
| codeFilter: false, | ||
| codeRegExp: false, | ||
| proxy: '', | ||
| proxyType: '', | ||
| connection: '', | ||
| }" | ||
| :name="props.routeName" | ||
| v-slot="{ route, uri }" | ||
| > | ||
| <RouteTitle | ||
| :render="false" | ||
| :title="`Stats`" | ||
| /> | ||
| <AppView> | ||
| <DataLoader | ||
| :src="uri(sources, '/connections/stats/for/:proxyType/:name/:socketAddress', { | ||
| name: route.params.proxy, | ||
| socketAddress: props.networking.inboundAddress, | ||
| proxyType: route.params.proxyType === 'ingresses' ? 'zone-ingress' : 'zone-egress', | ||
| })" | ||
| v-slot="{ data: stats, refresh }" | ||
| > | ||
| <DataCollection | ||
| :items="stats!.raw.split('\n')" | ||
| :predicate="item => [ | ||
| `listener.${route.params.connection}`, | ||
| ].some(prefix => item.startsWith(prefix))" | ||
| v-slot="{ items: lines }" | ||
| > | ||
| <XCodeBlock | ||
| language="json" | ||
| :code="lines.map(item => item.replace(`${route.params.connection}.`, '').replace(`${props.data.name}.`, '')).join('\n')" | ||
| 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 })" | ||
| > | ||
| <template #primary-actions> | ||
| <XAction | ||
| action="refresh" | ||
| appearance="primary" | ||
| @click="refresh" | ||
| > | ||
| Refresh | ||
| </XAction> | ||
| </template> | ||
| </XCodeBlock> | ||
| </DataCollection> | ||
| </DataLoader> | ||
| </AppView> | ||
| </RouteView> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import { sources } from '@/app/connections/sources' | ||
| import type { DataplaneInbound } from '@/app/data-planes/data/' | ||
| import type { ZoneEgress } from '@/app/zone-egresses/data/' | ||
| import type { ZoneIngress } from '@/app/zone-ingresses/data/' | ||
| const props = defineProps<{ | ||
| data: DataplaneInbound | ||
| networking: ZoneIngress['networking'] | ZoneEgress['networking'] | ||
| routeName: string | ||
| }>() | ||
| </script> |
Oops, something went wrong.