refactor(meshes): refactor meshes to use our newer patterns

Signed-off-by: John Cowen <[email protected]>
kumahq · Dec 2, 2024 · 24e6b30 · 24e6b30
1 parent 61c99f3
commit 24e6b30
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 87 deletions.
diff --git a/packages/kuma-gui/features/application/Loading.feature b/packages/kuma-gui/features/application/Loading.feature
@@ -2,8 +2,8 @@ Feature: application / loading
 
   Background:
     Given the CSS selectors
-      | Alias              | Selector                                                    |
-      | collection-loading | [data-testid$='-collection'] [data-testid='table-skeleton'] |
+      | Alias              | Selector                      |
+      | collection-loading | [data-testid='list-skeleton'] |
 
   Scenario: Collections show a loading view
     Given the environment

diff --git a/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue b/packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue
@@ -43,8 +43,9 @@
 
 <script lang="ts" setup generic="Row extends {}">
 import { KTable } from '@kong/kongponents'
-import { useSlots, ref, watch, Ref } from 'vue'
+import { useSlots, ref, watch, Ref, inject } from 'vue'
 
+import { runInDebug } from '../../'
 import type { TableHeader as KTableHeader, TablePreferences } from '@kong/kongponents'
 type CellAttrParams = {
   headerKey: string
@@ -59,6 +60,19 @@ type ResizeValue = {
 type TableHeader = KTableHeader & {
   width?: number
 }
+
+// when we are inside of a DataLoader make sure its using the `variant="list"`
+// but only error in dev mode, if this fails in production we don't want things
+// to blow up
+const dataLoader = inject<{ props: { variant: string } } | undefined>('data-loader')
+if (typeof dataLoader !== 'undefined') {
+  if (dataLoader.props.variant !== 'list') {
+    runInDebug(() => {
+      // throw new Error('Please use <DataLoader variant="list" />')
+    })
+  }
+}
+//
 const props = withDefaults(defineProps<{
   isSelectedRow?: ((row: Row) => boolean)
   items: Row[] | undefined

diff --git a/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue b/packages/kuma-gui/src/app/application/components/data-source/DataLoader.vue
@@ -66,8 +66,15 @@
         :refresh="props.src !== '' ? refresh : () => {}"
       >
         <LoadingBlock
+          v-if="props.variant === 'default'"
           v-bind="$attrs"
         />
+        <KSkeleton
+          v-else
+          data-testid="list-skeleton"
+          v-bind="$attrs"
+          type="table"
+        />
       </slot>
       <slot
         v-else
@@ -84,22 +91,27 @@
   typeOf(): any
 }" setup
 >
-import { computed, ref, useSlots } from 'vue'
+import { computed, ref, useSlots, provide } from 'vue'
 
 import type { TypeOf } from '@/app/application'
 import ErrorBlock from '@/app/common/ErrorBlock.vue'
 import LoadingBlock from '@/app/common/LoadingBlock.vue'
-
 const props = withDefaults(defineProps<{
   data?: unknown[]
   errors?: (Error | undefined)[]
   src?: T
   loader?: boolean
+  variant?: 'default' | 'list'
 }>(), {
   errors: () => [],
   data: () => [],
   src: '' as any,
   loader: true,
+  variant: 'default',
+})
+
+provide('data-loader', {
+  props,
 })
 
 const slots = useSlots()

diff --git a/packages/kuma-gui/src/app/meshes/views/MeshDetailView.vue b/packages/kuma-gui/src/app/meshes/views/MeshDetailView.vue
@@ -23,7 +23,9 @@
         ]"
         :key="missingTLSPolicy"
       >
-        <AppView :docs="t('meshes.href.docs')">
+        <AppView
+          :docs="t('meshes.href.docs')"
+        >
           <template
             v-if="!props.mesh.mtlsBackend || missingTLSPolicy"
             #notifications
@@ -50,7 +52,9 @@
                   :start="t('common.formats.datetime', { value: Date.parse(props.mesh.creationTime) })"
                   :end="t('common.formats.datetime', { value: Date.parse(props.mesh.modificationTime) })"
                 />
-                <div class="columns">
+                <XLayout
+                  type="columns"
+                >
                   <template
                     v-for="policy in ['MeshTrafficPermission', 'MeshMetric', 'MeshAccessLog', 'MeshTrace']"
                     :key="policy"
@@ -84,13 +88,17 @@
                       </DefinitionCard>
                     </template>
                   </template>
-                </div>
+                </XLayout>
               </XLayout>
             </XCard>
 
-            <KCard>
-              <div class="stack">
-                <div class="columns">
+            <XCard>
+              <XLayout
+                type="stack"
+              >
+                <XLayout
+                  type="columns"
+                >
                   <ResourceStatus
                     :total="data?.services.total ?? 0"
                     data-testid="services-status"
@@ -136,9 +144,9 @@
                       </template>
                     </template>
                   </DefinitionCard>
-                </div>
-              </div>
-            </KCard>
+                </XLayout>
+              </XLayout>
+            </XCard>
             <ResourceCodeBlock
               :resource="mesh.config"
               v-slot="{ copy, copying }"

diff --git a/packages/kuma-gui/src/app/meshes/views/MeshListView.vue b/packages/kuma-gui/src/app/meshes/views/MeshListView.vue
@@ -19,84 +19,92 @@
         </h1>
       </template>
 
-      <div class="stack">
-        <div v-html="t('meshes.routes.items.intro', {}, { defaultMessage: '' })" />
-        <KCard>
-          <DataLoader
-            :src="uri(sources, `/mesh-insights`, {}, {
-              page: route.params.page,
-              size: route.params.size,
-            })"
+      <div
+        v-html="t('meshes.routes.items.intro', {}, { defaultMessage: '' })"
+      />
+
+      <XCard>
+        <DataLoader
+          variant="list"
+          :src="uri(sources, `/mesh-insights`, {}, {
+            page: route.params.page,
+            size: route.params.size,
+          })"
+          v-slot="{ data }"
+        >
+          <DataCollection
+            type="meshes"
+            :items="data.items"
+            :page="route.params.page"
+            :page-size="route.params.size"
+            :total="data.total"
+            @change="route.update"
+            v-slot="{ items }"
           >
-            <template
-              #loadable="{ data }"
+            <AppCollection
+              class="mesh-collection"
+              data-testid="mesh-collection"
+              :headers="[
+                { ...me.get('headers.name'), label: t('meshes.common.name'), key: 'name' },
+                { ...me.get('headers.services'), label: t('meshes.routes.items.collection.services'), key: 'services'},
+                { ...me.get('headers.dataplanes'), label: t('meshes.routes.items.collection.dataplanes'), key: 'dataplanes'},
+                { ...me.get('headers.actions'), label: 'Actions', key: 'actions', hideLabel: true },
+              ]"
+              :items="items"
+              :is-selected-row="(row) => row.name === route.params.mesh"
+              @resize="me.set"
             >
-              <DataCollection
-                type="meshes"
-                :items="data?.items ?? [undefined]"
-                :page="route.params.page"
-                :page-size="route.params.size"
-                :total="data?.total"
-                @change="route.update"
+              <template
+                #name="{ row: item }"
               >
-                <AppCollection
-                  class="mesh-collection"
-                  data-testid="mesh-collection"
-                  :headers="[
-                    { ...me.get('headers.name'), label: t('meshes.common.name'), key: 'name' },
-                    { ...me.get('headers.services'), label: t('meshes.routes.items.collection.services'), key: 'services'},
-                    { ...me.get('headers.dataplanes'), label: t('meshes.routes.items.collection.dataplanes'), key: 'dataplanes'},
-                    { ...me.get('headers.actions'), label: 'Actions', key: 'actions', hideLabel: true },
-                  ]"
-                  :items="data?.items"
-                  :is-selected-row="(row) => row.name === route.params.mesh"
-                  @resize="me.set"
+                <XAction
+                  data-action
+                  :to="{
+                    name: 'mesh-detail-view',
+                    params: {
+                      mesh: item.name,
+                    },
+                    query: {
+                      page: route.params.page,
+                      size: route.params.size,
+                    },
+                  }"
                 >
-                  <template #name="{ row: item }">
-                    <XAction
-                      data-action
-                      :to="{
-                        name: 'mesh-detail-view',
-                        params: {
-                          mesh: item.name,
-                        },
-                        query: {
-                          page: route.params.page,
-                          size: route.params.size,
-                        },
-                      }"
-                    >
-                      {{ item.name }}
-                    </XAction>
-                  </template>
+                  {{ item.name }}
+                </XAction>
+              </template>
 
-                  <template #services="{ row: item }">
-                    {{ item.services.internal }}
-                  </template>
+              <template
+                #services="{ row: item }"
+              >
+                {{ item.services.internal }}
+              </template>
 
-                  <template #dataplanes="{ row: item }">
-                    {{ item.dataplanesByType.standard.online }} / {{ item.dataplanesByType.standard.total }}
-                  </template>
-                  <template #actions="{ row: item }">
-                    <XActionGroup>
-                      <XAction
-                        :to="{
-                          name: 'mesh-detail-view',
-                          params: {
-                            mesh: item.name,
-                          },
-                        }"
-                      >
-                        {{ t('common.collection.actions.view') }}
-                      </XAction>
-                    </XActionGroup>
-                  </template>
-                </AppCollection>
-              </DataCollection>
-            </template>
-          </DataLoader>
-        </KCard>
-      </div>
+              <template
+                #dataplanes="{ row: item }"
+              >
+                {{ item.dataplanesByType.standard.online }} / {{ item.dataplanesByType.standard.total }}
+              </template>
+              <template
+                #actions="{ row: item }"
+              >
+                <XActionGroup>
+                  <XAction
+                    :to="{
+                      name: 'mesh-detail-view',
+                      params: {
+                        mesh: item.name,
+                      },
+                    }"
+                  >
+                    {{ t('common.collection.actions.view') }}
+                  </XAction>
+                </XActionGroup>
+              </template>
+            </AppCollection>
+          </DataCollection>
+        </DataLoader>
+      </XCard>
     </AppView>
   </RouteView>
 </template>

diff --git a/packages/kuma-gui/src/app/x/components/x-layout/XLayout.vue b/packages/kuma-gui/src/app/x/components/x-layout/XLayout.vue
@@ -7,7 +7,7 @@
 </template>
 <script lang="ts" setup>
 const props = withDefaults(defineProps<{
-  type?: 'stack' | 'separated'
+  type?: 'stack' | 'separated' | 'columns'
   size?: 'small' | 'normal'
 }>(), {
   type: 'stack',
@@ -26,4 +26,18 @@ const props = withDefaults(defineProps<{
   flex-wrap: wrap;
   gap: $kui-space-40;
 }
+.columns {
+  --threshold: 40rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: $kui-space-80;
+}
+
+.columns > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--threshold) - 100%) * 999);
+  min-inline-size: 0;
+}
+
 </style>