Use tags from API instead of mocked ones (#278)

* Use tags from API instead of mocked ones * Add falback when tags are missing
RedHatInsights · Nov 22, 2019 · 123c1ae · 123c1ae
1 parent 8b6cdda
commit 123c1ae
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -141,11 +141,9 @@ class EntityDetails extends Component {
                         { this.generateTop() }
                         { this.generateFacts() }
                         {
-                            localStorage.getItem('rhcs-tags') === 'true' && (
-                                loaded ?
-                                    <TagWithDialog count={ entity.tagCount } systemId={ entity.id } /> :
-                                    <Skeleton size={SkeletonSize.sm}>&nbsp;</Skeleton>
-                            )
+                            loaded ?
+                                <TagWithDialog count={ entity.tags.length } systemId={ entity.id } /> :
+                                <Skeleton size={ SkeletonSize.sm }>&nbsp;</Skeleton>
                         }
                         <TagsModal />
                     </Fragment>

diff --git 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
@@ -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 (
         <TagModal
             width="auto"
             isOpen={ showTagDialog }
             toggleModal={() => onToggleTagModal()}
             systemName={ `${activeSystemTag.display_name} (${tagCount})` }
-            rows={
-                tagsLoaded ?
-                    tags.map(({ tagName, tagValue }) => ([ tagName, tagValue ])) :
-                    [ ...Array(tagCount) ].map(() => ([
-                        { title: <Skeleton size={ SkeletonSize.md }>&nbsp;</Skeleton> },
-                        { title: <Skeleton size={SkeletonSize.md}>&nbsp;</Skeleton> }
-                    ]))
-            }
+            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
@@ -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
@@ -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
@@ -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) => <TagWithDialog count={value} systemId={ systemId }/>
-        }
-    ] : [],
+    {
+        key: 'tags',
+        title: 'Tags',
+        props: { width: 25, isStatic: true },
+        // eslint-disable-next-line react/display-name
+        renderFunc: (value, systemId) => <TagWithDialog count={value.length} systemId={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
@@ -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
 };