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

update dashboard to 3 tab single pane

Browse Source
This commit is contained in:
John Mitchell 2020-10-20 17:33:37 -04:00
parent 8839fb9af3
commit 5f4d6daf1b
1 changed files with 83 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
awx/ui_next/src/screens/Dashboard/Dashboard.jsx
View File

@ -5,7 +5,6 @@ import { t } from '@lingui/macro';
import {
Card,
CardHeader,
CardHeaderMain,
CardActions,
CardBody,
PageSection,
@ -16,9 +15,6 @@ import {
Tabs,
Tab,
TabTitleText,
Text,
TextContent,
TextVariants,
Title,
} from '@patternfly/react-core';
@ -34,7 +30,6 @@ const Counts = styled.div`
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: var(--pf-global--spacer--lg);
margin-bottom: var(--pf-global--spacer--lg);
@media (max-width: 900px) {
grid-template-columns: repeat(3, 1fr);
@ -42,16 +37,24 @@ const Counts = styled.div`
}
`;
const ListPageSection = styled(PageSection)`
const MainPageSection = styled(PageSection)`
padding-top: 0;
padding-bottom: 0;
min-height: 626px;
& .spacer {
margin-bottom: var(--pf-global--spacer--lg);
}
`;
const GraphCardHeader = styled(CardHeader)`
margin-top: var(--pf-global--spacer--lg);
`;
const GraphCardActions = styled(CardActions)`
margin-left: initial;
padding-left: 0;
`;
function Dashboard({ i18n }) {
const { light } = PageSectionVariants;
@ -149,69 +152,8 @@ function Dashboard({ i18n }) {
label={i18n._(t`Project sync failures`)}
/>
</Counts>
<Card>
<CardHeader>
<CardHeaderMain>
<TextContent>
<Text component={TextVariants.h3}>{i18n._(t`Job Status`)}</Text>
</TextContent>
</CardHeaderMain>
<CardActions>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select period`)}
aria-label={i18n._(t`Select period`)}
className="periodSelect"
onToggle={setIsPeriodDropdownOpen}
onSelect={(event, selection) => setPeriodSelection(selection)}
selections={periodSelection}
isOpen={isPeriodDropdownOpen}
>
<SelectOption key="month" value="month">
{i18n._(t`Past month`)}
</SelectOption>
<SelectOption key="two_weeks" value="two_weeks">
{i18n._(t`Past two weeks`)}
</SelectOption>
<SelectOption key="week" value="week">
{i18n._(t`Past week`)}
</SelectOption>
</Select>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select job type`)}
aria-label={i18n._(t`Select job type`)}
className="jobTypeSelect"
onToggle={setIsJobTypeDropdownOpen}
onSelect={(event, selection) => setJobTypeSelection(selection)}
selections={jobTypeSelection}
isOpen={isJobTypeDropdownOpen}
>
<SelectOption key="all" value="all">
{i18n._(t`All job types`)}
</SelectOption>
<SelectOption key="inv_sync" value="inv_sync">
{i18n._(t`Inventory sync`)}
</SelectOption>
<SelectOption key="scm_update" value="scm_update">
{i18n._(t`SCM update`)}
</SelectOption>
<SelectOption key="playbook_run" value="playbook_run">
{i18n._(t`Playbook run`)}
</SelectOption>
</Select>
</CardActions>
</CardHeader>
<CardBody>
<LineChart
height={430}
id="d3-line-chart-root"
data={jobGraphData}
/>
</CardBody>
</Card>
</PageSection>
<ListPageSection>
<MainPageSection>
<div className="spacer">
<Card>
<Tabs
@ -220,23 +162,90 @@ function Dashboard({ i18n }) {
onSelect={(key, eventKey) => setActiveTabId(eventKey)}
>
<Tab
aria-label={i18n._(t`Recent Jobs list tab`)}
aria-label={i18n._(t`Job status graph tab`)}
eventKey={0}
title={<TabTitleText>{i18n._(t`Job status`)}</TabTitleText>}
/>
<Tab
aria-label={i18n._(t`Recent Jobs list tab`)}
eventKey={1}
title={<TabTitleText>{i18n._(t`Recent Jobs`)}</TabTitleText>}
/>
<Tab
aria-label={i18n._(t`Recent Templates list tab`)}
eventKey={1}
eventKey={2}
title={
<TabTitleText>{i18n._(t`Recent Templates`)}</TabTitleText>
}
/>
</Tabs>
{activeTabId === 0 && <JobList defaultParams={{ page_size: 5 }} />}
{activeTabId === 1 && <DashboardTemplateList />}
{activeTabId === 0 && (
<Fragment>
<GraphCardHeader>
<GraphCardActions>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select period`)}
aria-label={i18n._(t`Select period`)}
className="periodSelect"
onToggle={setIsPeriodDropdownOpen}
onSelect={(event, selection) =>
setPeriodSelection(selection)
}
selections={periodSelection}
isOpen={isPeriodDropdownOpen}
>
<SelectOption key="month" value="month">
{i18n._(t`Past month`)}
</SelectOption>
<SelectOption key="two_weeks" value="two_weeks">
{i18n._(t`Past two weeks`)}
</SelectOption>
<SelectOption key="week" value="week">
{i18n._(t`Past week`)}
</SelectOption>
</Select>
<Select
variant={SelectVariant.single}
placeholderText={i18n._(t`Select job type`)}
aria-label={i18n._(t`Select job type`)}
className="jobTypeSelect"
onToggle={setIsJobTypeDropdownOpen}
onSelect={(event, selection) =>
setJobTypeSelection(selection)
}
selections={jobTypeSelection}
isOpen={isJobTypeDropdownOpen}
>
<SelectOption key="all" value="all">
{i18n._(t`All job types`)}
</SelectOption>
<SelectOption key="inv_sync" value="inv_sync">
{i18n._(t`Inventory sync`)}
</SelectOption>
<SelectOption key="scm_update" value="scm_update">
{i18n._(t`SCM update`)}
</SelectOption>
<SelectOption key="playbook_run" value="playbook_run">
{i18n._(t`Playbook run`)}
</SelectOption>
</Select>
</GraphCardActions>
</GraphCardHeader>
<CardBody>
<LineChart
height={390}
id="d3-line-chart-root"
data={jobGraphData}
/>
</CardBody>
</Fragment>
)}
{activeTabId === 1 && <JobList defaultParams={{ page_size: 5 }} />}
{activeTabId === 2 && <DashboardTemplateList />}
</Card>
</div>
</ListPageSection>
</MainPageSection>
</Fragment>
);
}