From c3ca43d9bce1d8c53f7f45bc00ba096c54a853cb Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Mon, 11 Jan 2021 10:13:17 -0800 Subject: [PATCH 1/3] hide inventory groups/hosts/sources columns when screen width doesn't allow --- .../components/PaginatedTable/HeaderRow.jsx | 7 ++++++- .../Inventory/InventoryList/InventoryList.jsx | 15 ++++++++++--- .../InventoryList/InventoryListItem.jsx | 21 +++++++++++++++---- 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx index a70ca52232..5ea13ee6b3 100644 --- a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx +++ b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx @@ -71,6 +71,7 @@ export function HeaderCell({ sortBy, columnIndex, idPrefix, + className, children, }) { const sort = sortKey @@ -81,7 +82,11 @@ export function HeaderCell({ } : null; return ( - + {children} ); diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx index c9594e4e17..fe3dffdf35 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx @@ -1,5 +1,6 @@ import React, { useState, useCallback, useEffect } from 'react'; import { useLocation, useRouteMatch, Link } from 'react-router-dom'; +import styled from 'styled-components'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Card, PageSection, DropdownItem } from '@patternfly/react-core'; @@ -18,6 +19,14 @@ import useWsInventories from './useWsInventories'; import AddDropDownButton from '../../../components/AddDropDownButton'; import InventoryListItem from './InventoryListItem'; +const ResponsiveHeaderCell = styled(HeaderCell)` + @media (max-width: 992px) { + && { + display: none; + } + } +`; + const QS_CONFIG = getQSConfig('inventory', { page: 1, page_size: 20, @@ -195,9 +204,9 @@ function InventoryList({ i18n }) { {i18n._(t`Status`)} {i18n._(t`Type`)} {i18n._(t`Organization`)} - {i18n._(t`Groups`)} - {i18n._(t`Hosts`)} - {i18n._(t`Sources`)} + {i18n._(t`Groups`)} + {i18n._(t`Hosts`)} + {i18n._(t`Sources`)} {i18n._(t`Actions`)} } diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx index d10dbf2a0a..354affdf3b 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx @@ -6,6 +6,7 @@ import { Tr, Td } from '@patternfly/react-table'; import { PencilAltIcon } from '@patternfly/react-icons'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; +import styled from 'styled-components'; import { timeOfDay } from '../../../util/dates'; import { InventoriesAPI } from '../../../api'; import { Inventory } from '../../../types'; @@ -13,6 +14,14 @@ import { ActionsTd, ActionItem } from '../../../components/PaginatedTable'; import CopyButton from '../../../components/CopyButton'; import StatusLabel from '../../../components/StatusLabel'; +const ResponsiveTd = styled(Td)` + @media (max-width: 992px) { + && { + display: none; + } + } +`; + function InventoryListItem({ inventory, rowIndex, @@ -89,11 +98,15 @@ function InventoryListItem({ {inventory?.summary_fields?.organization?.name} - {inventory.total_groups} - {inventory.total_hosts} - + + {inventory.total_groups} + + + {inventory.total_hosts} + + {inventory.total_inventory_sources} - + {inventory.pending_deletion ? ( From a74fe57691958a215334a9da0b24d9fc7d0ef857 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Thu, 28 Jan 2021 16:34:46 -0800 Subject: [PATCH 2/3] remove extra inventory columns; add horizontal scroll to wide tables --- .../PaginatedTable/PaginatedTable.jsx | 5 +++-- .../Inventory/InventoryList/InventoryList.jsx | 12 ------------ .../InventoryList/InventoryListItem.jsx | 17 ----------------- 3 files changed, 3 insertions(+), 31 deletions(-) diff --git a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx index 42bf01a638..fcfb250a01 100644 --- a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx +++ b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx @@ -1,3 +1,4 @@ +import 'styled-components/macro'; import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { TableComposable, Tbody } from '@patternfly/react-table'; @@ -88,13 +89,13 @@ function PaginatedTable({ ); } else { Content = ( - <> +
{hasContentLoading && } {headerRow} {items.map(renderRow)} - +
); } diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx index fe3dffdf35..e152e7cde8 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx @@ -1,6 +1,5 @@ import React, { useState, useCallback, useEffect } from 'react'; import { useLocation, useRouteMatch, Link } from 'react-router-dom'; -import styled from 'styled-components'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Card, PageSection, DropdownItem } from '@patternfly/react-core'; @@ -19,14 +18,6 @@ import useWsInventories from './useWsInventories'; import AddDropDownButton from '../../../components/AddDropDownButton'; import InventoryListItem from './InventoryListItem'; -const ResponsiveHeaderCell = styled(HeaderCell)` - @media (max-width: 992px) { - && { - display: none; - } - } -`; - const QS_CONFIG = getQSConfig('inventory', { page: 1, page_size: 20, @@ -204,9 +195,6 @@ function InventoryList({ i18n }) { {i18n._(t`Status`)} {i18n._(t`Type`)} {i18n._(t`Organization`)} - {i18n._(t`Groups`)} - {i18n._(t`Hosts`)} - {i18n._(t`Sources`)} {i18n._(t`Actions`)} } diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx index 354affdf3b..eff6ec1905 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx @@ -14,14 +14,6 @@ import { ActionsTd, ActionItem } from '../../../components/PaginatedTable'; import CopyButton from '../../../components/CopyButton'; import StatusLabel from '../../../components/StatusLabel'; -const ResponsiveTd = styled(Td)` - @media (max-width: 992px) { - && { - display: none; - } - } -`; - function InventoryListItem({ inventory, rowIndex, @@ -98,15 +90,6 @@ function InventoryListItem({ {inventory?.summary_fields?.organization?.name} - - {inventory.total_groups} - - - {inventory.total_hosts} - - - {inventory.total_inventory_sources} - {inventory.pending_deletion ? ( From da6f793468985e274de4a75fdf7d5dcb3392ed70 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Fri, 29 Jan 2021 10:41:48 -0800 Subject: [PATCH 3/3] delete unused import --- .../src/screens/Inventory/InventoryList/InventoryListItem.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx index eff6ec1905..91f7681f98 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx @@ -6,7 +6,6 @@ import { Tr, Td } from '@patternfly/react-table'; import { PencilAltIcon } from '@patternfly/react-icons'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; import { timeOfDay } from '../../../util/dates'; import { InventoriesAPI } from '../../../api'; import { Inventory } from '../../../types';