From c27192755eb87b6f83304f399d736e95da67ae11 Mon Sep 17 00:00:00 2001
From: schogges <moritz.fleck@konghq.com>
Date: Fri, 6 Dec 2024 10:35:26 +0100
Subject: [PATCH] refactor(dataplane-summary-view): remove tab navigation

Signed-off-by: schogges <moritz.fleck@konghq.com>
---
 .../mesh/dataplanes/DataplaneSummary.feature  |   9 -
 .../app/data-planes/locales/en-us/index.yaml  |   1 +
 .../kuma-gui/src/app/data-planes/routes.ts    |  19 --
 .../views/DataPlaneSummaryOverviewView.vue    |  83 -------
 .../views/DataPlaneSummaryView.vue            | 231 ++++++++++++++++--
 5 files changed, 206 insertions(+), 137 deletions(-)

diff --git a/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature b/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature
index c7441ce1f..08df8a662 100644
--- a/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature
+++ b/packages/kuma-gui/features/mesh/dataplanes/DataplaneSummary.feature
@@ -47,12 +47,3 @@ Feature: Dataplane summary
       """
     When I visit the "/meshes/default/data-planes/test-data-plane-1?page=2&size=50" URL
     Then the "$summary" element exists
-
-  Scenario: Summary URL offers tabs
-    When I visit the "/meshes/default/data-planes/test-data-plane-1?page=2&size=50" URL
-    Then the URL contains "/summary-overview"
-    And the "[data-testid='data-plane-summary-overview-view']" element exists
-    Then I click the "[data-testid='data-plane-summary-config-view-tab'] a" element
-    Then the URL contains "/summary-config"
-    And the "[data-testid='data-plane-summary-config-view']" element exists
-    And the "[data-testid='k-code-block']" element exists
diff --git a/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml b/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml
index a7f18d14e..c1ec3d4aa 100644
--- a/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml
+++ b/packages/kuma-gui/src/app/data-planes/locales/en-us/index.yaml
@@ -50,6 +50,7 @@ data-planes:
         delegated-gateway-data-plane-summary-overview-view: Overview
         delegated-gateway-data-plane-summary-config-view: YAML
       gateway: 'Gateway'
+      config: YAML
       inbounds: 'Inbounds'
       inbound_name: '{service}'
       port: ':{port}'
diff --git a/packages/kuma-gui/src/app/data-planes/routes.ts b/packages/kuma-gui/src/app/data-planes/routes.ts
index 6f5ab29d1..2a4719f8d 100644
--- a/packages/kuma-gui/src/app/data-planes/routes.ts
+++ b/packages/kuma-gui/src/app/data-planes/routes.ts
@@ -66,26 +66,7 @@ export const routes = () => {
         props: () => ({
           routeName: `${fullPrefix}data-plane-summary-view`,
         }),
-        redirect: { name: `${fullPrefix}data-plane-summary-overview-view` },
         component: () => import('@/app/data-planes/views/DataPlaneSummaryView.vue'),
-        children: [
-          {
-            path: 'summary-overview',
-            name: `${fullPrefix}data-plane-summary-overview-view`,
-            props: () => ({
-              routeName: `${fullPrefix}data-plane-summary-overview-view`,
-            }),
-            component: () => import('@/app/data-planes/views/DataPlaneSummaryOverviewView.vue'),
-          },
-          {
-            path: 'summary-config',
-            name: `${fullPrefix}data-plane-summary-config-view`,
-            props: () => ({
-              routeName: `${fullPrefix}data-plane-summary-config-view`,
-            }),
-            component: () => import('@/app/data-planes/views/DataPlaneSummaryConfigView.vue'),
-          },
-        ],
       },
     ]
   }
diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryOverviewView.vue b/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryOverviewView.vue
index ce60a1b70..2b1a4c021 100644
--- a/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryOverviewView.vue
+++ b/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryOverviewView.vue
@@ -161,89 +161,6 @@
             </div>
           </div>
         </div>
-
-        <DataCollection
-          v-if="props.data.dataplaneType === 'standard'"
-          :items="props.data.dataplane.networking.inbounds"
-          v-slot="{ items : inbounds }"
-        >
-          <div>
-            <h3>{{ t('data-planes.routes.item.inbounds') }}</h3>
-
-            <div
-              class="mt-4 stack"
-            >
-              <div
-                v-for="(inbound, index) in inbounds"
-                :key="index"
-                class="inbound"
-              >
-                <h4>
-                  <TextWithCopyButton
-                    :text="inbound.tags['kuma.io/service']"
-                  >
-                    {{ t('data-planes.routes.item.inbound_name', { service: inbound.tags['kuma.io/service'] }) }}
-                  </TextWithCopyButton>
-                </h4>
-
-                <div
-                  class="mt-2 stack-with-borders"
-                >
-                  <DefinitionCard
-                    layout="horizontal"
-                  >
-                    <template #title>
-                      {{ t('http.api.property.state') }}
-                    </template>
-
-                    <template #body>
-                      <XBadge
-                        v-if="inbound.state === 'Ready'"
-                        appearance="success"
-                      >
-                        {{ t(`http.api.value.${inbound.state}`) }}
-                      </XBadge>
-
-                      <XBadge
-                        v-else
-                        appearance="danger"
-                      >
-                        {{ t(`http.api.value.${inbound.state}`) }}
-                      </XBadge>
-                    </template>
-                  </DefinitionCard>
-
-                  <DefinitionCard
-                    layout="horizontal"
-                  >
-                    <template #title>
-                      {{ t('http.api.property.tags') }}
-                    </template>
-
-                    <template #body>
-                      <TagList
-                        alignment="right"
-                        :tags="inbound.tags"
-                      />
-                    </template>
-                  </DefinitionCard>
-
-                  <DefinitionCard
-                    layout="horizontal"
-                  >
-                    <template #title>
-                      {{ t('http.api.property.address') }}
-                    </template>
-
-                    <template #body>
-                      <TextWithCopyButton :text="inbound.addressPort" />
-                    </template>
-                  </DefinitionCard>
-                </div>
-              </div>
-            </div>
-          </div>
-        </DataCollection>
       </div>
     </AppView>
   </RouteView>
diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue b/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue
index e54396407..807f9fc66 100644
--- a/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue
+++ b/packages/kuma-gui/src/app/data-planes/views/DataPlaneSummaryView.vue
@@ -2,9 +2,13 @@
   <RouteView
     :name="props.routeName"
     :params="{
+      mesh: '',
       dataPlane: '',
+      codeSearch: '',
+      codeFilter: false,
+      codeRegExp: false,
     }"
-    v-slot="{ route, t }"
+    v-slot="{ route, t, uri }"
   >
     <DataCollection
       :items="props.items"
@@ -48,34 +52,197 @@
                 </XAction>
               </h2>
             </template>
-            <XTabs
-              :selected="route.child()?.name"
-            >
-              <template
-                v-for="{ name } in route.children"
-                :key="name"
-                #[`${name}-tab`]
+
+            <XLayout type="stack">
+              <div
+                class="stack-with-borders"
               >
-                <XAction
-                  :to="{
-                    name,
-                  }"
+                <DefinitionCard
+                  layout="horizontal"
                 >
-                  {{ t(`data-planes.routes.item.navigation.${name}`) }}
-                </XAction>
-              </template>
-            </XTabs>
-
-            <RouterView
-              v-slot="{ Component }"
-            >
-              <component
-                :is="Component"
-                :data="item"
+                  <template #title>
+                    {{ t('http.api.property.status') }}
+                  </template>
+
+                  <template #body>
+                    <div
+                      class="status-with-reason"
+                    >
+                      <StatusBadge
+                        :status="item.status"
+                      />
+                      <DataCollection
+                        v-if="item.dataplaneType === 'standard'"
+                        :items="item.dataplane.networking.inbounds"
+                        :predicate="item => item.state !== 'Ready'"
+                        :empty="false"
+                        v-slot="{ items : inbounds }"
+                      >
+                        <KTooltip
+                          class="reason-tooltip"
+                        >
+                          <InfoIcon
+                            :color="KUI_COLOR_BACKGROUND_NEUTRAL"
+                            :size="KUI_ICON_SIZE_30"
+                          />
+                          <template #content>
+                            <ul>
+                              <li
+                                v-for="inbound in inbounds"
+                                :key="`${inbound.service}:${inbound.port}`"
+                              >
+                                {{ t('data-planes.routes.item.unhealthy_inbound', { service: inbound.service, port: inbound.port }) }}
+                              </li>
+                            </ul>
+                          </template>
+                        </KTooltip>
+                      </DataCollection>
+                    </div>
+                  </template>
+                </DefinitionCard>
+
+                <DefinitionCard
+                  layout="horizontal"
+                >
+                  <template #title>
+                    Type
+                  </template>
+
+                  <template #body>
+                    {{ t(`data-planes.type.${item.dataplaneType}`) }}
+                  </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
+                  v-if="can('use zones') && item.zone"
+                  layout="horizontal"
+                >
+                  <template
+                    #title
+                  >
+                    Zone
+                  </template>
+                  <template
+                    #body
+                  >
+                    <XAction
+                      :to="{
+                        name: 'zone-cp-detail-view',
+                        params: {
+                          zone: item.zone,
+                        },
+                      }"
+                    >
+                      {{ item.zone }}
+                    </XAction>
+                  </template>
+                </DefinitionCard>
+                <DefinitionCard
+                  layout="horizontal"
+                >
+                  <template #title>
+                    {{ t('http.api.property.modificationTime') }}
+                  </template>
+
+                  <template #body>
+                    {{ t('common.formats.datetime', { value: Date.parse(item.modificationTime) }) }}
+                  </template>
+                </DefinitionCard>
+              </div>
+
+              <div
+                v-if="item.dataplane.networking.gateway"
               >
-                <slot name="default" />
-              </component>
-            </RouterView>
+                <h3>{{ t('data-planes.routes.item.gateway') }}</h3>
+
+                <div
+                  class="mt-4"
+                >
+                  <div
+                    class="stack-with-borders"
+                  >
+                    <DefinitionCard
+                      layout="horizontal"
+                    >
+                      <template #title>
+                        {{ t('http.api.property.tags') }}
+                      </template>
+
+                      <template #body>
+                        <TagList
+                          alignment="right"
+                          :tags="item.dataplane.networking.gateway.tags"
+                        />
+                      </template>
+                    </DefinitionCard>
+
+                    <DefinitionCard
+                      layout="horizontal"
+                    >
+                      <template #title>
+                        {{ t('http.api.property.address') }}
+                      </template>
+
+                      <template #body>
+                        <TextWithCopyButton
+                          :text="`${item.dataplane.networking.address}`"
+                        />
+                      </template>
+                    </DefinitionCard>
+                  </div>
+                </div>
+              </div>
+            </XLayout>
+
+            <div>
+              <h3>
+                {{ t('data-planes.routes.item.config') }}
+              </h3>
+
+              <div class="mt-4">
+                <ResourceCodeBlock
+                  :resource="item.config"
+                  language="yaml"
+                  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="uri(sources, `/meshes/:mesh/dataplanes/:name/as/kubernetes`, {
+                      mesh: route.params.mesh,
+                      name: route.params.dataPlane,
+                    }, {
+                      cacheControl: 'no-store',
+                    })"
+                    @change="(data) => {
+                      copy((resolve) => resolve(data))
+                    }"
+                    @error="(e) => {
+                      copy((_resolve, reject) => reject(e))
+                    }"
+                  />
+                </ResourceCodeBlock>
+              </div>
+            </div>
           </AppView>
         </template>
       </template>
@@ -84,7 +251,19 @@
 </template>
 
 <script lang="ts" setup>
+import { KUI_COLOR_BACKGROUND_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import { InfoIcon } from '@kong/icons'
+
 import { DataplaneOverview } from '../data'
+import { sources } from '../sources'
+import { useCan } from '@/app/application'
+import DefinitionCard from '@/app/common/DefinitionCard.vue'
+import StatusBadge from '@/app/common/StatusBadge.vue'
+import TagList from '@/app/common/TagList.vue'
+import TextWithCopyButton from '@/app/common/TextWithCopyButton.vue'
+import ResourceCodeBlock from '@/app/x/components/x-code-block/ResourceCodeBlock.vue'
+
+const can = useCan()
 
 const props = defineProps<{
   items: DataplaneOverview[]