Skip to content

Commit

Permalink
fix(search): Always show search bars
Browse files Browse the repository at this point in the history 
Signed-off-by: John Cowen <[email protected]>
  • Loading branch information
@johncowen
johncowen committed Oct 23, 2024
1 parent d3a8553 commit 855e34d
Show file tree
Hide file tree
Showing 8 changed files with 210 additions and 158 deletions.
31 changes: 6 additions & 25 deletions src/app/application/components/app-collection/AppCollection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,22 +31,12 @@
:key="key"
#[key]="{ row, rowValue }"
>
<template
v-if="key === 'toolbar'"
>
<div class="app-collection-toolbar">
<slot name="toolbar" />
</div>
</template>

<template v-else>
<slot
v-if="(props.items ?? []).length > 0"
:name="key"
:row="row as Row"
:row-value="rowValue"
/>
</template>
<slot
v-if="(props.items ?? []).length > 0"
:name="key"
:row="row as Row"
:row-value="rowValue"
/>
</template>
</KTable>
</template>
Expand Down Expand Up @@ -149,15 +139,6 @@ const click = (e: MouseEvent) => {
.app-collection :deep(td:first-child li a:hover) {
text-decoration: underline;
}
.app-collection-toolbar {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-wrap: wrap;
gap: $kui-space-60;
font-size: $kui-font-size-40;
width: 100%;
}
</style>
<style lang="scss">
Expand Down
100 changes: 56 additions & 44 deletions src/app/data-planes/views/DataPlaneListView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,53 @@
>
<div v-html="t('data-planes.routes.items.intro', {}, { defaultMessage: '' })" />
<KCard>
<search>
<form
@submit.prevent
>
<FilterBar
class="data-plane-proxy-filter"
:placeholder="`service:backend`"
:query="route.params.s"
:fields="{
name: { description: 'filter by name or parts of a name' },
protocol: { description: 'filter by “kuma.io/protocol” value' },
service: { description: 'filter by “kuma.io/service” value' },
tag: { description: 'filter by tags (e.g. “tag: version:2”)' },
...(can('use zones') && { zone: { description: 'filter by “kuma.io/zone” value' } }),
}"
@change="(e) => route.update({
...Object.fromEntries(e.entries()) as Record<string, string | undefined>,
})"
/>

<XSelect
label="Type"
:selected="route.params.dataplaneType"
@change="(value: string) => route.update({ dataplaneType: value })"
>
<template #selected="{ item }: { item: 'all' | 'standard' | 'builtin' | 'delegated'}">
<XIcon
v-if="item !== 'all'"
:size="KUI_ICON_SIZE_40"
:name="item"
/>
{{ t(`data-planes.type.${item}`) }}
</template>
<template
v-for="item in (['all', 'standard', 'builtin', 'delegated'] as const)"
:key="item"
#[`${item}-option`]
>
<XIcon
v-if="item !== 'all'"
:name="item"
/>
{{ t(`data-planes.type.${item}`) }}
</template>
</XSelect>
</form>
</search>
<DataLoader
:src="uri(sources, `/meshes/:mesh/dataplanes/of/:type`, {
mesh: route.params.mesh,
Expand Down Expand Up @@ -59,50 +106,6 @@
:is-selected-row="(row) => row.name === route.params.dataPlane"
@resize="me.set"
>
<template #toolbar>
<FilterBar
class="data-plane-proxy-filter"
:placeholder="`service:backend`"
:query="route.params.s"
:fields="{
name: { description: 'filter by name or parts of a name' },
protocol: { description: 'filter by “kuma.io/protocol” value' },
service: { description: 'filter by “kuma.io/service” value' },
tag: { description: 'filter by tags (e.g. “tag: version:2”)' },
...(can('use zones') && { zone: { description: 'filter by “kuma.io/zone” value' } }),
}"
@change="(e) => route.update({
...Object.fromEntries(e.entries()) as Record<string, string | undefined>,
})"
/>
<XSelect
label="Type"
:selected="route.params.dataplaneType"
@change="(value: string) => route.update({ dataplaneType: value })"
>
<template #selected="{ item }: { item: 'all' | 'standard' | 'builtin' | 'delegated'}">
<XIcon
v-if="item !== 'all'"
:size="KUI_ICON_SIZE_40"
:name="item"
/>
{{ t(`data-planes.type.${item}`) }}
</template>
<template
v-for="item in (['all', 'standard', 'builtin', 'delegated'] as const)"
:key="item"
#[`${item}-option`]
>
<XIcon
v-if="item !== 'all'"
:name="item"
/>
{{ t(`data-planes.type.${item}`) }}
</template>
</XSelect>
</template>
<template #type="{ row: item }">
<XIcon :name="item.dataplaneType">
{{ t(`data-planes.type.${item.dataplaneType}`) }}
Expand Down Expand Up @@ -311,6 +314,15 @@ const props = defineProps<{
text-decoration: none;
}
search form {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-wrap: wrap;
gap: $kui-space-60;
margin-bottom: $kui-space-60;
}
.data-plane-proxy-filter {
flex-basis: 310px;
flex-grow: 1;
Expand Down
52 changes: 33 additions & 19 deletions src/app/gateways/views/BuiltinGatewayDataplanesView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,31 @@
:src="`/meshes/${route.params.mesh}/mesh-gateways/${route.params.gateway}`"
v-slot="{ data: meshGateway, error }: MeshGatewaySource"
>
<div class="stack">
<div
class="stack"
>
<KCard>
<search>
<form
@submit.prevent
>
<FilterBar
class="data-plane-proxy-filter"
:placeholder="`name:dataplane-name`"
:query="route.params.s"
:fields="{
name: { description: 'filter by name or parts of a name' },
protocol: { description: 'filter by “kuma.io/protocol” value' },
service: { description: 'filter by “kuma.io/service” value' },
tag: { description: 'filter by tags (e.g. “tag: version:2”)' },
...(can('use zones') && { zone: { description: 'filter by “kuma.io/zone” value' } }),
}"
@change="(e) => route.update({
...Object.fromEntries(e.entries()) as Record<string, string | undefined>,
})"
/>
</form>
</search>
<DataLoader
:src="meshGateway === undefined ? '' : `/meshes/${route.params.mesh}/dataplanes/for/service-insight/${meshGateway.selectors[0].match['kuma.io/service']}?page=${route.params.page}&size=${route.params.size}&search=${route.params.s}`"
:data="[meshGateway]"
Expand Down Expand Up @@ -51,24 +74,6 @@
:is-selected-row="(row) => row.name === route.params.dataPlane"
@resize="me.set"
>
<template #toolbar>
<FilterBar
class="data-plane-proxy-filter"
:placeholder="`name:dataplane-name`"
:query="route.params.s"
:fields="{
name: { description: 'filter by name or parts of a name' },
protocol: { description: 'filter by “kuma.io/protocol” value' },
service: { description: 'filter by “kuma.io/service” value' },
tag: { description: 'filter by tags (e.g. “tag: version:2”)' },
...(can('use zones') && { zone: { description: 'filter by “kuma.io/zone” value' } }),
}"
@change="(e) => route.update({
...Object.fromEntries(e.entries()) as Record<string, string | undefined>,
})"
/>
</template>
<template #namespace="{ row }">
{{ row.namespace }}
</template>
Expand Down Expand Up @@ -208,6 +213,15 @@ import type { DataplaneOverviewCollectionSource } from '@/app/data-planes/source
</script>
<style lang="scss" scoped>
search form {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-wrap: wrap;
gap: $kui-space-60;
margin-bottom: $kui-space-60;
}
.data-plane-proxy-filter {
flex-basis: 350px;
flex-grow: 1;
Expand Down
50 changes: 32 additions & 18 deletions src/app/gateways/views/DelegatedGatewayDetailView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,29 @@
<div>
<h3>{{ t('delegated-gateways.detail.data_plane_proxies') }}</h3>
<KCard class="mt-4">
<KCard
class="mt-4"
>
<search>
<form
@submit.prevent
>
<FilterBar
class="data-plane-proxy-filter"
:placeholder="`tag: 'kuma.io/protocol: http'`"
:query="route.params.s"
:fields="{
name: { description: 'filter by name or parts of a name' },
protocol: { description: 'filter by “kuma.io/protocol” value' },
tag: { description: 'filter by tags (e.g. “tag: version:2”)' },
...(can('use zones') && { zone: { description: 'filter by “kuma.io/zone” value' } }),
}"
@change="(e) => route.update({
...Object.fromEntries(e.entries()) as Record<string, string | undefined>,
})"
/>
</form>
</search>
<DataLoader
:src="`/meshes/${route.params.mesh}/dataplanes/for/service-insight/${route.params.service}?page=${route.params.page}&size=${route.params.size}&search=${route.params.s}`"
>
Expand Down Expand Up @@ -92,23 +114,6 @@
:is-selected-row="(row) => row.name === route.params.dataPlane"
@resize="me.set"
>
<template #toolbar>
<FilterBar
class="data-plane-proxy-filter"
:placeholder="`tag: 'kuma.io/protocol: http'`"
:query="route.params.s"
:fields="{
name: { description: 'filter by name or parts of a name' },
protocol: { description: 'filter by “kuma.io/protocol” value' },
tag: { description: 'filter by tags (e.g. “tag: version:2”)' },
...(can('use zones') && { zone: { description: 'filter by “kuma.io/zone” value' } }),
}"
@change="(e) => route.update({
...Object.fromEntries(e.entries()) as Record<string, string | undefined>,
})"
/>
</template>
<template #name="{ row: item }">
<XAction
data-action
Expand Down Expand Up @@ -250,6 +255,15 @@ import type { ServiceInsightSource } from '@/app/services/sources'
</script>
<style lang="scss" scoped>
search form {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-wrap: wrap;
gap: $kui-space-60;
margin-bottom: $kui-space-60;
}
.data-plane-proxy-filter {
flex-basis: 350px;
flex-grow: 1;
Expand Down
43 changes: 25 additions & 18 deletions src/app/policies/views/PolicyListView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,22 @@
</KCard>
<KCard>
<search>
<form
@submit.prevent
>
<XInput
placeholder="Filter by name..."
type="search"
appearance="search"
:value="route.params.s"
:debounce="1000"
@change="(e) => route.update({
s: e,
})"
/>
</form>
</search>
<DataLoader
:src="uri(sources, '/meshes/:mesh/policy-path/:path', {
mesh: route.params.mesh,
Expand All @@ -82,24 +98,6 @@
<template
#loadable="{ data }"
>
<search
v-if="(data?.items ?? { length: 0 }).length > 0 || (route.params.s.length > 0)"
>
<form
@submit.prevent
>
<XInput
placeholder="Filter by name..."
type="search"
appearance="search"
:value="route.params.s"
:debounce="1000"
@change="(e) => route.update({
s: e,
})"
/>
</form>
</search>
<DataCollection
:items="data?.items ?? [undefined]"
:page="route.params.page"
Expand Down Expand Up @@ -303,6 +301,15 @@ header > h3 {
margin-top: 0;
float: left;
}
search form {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-wrap: wrap;
gap: $kui-space-60;
margin-bottom: $kui-space-60;
}
.app-collection:deep(:is(th, td):nth-child(1)) {
padding-right: 0 !important;
width: 16px !important;
Expand Down
Loading

0 comments on commit 855e34d

Please sign in to comment.