External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-24 09:07:45 -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}

107
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,70 +59,58 @@ 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={[
<DataListCell key="name" id={labelId}>
<span>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
<b>{template.name}</b> <b>{template.name}</b>
</Link> </Link>
</span>
{missingResourceIcon && ( {missingResourceIcon && (
<span> <span>
<Tooltip <Tooltip
content={i18n._( content={i18n._(t`Resources are missing from this template.`)}
t`Resources are missing from this template.`
)}
position="right" position="right"
> >
<ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" /> <ExclamationTriangleIcon css="color: #c9190b; margin-left: 20px;" />
</Tooltip> </Tooltip>
</span> </span>
)} )}
</DataListCell>, </Td>
<DataListCell key="type"> <Td dataLabel={i18n._(t`Type`)}>{toTitleCase(template.type)}</Td>
{toTitleCase(template.type)} <Td dataLabel={i18n._(t`Recent Jobs`)}>
</DataListCell>,
<DataListCell key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} /> <Sparkline jobs={template.summary_fields.recent_jobs} />
</DataListCell>, </Td>
]} <ActionsTd dataLabel={i18n._(t`Actions`)}>
/> <ActionItem
<DataListAction visible={template.type === 'workflow_job_template'}
aria-label={i18n._(t`actions`)} tooltip={i18n._(t`Visualizer`)}
aria-labelledby={labelId}
> >
{template.type === 'workflow_job_template' && (
<Tooltip content={i18n._(t`Visualizer`)} position="top">
<Button <Button
isDisabled={isDisabled} isDisabled={isDisabled}
aria-label={i18n._(t`Visualizer`)} aria-label={i18n._(t`Visualizer`)}
css="grid-column: 1"
variant="plain" variant="plain"
component={Link} component={Link}
to={`/templates/workflow_job_template/${template.id}/visualizer`} to={`/templates/workflow_job_template/${template.id}/visualizer`}
> >
<ProjectDiagramIcon /> <ProjectDiagramIcon />
</Button> </Button>
</Tooltip> </ActionItem>
)} <ActionItem
{template.summary_fields.user_capabilities.start && ( visible={template.summary_fields.user_capabilities.start}
<Tooltip content={i18n._(t`Launch Template`)} position="top"> tooltip={i18n._(t`Launch Template`)}
>
<LaunchButton resource={template}> <LaunchButton resource={template}>
{({ handleLaunch }) => ( {({ handleLaunch }) => (
<Button <Button
isDisabled={isDisabled} isDisabled={isDisabled}
aria-label={i18n._(t`Launch template`)} aria-label={i18n._(t`Launch template`)}
css="grid-column: 2"
variant="plain" variant="plain"
onClick={handleLaunch} onClick={handleLaunch}
> >
@@ -145,26 +118,27 @@ function TemplateListItem({
</Button> </Button>
)} )}
</LaunchButton> </LaunchButton>
</Tooltip> </ActionItem>
)} <ActionItem
{template.summary_fields.user_capabilities.edit && ( visible={template.summary_fields.user_capabilities.edit}
<Tooltip content={i18n._(t`Edit Template`)} position="top"> tooltip={i18n._(t`Edit Template`)}
>
<Button <Button
isDisabled={isDisabled} isDisabled={isDisabled}
aria-label={i18n._(t`Edit Template`)} aria-label={i18n._(t`Edit Template`)}
css="grid-column: 3"
variant="plain" variant="plain"
component={Link} component={Link}
to={`/templates/${template.type}/${template.id}/edit`} to={`/templates/${template.type}/${template.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </ActionItem>
)} <ActionItem
{template.summary_fields.user_capabilities.copy && ( visible={template.summary_fields.user_capabilities.copy}
tooltip={i18n._(t`Copy Template`)}
>
<CopyButton <CopyButton
helperText={{ helperText={{
tooltip: i18n._(t`Copy Template`),
errorMessage: i18n._(t`Failed to copy template.`), errorMessage: i18n._(t`Failed to copy template.`),
}} }}
isDisabled={isDisabled} isDisabled={isDisabled}
@@ -172,10 +146,9 @@ function TemplateListItem({
onCopyFinish={handleCopyFinish} onCopyFinish={handleCopyFinish}
copyItem={copyTemplate} copyItem={copyTemplate}
/> />
)} </ActionItem>
</DataListAction> </ActionsTd>
</DataListItemRow> </Tr>
</DataListItem>
); );
} }