From fc4ff024cee2555f0692db3770907e8a5f090362 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 1 Oct 2020 11:26:42 -0400 Subject: [PATCH] feat(inventoryList): issues/442 activate last seen tooltip * openshiftView, rhelView, activate platform last seen tooltip * inventoryListSelectors, guestListSelectors, apply date object --- .../__snapshots__/openshiftView.test.js.snap | 20 +++++++++++++++---- .../__tests__/openshiftView.test.js | 4 ++-- src/components/openshiftView/openshiftView.js | 5 ++++- .../__snapshots__/rhelView.test.js.snap | 20 +++++++++++++++---- .../rhelView/__tests__/rhelView.test.js | 4 ++-- src/components/rhelView/rhelView.js | 5 ++++- .../guestsListSelectors.test.js.snap | 8 ++++---- .../inventoryListSelectors.test.js.snap | 16 +++++++-------- src/redux/selectors/guestsListSelectors.js | 4 +--- src/redux/selectors/inventoryListSelectors.js | 4 +--- 10 files changed, 58 insertions(+), 32 deletions(-) diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap index c38ae7014..eb47b7959 100644 --- a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap +++ b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap @@ -99,6 +99,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ] @@ -121,6 +122,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, @@ -242,6 +244,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = ` "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ] @@ -264,6 +267,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = ` "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, @@ -299,7 +303,9 @@ Object { lorem , "lorem inventory id", - "lorem month ago", + , ], "columnHeaders": Array [ "t(curiosity-inventory.header, [object Object])", @@ -317,7 +323,7 @@ Object { }, "lastSeen": Object { "title": "t(curiosity-inventory.header, [object Object])", - "value": "lorem month ago", + "value": "lorem date obj", }, "loremIpsum": Object { "title": "t(curiosity-inventory.header, [object Object])", @@ -354,7 +360,9 @@ Object { , 10, 12, - "lorem month ago", + , ], "columnHeaders": Array [ "t(curiosity-inventory.header, [object Object])", @@ -382,7 +390,7 @@ Object { }, "lastSeen": Object { "title": "t(curiosity-inventory.header, [object Object])", - "value": "lorem month ago", + "value": "lorem date obj", }, "loremIpsum": Object { "title": "t(curiosity-inventory.header, [object Object])", @@ -435,6 +443,7 @@ Object { "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ], @@ -460,6 +469,7 @@ Object { "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, @@ -574,6 +584,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ] @@ -596,6 +607,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, diff --git a/src/components/openshiftView/__tests__/openshiftView.test.js b/src/components/openshiftView/__tests__/openshiftView.test.js index 38dbc4d48..1a23561bf 100644 --- a/src/components/openshiftView/__tests__/openshiftView.test.js +++ b/src/components/openshiftView/__tests__/openshiftView.test.js @@ -63,7 +63,7 @@ describe('OpenshiftView Component', () => { numberOfGuests: 3, sockets: 10, cores: 12, - lastSeen: 'lorem month ago', + lastSeen: 'lorem date obj', loremIpsum: 'hello world' } }); @@ -76,7 +76,7 @@ describe('OpenshiftView Component', () => { displayName: 'lorem', inventoryId: 'lorem inventory id', subscriptionManagerId: 'lorem subscription id', - lastSeen: 'lorem month ago', + lastSeen: 'lorem date obj', loremIpsum: 'hello world' } }); diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js index b7cac5f05..8949d4a8e 100644 --- a/src/components/openshiftView/openshiftView.js +++ b/src/components/openshiftView/openshiftView.js @@ -5,6 +5,7 @@ import { chart_color_blue_300 as chartColorBlueDark } from '@patternfly/react-tokens'; import { Badge, Button } from '@patternfly/react-core'; +import { DateFormat } from '@redhat-cloud-services/frontend-components/components/cjs/DateFormat'; import { PageLayout, PageHeader, PageSection, PageToolbar } from '../pageLayout/pageLayout'; import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, @@ -279,7 +280,8 @@ OpenshiftView.defaultProps = { id: 'inventoryId' }, { - id: 'lastSeen' + id: 'lastSeen', + cell: obj => (obj?.lastSeen?.value && ) || '' } ], initialInventoryFilters: [ @@ -331,6 +333,7 @@ OpenshiftView.defaultProps = { }, { id: 'lastSeen', + cell: obj => (obj?.lastSeen?.value && ) || '', isSortable: true } ], diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap index bfdb9982f..c4956ff38 100644 --- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap +++ b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap @@ -86,6 +86,7 @@ exports[`RhelView Component should display an alternate graph on query-string up "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ] @@ -107,6 +108,7 @@ exports[`RhelView Component should display an alternate graph on query-string up "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, @@ -214,6 +216,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = ` "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ] @@ -235,6 +238,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = ` "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, @@ -269,7 +273,9 @@ Object { lorem , "lorem inventory id", - "lorem month ago", + , ], "columnHeaders": Array [ "t(curiosity-inventory.header, [object Object])", @@ -287,7 +293,7 @@ Object { }, "lastSeen": Object { "title": "t(curiosity-inventory.header, [object Object])", - "value": "lorem month ago", + "value": "lorem date obj", }, "loremIpsum": Object { "title": "t(curiosity-inventory.header, [object Object])", @@ -323,7 +329,9 @@ Object { , 10, - "lorem month ago", + , ], "columnHeaders": Array [ "t(curiosity-inventory.header, [object Object])", @@ -350,7 +358,7 @@ Object { }, "lastSeen": Object { "title": "t(curiosity-inventory.header, [object Object])", - "value": "lorem month ago", + "value": "lorem date obj", }, "loremIpsum": Object { "title": "t(curiosity-inventory.header, [object Object])", @@ -402,6 +410,7 @@ Object { "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ], @@ -421,6 +430,7 @@ Object { "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, @@ -521,6 +531,7 @@ exports[`RhelView Component should render a non-connected component: non-connect "id": "inventoryId", }, Object { + "cell": [Function], "id": "lastSeen", }, ] @@ -542,6 +553,7 @@ exports[`RhelView Component should render a non-connected component: non-connect "isSortable": true, }, Object { + "cell": [Function], "id": "lastSeen", "isSortable": true, }, diff --git a/src/components/rhelView/__tests__/rhelView.test.js b/src/components/rhelView/__tests__/rhelView.test.js index 5340e8b35..ca20710e4 100644 --- a/src/components/rhelView/__tests__/rhelView.test.js +++ b/src/components/rhelView/__tests__/rhelView.test.js @@ -63,7 +63,7 @@ describe('RhelView Component', () => { numberOfGuests: 3, sockets: 10, cores: 12, - lastSeen: 'lorem month ago', + lastSeen: 'lorem date obj', loremIpsum: 'hello world' } }); @@ -76,7 +76,7 @@ describe('RhelView Component', () => { displayName: 'lorem', inventoryId: 'lorem inventory id', subscriptionManagerId: 'lorem subscription id', - lastSeen: 'lorem month ago', + lastSeen: 'lorem date obj', loremIpsum: 'hello world' } }); diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js index 7d6157cd4..d7bcfac65 100644 --- a/src/components/rhelView/rhelView.js +++ b/src/components/rhelView/rhelView.js @@ -9,6 +9,7 @@ import { chart_color_purple_300 as chartColorPurpleDark } from '@patternfly/react-tokens'; import { Badge, Button } from '@patternfly/react-core'; +import { DateFormat } from '@redhat-cloud-services/frontend-components/components/cjs/DateFormat'; import { PageLayout, PageHeader, PageSection, PageToolbar } from '../pageLayout/pageLayout'; import { RHSM_API_QUERY_SORT_DIRECTION_TYPES as SORT_DIRECTION_TYPES, @@ -201,7 +202,8 @@ RhelView.defaultProps = { id: 'inventoryId' }, { - id: 'lastSeen' + id: 'lastSeen', + cell: obj => (obj?.lastSeen?.value && ) || '' } ], initialInventoryFilters: [ @@ -247,6 +249,7 @@ RhelView.defaultProps = { }, { id: 'lastSeen', + cell: obj => (obj?.lastSeen?.value && ) || '', isSortable: true } ], diff --git a/src/redux/selectors/__tests__/__snapshots__/guestsListSelectors.test.js.snap b/src/redux/selectors/__tests__/__snapshots__/guestsListSelectors.test.js.snap index 51f361f26..a6e956dc6 100644 --- a/src/redux/selectors/__tests__/__snapshots__/guestsListSelectors.test.js.snap +++ b/src/redux/selectors/__tests__/__snapshots__/guestsListSelectors.test.js.snap @@ -18,13 +18,13 @@ Object { Object { "displayName": "db.lorem.com", "insightsId": "d6214a0b-b344-4778-831c-d53dcacb2da3", - "lastSeen": "17 days ago", + "lastSeen": 2019-07-03T00:00:00.000Z, "subscriptionManagerId": "adafd9d5-5b00-42fa-a6c9-75801d45cc6d", }, Object { "displayName": "db.ipsum.com", "insightsId": "9358e312-1c9f-42f4-8910-dcef6e970852", - "lastSeen": "in a month", + "lastSeen": 2019-09-04T00:00:00.000Z, "subscriptionManagerId": "b101a72f-1859-4489-acb8-d6d31c2578c4", }, ], @@ -61,13 +61,13 @@ Object { Object { "displayName": null, "insightsId": "d6214a0b-b344-4778-831c-d53dcacb2da3", - "lastSeen": "in a year", + "lastSeen": null, "subscriptionManagerId": "adafd9d5-5b00-42fa-a6c9-75801d45cc6d", }, Object { "displayName": "db.example.com", "insightsId": "9358e312-1c9f-42f4-8910-dcef6e970852", - "lastSeen": "in a month", + "lastSeen": 2019-09-04T00:00:00.000Z, "subscriptionManagerId": null, }, ], diff --git a/src/redux/selectors/__tests__/__snapshots__/inventoryListSelectors.test.js.snap b/src/redux/selectors/__tests__/__snapshots__/inventoryListSelectors.test.js.snap index 9d2823048..ba84a67f6 100644 --- a/src/redux/selectors/__tests__/__snapshots__/inventoryListSelectors.test.js.snap +++ b/src/redux/selectors/__tests__/__snapshots__/inventoryListSelectors.test.js.snap @@ -24,7 +24,7 @@ Object { "hardwareType": "physical", "insightsId": "d6214a0b-b344-4778-831c-d53dcacb2da3", "inventoryId": null, - "lastSeen": "17 days ago", + "lastSeen": 2019-07-03T00:00:00.000Z, "numberOfGuests": null, "sockets": 1, "subscriptionManagerId": null, @@ -35,7 +35,7 @@ Object { "hardwareType": "physical", "insightsId": "9358e312-1c9f-42f4-8910-dcef6e970852", "inventoryId": null, - "lastSeen": "in a month", + "lastSeen": 2019-09-04T00:00:00.000Z, "numberOfGuests": null, "sockets": 1, "subscriptionManagerId": null, @@ -85,7 +85,7 @@ Object { "hardwareType": "physical", "insightsId": "9358e312-1c9f-42f4-8910-dcef6e970852", "inventoryId": null, - "lastSeen": "in a month", + "lastSeen": 2019-09-04T00:00:00.000Z, "numberOfGuests": null, "sockets": 1, "subscriptionManagerId": null, @@ -111,7 +111,7 @@ Object { "hardwareType": "physical", "insightsId": "d6214a0b-b344-4778-831c-d53dcacb2da3", "inventoryId": null, - "lastSeen": "17 days ago", + "lastSeen": 2019-07-03T00:00:00.000Z, "numberOfGuests": null, "sockets": 1, "subscriptionManagerId": null, @@ -137,7 +137,7 @@ Object { "hardwareType": "physical", "insightsId": "d6214a0b-b344-4778-831c-d53dcacb2da3", "inventoryId": null, - "lastSeen": "17 days ago", + "lastSeen": 2019-07-03T00:00:00.000Z, "numberOfGuests": null, "sockets": 1, "subscriptionManagerId": null, @@ -163,7 +163,7 @@ Object { "hardwareType": "physical", "insightsId": "9358e312-1c9f-42f4-8910-dcef6e970852", "inventoryId": null, - "lastSeen": "in a month", + "lastSeen": 2019-09-04T00:00:00.000Z, "numberOfGuests": null, "sockets": 1, "subscriptionManagerId": null, @@ -189,7 +189,7 @@ Object { "hardwareType": null, "insightsId": "d6214a0b-b344-4778-831c-d53dcacb2da3", "inventoryId": null, - "lastSeen": "in a year", + "lastSeen": null, "numberOfGuests": null, "sockets": 1, "subscriptionManagerId": null, @@ -200,7 +200,7 @@ Object { "hardwareType": "physical", "insightsId": "9358e312-1c9f-42f4-8910-dcef6e970852", "inventoryId": null, - "lastSeen": "in a month", + "lastSeen": 2019-09-04T00:00:00.000Z, "numberOfGuests": null, "sockets": null, "subscriptionManagerId": null, diff --git a/src/redux/selectors/guestsListSelectors.js b/src/redux/selectors/guestsListSelectors.js index 58520b22b..1f247c0a0 100644 --- a/src/redux/selectors/guestsListSelectors.js +++ b/src/redux/selectors/guestsListSelectors.js @@ -1,8 +1,6 @@ import { createSelector } from 'reselect'; -import moment from 'moment'; import { rhsmApiTypes } from '../../types/rhsmApiTypes'; import { reduxHelpers } from '../common/reduxHelpers'; -import { getCurrentDate } from '../../common/dateHelpers'; /** * Return a combined state, props object. @@ -39,7 +37,7 @@ const selector = createSelector([statePropsFilter], response => { const customInventoryValue = ({ key, value }) => { switch (key) { case rhsmApiTypes.RHSM_API_RESPONSE_INVENTORY_DATA_TYPES.LAST_SEEN: - return moment.utc(value).from(getCurrentDate()) || null; + return (value && new Date(value)) || null; default: return value ?? null; } diff --git a/src/redux/selectors/inventoryListSelectors.js b/src/redux/selectors/inventoryListSelectors.js index 80a0fbede..a38fd1424 100644 --- a/src/redux/selectors/inventoryListSelectors.js +++ b/src/redux/selectors/inventoryListSelectors.js @@ -1,9 +1,7 @@ import { createSelectorCreator, defaultMemoize } from 'reselect'; -import moment from 'moment'; import _isEqual from 'lodash/isEqual'; import { rhsmApiTypes } from '../../types/rhsmApiTypes'; import { reduxHelpers } from '../common/reduxHelpers'; -import { getCurrentDate } from '../../common/dateHelpers'; import { apiQueries } from '../common'; /** @@ -100,7 +98,7 @@ const selector = createDeepEqualSelector([statePropsFilter, queryFilter], (respo case rhsmApiTypes.RHSM_API_RESPONSE_INVENTORY_DATA_TYPES.HARDWARE: return value?.toLowerCase() || null; case rhsmApiTypes.RHSM_API_RESPONSE_INVENTORY_DATA_TYPES.LAST_SEEN: - return moment.utc(value).from(getCurrentDate()) || null; + return (value && new Date(value)) || null; default: return value ?? null; }