feat(ui): 411 overview dashboard core services

ui/src/lib/components/CoreServicesWidget/component.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { type CoreServiceType } from '$lib/types'
+  import { Cube, Information } from 'carbon-icons-svelte'
+
+  export let services: CoreServiceType[] = []
+  export let sortedCoreServices: CoreServiceType[] = []
+
+  const coreServicesMapping: Record<string, string> = {
+    authservice: 'Authservice',
+    grafana: 'Grafana',
+    keycloak: 'KeyCloak',
+    loki: 'Loki',
+    'metrics-server': 'Metrics Server',
+    neuvector: 'Neuvector',
+    'prometheus-stack': 'Prometheus Stack',
+    vector: 'Vector',
+    velero: 'Velero',
+    'uds-runtime': 'UDS Runtime',
+  }
+
+  const coreServiceKeys = Object.keys(coreServicesMapping)
+
+  let hasNoCoreServices: boolean = false
+  $: hasNoCoreServices = services.every((service) => !coreServiceKeys.includes(service.metadata.name))
+
+  const sortServices = (a: CoreServiceType, b: CoreServiceType) => {
+    if (a.metadata.name < b.metadata.name) {
+      return -1
+    }
+
+    if (a.metadata.name > b.metadata.name) {
+      return 1
+    }
+
+    return 0
+  }
+
+  $: {
+    sortedCoreServices = services
+      .filter((service) => coreServiceKeys.includes(service.metadata.name))
+      .sort(sortServices)
+  }
+</script>
+
+<div class="core-services">
+  <div class="core-services__header">
+    <h2 class="core-services__header-title">Core Services</h2>
+
+    <Information class="ml-2 w-4 h-4 dark:text-gray-400 text-blue-500" />
+  </div>
+
+  {#if hasNoCoreServices}
+    <span class="flex self-center">No Core Services running</span>
+  {:else}
+    <div class="core-services__rows">
+      {#each sortedCoreServices as { metadata: { name } }}
+        <div class="core-services__rows-item">
+          <div class="w-10/12 flex items-center space-x-2">
+            <div class="core-services__name-icon">
+              <Cube size={16} class="text-gray-400" />
+            </div>
+
+            <div class="truncate">{coreServicesMapping[name]}</div>
+          </div>
+
+          <div class="w-2/12 text-green-400">Running</div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="postcss">
+  .core-services {
+    @apply px-6 pb-6 w-full rounded-md dark:bg-gray-800 flex flex-col;
+  }
+
+  .core-services__header {
+    @apply flex items-center h-14;
+  }
+
+  .core-services__header-title {
+    @apply text-lg dark:text-white font-semibold;
+  }
+
+  .core-services__rows {
+    @apply flex flex-col text-sm;
+  }
+
+  .core-services__rows-item {
+    @apply flex dark:border-gray-700 items-center;
+    border-bottom-width: 1px;
+  }
+
+  .core-services__name-icon {
+    @apply h-7 w-7 rounded-lg bg-gray-700 flex items-center justify-center my-2;
+  }
+
+  .core-services__button-link {
+    @apply text-sm text-blue-500 dark:text-blue-400 flex items-center space-x-1;
+  }
+</style>

ui/src/lib/components/index.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later OR LicenseRef-Defense-Unicorns-Commercial
 
 export { default as AnsiDisplay } from './AnsiDisplay/component.svelte'
+export { default as CoreServicesWidget } from './CoreServicesWidget/component.svelte'
 export { default as Card } from './k8s/Card/component.svelte'
 export { default as DataTable } from './k8s/DataTable/component.svelte'
 export { default as Drawer } from './k8s/Drawer/component.svelte'

ui/src/lib/features/k8s/cluster-overview/component.svelte

@@ -4,9 +4,10 @@
 <script lang="ts">
   import { onMount } from 'svelte'
 
-  import { ProgressBarWidget, WithRightIconWidget } from '$components'
+  import { CoreServicesWidget, ProgressBarWidget, WithRightIconWidget } from '$components'
   import EventsOverviewWidget from '$components/k8s/Event/EventsOverviewWidget.svelte'
   import { createStore } from '$lib/features/k8s/events/store'
+  import { type CoreServiceType } from '$lib/types'
   import { resourceDescriptions } from '$lib/utils/descriptions'
   import { Analytics, DataVis_1 } from 'carbon-icons-svelte'
   import Chart from 'chart.js/auto'
@@ -39,11 +40,18 @@
   let onMessageCount = 0
   let myChart: Chart
   const description = resourceDescriptions['Events']
+  let services: CoreServiceType[] = []
 
   onMount(() => {
     let ctx = document.getElementById('chartjs-el') as HTMLCanvasElement
-    const path: string = `/api/v1/monitor/cluster-overview`
-    const overview = new EventSource(path)
+    const overviewPath: string = '/api/v1/monitor/cluster-overview'
+    const servicesPath: string = '/api/v1/resources/configs/uds-packages?fields=.metadata.name'
+    const overview = new EventSource(overviewPath)
+    const servicesEvent = new EventSource(servicesPath)
+
+    servicesEvent.onmessage = (event) => {
+      services = JSON.parse(event.data) as CoreServiceType[]
+    }
 
     overview.onmessage = (event) => {
       clusterData = JSON.parse(event.data) as ClusterData
@@ -71,7 +79,7 @@
           myChart = new Chart(ctx, { type: 'line', data: chartData, options: chartOptions })
         }
 
-        // on each message manually update the grap
+        // on each message manually update the graph
         myChart.data.labels = historicalUsage.map((point) => [formatTime(point.Timestamp)])
         myChart.data.datasets[0].data = historicalUsage.map((point) => point.Memory / (1024 * 1024 * 1024))
         myChart.data.datasets[1].data = historicalUsage.map((point) => point.CPU / 1000)
@@ -94,7 +102,7 @@
 </script>
 
 <div class="p-4 dark:text-white pt-0">
-  <h1 class="text-2xl font-bold mb-4">Cluster Overview</h1>
+  <h1 class="text-xl font-bold mb-4">Cluster Overview</h1>
   <div class="grid grid-cols-1 min-[1024px]:grid-cols-2 min-[1510px]:grid-cols-4 gap-4">
     <WithRightIconWidget
       statText={clusterData.totalPods.toString()}
@@ -127,6 +135,20 @@
     />
   </div>
 
+  <div class="mt-8 flex flex-col xl:flex-row xl:space-x-4">
+    <div class="w-full xl:w-1/2">
+      <div class="flex p-5 bg-gray-800 rounded-lg overflow-hidden shadow h-full items-center justify-center">
+        Packages Widget Coming Soon...
+      </div>
+    </div>
+
+    <div class="w-full xl:w-1/2 max-xl:mt-4">
+      <div class="p-5 bg-gray-800 rounded-lg overflow-hidden shadow">
+        <CoreServicesWidget {services} />
+      </div>
+    </div>
+  </div>
+
   <div class="mt-8">
     <h2 class="text-xl font-bold mb-4">Resource Usage Over Time</h2>
 

ui/src/lib/types.ts

@@ -27,3 +27,9 @@ export type PeprEvent = {
   res?: Record<string, unknown>
   details?: PeprDetails | undefined
 }
+
+export type CoreServiceType = {
+  metadata: {
+    name: string
+  }
+}

ui/tests/navigation.spec.ts

@@ -29,6 +29,9 @@ test.describe('Navigation', async () => {
     // Check for Events Widget
     await expect(page.getByText('Event Logs')).toBeVisible()
     await expect(page.getByText('VIEW EVENTS')).toBeVisible()
+
+    // Check for the Core Services
+    await expect(page.getByRole('heading', { name: 'Core Services' })).toBeVisible()
   })
 
   test('Ensure Overview page and pod page show same number of pods', async ({ page }) => {