feat(gateway-manager): add columns for routes and services [KM-517] (#…

…1637)

packages/core/core/src/useTablePreferences/index.ts

@@ -62,13 +62,13 @@ export default function useTablePreferences() {
    * @param {string} tableKey The table identifier
    * @returns {TablePreferences} The stored preferences for the given tableKey
    */
-  const getTablePreferences = (tableKey: string): TablePreferences => {
+  const getTablePreferences = (tableKey: string, fallbackPreferences?: TablePreferences): TablePreferences => {
     const existingPreferences = getAllTablePreferences()
 
     const tablePreferences = existingPreferences?.get(tableKey) || undefined
 
-    // return the stored preferences, or fallback to DEFAULT_USER_TABLE_PREFERENCES if the tableKey does not exist
-    return tablePreferences || DEFAULT_USER_TABLE_PREFERENCES
+    // return the stored preferences or given preferences, or fallback to DEFAULT_USER_TABLE_PREFERENCES if the tableKey does not exist and no fallbackPreferences are provided
+    return tablePreferences || fallbackPreferences || DEFAULT_USER_TABLE_PREFERENCES
   }
 
   /**

packages/core/core/src/useTablePreferences/useTablePreferences.spec.ts

@@ -2,6 +2,14 @@ import { describe, it, expect, afterEach } from 'vitest'
 import useTablePreferences from './index'
 import { USER_TABLE_PREFERENCES_LOCAL_STORAGE_KEY, DEFAULT_USER_TABLE_PREFERENCES } from '../constants'
 
+const fallbackPreferences = {
+  pageSize: 60,
+  sortColumnKey: undefined,
+  sortColumnOrder: undefined,
+  columnWidths: { },
+  columnVisibility: { },
+}
+
 describe('useTablePreferences', () => {
 
   afterEach(() => {
@@ -106,7 +114,15 @@ describe('useTablePreferences', () => {
     expect(tablePrefs1.sortColumnOrder).not.toEqual(tablePrefs2.sortColumnOrder)
   })
 
-  it('falls back to the default preferences if the tableKey does not exist', () => {
+  it('falls back to the given preferences if the tableKey does not exist', () => {
+    const { getTablePreferences } = useTablePreferences()
+
+    const tablePreferences = getTablePreferences('my-fake-table-key', fallbackPreferences)
+
+    expect(tablePreferences).toEqual(fallbackPreferences)
+  })
+
+  it('falls back to the default preferences if the tableKey does not exist and no preferences is given', () => {
     const { getTablePreferences } = useTablePreferences()
 
     const tablePreferences = getTablePreferences('my-fake-table-key')

packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue

@@ -2,6 +2,7 @@
   <div class="kong-ui-entities-gateway-services-list">
     <EntityBaseTable
       :cache-identifier="cacheIdentifier"
+      :default-table-preferences="defaultTablePreferences"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
       :empty-state-options="emptyStateOptions"
@@ -90,6 +91,12 @@
         </KTruncate>
         <span v-else>-</span>
       </template>
+      <template #created_at="{ rowValue }">
+        {{ formatUnixTimeStamp(rowValue) }}
+      </template>
+      <template #updated_at="{ rowValue }">
+        {{ formatUnixTimeStamp(rowValue) }}
+      </template>
 
       <!-- Row actions -->
       <template #actions="{ row }">
@@ -258,7 +265,7 @@ const props = defineProps({
   },
 })
 
-const { i18n: { t } } = composables.useI18n()
+const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
@@ -278,6 +285,14 @@ const fields: BaseTableHeaders = {
   path: { label: t('gateway_services.list.table_headers.path'), searchable: true, sortable: true },
   enabled: { label: t('gateway_services.list.table_headers.enabled'), searchable: true, sortable: true },
   tags: { label: t('gateway_services.list.table_headers.tags'), sortable: false },
+  updated_at: { label: t('gateway_services.list.table_headers.updated_at'), sortable: true },
+  created_at: { label: t('gateway_services.list.table_headers.created_at'), sortable: true },
+}
+
+const defaultTablePreferences = {
+  columnVisibility: {
+    created_at: false,
+  },
 }
 const tableHeaders: BaseTableHeaders = fields
 

packages/entities/entities-gateway-services/src/locales/en.json

@@ -34,7 +34,9 @@
         "path": "Path",
         "enabled": "Enabled",
         "tags": "Tags",
-        "id": "ID"
+        "id": "ID",
+        "created_at": "Created At",
+        "updated_at": "Last Modified"
       },
       "empty_state": {
         "title": "Configure a New Gateway Service",

packages/entities/entities-routes/README.md

@@ -53,7 +53,7 @@ export default defineConfig({
     monacoEditorPlugin({}),
   ],
   // ...
-}
+})
 ```
 
 ### Registration

packages/entities/entities-routes/src/components/RouteList.vue

@@ -3,6 +3,7 @@
     <EntityBaseTable
       :cache-identifier="cacheIdentifier"
       :cell-attributes="getCellAttrs"
+      :default-table-preferences="defaultTablePreferences"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
       :empty-state-options="emptyStateOptions"
@@ -125,6 +126,12 @@
           {{ rowValue || '-' }}
         </span>
       </template>
+      <template #created_at="{ rowValue }">
+        {{ formatUnixTimeStamp(rowValue) }}
+      </template>
+      <template #updated_at="{ rowValue }">
+        {{ formatUnixTimeStamp(rowValue) }}
+      </template>
 
       <!-- Row actions -->
       <template #actions="{ row }">
@@ -295,7 +302,7 @@ const props = defineProps({
   },
 })
 
-const { i18n: { t } } = composables.useI18n()
+const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
@@ -318,6 +325,13 @@ const fields: BaseTableHeaders = {
     expression: { label: t('routes.list.table_headers.expression'), tooltip: true },
   },
   tags: { label: t('routes.list.table_headers.tags'), sortable: false },
+  updated_at: { label: t('routes.list.table_headers.updated_at'), sortable: true },
+  created_at: { label: t('routes.list.table_headers.created_at'), sortable: true },
+}
+const defaultTablePreferences = {
+  columnVisibility: {
+    created_at: false,
+  },
 }
 const tableHeaders: BaseTableHeaders = fields
 

packages/entities/entities-routes/src/locales/en.json

@@ -30,7 +30,9 @@
         "paths": "Paths",
         "expression": "Expression",
         "id": "ID",
-        "tags": "Tags"
+        "tags": "Tags",
+        "created_at": "Created At",
+        "updated_at": "Last Modified"
       },
       "empty_state": {
         "title": "Configure a New Route",

packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue

@@ -222,6 +222,12 @@ const props = defineProps({
     default: '',
     required: true,
   },
+  /** default table preferences to use if no user preferences are found */
+  defaultTablePreferences: {
+    type: Object as PropType<TablePreferences>,
+    default: null,
+    required: false,
+  },
   /** dropdown menu width, default to 200px, defined in kPop */
   dropdownMenuWidth: {
     type: String,
@@ -356,7 +362,7 @@ const { setTablePreferences, getTablePreferences } = useTablePreferences()
 // Use unique key cacheId (passed down from consuming app and derived from controlPlaneId)
 // for localStorage of user's table preferences across tables, orgs and users
 
-const tablePreferences = ref<TablePreferences>(getTablePreferences(cacheId.value))
+const tablePreferences = ref<TablePreferences>(getTablePreferences(cacheId.value, props.defaultTablePreferences))
 
 const combinedInitialFetcherParams = computed((): Partial<FetcherParams> => {
   // Pass the preferencesStorageKey regardless; if no entry is found, it will return the default