Add Job results skeleton

src/pages/Jobs.jsx

@@ -1,28 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-import {
-  PageSection,
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core';
-
-class Jobs extends Component {
-  render () {
-    const { i18n } = this.props;
-    const { light, medium } = PageSectionVariants;
-
-    return (
-      <Fragment>
-        <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">
-            {i18n._(t`Jobs`)}
-          </Title>
-        </PageSection>
-        <PageSection variant={medium} />
-      </Fragment>
-    );
-  }
-}
-
-export default withI18n()(Jobs);

src/pages/Jobs/Job.jsx

@@ -0,0 +1,139 @@
+import React, { Component } from 'react'
+import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import styled from 'styled-components';
+
+import { withNetwork } from '../../contexts/Network';
+import { JobsAPI } from '../../api';
+import { Card, CardHeader as PFCardHeader, PageSection } from '@patternfly/react-core';
+import CardCloseButton from '../../components/CardCloseButton';
+import RoutedTabs from '../../components/Tabs/RoutedTabs';
+import JobDetail from './JobDetail';
+import JobOutput from './JobOutput';
+
+export class Job extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      job: null,
+      error: false,
+      loading: true
+    }
+
+    this.fetchJob = this.fetchJob.bind(this);
+  }
+
+  componentDidMount () {
+    this.fetchJob();
+  }
+
+  async componentDidUpdate (prevProps) {
+    const { location } = this.props;
+    if (location !== prevProps.location) {
+      await this.fetchJob();
+    }
+  }
+  async fetchJob () {
+    const {
+      match,
+      setBreadcrumb,
+      handleHttpError
+    } = this.props;
+
+    try {
+      const { data } = await JobsAPI.readDetail(match.params.id);
+      setBreadcrumb(data);
+      this.setState({
+        job: data,
+        loading: false
+      })
+    } catch (error) {
+      handleHttpError(error) || this.setState({ error: true, loading: false });
+    }
+  }
+
+  render() {
+    const {
+      location,
+      history,
+      match,
+      i18n
+    } = this.props;
+
+    const {
+      job,
+      error,
+      loading
+    } = this.state;
+
+    const tabsArray = [
+      { name: i18n._(t`Details`), link: `${match.url}/details`, id: 0 },
+      { name: i18n._(t`Output`), link: `${match.url}/output`, id: 1 }
+    ]
+
+    const CardHeader = styled(PFCardHeader)`
+      --pf-c-card--first-child--PaddingTop: 0;
+      --pf-c-card--child--PaddingLeft: 0;
+      --pf-c-card--child--PaddingRight: 0;
+      position: relative;
+    `;
+
+    const cardHeader = (
+      loading ? '' : (
+        <CardHeader>
+          <RoutedTabs
+            match={match}
+            history={history}
+            tabsArray={tabsArray}
+          />
+          <CardCloseButton linkTo="/jobs" />
+        </CardHeader>
+      )
+    );
+
+    return (
+      <PageSection>
+        <Card>
+          { cardHeader }
+          <Switch>
+            <Redirect
+              from="/jobs/:id"
+              to="/jobs/:id/details"
+              exact
+            />
+            {job && (
+              <Route
+                path="/jobs/:id/details"
+                render={() => (
+                  <JobDetail
+                    match={match}
+                    history={history}
+                    location={location}
+                    job={job}
+                  />
+                )}
+              />
+            )}
+            {job && (
+              <Route
+                path="/jobs/:id/output"
+                render={() => (
+                  <JobOutput
+                    match={match}
+                    history={history}
+                    location={location}
+                    job={job}
+                  />
+                )}
+              />
+            )}
+          </Switch>
+        </Card>
+      </PageSection>
+    )
+  }
+}
+
+export default withI18n()(withNetwork(withRouter(Job)));

src/pages/Jobs/JobDetail/JobDetail.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { CardBody  } from '@patternfly/react-core';
+
+
+class JobDetail extends Component {
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    const {
+      job
+    } = this.props;
+
+    return (
+      <CardBody>
+        <b>{job.name}</b>
+      </CardBody>
+    );
+  }
+}
+
+export default JobDetail;

src/pages/Jobs/JobDetail/index.js

@@ -0,0 +1,4 @@
+import JobDetail from './JobDetail';
+
+export default JobDetail;
+

src/pages/Jobs/JobOutput/JobOutput.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { CardBody  } from '@patternfly/react-core';
+
+
+class JobOutput extends Component {
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    const {
+      job
+    } = this.props;
+
+    return (
+      <CardBody>
+        <b>{job.name}</b>
+      </CardBody>
+    );
+  }
+}
+
+export default JobOutput;

src/pages/Jobs/JobOutput/index.js

@@ -0,0 +1,4 @@
+import JobOutput from './JobOutput';
+
+export default JobOutput;
+

src/pages/Jobs/Jobs.jsx

@@ -0,0 +1,85 @@
+import React, { Component, Fragment } from 'react';
+import { Route, withRouter, Switch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import { NetworkProvider } from '../../contexts/Network';
+import { withRootDialog } from '../../contexts/RootDialog';
+
+import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import Job from './Job';
+
+class Jobs extends Component {
+  constructor (props) {
+    super(props);
+
+    const { i18n } = props;
+
+    this.state = {
+      breadcrumbConfig: {
+        '/jobs': i18n._(`Jobs`)
+      }
+    }
+  }
+
+  setBreadcrumbConfig = (job) => {
+    const { i18n } = this.props;
+
+    if (!job) {
+      return;
+    }
+
+    const breadcrumbConfig = {
+      '/jobs': i18n._(`Jobs`),
+      [`/jobs/${job.id}`]: `${job.name}`,
+      [`/jobs/${job.id}/details`]: i18n._(`Details`),
+      [`/jobs/${job.id}/output`]: i18n._(`Output`)
+    };
+
+    this.setState({ breadcrumbConfig });
+  }
+
+  render () {
+    const { match, history, location, setRootDialogMessage, i18n } = this.props;
+    const { breadcrumbConfig } = this.state;
+
+    return (
+      <Fragment>
+        <Breadcrumbs
+          breadcrumbConfig={breadcrumbConfig}
+        />
+        <Switch>
+          <Route
+            path={`${match.path}/:id`}
+            render={({ match: newRouteMatch }) => (
+              <NetworkProvider
+                handle404={() => {
+                  history.replace('/jobs');
+                  setRootDialogMessage({
+                    title: '404',
+                    bodyText: (
+                      <Fragment>
+                        {i18n._(t`Cannot find job with ID`)}
+                        <strong>{` ${newRouteMatch.params.id}`}</strong>
+                        .
+                      </Fragment>
+                    ),
+                    variant: 'warning'
+                  });
+                }}
+                >
+                <Job
+                  history={history}
+                  location={location}
+                  setBreadcrumb={this.setBreadcrumbConfig}
+                />
+              </NetworkProvider>
+            )}
+          />
+        </Switch>
+      </Fragment>
+    );
+  }
+}
+
+export default withI18n()(withRootDialog(withRouter(Jobs)));

src/pages/Jobs/index.js

@@ -0,0 +1,3 @@
+import Jobs from "./Jobs";
+
+export default Jobs;