Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

105818 job step #309

Merged
merged 3 commits into from
Jul 20, 2021
Merged

105818 job step #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46ccaf2
added eds breadcrumbs
Jul 19, 2021
197d514
added download and scrolling functionality to code component
Jul 20, 2021
7821292
styled step page and added download+scroll for log text
Jul 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
59 changes: 42 additions & 17 deletions src/components/code/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,56 @@
import classNames from 'classnames';
import React from 'react';
import { Button, Icon, Card } from '@equinor/eds-core-react';
import { copy as copy_icon } from '@equinor/eds-icons';
import { Button, Icon, Card, Dialog } from '@equinor/eds-core-react';
import {
copy as copy_icon,
download as download_icon,
} from '@equinor/eds-icons';

import { copyToClipboard } from '../../utils/string';

import './style.css';

export const Code = ({ copy, wrap, children }) => {
const handleClick = () => copyToClipboard(children);
const className = classNames('code', {
'code--wrap': wrap,
'code--with-toolbar': copy,
});
export const Code = ({ copy, download, filename, isScrollable, children }) => {
const handleCopy = () => copyToClipboard(children);

const handleDownload = (name, content) => {
var atag = document.createElement('a');
var file = new Blob([content], { type: 'text/plain' });
atag.href = URL.createObjectURL(file);
atag.download = name;
atag.click();
};

return (
<div className={className}>
{copy && (
<>
{(copy || download) && (
<div className="code__toolbar">
<Button variant="ghost" color="primary" onClick={handleClick}>
<Icon data={copy_icon} />
Copy
</Button>
{copy && (
<Button variant="ghost" color="primary" onClick={handleCopy}>
<Icon data={copy_icon} />
Copy
</Button>
)}
{download && (
<Button
variant="ghost"
color="primary"
onClick={() => handleDownload(filename + '.txt', children)}
>
<Icon data={download_icon} />
Download
</Button>
)}
</div>
)}
<Card className="code__card">{children}</Card>
</div>
{isScrollable && (
<Dialog className="code dialog">
<Dialog.CustomContent scrollable>
<Card className="code__card">{children}</Card>
</Dialog.CustomContent>
</Dialog>
)}
{!isScrollable && <Card className="code__card">{children}</Card>}
</>
);
};

Expand Down
22 changes: 20 additions & 2 deletions src/components/code/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,32 @@
.code .code__toolbar {
.code__toolbar {
padding: 16px 0;
}
.code .code__card {
.code.dialog {
width: 100%;
max-width: inherit;
margin: 0;
padding: 0;
}
.code #eds-dialog-customcontent {
height: 35rem;
margin: 0;
}
.code__card {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 32px;
color: #000000;
box-shadow: var(--eds_elevation_raised);
white-space: pre-wrap;
}
.code #eds-dialog-customcontent .code__card {
box-shadow: none;
padding: 0;
}
.code hr {
display: none;
}

@media (min-width: 50rem) {
Expand Down
134 changes: 78 additions & 56 deletions src/components/page-step/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import React from 'react';

import Breadcrumb from '../breadcrumb';
import Code from '../code';
import DocumentTitle from '../document-title';
import Duration from '../time/duration';
Expand All @@ -17,6 +16,8 @@ import * as subscriptionActions from '../../state/subscriptions/action-creators'
import { routeWithParams, smallJobName } from '../../utils/string';
import { mapRouteParamsToProps } from '../../utils/routing';
import routes from '../../routes';
import { Breadcrumbs, Typography } from '@equinor/eds-core-react';
import './style.css';

export class PageStep extends React.Component {
constructor() {
Expand Down Expand Up @@ -48,68 +49,89 @@ export class PageStep extends React.Component {
render() {
const { appName, jobName, stepLog, stepName, step } = this.props;
return (
<React.Fragment>
<div className="o-layout-constrained">
<DocumentTitle title={stepName} />
<Breadcrumb
links={[
{ label: appName, to: routeWithParams(routes.app, { appName }) },
{
label: 'Pipeline Jobs',
to: routeWithParams(routes.appJobs, { appName }),
},
{
label: smallJobName(jobName),
to: routeWithParams(routes.appJob, { appName, jobName }),
},
{ label: stepName },
]}
/>
<main>
<Breadcrumbs>
<Breadcrumbs.Breadcrumb
href={routeWithParams(routes.app, { appName })}
>
{appName}
</Breadcrumbs.Breadcrumb>
<Breadcrumbs.Breadcrumb
href={routeWithParams(routes.appJobs, { appName })}
>
Pipeline Jobs
</Breadcrumbs.Breadcrumb>
<Breadcrumbs.Breadcrumb
href={routeWithParams(routes.appJob, { appName, jobName })}
>
{smallJobName(jobName)}
</Breadcrumbs.Breadcrumb>
<Breadcrumbs.Breadcrumb>{stepName}</Breadcrumbs.Breadcrumb>
</Breadcrumbs>
<main className="o-layout-content">
{!step && 'No step…'}
{step && (
<React.Fragment>
<h2 className="o-heading-section">Summary</h2>
<p>Step {step.status.toLowerCase()}</p>
{step.started && (
<p>
Started{' '}
<strong>
<RelativeToNow time={step.started} />
</strong>
</p>
)}
{step.ended && (
<p>
Step took{' '}
<strong>
<Duration start={step.started} end={step.ended} />
</strong>
</p>
)}
{!step.ended && step.started && (
<p>
Duration so far is{' '}
<strong>
<Duration start={step.started} end={this.state.now} />
</strong>
</p>
)}
<h2 className="o-heading-section">Log</h2>
<AsyncResource
resource="JOB_LOGS"
resourceParams={[appName, jobName]}
>
{!stepLog && 'No logs…'}
{stepLog && (
<React.Fragment>
<Code copy>{stepLog.replace(/\r/gi, '\n')}</Code>
</React.Fragment>
)}
</AsyncResource>
<div className="step-overview">
<Typography variant="h4">Overview</Typography>
<span>
<Typography variant="body_long">
Step {step.status.toLowerCase()}
</Typography>
</span>
<span>
{step.started && (
<Typography variant="body_long">
Started{' '}
<strong>
<RelativeToNow time={step.started} />
</strong>
</Typography>
)}
{step.ended && (
<Typography variant="body_long">
Step took{' '}
<strong>
<Duration start={step.started} end={step.ended} />
</strong>
</Typography>
)}
{!step.ended && step.started && (
<Typography variant="body_long">
Duration so far is{' '}
<strong>
<Duration start={step.started} end={this.state.now} />
</strong>
</Typography>
)}
</span>
</div>
<div className="step-log">
<Typography variant="h4">Log</Typography>
<AsyncResource
resource="JOB_LOGS"
resourceParams={[appName, jobName]}
>
{!stepLog && 'No logs…'}
{stepLog && (
<React.Fragment>
<Code
copy
download
filename={appName + '_' + jobName}
isScrollable
>
{stepLog.replace(/\r/gi, '\n')}
</Code>
</React.Fragment>
)}
</AsyncResource>
</div>
</React.Fragment>
)}
</main>
</React.Fragment>
</div>
);
}
}
Expand Down
19 changes: 19 additions & 0 deletions src/components/page-step/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.step-overview {
display: grid;
gap: var(--eds_spacing_medium);
}
.step-overview > span {
display: grid;
grid-auto-flow: column;
}
.step-log {
display: grid;
gap: var(--eds_spacing_medium);
align-items: center;
}
.step-log .code__toolbar {
margin-left: auto;
}
.step-log .code {
grid-column: span 2;
}
4 changes: 4 additions & 0 deletions src/style/objects.layout-constrained.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@
display: grid;
grid-gap: var(--eds_spacing_x_large);
}
.o-layout-constrained main {
display: grid;
grid-gap: var(--eds_spacing_large);
}