Merge branch 'master' into feat/summaries/add_more_info

kumahq · Feb 24, 2025 · d05c9b5 · d05c9b5
2 parents f86d820 + 3981a1c
commit d05c9b5
Show file tree

Hide file tree

Showing 29 changed files with 705 additions and 510 deletions.
diff --git a/packages/kuma-gui/features/application/Warnings.feature b/packages/kuma-gui/features/application/Warnings.feature
@@ -2,8 +2,8 @@ Feature: application / warnings
 
   Background:
     Given the CSS selectors
-      | Alias                     | Selector                                         |
-      | memory-store-type-warning | [data-testid='warning-GLOBAL_STORE_TYPE_MEMORY'] |
+      | Alias                     | Selector                                              |
+      | memory-store-type-warning | [data-testid='notification-global-store-type-memory'] |
 
   Scenario: Using the memory store type shows a warning
     Given the environment

diff --git a/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsBuiltinGateway.feature b/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsBuiltinGateway.feature
@@ -5,7 +5,7 @@ Feature: Dataplane details for built-in gateway
       | Alias             | Selector                                                           |
       | detail-view       | [data-testid='data-plane-detail-tabs-view']                        |
       | policies-view     | [data-testid='data-plane-policies-view']                           |
-      | warnings          | [data-testid='dataplane-warnings']                                 |
+      | warnings          | [data-testid^='notification-DPP_NO_MTLS']                          |
       | details           | [data-testid='dataplane-details']                                  |
       | route-item        | [data-testid='builtin-gateway-dataplane-policies'] .accordion-item |
       | route-item-button | $route-item:nth-child(1) [data-testid='accordion-item-button']     |

diff --git a/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsDelegatedGateway.feature b/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsDelegatedGateway.feature
@@ -4,7 +4,7 @@ Feature: Dataplane details for delegated gateway
     Given the CSS selectors
       | Alias       | Selector                                    |
       | detail-view | [data-testid='data-plane-detail-tabs-view'] |
-      | warnings    | [data-testid='dataplane-warnings']          |
+      | warnings    | [data-testid^='notification-DPP_NO_MTLS']   |
       | details     | [data-testid='dataplane-details']           |
 
   Scenario: Overview tab has expected content
@@ -56,7 +56,7 @@ Feature: Dataplane details for delegated gateway
       |       193.107.134.106 |
       | kuma.io/protocol:http |
       | kuma.io/zone:zone-1   |
-    And the "$warnings" element doesn't exists
+    And the "$warnings" element doesn't exist
 
   Scenario: Overview tab shows warning when no mTLS is set
     And the URL "/meshes/default/dataplanes/dataplane-gateway_delegated-1/_overview" responds with

diff --git a/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsStandardProxy.feature b/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsStandardProxy.feature
@@ -5,7 +5,6 @@ Feature: Dataplane details for standard Data Plane Proxy
       | Alias         | Selector                                    |
       | detail-view   | [data-testid='data-plane-detail-tabs-view'] |
       | clusters-view | [data-testid='data-plane-clusters-view']    |
-      | warnings      | [data-testid='dataplane-warnings']          |
       | details       | [data-testid='dataplane-details']           |
 
   Scenario: Overview tab has expected content

diff --git a/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsTraffic.feature b/packages/kuma-gui/features/mesh/dataplanes/DataplaneDetailsTraffic.feature
@@ -4,7 +4,7 @@ Feature: mesh / dataplanes / DataplaneDetailsTraffic
     Given the CSS selectors
       | Alias           | Selector                                            |
       | detail-view     | [data-testid='data-plane-detail-tabs-view']         |
-      | loading-warning | [data-testid='warning-stats-loading']               |
+      | loading-warning | [data-testid^='notification-warning-stats-loading'] |
       | traffic         | [data-testid='dataplane-traffic']                   |
       | outbounds       | [data-testid='dataplane-outbounds']                 |
       | inactiveToggle  | [data-testid='dataplane-outbounds-inactive-toggle'] |

diff --git a/packages/kuma-gui/features/mesh/dataplanes/Warnings.feature b/packages/kuma-gui/features/mesh/dataplanes/Warnings.feature
@@ -2,11 +2,11 @@ Feature: mesh / dataplanes / warnings
 
   Background:
     Given the CSS selectors
-      | Alias                     | Selector                                                          |
-      | expired-cert-warning      | [data-testid='warning-CERT_EXPIRED']                              |
-      | unsupported-kuma-warning  | [data-testid='warning-INCOMPATIBLE_UNSUPPORTED_KUMA_DP']          |
-      | unsupported-envoy-warning | [data-testid='warning-INCOMPATIBLE_UNSUPPORTED_ENVOY']            |
-      | unsupported-zone-warning  | [data-testid='warning-INCOMPATIBLE_ZONE_CP_AND_KUMA_DP_VERSIONS'] |
+      | Alias                     | Selector                                                                |
+      | expired-cert-warning      | [data-testid^='notification-CERT_EXPIRED']                              |
+      | unsupported-kuma-warning  | [data-testid^='notification-INCOMPATIBLE_UNSUPPORTED_KUMA_DP']          |
+      | unsupported-envoy-warning | [data-testid^='notification-INCOMPATIBLE_UNSUPPORTED_ENVOY']            |
+      | unsupported-zone-warning  | [data-testid^='notification-INCOMPATIBLE_ZONE_CP_AND_KUMA_DP_VERSIONS'] |
 
   Scenario: With an expired certificate a cert warning is shown
     Given the URL "/meshes/default/dataplanes/dpp-1/_overview" responds with

diff --git a/packages/kuma-gui/features/onboarding/Index.feature b/packages/kuma-gui/features/onboarding/Index.feature
@@ -5,7 +5,7 @@ Feature: onboarding / index
       | Alias                   | Selector                                |
       | skip-button             | [data-testid='onboarding-skip-button']  |
       | environment-text        | [data-testid='kuma-environment']        |
-      | onboarding-notification | [data-testid='onboarding-notification'] |
+      | onboarding-notification | [data-testid='notification-onboarding'] |
 
   Scenario: Visiting the homepage with a fresh install shows the onboarding notification
     Given the environment

diff --git a/packages/kuma-gui/features/zones/zone-cps/Warnings.feature b/packages/kuma-gui/features/zones/zone-cps/Warnings.feature
@@ -4,7 +4,7 @@ Feature: zones / warnings
     Given the CSS selectors
       | Alias                    | Selector                                                                       |
       | warning-no-subscriptions | [data-testid='warning-no-subscriptions']                                       |
-      | warning-zone-memory      | [data-testid='warning-ZONE_STORE_TYPE_MEMORY']                                 |
+      | warning-zone-memory      | [data-testid^='notification-ZONE_STORE_TYPE_MEMORY']                           |
       | zone-cp-table-row        | [data-testid='zone-cp-collection'] tbody tr                                    |
       | warning-trigger          | $zone-cp-table-row:nth-child(1) [data-testid="warning"]                        |
       | warning-memory           | $zone-cp-table-row:nth-child(1) [data-testid="warning-ZONE_STORE_TYPE_MEMORY"] |

diff --git a/packages/kuma-gui/src/app/application/components/app-view/AppView.vue b/packages/kuma-gui/src/app/application/components/app-view/AppView.vue
@@ -2,72 +2,111 @@
   <div
     class="app-view"
   >
-    <nav
-      v-if="!hasParent && _breadcrumbs.length > 0"
-      aria-label="Breadcrumb"
+    <DataSource
+      :src="`/me/~notifications`"
+      v-slot="{ data: dismissed }"
     >
-      <XBreadcrumbs
-        :items="_breadcrumbs"
-      />
-    </nav>
-
-    <section
-      :class="{
-        'is-fullscreen': props.fullscreen,
-      }"
-    >
-      <header
-        v-if="slots.title || slots.actions"
-        class="app-view-title-bar"
+      <component
+        :is="props.notifications ? `XNotificationHub` : `XAnonymous`"
+        v-if="dismissed"
+        :uri="id"
+        :dismissed="dismissed"
+        v-slot="hub"
       >
-        <KongIcon v-if="props.fullscreen" />
+        <nav
+          v-if="!hasParent && _breadcrumbs.length > 0"
+          aria-label="Breadcrumb"
+        >
+          <XBreadcrumbs
+            :items="_breadcrumbs"
+          />
+        </nav>
 
-        <template
-          v-if="summary.length > 0"
+        <section
+          :class="{
+            'is-fullscreen': props.fullscreen,
+          }"
         >
-          <XTeleportTemplate
-            :to="{ name: summary }"
+          <header
+            v-if="slots.title || slots.actions"
+            class="app-view-title-bar"
           >
-            <slot name="title" />
-          </XTeleportTemplate>
-        </template>
-        <template
-          v-else
-        >
-          <slot name="title" />
-        </template>
+            <KongIcon v-if="props.fullscreen" />
 
-        <div
-          class="actions"
-        >
-          <XTeleportSlot
-            v-if="slots.title"
-            name="app-view-docs"
-          />
-          <slot name="actions">
-            <XTeleportSlot :name="`${routeView.name}-actions`" />
-          </slot>
-        </div>
-      </header>
-
-      <aside
-        v-if="slots.notifications"
-      >
-        <XAlert
-          class="mb-4"
-          variant="warning"
-        >
-          <slot name="notifications" />
-        </XAlert>
-      </aside>
-      <XLayout
-        type="stack"
-      >
-        <slot
-          name="default"
-        />
-      </XLayout>
-    </section>
+            <template
+              v-if="summary.length > 0"
+            >
+              <XTeleportTemplate
+                :to="{ name: summary }"
+              >
+                <slot name="title" />
+              </XTeleportTemplate>
+            </template>
+            <template
+              v-else
+            >
+              <slot name="title" />
+            </template>
+
+            <div
+              class="actions"
+            >
+              <XTeleportSlot
+                v-if="slots.title"
+                name="app-view-docs"
+              />
+              <slot name="actions">
+                <XTeleportSlot
+                  :name="`${routeView.name}-actions`"
+                />
+              </slot>
+            </div>
+          </header>
+
+          <XLayout
+            type="stack"
+          >
+            <aside
+              v-if="hub?.notifications?.size > 0"
+            >
+              <DataSink
+                :src="`/me/~notifications`"
+              >
+                <XLayout
+                  type="stack"
+                >
+                  <template
+                    v-for="[variant, value] in hub.notifications"
+                    :key="variant"
+                  >
+                    <XAlert
+                      :variant="variant"
+                    >
+                      <ul
+                        class="notifications"
+                      >
+                        <li
+                          v-for="notification in value"
+                          :key="notification"
+                          :data-testid="`notification-${notification}`"
+                        >
+                          <XNotification
+                            :uri="notification"
+                          />
+                        </li>
+                      </ul>
+                    </XAlert>
+                  </template>
+                </XLayout>
+              </DataSink>
+            </aside>
+            <slot
+              name="default"
+            />
+          </XLayout>
+        </section>
+      </component>
+    </DataSource>
   </div>
   <XTeleportTemplate
     v-if="props.docs.length > 0"
@@ -91,6 +130,7 @@ import { provide, inject, watch, ref, onBeforeUnmount } from 'vue'
 
 import { ROUTE_VIEW_PARENT } from '../route-view/index'
 import type { RouteView } from '../route-view/RouteView.vue'
+import { uniqueId } from '@/app/application'
 import type { BreadcrumbItem } from '@kong/kongponents'
 type AppView = {
   addBreadcrumbs: (items: BreadcrumbItem[], sym: symbol) => void
@@ -103,13 +143,16 @@ const props = withDefaults(defineProps<{
   breadcrumbs?: BreadcrumbItem[] | null
   fullscreen?: boolean
   docs?: string
+  notifications?: boolean
 }>(), {
   breadcrumbs: null,
   fullscreen: false,
   docs: '',
+  notifications: false,
 })
 const slots = defineSlots()
 
+const id = uniqueId('app-view')
 const routeView = inject<RouteView>(ROUTE_VIEW_PARENT)!
 
 const summary: string = inject('app-summary-view', '')
@@ -213,4 +256,14 @@ onBeforeUnmount(() => {
   align-items: center;
   gap: $kui-space-60;
 }
+.notifications {
+  padding: 0;
+}
+.notifications li {
+  margin-left: $kui-space-60;
+}
+.notifications li:only-child {
+  list-style-type: none;
+  padding: 0;
+}
 </style>
diff --git a/packages/kuma-gui/src/app/application/services/storage/index.ts b/packages/kuma-gui/src/app/application/services/storage/index.ts
@@ -1,7 +1,7 @@
 export default (prefix: string = 'kumahq-app', storage: Storage = window.localStorage) => {
-  const get = async (key: string): Promise<object> => {
+  const get = async (key: string, d = {}): Promise<object> => {
     try {
-      return JSON.parse(storage.getItem(`${prefix}:${key}`) ?? '{}')
+      return JSON.parse(storage.getItem(`${prefix}:${key}`) ?? JSON.stringify(d))
     } catch (e) {
       console.error(e)
     }

diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue b/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -19,30 +19,26 @@
       })"
       v-slot="{ data: traffic, error, refresh }"
     >
-      <AppView>
-        <template
-          v-if="warnings.length > 0 || error"
-          #notifications
+      <AppView
+        :notifications="true"
+      >
+        <XNotification
+          v-for="warning in warnings"
+          :key="warning.kind"
+          :data-testid="`warning-${warning.kind}`"
+          :uri="`${warning.kind}.${props.data.id}`"
         >
-          <ul data-testid="dataplane-warnings">
-            <li
-              v-for="warning in warnings"
-              :key="warning.kind"
-              :data-testid="`warning-${warning.kind}`"
-            >
-              <XI18n
-                :path="`common.warnings.${warning.kind}`"
-                :params="warning.payload"
-              />
-            </li>
-            <li
-              v-if="error"
-              :data-testid="`warning-stats-loading`"
-            >
-              The below view is not enhanced with runtime stats (Error loading stats: <strong>{{ error.toString() }}</strong>)
-            </li>
-          </ul>
-        </template>
+          <XI18n
+            :path="`common.warnings.${warning.kind}`"
+            :params="warning.payload"
+          />
+        </XNotification>
+        <XNotification
+          v-if="error"
+          :uri="`warning-stats-loading.${props.data.id}`"
+        >
+          The below view is not enhanced with runtime stats (Error loading stats: <strong>{{ error.toString() }}</strong>)
+        </XNotification>
 
         <XLayout
           type="stack"
@@ -514,7 +510,7 @@
               <template #title>
                 <h2>{{ t('data-planes.routes.item.subscriptions.title') }}</h2>
               </template>
-              
+
               <AppCollection
                 :headers="[
                   { ...me.get('headers.instanceId'), label: t('http.api.property.instanceId'), key: 'instanceId' },