Add links to object resource to cluster events tables (#7947)

This adds an additional column to the cluster explorer events table, so that there is one column with the object, one with the message and one with event name.

The object column is linked to the object resource. The event name column is linked to the event detail page.

Signed-off-by: Bastian Hofmann <mail@bastianhofmann.de>

shell/components/formatter/InvolvedObjectLink.vue

@@ -0,0 +1,45 @@
+<script>
+
+import LinkName from '@shell/components/formatter/LinkName.vue';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
+
+export default {
+  components: { LinkName },
+
+  props: {
+    value: {
+      type:     null,
+      required: true
+    },
+    product: {
+      type:    String,
+      default: EXPLORER,
+    }
+  },
+
+  computed: {
+    kind() {
+      const versionParts = this.value.apiVersion.split('/');
+
+      if (versionParts.length === 1) {
+        return this.value.kind.toLowerCase();
+      }
+
+      return `${ versionParts[0] }.${ this.value.kind.toLowerCase() }`;
+    }
+  }
+};
+</script>
+
+<template>
+  <span v-if="value.kind && value.name">
+    <LinkName
+      :type="kind"
+      :value="`${value.kind} ${value.name}`"
+      :object-id="value.name"
+      :namespace="value.namespace"
+      :product="product"
+      :show-type="true"
+    />
+  </span>
+</template>

shell/components/formatter/LinkName.vue

@@ -18,6 +18,11 @@ export default {
       default: '',
     },
 
+    objectId: {
+      type:    String,
+      default: '',
+    },
+
     product: {
       type:    String,
       default: EXPLORER,
@@ -31,7 +36,7 @@ export default {
       const params = {
         resource:  this.type,
         namespace: this.namespace,
-        id:        this.value,
+        id:        this.objectId ? this.objectId : this.value,
         product:   this.product || EXPLORER,
       };
 

shell/config/product/explorer.js

@@ -18,7 +18,7 @@ import {
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
   HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA,
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
-  DURATION, LAST_SEEN_TIME,
+  DURATION, MESSAGE, REASON, LAST_SEEN_TIME, EVENT_TYPE, OBJECT,
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
@@ -192,7 +192,7 @@ export function init(store) {
   ]);
   headers(INGRESS, [STATE, NAME_COL, NAMESPACE_COL, INGRESS_TARGET, INGRESS_DEFAULT_BACKEND, INGRESS_CLASS, AGE]);
   headers(SERVICE, [STATE, NAME_COL, NAMESPACE_COL, TARGET_PORT, SELECTOR, SPEC_TYPE, AGE]);
-  headers(EVENT, [STATE, { ...LAST_SEEN_TIME, defaultSort: true }, 'EventType', 'Reason', 'Object', 'Subobject', 'Source', 'Message', 'First Seen', 'Count', 'Name', 'Namespace']);
+  headers(EVENT, [STATE, { ...LAST_SEEN_TIME, defaultSort: true }, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, 'First Seen', 'Count', NAME_COL, NAMESPACE_COL]);
   headers(HPA, [STATE, NAME_COL, HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA, AGE]);
   headers(WORKLOAD, [STATE, NAME_COL, NAMESPACE_COL, TYPE, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE]);
   headers(WORKLOAD_TYPES.DEPLOYMENT, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Up-to-date', 'Available', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE]);

shell/config/table-headers.js

@@ -481,6 +481,14 @@ export const REASON = {
   value:    'reason',
   sort:     ['reason']
 };
+export const OBJECT = {
+  name:          'object',
+  labelKey:      'tableHeaders.object',
+  value:         'involvedObject',
+  sort:          ['involvedObject.kind', 'involvedObject.name'],
+  canBeVariable: true,
+  formatter:     'InvolvedObjectLink',
+};
 export const RECLAIM_POLICY = {
   name:     'reclaimPolicy',
   labelKey: 'tableHeaders.reclaimPolicy',

shell/pages/c/_cluster/explorer/EventsTable.vue

@@ -1,7 +1,7 @@
 <script>
 
 import SortableTable from '@shell/components/SortableTable';
-import { REASON } from '@shell/config/table-headers';
+import { MESSAGE, NAME, OBJECT, REASON } from '@shell/config/table-headers';
 import { EVENT } from '@shell/config/types';
 import { fetchClusterResources } from './explorer-utils';
 
@@ -21,14 +21,9 @@ export default {
 
     const eventHeaders = [
       reason,
-      {
-        name:          'resource',
-        label:         'Resource',
-        labelKey:      'clusterIndexPage.sections.events.resource.label',
-        value:         'displayInvolvedObject',
-        sort:          ['involvedObject.kind', 'involvedObject.name'],
-        canBeVariable: true,
-      },
+      OBJECT,
+      MESSAGE,
+      NAME,
       {
         name:        'date',
         label:       'Date',
@@ -61,14 +56,5 @@ export default {
     :paging="true"
     :rows-per-page="10"
     default-sort-by="date"
-  >
-    <template #cell:resource="{row, value}">
-      <n-link :to="row.detailLocation">
-        {{ value }}
-      </n-link>
-      <div v-if="row.message">
-        {{ row.displayMessage }}
-      </div>
-    </template>
-  </SortableTable>
+  />
 </template>