[Content management] Surface "Last updated" column in Saved object ma…

…nagement (#132525)
elastic · May 20, 2022 · 8c19c36 · 8c19c36
1 parent 24bdc97
commit 8c19c36
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 10 deletions.
diff --git a/...t/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap b/...t/public/management_section/objects_table/__snapshots__/saved_objects_table.test.tsx.snap
diff --git a/...ment/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap b/...ment/public/management_section/objects_table/components/__snapshots__/table.test.tsx.snap
diff --git a/...aved_objects_management/public/management_section/objects_table/components/table.test.tsx b/...aved_objects_management/public/management_section/objects_table/components/table.test.tsx
@@ -50,6 +50,10 @@ const defaultProps: TableProps = {
   canGoInApp: () => true,
   pageIndex: 1,
   pageSize: 2,
+  sort: {
+    field: 'updated_at',
+    direction: 'desc',
+  },
   items: [
     {
       id: '1',

diff --git a/...ins/saved_objects_management/public/management_section/objects_table/components/table.tsx b/...ins/saved_objects_management/public/management_section/objects_table/components/table.tsx
@@ -8,6 +8,7 @@
 
 import { ApplicationStart, IBasePath } from '@kbn/core/public';
 import React, { PureComponent, Fragment } from 'react';
+import moment from 'moment';
 import {
   EuiSearchBar,
   EuiBasicTable,
@@ -24,9 +25,10 @@ import {
   EuiTableFieldDataColumnType,
   EuiTableActionsColumnType,
   QueryType,
+  CriteriaWithPagination,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { FormattedMessage, FormattedRelative } from '@kbn/i18n-react';
 import { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import type { SavedObjectManagementTypeInfo } from '../../../../common/types';
 import { getDefaultTitle, getSavedObjectLabel } from '../../../lib';
@@ -55,6 +57,7 @@ export interface TableProps {
   goInspectObject: (obj: SavedObjectWithMetadata) => void;
   pageIndex: number;
   pageSize: number;
+  sort: CriteriaWithPagination<SavedObjectWithMetadata>['sort'];
   items: SavedObjectWithMetadata[];
   itemId: string | (() => string);
   totalItemCount: number;
@@ -128,10 +131,59 @@ export class Table extends PureComponent<TableProps, TableState> {
     this.setState({ isExportPopoverOpen: false });
   };
 
+  getUpdatedAtColumn = () => {
+    const renderUpdatedAt = (dateTime?: string) => {
+      if (!dateTime) {
+        return (
+          <EuiToolTip
+            content={i18n.translate(
+              'savedObjectsManagement.objectsTable.table.updatedDateUnknownLabel',
+              {
+                defaultMessage: 'Last updated unknown',
+              }
+            )}
+          >
+            <span>-</span>
+          </EuiToolTip>
+        );
+      }
+      const updatedAt = moment(dateTime);
+
+      if (updatedAt.diff(moment(), 'days') > -7) {
+        return (
+          <FormattedRelative value={new Date(dateTime).getTime()}>
+            {(formattedDate: string) => (
+              <EuiToolTip content={updatedAt.format('LL LT')}>
+                <span>{formattedDate}</span>
+              </EuiToolTip>
+            )}
+          </FormattedRelative>
+        );
+      }
+      return (
+        <EuiToolTip content={updatedAt.format('LL LT')}>
+          <span>{updatedAt.format('LL')}</span>
+        </EuiToolTip>
+      );
+    };
+
+    return {
+      field: 'updated_at',
+      name: i18n.translate('savedObjectsManagement.objectsTable.table.lastUpdatedColumnTitle', {
+        defaultMessage: 'Last updated',
+      }),
+      render: (field: string, record: { updated_at?: string }) =>
+        renderUpdatedAt(record.updated_at),
+      sortable: true,
+      width: '150px',
+    };
+  };
+
   render() {
     const {
       pageIndex,
       pageSize,
+      sort,
       itemId,
       items,
       totalItemCount,
@@ -186,7 +238,7 @@ export class Table extends PureComponent<TableProps, TableState> {
           'savedObjectsManagement.objectsTable.table.columnTypeDescription',
           { defaultMessage: 'Type of the saved object' }
         ),
-        sortable: false,
+        sortable: true,
         'data-test-subj': 'savedObjectsTableRowType',
         render: (type: string, object: SavedObjectWithMetadata) => {
           const typeLabel = getSavedObjectLabel(type, allowedTypes);
@@ -239,6 +291,7 @@ export class Table extends PureComponent<TableProps, TableState> {
           'data-test-subj': `savedObjectsTableColumn-${column.id}`,
         };
       }),
+      this.getUpdatedAtColumn(),
       {
         name: i18n.translate('savedObjectsManagement.objectsTable.table.columnActionsName', {
           defaultMessage: 'Actions',
@@ -422,6 +475,7 @@ export class Table extends PureComponent<TableProps, TableState> {
             items={items}
             columns={columns as any}
             pagination={pagination}
+            sorting={{ sort }}
             selection={selection}
             onChange={onTableChange}
             rowProps={(item) => ({

diff --git a/.../saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx b/.../saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx
@@ -10,7 +10,7 @@ import React, { Component } from 'react';
 import { debounce } from 'lodash';
 // @ts-expect-error
 import { saveAs } from '@elastic/filesaver';
-import { EuiSpacer, Query } from '@elastic/eui';
+import { EuiSpacer, Query, CriteriaWithPagination } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
   SavedObjectsClientContract,
@@ -78,6 +78,7 @@ export interface SavedObjectsTableState {
   totalCount: number;
   page: number;
   perPage: number;
+  sort: CriteriaWithPagination<SavedObjectWithMetadata>['sort'];
   savedObjects: SavedObjectWithMetadata[];
   savedObjectCounts: Record<string, number>;
   activeQuery: Query;
@@ -114,6 +115,10 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       totalCount: 0,
       page: 0,
       perPage: props.perPageConfig || 50,
+      sort: {
+        field: 'updated_at',
+        direction: 'desc',
+      },
       savedObjects: [],
       savedObjectCounts: props.allowedTypes.reduce((typeToCountMap, type) => {
         typeToCountMap[type.name] = 0;
@@ -211,7 +216,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
   };
 
   debouncedFindObjects = debounce(async () => {
-    const { activeQuery: query, page, perPage } = this.state;
+    const { activeQuery: query, page, perPage, sort } = this.state;
     const { notifications, http, allowedTypes, taggingApi } = this.props;
     const { queryText, visibleTypes, selectedTags } = parseQuery(query, allowedTypes);
 
@@ -228,9 +233,8 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       fields: ['id'],
       type: searchTypes,
     };
-    if (findOptions.type.length > 1) {
-      findOptions.sortField = 'type';
-    }
+    findOptions.sortField = sort?.field;
+    findOptions.sortOrder = sort?.direction;
 
     findOptions.hasReference = getTagFindReferences({ selectedTags, taggingApi });
 
@@ -352,14 +356,15 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
     );
   };
 
-  onTableChange = async (table: any) => {
+  onTableChange = async (table: CriteriaWithPagination<SavedObjectWithMetadata>) => {
     const { index: page, size: perPage } = table.page || {};
 
     this.setState(
       {
         page,
         perPage,
         selectedSavedObjects: [],
+        sort: table.sort,
       },
       this.fetchAllSavedObjects
     );
@@ -653,6 +658,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
       filteredItemCount,
       isSearching,
       savedObjectCounts,
+      sort,
     } = this.state;
     const { http, taggingApi, allowedTypes, applications } = this.props;
 
@@ -700,6 +706,7 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
             goInspectObject={this.props.goInspectObject}
             pageIndex={page}
             pageSize={perPage}
+            sort={sort}
             items={savedObjects}
             totalItemCount={filteredItemCount}
             isSearching={isSearching}

diff --git a/src/plugins/saved_objects_management/server/routes/find.ts b/src/plugins/saved_objects_management/server/routes/find.ts
@@ -34,6 +34,7 @@ export const registerFindRoute = (
           search: schema.maybe(schema.string()),
           defaultSearchOperator: searchOperatorSchema,
           sortField: schema.maybe(schema.string()),
+          sortOrder: schema.maybe(schema.oneOf([schema.literal('asc'), schema.literal('desc')])),
           hasReference: schema.maybe(
             schema.oneOf([referenceSchema, schema.arrayOf(referenceSchema)])
           ),

diff --git a/test/api_integration/apis/saved_objects_management/find.ts b/test/api_integration/apis/saved_objects_management/find.ts
@@ -158,6 +158,39 @@ export default function ({ getService }: FtrProviderContext) {
             });
         });
       });
+
+      describe('`sortField` and `sortOrder` parameters', () => {
+        it('sort objects by "type" in "asc" order', async () => {
+          await supertest
+            .get('/api/kibana/management/saved_objects/_find')
+            .query({
+              type: ['visualization', 'dashboard'],
+              sortField: 'type',
+              sortOrder: 'asc',
+            })
+            .expect(200)
+            .then((resp) => {
+              const objects = resp.body.saved_objects;
+              expect(objects.length).be.greaterThan(1); // Need more than 1 result for our test
+              expect(objects[0].type).to.be('dashboard');
+            });
+        });
+
+        it('sort objects by "type" in "desc" order', async () => {
+          await supertest
+            .get('/api/kibana/management/saved_objects/_find')
+            .query({
+              type: ['visualization', 'dashboard'],
+              sortField: 'type',
+              sortOrder: 'desc',
+            })
+            .expect(200)
+            .then((resp) => {
+              const objects = resp.body.saved_objects;
+              expect(objects[0].type).to.be('visualization');
+            });
+        });
+      });
     });
 
     describe('meta attributes injected properly', () => {