From 123c1ae9f5b09d4f11b369521c165820954c4602 Mon Sep 17 00:00:00 2001 From: Karel Hala Date: Fri, 22 Nov 2019 09:43:29 +0100 Subject: [PATCH] Use tags from API instead of mocked ones (#278) * Use tags from API instead of mocked ones * Add falback when tags are missing --- package-lock.json | 6 +-- package.json | 2 +- packages/inventory-general-info/package.json | 2 +- packages/inventory/package.json | 2 +- packages/inventory/src/EntityDetail.js | 8 ++-- packages/inventory/src/EntityTable.js | 2 +- packages/inventory/src/TagsModal.js | 23 ++++-------- packages/inventory/src/api/index.js | 36 ++++++++++++------ packages/inventory/src/redux/actions.js | 8 +--- packages/inventory/src/redux/entities.js | 37 ++++++------------- packages/inventory/src/redux/entityDetails.js | 5 +-- 11 files changed, 58 insertions(+), 73 deletions(-) diff --git a/package-lock.json b/package-lock.json index c546a4543..9a9c9b71a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3757,9 +3757,9 @@ "integrity": "sha512-30OuHWE+ik3SsL9qTc+22ziVlW9PjcVItJtXVAzCr1oqo4UUqTj8tU4oyvKaI8cbpS8wRKa7o+sqc/s0Eq/BmA==" }, "@redhat-cloud-services/host-inventory-client": { - "version": "1.0.18", - "resolved": "https://registry.npmjs.org/@redhat-cloud-services/host-inventory-client/-/host-inventory-client-1.0.18.tgz", - "integrity": "sha512-AqLVWmoWogYiHoVR8hdqOjqFOIhAJ7ACOaAM/0V9LfGpSCguDmB4glXMjaVDpN9sz+FhMBhymPHz99ikESWsyA==", + "version": "1.0.39", + "resolved": "https://registry.npmjs.org/@redhat-cloud-services/host-inventory-client/-/host-inventory-client-1.0.39.tgz", + "integrity": "sha512-HIEdi6n4sG1NQyB8vkqXd04RlFYsMfUtt+1/UhKYU6IN024EM0s0mWC5kl+fKM4Mi8qmd5I/O/Ee1utS9o5DRw==", "requires": { "axios": "^0.19.0" } diff --git a/package.json b/package.json index d0773e097..3f0f9a17c 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@patternfly/react-core": "3.115.2", "@patternfly/react-icons": "^3.14.8", "@patternfly/react-table": "2.23.8", - "@redhat-cloud-services/host-inventory-client": "1.0.18", + "@redhat-cloud-services/host-inventory-client": "1.0.39", "abortcontroller-polyfill": "^1.2.1", "apollo-boost": "^0.1.23", "axios": "^0.19.0", diff --git a/packages/inventory-general-info/package.json b/packages/inventory-general-info/package.json index 41f690135..20d5965d5 100644 --- a/packages/inventory-general-info/package.json +++ b/packages/inventory-general-info/package.json @@ -33,7 +33,7 @@ "dependencies": { "@redhat-cloud-services/frontend-components": "*", "@redhat-cloud-services/frontend-components-utilities": ">=0.0.7", - "@redhat-cloud-services/host-inventory-client": "1.0.18", + "@redhat-cloud-services/host-inventory-client": "1.0.39", "@redhat-cloud-services/frontend-components-inventory": ">=0.0.13" } } diff --git a/packages/inventory/package.json b/packages/inventory/package.json index 1888171a2..ecc75472d 100644 --- a/packages/inventory/package.json +++ b/packages/inventory/package.json @@ -35,7 +35,7 @@ "dependencies": { "@redhat-cloud-services/frontend-components": "*", "@redhat-cloud-services/frontend-components-utilities": ">=0.0.7", - "@redhat-cloud-services/host-inventory-client": "1.0.19", + "@redhat-cloud-services/host-inventory-client": "1.0.39", "axios": "^0.19.0" } } diff --git a/packages/inventory/src/EntityDetail.js b/packages/inventory/src/EntityDetail.js index 8e413a344..e06096b9f 100644 --- a/packages/inventory/src/EntityDetail.js +++ b/packages/inventory/src/EntityDetail.js @@ -141,11 +141,9 @@ class EntityDetails extends Component { { this.generateTop() } { this.generateFacts() } { - localStorage.getItem('rhcs-tags') === 'true' && ( - loaded ? - : -   - ) + loaded ? + : +   } diff --git a/packages/inventory/src/EntityTable.js b/packages/inventory/src/EntityTable.js index c1551e4c9..c8b96dbca 100644 --- a/packages/inventory/src/EntityTable.js +++ b/packages/inventory/src/EntityTable.js @@ -135,7 +135,7 @@ class EntityTable extends React.Component { return ([ ...transforms || [], ...props && props.width ? [ cellWidth(props.width) ] : [], - ...hasItems || rows.length <= 0 ? [] : [ sortable ] + ...hasItems || rows.length <= 0 || (props && props.isStatic) ? [] : [ sortable ] ]); } diff --git a/packages/inventory/src/TagsModal.js b/packages/inventory/src/TagsModal.js index 63edd7b49..3ac2243e1 100644 --- a/packages/inventory/src/TagsModal.js +++ b/packages/inventory/src/TagsModal.js @@ -4,31 +4,23 @@ import PropTypes from 'prop-types'; import { toggleTagModal } from './redux/actions'; import { TagModal, Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components'; -const TagsModal = ({ showTagDialog, tagsLoaded, tags, activeSystemTag, tagCount, onToggleTagModal }) => { +const TagsModal = ({ showTagDialog, tags, activeSystemTag, tagCount, onToggleTagModal }) => { return ( onToggleTagModal()} systemName={ `${activeSystemTag.display_name} (${tagCount})` } - rows={ - tagsLoaded ? - tags.map(({ tagName, tagValue }) => ([ tagName, tagValue ])) : - [ ...Array(tagCount) ].map(() => ([ - { title:   }, - { title:   } - ])) - } + rows={ tags.map(({ value, namespace }) => ([ value, namespace ])) } /> ); }; TagsModal.propTypes = { showTagDialog: PropTypes.bool, - tagsLoaded: PropTypes.bool, tags: PropTypes.arrayOf(PropTypes.shape({ - tagName: PropTypes.node, - tagValue: PropTypes.node + value: PropTypes.node, + namespace: PropTypes.node })), tagCount: PropTypes.number, activeSystemTag: PropTypes.shape({ @@ -48,13 +40,12 @@ TagsModal.defaultProps = { }; export default connect(({ entities, entityDetails }) => { - const { showTagDialog, tagsLoaded, tags, activeSystemTag, tagCount } = entities || entityDetails || {}; + const { showTagDialog, activeSystemTag = { tags: [] } } = entities || entityDetails || {}; return ({ showTagDialog, - tagsLoaded, - tags, + tags: activeSystemTag.tags, activeSystemTag, - tagCount + tagCount: activeSystemTag.tags.length }); }, (dispatch) => ({ onToggleTagModal: () => dispatch(toggleTagModal(false)) diff --git a/packages/inventory/src/api/index.js b/packages/inventory/src/api/index.js index 0165d76e1..29aff7cc7 100644 --- a/packages/inventory/src/api/index.js +++ b/packages/inventory/src/api/index.js @@ -24,12 +24,28 @@ export const mapData = ({ facts = {}, ...oneResult }) => ({ .reduce( (acc, curr) => ({ ...acc, ...(typeof curr !== 'string') ? curr : {} }), {} ) - }, - ...localStorage.getItem('rhcs-tags') === 'true' ? { - tagCount: Math.floor(Math.random() * Math.floor(11)) - } : {} + } }); +export const mapTags = (data = { results: [] }, { orderBy, orderDirection } = {}) => { + if (data.results.length > 0) { + return hosts.apiHostGetHostTags(data.results.map(({ id }) => id), data.per_page, 1, orderBy, orderDirection) + .then(({ results: tags }) => ({ + ...data, + results: data.results.map(row => ({ ...row, tags: tags[row.id] || [] })) + })) + .catch(() => ({ + ...data, + results: data.results.map(row => ({ + ...row, + tags: [] + })) + })); + } + + return data; +}; + export function getEntities(items, { controller, hasItems, @@ -43,6 +59,7 @@ export function getEntities(items, { if (hasItems && items.length > 0) { return hosts.apiHostGetHostById(items, undefined, perPage, page, undefined, undefined, { cancelToken: controller && controller.token }) + .then(mapTags) .then(({ results = [], ...data } = {}) => ({ ...data, filters, @@ -58,12 +75,14 @@ export function getEntities(items, { hostnameOrId && hostnameOrId.filter, undefined, undefined, + undefined, perPage, page, orderBy, orderDirection, { cancelToken: controller && controller.token } ) + .then((data) => mapTags(data, { orderBy, orderDirection })) .then(({ results = [], ...data } = {}) => ({ ...data, filters, @@ -85,13 +104,8 @@ export function getEntities(items, { export const getEntitySystemProfile = (item) => hosts.apiHostGetHostSystemProfileById([ item ]); -export function getTags(systemId, count) { - return new Promise(res => setTimeout(() => res({ - results: [ ...Array(count) ].map(() => ({ - tagName: 'Tag name', - tagValue: `Some tag=${systemId}` - })) - }), 1000)); +export function getTags(systemId) { + return hosts.apiHostGetHostTags(systemId).then(({ results }) => ({ results: Object.values(results)[0] })); } export function getAllTags() { diff --git a/packages/inventory/src/redux/actions.js b/packages/inventory/src/redux/actions.js index 10094d64e..c0c537720 100644 --- a/packages/inventory/src/redux/actions.js +++ b/packages/inventory/src/redux/actions.js @@ -108,13 +108,9 @@ export const editAnsibleHost = (id, value) => ({ } }); -export const loadTags = (systemId, count) => ({ +export const loadTags = (systemId) => ({ type: ACTION_TYPES.LOAD_TAGS, - payload: getTags(systemId, count), - meta: { - systemId, - count - } + payload: systemId }); export const toggleTagModal = (isOpen) => ({ diff --git a/packages/inventory/src/redux/entities.js b/packages/inventory/src/redux/entities.js index 1967176d2..3c2c4e173 100644 --- a/packages/inventory/src/redux/entities.js +++ b/packages/inventory/src/redux/entities.js @@ -18,15 +18,13 @@ export const defaultState = { loaded: false, tagsLoaded: false, allTagsLoaded: f const defaultColumns = [ { key: 'display_name', title: 'Name', composed: [ 'facts.os_release', 'display_name' ] }, - ...localStorage.getItem('rhcs-tags') === 'true' ? [ - { - key: 'tagCount', - title: 'Tags', - props: { width: 25 }, - // eslint-disable-next-line react/display-name - renderFunc: (value, systemId) => - } - ] : [], + { + key: 'tags', + title: 'Tags', + props: { width: 25, isStatic: true }, + // eslint-disable-next-line react/display-name + renderFunc: (value, systemId) => + }, { key: 'updated', title: 'Last sync', isTime: true, props: { width: 25 } } ]; @@ -115,23 +113,13 @@ function selectFilter(state, { payload: { item: { items, ...item }, selected } } }; } -export function tagsLoading(state, { meta: { systemId, count } }) { - const activeSystemTag = state.rows ? state.rows.find(({ id }) => systemId === id) : state.entity; +export function showTags(state, { payload }) { + const activeSystemTag = state.rows ? state.rows.find(({ id }) => payload === id) : state.entity; return { ...state, - tags: [], - showTagDialog: true, - tagsLoaded: false, activeSystemTag, - tagCount: count - }; -} - -export function tagsFulfilled(state, { payload: { results } }) { - return { - ...state, - tags: results, - tagsLoaded: true + tagsLoaded: true, + showTagDialog: true }; } @@ -155,8 +143,7 @@ export default { [ACTION_TYPES.ALL_TAGS_PENDING]: (state) => ({ ...state, allTagsLoaded: false }), [ACTION_TYPES.LOAD_ENTITIES_PENDING]: entitiesPending, [ACTION_TYPES.LOAD_ENTITIES_FULFILLED]: entitiesLoaded, - [ACTION_TYPES.LOAD_TAGS_PENDING]: tagsLoading, - [ACTION_TYPES.LOAD_TAGS_FULFILLED]: tagsFulfilled, + [ACTION_TYPES.LOAD_TAGS]: showTags, [UPDATE_ENTITIES]: entitiesLoaded, [SHOW_ENTITIES]: (state, action) => entitiesLoaded(state, { payload: { diff --git a/packages/inventory/src/redux/entityDetails.js b/packages/inventory/src/redux/entityDetails.js index 1e62a28ab..f5f23795d 100644 --- a/packages/inventory/src/redux/entityDetails.js +++ b/packages/inventory/src/redux/entityDetails.js @@ -1,5 +1,5 @@ import { ACTION_TYPES, APPLICATION_SELECTED, TOGGLE_TAG_MODAL } from './action-types'; -import { tagsLoading, tagsFulfilled, toggleTagModal } from './entities'; +import { showTags, toggleTagModal } from './entities'; export const defaultState = { loaded: false }; function entityDetailPending(state) { @@ -29,7 +29,6 @@ export default { [ACTION_TYPES.LOAD_ENTITY_PENDING]: entityDetailPending, [ACTION_TYPES.LOAD_ENTITY_FULFILLED]: entityDetailLoaded, [APPLICATION_SELECTED]: onApplicationSelected, - [ACTION_TYPES.LOAD_TAGS_PENDING]: tagsLoading, - [ACTION_TYPES.LOAD_TAGS_FULFILLED]: tagsFulfilled, + [ACTION_TYPES.LOAD_TAGS]: showTags, [TOGGLE_TAG_MODAL]: toggleTagModal };