feat(zone-ingress-summary-view): use dropdown to select config format

Signed-off-by: schogges <[email protected]>
kumahq · Jan 17, 2025 · 8c79ab4 · 8c79ab4
1 parent 601d095
commit 8c79ab4
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 93 deletions.
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
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="props.type === 'separated' && props.truncate ? KTruncate : 'div'"
-    :class="['x-layout', props.type, props.size]"
+    :class="['x-layout', props.type, props.size, props.space]"
   >
     <slot name="default" />
   </component>
@@ -12,11 +12,13 @@ const props = withDefaults(defineProps<{
   // TODO(jc) :variant
   type?: 'stack' | 'separated' | 'columns'
   size?: 'small' | 'normal'
+  space?: 'full'
   truncate?: boolean
 }>(), {
   type: 'stack',
   size: 'normal',
   truncate: false,
+  space: undefined,
 })
 </script>
 <style lang="scss" scoped>
@@ -31,6 +33,11 @@ const props = withDefaults(defineProps<{
   flex-wrap: wrap;
   align-items: center;
   gap: $kui-space-40;
+
+  &.full {
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 .columns {
   --threshold: 40rem;

diff --git a/packages/kuma-gui/src/app/zone-ingresses/locales/en-us/index.yaml b/packages/kuma-gui/src/app/zone-ingresses/locales/en-us/index.yaml
@@ -15,14 +15,18 @@ zone-ingresses:
         zone-ingress-clusters-view: 'Clusters'
         zone-ingress-config-view: 'YAML'
       overview: 'Overview'
-      config: 'YAML'
+      config: Configuration
       subscriptions:
         title: 'XDS connections'
       about:
         title: About this Zone Ingress
     items:
       title: Ingresses
       breadcrumbs: Ingresses
+      format: Format
+      formats:
+        yaml: YAML
+        structured: Structured
       intro: !!text/markdown |
         A Zone Ingress is a specialized gateway that facilitates cross-zone communication by securely routing traffic between services in different zones.
   href:

diff --git a/packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressSummaryView.vue b/packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressSummaryView.vue
@@ -6,6 +6,7 @@
       codeSearch: '',
       codeFilter: false,
       codeRegExp: false,
+      format: 'structured',
     }"
     v-slot="{ route, t }"
   >
@@ -52,110 +53,137 @@
               </h2>
             </template>
 
-            <div
-              class="stack-with-borders"
+            <XLayout
+              variant="stack"
             >
-              <DefinitionCard
-                layout="horizontal"
-              >
-                <template #title>
-                  {{ t('http.api.property.status') }}
-                </template>
-
-                <template #body>
-                  <StatusBadge
-                    :status="item.state"
-                  />
-                </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
-                layout="horizontal"
-              >
-                <template #title>
-                  {{ t('http.api.property.address') }}
-                </template>
+              <header>
+                <XLayout
+                  type="separated"
+                  space="full"
+                >
+                  <h3>
+                    {{ t('zone-ingresses.routes.item.config') }}
+                  </h3>
+                  <div>
+                    <XSelect
+                      :label="t('zone-ingresses.routes.items.format')"
+                      :selected="route.params.format"
+                      @change="(value) => {
+                        route.update({ format: value })
+                      }"
+                    >
+                      <template
+                        v-for="value in ['structured', 'yaml']"
+                        :key="value"
+                        #[`${value}-option`]
+                      >
+                        {{ t(`zone-ingresses.routes.items.formats.${value}`) }}
+                      </template>
+                    </XSelect>
+                  </div>
+                </XLayout>
+              </header>
+              <template v-if="route.params.format === 'structured'">
+                <DefinitionCard
+                  layout="horizontal"
+                >
+                  <template #title>
+                    {{ t('http.api.property.status') }}
+                  </template>
 
-                <template #body>
-                  <template
-                    v-if="item.zoneIngress.socketAddress.length > 0"
-                  >
-                    <XCopyButton
-                      :text="item.zoneIngress.socketAddress"
+                  <template #body>
+                    <StatusBadge
+                      :status="item.state"
                     />
                   </template>
+                </DefinitionCard>
 
-                  <template v-else>
-                    {{ t('common.detail.none') }}
+                <DefinitionCard
+                  v-if="item.namespace.length > 0"
+                  layout="horizontal"
+                >
+                  <template #title>
+                    {{ t('data-planes.routes.item.namespace') }}
                   </template>
-                </template>
-              </DefinitionCard>
 
-              <DefinitionCard
-                layout="horizontal"
-              >
-                <template #title>
-                  {{ t('http.api.property.advertisedAddress') }}
-                </template>
+                  <template #body>
+                    {{ item.namespace }}
+                  </template>
+                </DefinitionCard>
 
-                <template #body>
-                  <template
-                    v-if="item.zoneIngress.advertisedSocketAddress.length > 0"
-                  >
-                    <XCopyButton
-                      :text="item.zoneIngress.advertisedSocketAddress"
-                    />
+                <DefinitionCard
+                  layout="horizontal"
+                >
+                  <template #title>
+                    {{ t('http.api.property.address') }}
                   </template>
 
-                  <template v-else>
-                    {{ t('common.detail.none') }}
+                  <template #body>
+                    <template
+                      v-if="item.zoneIngress.socketAddress.length > 0"
+                    >
+                      <XCopyButton
+                        :text="item.zoneIngress.socketAddress"
+                      />
+                    </template>
+
+                    <template v-else>
+                      {{ t('common.detail.none') }}
+                    </template>
                   </template>
-                </template>
-              </DefinitionCard>
-            </div>
-            <div>
-              <h3>
-                {{ t('zone-ingresses.routes.item.config') }}
-              </h3>
+                </DefinitionCard>
 
-              <div class="mt-4">
-                <ResourceCodeBlock
-                  :resource="item.config"
-                  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 }"
+                <DefinitionCard
+                  layout="horizontal"
                 >
-                  <DataSource
-                    v-if="copying"
-                    :src="`/zone-ingresses/${route.params.zoneIngress}/as/kubernetes?no-store`"
-                    @change="(data) => {
-                      copy((resolve) => resolve(data))
-                    }"
-                    @error="(e) => {
-                      copy((_resolve, reject) => reject(e))
-                    }"
-                  />
-                </ResourceCodeBlock>
-              </div>
-            </div>
+                  <template #title>
+                    {{ t('http.api.property.advertisedAddress') }}
+                  </template>
+
+                  <template #body>
+                    <template
+                      v-if="item.zoneIngress.advertisedSocketAddress.length > 0"
+                    >
+                      <XCopyButton
+                        :text="item.zoneIngress.advertisedSocketAddress"
+                      />
+                    </template>
+
+                    <template v-else>
+                      {{ t('common.detail.none') }}
+                    </template>
+                  </template>
+                </DefinitionCard>
+              </template>
+              <template v-else>
+                <div>
+                  <div class="mt-4">
+                    <ResourceCodeBlock
+                      :resource="item.config"
+                      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="`/zone-ingresses/${route.params.zoneIngress}/as/kubernetes?no-store`"
+                        @change="(data) => {
+                          copy((resolve) => resolve(data))
+                        }"
+                        @error="(e) => {
+                          copy((_resolve, reject) => reject(e))
+                        }"
+                      />
+                    </ResourceCodeBlock>
+                  </div>
+                </div>
+              </template>
+            </XLayout>
           </AppView>
         </template>
       </template>