remove extra inventory columns; add horizontal scroll to wide tables

This commit is contained in:
Keith Grant 2021-01-28 16:34:46 -08:00
parent c3ca43d9bc
commit a74fe57691
3 changed files with 3 additions and 31 deletions

View File

@ -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 = (
<>
<div css="overflow: scroll">
{hasContentLoading && <LoadingSpinner />}
<TableComposable aria-label={dataListLabel}>
{headerRow}
<Tbody>{items.map(renderRow)}</Tbody>
</TableComposable>
</>
</div>
);
}

View File

@ -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 }) {
<HeaderCell>{i18n._(t`Status`)}</HeaderCell>
<HeaderCell>{i18n._(t`Type`)}</HeaderCell>
<HeaderCell>{i18n._(t`Organization`)}</HeaderCell>
<ResponsiveHeaderCell>{i18n._(t`Groups`)}</ResponsiveHeaderCell>
<ResponsiveHeaderCell>{i18n._(t`Hosts`)}</ResponsiveHeaderCell>
<ResponsiveHeaderCell>{i18n._(t`Sources`)}</ResponsiveHeaderCell>
<HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
</HeaderRow>
}

View File

@ -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}
</Link>
</Td>
<ResponsiveTd dataLabel={i18n._(t`Groups`)}>
{inventory.total_groups}
</ResponsiveTd>
<ResponsiveTd dataLabel={i18n._(t`Hosts`)}>
{inventory.total_hosts}
</ResponsiveTd>
<ResponsiveTd dataLabel={i18n._(t`Sources`)}>
{inventory.total_inventory_sources}
</ResponsiveTd>
{inventory.pending_deletion ? (
<Td dataLabel={i18n._(t`Groups`)}>
<Label color="red">{i18n._(t`Pending delete`)}</Label>