[backport v2.12.3] Table Sort Improvements (#15508)

* Sort Improvements + Fix Events SSP sort - Apply SSP sort order with generic `:desc` notation, - Allow headers to provide default sort order - Ensure SSP first seen and last seen column sorts behave the same

* fix l10n

---------

Co-authored-by: Richard Cox <[email protected]>

Author: richard-cox

shell/assets/translations/en-us.yaml

@@ -6484,6 +6484,7 @@ tableHeaders:
   endpoints: Endpoints
   expires: Expires
   firstSeen: First Seen
+  firstSeenTooltip: The time at which the event was first recorded
   flow: Flow
   fingerprint: Fingerprint
   gitRepos: Git Repos

shell/components/SortableTable/sorting.js

@@ -68,6 +68,7 @@ export default {
 
   data() {
     let sortBy = null;
+    let descending = false;
 
     this._defaultSortBy = this.defaultSortBy;
 
@@ -78,6 +79,7 @@ export default {
 
       if ( markedColumn ) {
         this._defaultSortBy = markedColumn.name;
+        descending = markedColumn.defaultSortDescending;
       } else if ( nameColumn ) {
         // Use the name column if there is one
         this._defaultSortBy = nameColumn.name;
@@ -101,7 +103,7 @@ export default {
 
     return {
       sortBy,
-      descending: false,
+      descending,
       cachedRows: null,
       cacheKey:   null,
     };

shell/components/form/ResourceTabs/index.vue

@@ -14,7 +14,7 @@ import RelatedResources from '@shell/components/RelatedResources';
 import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { MESSAGE, REASON } from '@shell/config/table-headers';
-import { STEVE_EVENT_LAST_SEEN, STEVE_EVENT_TYPE, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_TYPE, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
 import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 
 export default {
@@ -86,7 +86,7 @@ export default {
       headerFromSchemaColString('Subobject', eventSchema, this.$store.getters, true),
       headerFromSchemaColString('Source', eventSchema, this.$store.getters, true),
       MESSAGE,
-      headerFromSchemaColString('First Seen', eventSchema, this.$store.getters, true),
+      STEVE_EVENT_FIRST_SEEN,
       headerFromSchemaColString('Count', eventSchema, this.$store.getters, true),
       STEVE_NAME_COL,
     ] : [];

shell/config/pagination-table-headers.js

@@ -3,7 +3,8 @@ import {
   STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, OBJECT,
   EVENT_LAST_SEEN_TIME,
   EVENT_TYPE,
-  SECRET_CLONE
+  SECRET_CLONE,
+  EVENT_FIRST_SEEN_TIME
 } from '@shell/config/table-headers';
 
 // This file contains table headers
@@ -56,10 +57,17 @@ export const STEVE_EVENT_OBJECT = {
   search: 'involvedObject.kind',
 };
 
+export const STEVE_EVENT_FIRST_SEEN = {
+  ...EVENT_FIRST_SEEN_TIME,
+
+  value: 'metadata.fields.7',
+  sort:  'metadata.fields.7:desc',
+};
+
 export const STEVE_EVENT_LAST_SEEN = {
   ...EVENT_LAST_SEEN_TIME,
   value: 'metadata.fields.0',
-  sort:  'metadata.fields.0',
+  sort:  'metadata.fields.0:desc',
 };
 
 export const STEVE_EVENT_TYPE = {

shell/config/product/explorer.js

@@ -22,11 +22,12 @@ import {
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, LAST_USED, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
   DURATION, MESSAGE, REASON, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, SECRET_DATA,
   EVENT_LAST_SEEN_TIME,
+  EVENT_FIRST_SEEN_TIME,
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
 import {
-  STEVE_AGE_COL, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
+  STEVE_AGE_COL, STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
@@ -337,7 +338,7 @@ export function init(store) {
   );
 
   headers(EVENT,
-    [STATE, EVENT_LAST_SEEN_TIME, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, 'First Seen', 'Count', NAME_COL, NAMESPACE_COL],
+    [STATE, EVENT_LAST_SEEN_TIME, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, EVENT_FIRST_SEEN_TIME, 'Count', NAME_COL, NAMESPACE_COL],
     [
       STEVE_STATE_COL,
       STEVE_EVENT_LAST_SEEN,
@@ -347,7 +348,7 @@ export function init(store) {
       'Subobject',
       'Source',
       MESSAGE,
-      'First Seen',
+      STEVE_EVENT_FIRST_SEEN,
       'Count',
       STEVE_NAME_COL,
       STEVE_NAMESPACE_COL,

shell/config/table-headers.js

@@ -541,6 +541,15 @@ export const LAST_SEEN_TIME = {
   tooltip:  'tableHeaders.lastSeenTooltip'
 };
 
+export const EVENT_FIRST_SEEN_TIME = {
+  name:     'firstSeen',
+  labelKey: 'tableHeaders.firstSeen',
+  tooltip:  'tableHeaders.firstSeenTooltip',
+
+  value: 'firstSeen',
+  sort:  'firstSeen:desc',
+};
+
 export const EVENT_LAST_SEEN_TIME = {
   ...LAST_SEEN_TIME,
   defaultSort: true,

shell/models/event.js

@@ -25,6 +25,13 @@ export default class K8sEvent extends SteveModel {
     return this._type;
   }
 
+  get firstSeen() {
+    const schema = this.$getters['schemaFor'](this.type);
+    const rowValueGetter = this.$rootGetters['type-map/rowValueGetter'];
+
+    return schema && rowValueGetter ? rowValueGetter(schema, 'First Seen')(this) : null;
+  }
+
   get lastSeen() {
     const schema = this.$getters['schemaFor'](this.type);
     const rowValueGetter = this.$rootGetters['type-map/rowValueGetter'];

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

@@ -3,7 +3,7 @@
 import { MESSAGE, NAME, OBJECT, REASON } from '@shell/config/table-headers';
 import { EVENT } from '@shell/config/types';
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
-import { STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
 import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 
@@ -59,11 +59,8 @@ export default {
         ...STEVE_NAME_COL,
         defaultSort: false,
       },
-      headerFromSchemaColString('First Seen', schema, this.$store.getters, true),
-      {
-        ...headerFromSchemaColString('Last Seen', schema, this.$store.getters, true),
-        defaultSort: true,
-      },
+      STEVE_EVENT_FIRST_SEEN,
+      STEVE_EVENT_LAST_SEEN,
       headerFromSchemaColString('Count', schema, this.$store.getters, true),
     ] : [];
 

shell/plugins/steve/steve-pagination-utils.ts

@@ -22,6 +22,7 @@ import { Schema } from '@shell/plugins/steve/schema';
 import { PaginationSettingsStore } from '@shell/types/resources/settings';
 import paginationUtils from '@shell/utils/pagination-utils';
 import { KubeLabelSelector, KubeLabelSelectorExpression } from '@shell/types/kube/kube-api';
+import { parseField } from '@shell/utils/sort';
 
 /**
  * This is a workaround for a ts build issue found in check-plugins-build.
@@ -409,9 +410,13 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
       const joined = opt.pagination.sort
         .map((s) => {
-          this.validateField(validateFields, schema, s.field);
+          // Use the same mechanism as local sorting to flip logic for asc/des
+          const { field, reverse } = parseField(s.field);
+          const asc = reverse ? !s.asc : s.asc;
 
-          return `${ s.asc ? '' : '-' }${ this.convertArrayPath(s.field) }`;
+          this.validateField(validateFields, schema, field);
+
+          return `${ asc ? '' : '-' }${ this.convertArrayPath(field) }`;
         })
         .join(',');
 

shell/utils/sort.js

@@ -169,6 +169,11 @@ export function compare(a, b) {
   return 0;
 }
 
+/**
+ * Should the logic of this sort field be flipped?
+ *
+ * For instance show descending but sort by ascending
+ */
 export function parseField(str) {
   const parts = str.split(/:/);