External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-08 01:47:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

remove extra inventory columns; add horizontal scroll to wide tables

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { TableComposable, Tbody } from '@patternfly/react-table'; import { TableComposable, Tbody } from '@patternfly/react-table';
@@ -88,13 +89,13 @@ function PaginatedTable({
); );
} else { } else {
Content = ( Content = (
<> <div css="overflow: scroll">
{hasContentLoading && <LoadingSpinner />} {hasContentLoading && <LoadingSpinner />}
<TableComposable aria-label={dataListLabel}> <TableComposable aria-label={dataListLabel}>
{headerRow} {headerRow}
<Tbody>{items.map(renderRow)}</Tbody> <Tbody>{items.map(renderRow)}</Tbody>
</TableComposable> </TableComposable>
</> </div>
); );
} }

12
awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
View File

@@ -1,6 +1,5 @@
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import { useLocation, useRouteMatch, Link } from 'react-router-dom'; import { useLocation, useRouteMatch, Link } from 'react-router-dom';
import styled from 'styled-components';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Card, PageSection, DropdownItem } from '@patternfly/react-core'; import { Card, PageSection, DropdownItem } from '@patternfly/react-core';
@@ -19,14 +18,6 @@ import useWsInventories from './useWsInventories';
import AddDropDownButton from '../../../components/AddDropDownButton'; import AddDropDownButton from '../../../components/AddDropDownButton';
import InventoryListItem from './InventoryListItem'; import InventoryListItem from './InventoryListItem';
const ResponsiveHeaderCell = styled(HeaderCell)`
@media (max-width: 992px) {
&& {
display: none;
}
}
`;
const QS_CONFIG = getQSConfig('inventory', { const QS_CONFIG = getQSConfig('inventory', {
page: 1, page: 1,
page_size: 20, page_size: 20,
@@ -204,9 +195,6 @@ function InventoryList({ i18n }) {
<HeaderCell>{i18n._(t`Status`)}</HeaderCell> <HeaderCell>{i18n._(t`Status`)}</HeaderCell>
<HeaderCell>{i18n._(t`Type`)}</HeaderCell> <HeaderCell>{i18n._(t`Type`)}</HeaderCell>
<HeaderCell>{i18n._(t`Organization`)}</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> <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
</HeaderRow> </HeaderRow>
} }

17
awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
View File

@@ -14,14 +14,6 @@ import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
import CopyButton from '../../../components/CopyButton'; import CopyButton from '../../../components/CopyButton';
import StatusLabel from '../../../components/StatusLabel'; import StatusLabel from '../../../components/StatusLabel';
const ResponsiveTd = styled(Td)`
@media (max-width: 992px) {
&& {
display: none;
}
}
`;
function InventoryListItem({ function InventoryListItem({
inventory, inventory,
rowIndex, rowIndex,
@@ -98,15 +90,6 @@ function InventoryListItem({
{inventory?.summary_fields?.organization?.name} {inventory?.summary_fields?.organization?.name}
</Link> </Link>
</Td> </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 ? ( {inventory.pending_deletion ? (
<Td dataLabel={i18n._(t`Groups`)}> <Td dataLabel={i18n._(t`Groups`)}>
<Label color="red">{i18n._(t`Pending delete`)}</Label> <Label color="red">{i18n._(t`Pending delete`)}</Label>