External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-24 00:57:48 -02:30
Code Issues Packages Projects Releases Wiki Activity

convert TemplateList to tables

Browse Source
This commit is contained in:
Keith Grant
2021-01-18 10:22:53 -08:00
parent 271eb4043a
commit f3410f6517
2 changed files with 105 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
View File

@@ -11,9 +11,11 @@ import {
import AlertModal from '../../../components/AlertModal'; import AlertModal from '../../../components/AlertModal';
import DatalistToolbar from '../../../components/DataListToolbar'; import DatalistToolbar from '../../../components/DataListToolbar';
import ErrorDetail from '../../../components/ErrorDetail'; import ErrorDetail from '../../../components/ErrorDetail';
import PaginatedDataList, { import { ToolbarDeleteButton } from '../../../components/PaginatedDataList';
ToolbarDeleteButton, import PaginatedTable, {
} from '../../../components/PaginatedDataList'; HeaderRow,
HeaderCell,
} from '../../../components/PaginatedTable';
import useRequest, { useDeleteItems } from '../../../util/useRequest'; import useRequest, { useDeleteItems } from '../../../util/useRequest';
import { getQSConfig, parseQueryString } from '../../../util/qs'; import { getQSConfig, parseQueryString } from '../../../util/qs';
import useWsTemplates from '../../../util/useWsTemplates'; import useWsTemplates from '../../../util/useWsTemplates';
@@ -167,7 +169,7 @@ function TemplateList({ i18n }) {
return ( return (
<Fragment> <Fragment>
<Card> <Card>
<PaginatedDataList <PaginatedTable
contentError={contentError} contentError={contentError}
hasContentLoading={isLoading || isDeleteLoading} hasContentLoading={isLoading || isDeleteLoading}
items={templates} items={templates}
@@ -234,6 +236,15 @@ function TemplateList({ i18n }) {
]} ]}
toolbarSearchableKeys={searchableKeys} toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys} toolbarRelatedSearchableKeys={relatedSearchableKeys}
headerRow={
<HeaderRow qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
<HeaderCell sortKey="type">{i18n._(t`Type`)}</HeaderCell>
<HeaderCell sortKey="last_job_run">
{i18n._(t`Recent Jobs`)}
</HeaderCell>
</HeaderRow>
}
renderToolbar={props => ( renderToolbar={props => (
<DatalistToolbar <DatalistToolbar
{...props} {...props}
@@ -252,7 +263,7 @@ function TemplateList({ i18n }) {
]} ]}
/> />
)} )}
renderItem={template => ( renderRow={(template, index) => (
<TemplateListItem <TemplateListItem
key={template.id} key={template.id}
value={template.name} value={template.name}
@@ -261,6 +272,7 @@ function TemplateList({ i18n }) {
onSelect={() => handleSelect(template)} onSelect={() => handleSelect(template)}
isSelected={selected.some(row => row.id === template.id)} isSelected={selected.some(row => row.id === template.id)}
fetchTemplates={fetchTemplates} fetchTemplates={fetchTemplates}
rowIndex={index}
/> />
)} )}
emptyStateControls={(canAddJT || canAddWFJT) && addButton} emptyStateControls={(canAddJT || canAddWFJT) && addButton}

203
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

@@ -1,15 +1,8 @@
import 'styled-components/macro'; import 'styled-components/macro';
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import { Button, Tooltip } from '@patternfly/react-core';
Button, import { Tr, Td } from '@patternfly/react-table';
DataListAction as _DataListAction,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
Tooltip,
} from '@patternfly/react-core';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { import {
@@ -18,9 +11,7 @@ import {
ProjectDiagramIcon, ProjectDiagramIcon,
RocketIcon, RocketIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import styled from 'styled-components'; import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
import DataListCell from '../../../components/DataListCell';
import { timeOfDay } from '../../../util/dates'; import { timeOfDay } from '../../../util/dates';
import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api'; import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '../../../api';
@@ -29,13 +20,6 @@ import Sparkline from '../../../components/Sparkline';
import { toTitleCase } from '../../../util/strings'; import { toTitleCase } from '../../../util/strings';
import CopyButton from '../../../components/CopyButton'; import CopyButton from '../../../components/CopyButton';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(4, 40px);
`;
function TemplateListItem({ function TemplateListItem({
i18n, i18n,
template, template,
@@ -43,6 +27,7 @@ function TemplateListItem({
onSelect, onSelect,
detailUrl, detailUrl,
fetchTemplates, fetchTemplates,
rowIndex,
}) { }) {
const [isDisabled, setIsDisabled] = useState(false); const [isDisabled, setIsDisabled] = useState(false);
const labelId = `check-action-${template.id}`; const labelId = `check-action-${template.id}`;
@@ -74,108 +59,96 @@ function TemplateListItem({
(!template.summary_fields.inventory && (!template.summary_fields.inventory &&
!template.ask_inventory_on_launch)); !template.ask_inventory_on_launch));
return ( return (
<DataListItem aria-labelledby={labelId} id={`${template.id}`}> <Tr id={`template-row-${template.id}`}>
<DataListItemRow> <Td
<DataListCheck select={{
isDisabled={isDisabled} rowIndex,
id={`select-jobTemplate-${template.id}`} isSelected,
checked={isSelected} onSelect,
onChange={onSelect} }}
aria-labelledby={labelId} dataLabel={i18n._(t`Selected`)}
/> />
<DataListItemCells <Td id={labelId} dataLabel={i18n._(t`Name`)}>
dataListCells={[ <Link to={`${detailUrl}`}>
<DataListCell key="name" id={labelId}> <b>{template.name}</b>
<span> </Link>
<Link to={`${detailUrl}`}> {missingResourceIcon && (
<b>{template.name}</b> <span>
</Link> <Tooltip
</span> content={i18n._(t`Resources are missing from this template.`)}
{missingResourceIcon && ( position="right"
<span> >
<Tooltip <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
content={i18n._( </Tooltip>
t`Resources are missing from this template.` </span>
)} )}
position="right" </Td>
> <Td dataLabel={i18n._(t`Type`)}>{toTitleCase(template.type)}</Td>
<ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" /> <Td dataLabel={i18n._(t`Recent Jobs`)}>
</Tooltip> <Sparkline jobs={template.summary_fields.recent_jobs} />
</span> </Td>
)} <ActionsTd dataLabel={i18n._(t`Actions`)}>
</DataListCell>, <ActionItem
<DataListCell key="type"> visible={template.type === 'workflow_job_template'}
{toTitleCase(template.type)} tooltip={i18n._(t`Visualizer`)}
</DataListCell>,
<DataListCell key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} />
</DataListCell>,
]}
/>
<DataListAction
aria-label={i18n._(t`actions`)}
aria-labelledby={labelId}
> >
{template.type === 'workflow_job_template' && ( <Button
<Tooltip content={i18n._(t`Visualizer`)} position="top"> isDisabled={isDisabled}
aria-label={i18n._(t`Visualizer`)}
variant="plain"
component={Link}
to={`/templates/workflow_job_template/${template.id}/visualizer`}
>
<ProjectDiagramIcon />
</Button>
</ActionItem>
<ActionItem
visible={template.summary_fields.user_capabilities.start}
tooltip={i18n._(t`Launch Template`)}
>
<LaunchButton resource={template}>
{({ handleLaunch }) => (
<Button <Button
isDisabled={isDisabled} isDisabled={isDisabled}
aria-label={i18n._(t`Visualizer`)} aria-label={i18n._(t`Launch template`)}
css="grid-column: 1"
variant="plain" variant="plain"
component={Link} onClick={handleLaunch}
to={`/templates/workflow_job_template/${template.id}/visualizer`}
> >
<ProjectDiagramIcon /> <RocketIcon />
</Button> </Button>
</Tooltip> )}
)} </LaunchButton>
{template.summary_fields.user_capabilities.start && ( </ActionItem>
<Tooltip content={i18n._(t`Launch Template`)} position="top"> <ActionItem
<LaunchButton resource={template}> visible={template.summary_fields.user_capabilities.edit}
{({ handleLaunch }) => ( tooltip={i18n._(t`Edit Template`)}
<Button >
isDisabled={isDisabled} <Button
aria-label={i18n._(t`Launch template`)} isDisabled={isDisabled}
css="grid-column: 2" aria-label={i18n._(t`Edit Template`)}
variant="plain" variant="plain"
onClick={handleLaunch} component={Link}
> to={`/templates/${template.type}/${template.id}/edit`}
<RocketIcon /> >
</Button> <PencilAltIcon />
)} </Button>
</LaunchButton> </ActionItem>
</Tooltip> <ActionItem
)} visible={template.summary_fields.user_capabilities.copy}
{template.summary_fields.user_capabilities.edit && ( tooltip={i18n._(t`Copy Template`)}
<Tooltip content={i18n._(t`Edit Template`)} position="top"> >
<Button <CopyButton
isDisabled={isDisabled} helperText={{
aria-label={i18n._(t`Edit Template`)} errorMessage: i18n._(t`Failed to copy template.`),
css="grid-column: 3" }}
variant="plain" isDisabled={isDisabled}
component={Link} onCopyStart={handleCopyStart}
to={`/templates/${template.type}/${template.id}/edit`} onCopyFinish={handleCopyFinish}
> copyItem={copyTemplate}
<PencilAltIcon /> />
</Button> </ActionItem>
</Tooltip> </ActionsTd>
)} </Tr>
{template.summary_fields.user_capabilities.copy && (
<CopyButton
helperText={{
tooltip: i18n._(t`Copy Template`),
errorMessage: i18n._(t`Failed to copy template.`),
}}
isDisabled={isDisabled}
onCopyStart={handleCopyStart}
onCopyFinish={handleCopyFinish}
copyItem={copyTemplate}
/>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
); );
} }