update dashboard to 3 tab single pane

awx/ui_next/src/screens/Dashboard/Dashboard.jsx

@@ -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 === 0 && (
-            {activeTabId === 1 && <DashboardTemplateList />}
+              <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>
   );
 }