External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-10 22:19:28 -02: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
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, sortBy,
columnIndex, columnIndex,
idPrefix, idPrefix,
className,
children, children,
}) { }) {
const sort = sortKey const sort = sortKey
@@ -81,7 +82,11 @@ export function HeaderCell({
} }
: null; : null;
return ( return (
<Th sort={sort} id={sortKey ? `${idPrefix}-${sortKey}` : null}> <Th
id={sortKey ? `${idPrefix}-${sortKey}` : null}
className={className}
sort={sort}
>
{children} {children}
</Th> </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 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';
@@ -18,6 +19,14 @@ 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,
@@ -195,9 +204,9 @@ 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>
<HeaderCell>{i18n._(t`Groups`)}</HeaderCell> <ResponsiveHeaderCell>{i18n._(t`Groups`)}</ResponsiveHeaderCell>
<HeaderCell>{i18n._(t`Hosts`)}</HeaderCell> <ResponsiveHeaderCell>{i18n._(t`Hosts`)}</ResponsiveHeaderCell>
<HeaderCell>{i18n._(t`Sources`)}</HeaderCell> <ResponsiveHeaderCell>{i18n._(t`Sources`)}</ResponsiveHeaderCell>
<HeaderCell>{i18n._(t`Actions`)}</HeaderCell> <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
</HeaderRow> </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 { PencilAltIcon } from '@patternfly/react-icons';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { timeOfDay } from '../../../util/dates'; import { timeOfDay } from '../../../util/dates';
import { InventoriesAPI } from '../../../api'; import { InventoriesAPI } from '../../../api';
import { Inventory } from '../../../types'; import { Inventory } from '../../../types';
@@ -13,6 +14,14 @@ 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,
@@ -89,11 +98,15 @@ function InventoryListItem({
{inventory?.summary_fields?.organization?.name} {inventory?.summary_fields?.organization?.name}
</Link> </Link>
</Td> </Td>
<Td dataLabel={i18n._(t`Groups`)}>{inventory.total_groups}</Td> <ResponsiveTd dataLabel={i18n._(t`Groups`)}>
<Td dataLabel={i18n._(t`Hosts`)}>{inventory.total_hosts}</Td> {inventory.total_groups}
<Td dataLabel={i18n._(t`Sources`)}> </ResponsiveTd>
<ResponsiveTd dataLabel={i18n._(t`Hosts`)}>
{inventory.total_hosts}
</ResponsiveTd>
<ResponsiveTd dataLabel={i18n._(t`Sources`)}>
{inventory.total_inventory_sources} {inventory.total_inventory_sources}
</Td> </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>