WIP

Signed-off-by: John Cowen <[email protected]>

src/app/main-overview/components/MainOverview.vue → src/app/control-planes/components/ControlPlaneStatus.vue

@@ -85,21 +85,18 @@
 </template>
 
 <script lang="ts" setup>
-import { KCard } from '@kong/kongponents'
-
 import { GlobalInsightSource } from '../sources'
-import { useCan } from '@/app/application'
+import { useCan, useI18n } from '@/app/application'
 import ErrorBlock from '@/app/common/ErrorBlock.vue'
 import LoadingBlock from '@/app/common/LoadingBlock.vue'
 import ResourceStatus from '@/app/common/ResourceStatus.vue'
-import { useI18n } from '@/utilities'
 
 const { t } = useI18n()
 const can = useCan()
 </script>
 <style lang="scss" scoped>
 .card-header {
   margin-bottom: $kui-space-50;
-  height: 42px;
+  min-height: 42px;
 }
 </style>

src/app/control-planes/index.ts

@@ -1,24 +1,55 @@
+import ControlPlaneStatus from './components/ControlPlaneStatus.vue'
+import { features } from './features'
+import { routes } from './routes'
 import { sources } from './sources'
 import type { ServiceDefinition } from '@/services/utils'
-import { token } from '@/services/utils'
+
+import { token, createInjections } from '@/services/utils'
 
 type Token = ReturnType<typeof token>
 
 const $ = {
   sources: token<ReturnType<typeof sources>>('control-planes.sources'),
+  ControlPlaneStatus: token<typeof ControlPlaneStatus>('control-planes.components.ControlPlaneStatus'),
 }
 export const services = (app: Record<string, Token>): ServiceDefinition[] => {
   return [
     [$.sources, {
       service: sources,
       arguments: [
         app.env,
+        app.api,
       ],
       labels: [
         app.sources,
       ],
     }],
+    [$.ControlPlaneStatus, {
+      service: () => {
+        return ControlPlaneStatus
+      },
+    }],
+    [token('control-planes.routes'), {
+      service: routes,
+      labels: [
+        app.routes,
+      ],
+    }],
+    [token('control-planes.features'), {
+      service: features,
+      arguments: [
+        app.env,
+      ],
+      labels: [
+        app.features,
+      ],
+    }],
   ]
 }
 
 export const TOKENS = $
+export const [
+  useControlPlaneStatus,
+] = createInjections(
+  $.ControlPlaneStatus,
+)

src/app/main-overview/routes.ts → src/app/control-planes/routes.ts

@@ -5,7 +5,7 @@ export const routes = (): RouteRecordRaw[] => {
     {
       path: `${prefix}`,
       name: 'home',
-      component: () => import('@/app/main-overview/views/MainOverviewView.vue'),
+      component: () => import('@/app/control-planes/views/item/IndexView.vue'),
     },
   ]
 }

src/app/control-planes/sources.ts

@@ -1,20 +1,26 @@
-import { DataSourceResponse } from '@/app/application/services/data-source/DataSourcePool'
+import type { DataSourceResponse } from '@/app/application'
 import type Env from '@/services/env/Env'
+import type KumaApi from '@/services/kuma-api/KumaApi'
+import type { GlobalInsight } from '@/types/index.d'
 
 export type ControlPlaneAddresses = {
   http: string
   kds: string
 }
 
 export type ControlPlaneAddressesSource = DataSourceResponse<ControlPlaneAddresses>
-export const sources = (env: Env['var']) => {
+export type GlobalInsightSource = DataSourceResponse<GlobalInsight>
+
+export const sources = (env: Env['var'], api: KumaApi) => {
   return {
-    '/control-plane/addresses': async (_params: {}, source: { close: () => void }): Promise<ControlPlaneAddresses> => {
-      source.close()
+    '/control-plane/addresses': async (): Promise<ControlPlaneAddresses> => {
       return {
         http: env('KUMA_API_URL'),
         kds: 'grpcs://<global-kds-address>:5685',
       }
     },
+    '/global-insight': () => {
+      return api.getGlobalInsight()
+    },
   }
 }

src/app/main-overview/views/MainOverviewView.vue → src/app/control-planes/views/item/IndexView.vue

@@ -17,7 +17,7 @@
         class="stack"
         data-testid="detail-view-details"
       >
-        <MainOverview />
+        <ControlPlaneStatus />
 
         <div class="columns">
           <KCard v-if="can('use zones')">
@@ -107,21 +107,23 @@ import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import { AddIcon } from '@kong/icons'
 
 import ErrorBlock from '@/app/common/ErrorBlock.vue'
+import { useControlPlaneStatus } from '@/app/control-planes'
 import MeshInsightsList from '@/app/meshes/components/MeshInsightsList.vue'
-import { MeshInsightCollectionSource } from '@/app/meshes/sources'
+import type { MeshInsightCollectionSource } from '@/app/meshes/sources'
 import ZoneControlPlanesList from '@/app/zones/components/ZoneControlPlanesList.vue'
-import { ZoneOverviewCollectionSource } from '@/app/zones/sources'
-import { useMainOverview } from '@/components'
-const MainOverview = useMainOverview()
+import type { ZoneOverviewCollectionSource } from '@/app/zones/sources'
+
+const ControlPlaneStatus = useControlPlaneStatus()
 </script>
 <style lang="scss" scoped>
 .card-header {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   margin-bottom: $kui-space-50;
   // Makes card header the same height as buttons so that they align with or without buttons present.
-  height: 42px;
+  min-height: 42px;
 }
 
 .card-title {

src/components/index.ts

@@ -1,5 +1,4 @@
 import MainView from '@/app/application/components/app-view/MainView.vue'
-import MainOverview from '@/app/main-overview/components/MainOverview.vue'
 import MeshDetails from '@/app/meshes/components/MeshDetails.vue'
 import KubernetesGraph from '@/app/onboarding/components/graphs/KubernetesGraph.vue'
 import MemoryGraph from '@/app/onboarding/components/graphs/MemoryGraph.vue'
@@ -9,7 +8,6 @@ import StandaloneGraph from '@/app/onboarding/components/graphs/StandaloneGraph.
 import { constant, createInjections } from '@/services/utils'
 
 export const TOKENS = {
-  MainOverview: constant(MainOverview, { description: 'MainOverview' }),
   KubernetesGraph: constant(KubernetesGraph, { description: 'KubernetesGraph' }),
   PostgresGraph: constant(PostgresGraph, { description: 'PostgresGraph' }),
   MemoryGraph: constant(MemoryGraph, { description: 'MemoryGraph' }),
@@ -19,7 +17,6 @@ export const TOKENS = {
   MeshDetails: constant(MeshDetails, { description: 'MeshDetails' }),
 }
 export const [
-  useMainOverview,
   useKubernetesGraph,
   usePostgresGraph,
   useMemoryGraph,
@@ -28,7 +25,6 @@ export const [
   useMainView,
   useMeshDetails,
 ] = createInjections(
-  TOKENS.MainOverview,
   TOKENS.KubernetesGraph,
   TOKENS.PostgresGraph,
   TOKENS.MemoryGraph,

src/locales/en-us/index.ts

@@ -1,10 +1,10 @@
 import common from './common/index.yaml'
 import components from './components/index.yaml'
 import http from './http/index.yaml'
+import controlplanes from '@/app/control-planes/locales/en-us/index.yaml'
 import dataplanes from '@/app/data-planes/locales/en-us/index.yaml'
 import diagnostics from '@/app/diagnostics/locales/en-us/index.yaml'
 import gateways from '@/app/gateways/locales/en-us/index.yaml'
-import mainoverview from '@/app/main-overview/locales/en-us/index.yaml'
 import meshes from '@/app/meshes/locales/en-us/index.yaml'
 import onboarding from '@/app/onboarding/locales/en-us/index.yaml'
 import policies from '@/app/policies/locales/en-us/index.yaml'
@@ -17,7 +17,7 @@ export default {
   ...common,
   ...http,
   ...components,
-  ...mainoverview,
+  ...controlplanes,
   ...onboarding,
   ...diagnostics,
   ...meshes,

src/services/production.ts

@@ -4,7 +4,6 @@ import createDisabledLogger from './logger/DisabledLogger'
 import { TOKENS as _TOKENS } from './tokens'
 import { services as application, TOKENS as APPLICATION } from '@/app/application'
 import { services as kuma } from '@/app/kuma'
-import { services as mainOverview } from '@/app/main-overview'
 import { services as me } from '@/app/me'
 import { services as meshes } from '@/app/meshes'
 import { services as vue, TOKENS as VUE } from '@/app/vue'
@@ -85,10 +84,6 @@ export const services: ServiceConfigurator<SupportedTokens> = ($) => [
   //
 
   // service-mesh
-  ...mainOverview({
-    ...$,
-    routes: $.routesLabel,
-  }),
   ...zones({
     ...$,
     routes: $.routesLabel,

test-support/main.ts

@@ -6,6 +6,7 @@ import { beforeEach, afterEach, beforeAll } from 'vitest'
 
 import { TOKENS as TEST, services as testing } from './index'
 import { TOKENS as COMPONENT_TOKENS } from '../src/components'
+import { services as controlPlanes } from '@/app/control-planes'
 import { services as onboarding } from '@/app/onboarding'
 import { TOKENS as DEV, services as development } from '@/services/development'
 import { TOKENS as PROD, services as production } from '@/services/production'
@@ -22,6 +23,10 @@ const $ = {
 (async () => {
   build(
     production($),
+    controlPlanes({
+      ...$,
+      routes: $.routesLabel,
+    }),
     onboarding({
       ...$,
       routes: $.routesLabel,