External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-17 20:51:21 -03:30
Code Issues Packages Projects Releases Wiki Activity

hide inventory groups/hosts/sources columns when screen width doesn't allow

Browse Source
This commit is contained in:
Keith Grant 2021-01-11 10:13:17 -08:00
parent a534a80360
commit c3ca43d9bc
3 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
View File

@ -71,6 +71,7 @@ export function HeaderCell({
sortBy,
columnIndex,
idPrefix,
className,
children,
}) {
const sort = sortKey
@ -81,7 +82,11 @@ export function HeaderCell({
}
: null;
return (
<Th sort={sort} id={sortKey ? `${idPrefix}-${sortKey}` : null}>
<Th
id={sortKey ? `${idPrefix}-${sortKey}` : null}
className={className}
sort={sort}
>
{children}
</Th>
);

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

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

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

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