Skip to content

Commit

Permalink
Merge pull request #977 from sandialabs/timeseries-loading-page-impro…
Browse files Browse the repository at this point in the history
…vements

improved the loading ui
  • Loading branch information
Mletter1 authored Jul 10, 2020
2 parents f8498b1 + 6363f2b commit 3a8c40b
Show file tree
Hide file tree
Showing 12 changed files with 354 additions and 266 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,91 +6,91 @@ exports[`Timeseries Jobcodes should match snapshot 1`] = `
JOB STATE CODES
</dt>
<dt>
BF BOOT_FAIL
BOOT_FAIL (BF)
</dt>
<dd>
Job terminated due to launch failure, typically due to a hardware failure (e.g. unable to boot the node or block and the job can not be requeued).
</dd>
<dt>
CA CANCELLED
CANCELLED (CA)
</dt>
<dd>
Job was explicitly cancelled by the user or system administrator. The job may or may not have been initiated.
</dd>
<dt>
CD COMPLETED
COMPLETED (CD)
</dt>
<dd>
Job has terminated all processes on all nodes with an exit code of zero.
</dd>
<dt>
DL DEADLINE
DEADLINE (DL)
</dt>
<dd>
Job terminated on deadline.
</dd>
<dt>
F FAILED
FAILED (F)
</dt>
<dd>
Job terminated with non-zero exit code or other failure condition.
</dd>
<dt>
NF NODE_FAIL
NODE_FAIL (NF)
</dt>
<dd>
Job terminated due to failure of one or more allocated nodes.
</dd>
<dt>
OOM OUT_OF_MEMORY
OUT_OF_MEMORY (OOM)
</dt>
<dd>
Job experienced out of memory error.
</dd>
<dt>
PD PENDING
PENDING (PD)
</dt>
<dd>
Job is awaiting resource allocation.
</dd>
<dt>
PR PREEMPTED
PREEMPTED (PR)
</dt>
<dd>
Job terminated due to preemption.
</dd>
<dt>
R RUNNING
RUNNING (R)
</dt>
<dd>
Job currently has an allocation.
</dd>
<dt>
RQ REQUEUED
REQUEUED (RQ)
</dt>
<dd>
Job was requeued.
</dd>
<dt>
RS RESIZING
RESIZING (RS)
</dt>
<dd>
Job is about to change size.
</dd>
<dt>
RV REVOKED
REVOKED (RV)
</dt>
<dd>
Sibling was removed from cluster due to other cluster starting the job.
</dd>
<dt>
S SUSPENDED
SUSPENDED (S)
</dt>
<dd>
Job has an allocation, but execution has been suspended and CPUs have been released for other jobs.
</dd>
<dt>
TO TIMEOUT
TIMEOUT (TO)
</dt>
<dd>
Job terminated upon reaching its time limit.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,91 +13,44 @@ exports[`Timeseries LoadingPage we have expected props on initial load 2`] = `
<div
className="slycat-job-checker bootstrap-styles"
>
<div>
<ProgressBar
hidden={false}
progress={0}
/>
</div>
<div
className="slycat-job-checker-controls"
>
<InfoBar
hostname="hostname"
jid="1234"
sessionExists={false}
/>
<div
className="row"
style={
Object {
"paddingBottom": "15px",
"paddingTop": "15px",
}
}
>
<div
className="col-3"
>
Updated
NaN-NaN-NaN NaN:NaN:NaN
</div>
<div
className="col-2"
>
Job id:
<b>
1234
</b>
</div>
<div
className="col-3"
>
Remote host:
<b>
hostname
</b>
</div>
<div
className="col-2"
>
Session:
<b>
false
</b>
</div>
<ProgressBar
hidden={false}
progress={0}
/>
</div>
<div
className="row"
className="row justify-content-center"
>
<div
className="btn-group col-8"
role="group"
>
<button
aria-controls="collapseJobCodes"
aria-expanded="false"
className="btn btn-outline-primary"
data-target="#collapseJobCodes"
data-toggle="collapse"
type="button"
>
Show job status meanings
</button>
<ConnectModal
callBack={[Function]}
<LoadingPageButtons
cancelJob={[Function]}
connectModalCallBack={[Function]}
hostname="hostname"
jobStatus="Job Status Unknown"
modalId="ConnectModal"
modelShow={false}
pullHPCData={[Function]}
sessionExists={false}
/>
<button
className="btn btn btn-outline-primary"
disabled={true}
id="pullbtn"
onClick={[Function]}
title="load data"
type="button"
>
load
</button>
<button
className="btn btn btn-outline-primary"
disabled={true}
id="pullbtn"
onClick={[Function]}
title="load data"
type="button"
>
cancel job
</button>
</div>
</div>
<div
Expand All @@ -121,7 +74,23 @@ exports[`Timeseries LoadingPage we have expected props on initial load 2`] = `
<div
className="slycat-job-checker-output text-white bg-secondary"
>
<Spinner />
<LogList
jobStatus="Job Status Unknown"
log={
Object {
"logLineArray": Array [],
}
}
modalId="ConnectModal"
modelId="modelID"
modelMessage=""
modelShow={false}
modelState="waiting"
progressBarHidden={false}
progressBarProgress={0}
pullCalled={0}
sessionExists={false}
/>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions web-server/__tests__/setupTests.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ const localStorageMock = {
removeItem: jest.fn(),
clear: jest.fn(),
};
import $ from "jquery";
global.$ = global.jQuery = $;
global.localStorage = localStorageMock;
// https://github.com/jefflau/jest-fetch-mock
global.fetch = require('jest-fetch-mock')
Expand Down
44 changes: 28 additions & 16 deletions web-server/components/ControlsButton.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
import React from "react";

const ControlsButton = (props) => {
return props.hidden ? null : (
<button
className={`${props.button_style} ${props.class}`}
id={props.id}
type='button' title={props.title}
disabled={props.disabled}
onClick={props.click}
data-toggle={props.data_toggle}
data-target={props.data_target}>
{props.icon &&
<span className={'fa ' + props.icon} aria-hidden='true'/>
}
{props.label}
</button>
);
// wait until all the jquery stuff is loaded
$( document ).ready(function( $ ) {
// enable the tooltip
$('[data-toggle="tooltip"]').tooltip()
})
return props.hidden ? null : (
<button
className={`${props.button_style} ${props.class}`}
id={props.id}
type="button"
title={props.title}
disabled={props.disabled}
onClick={props.click}
data-toggle={props.data_toggle}
data-target={props.data_target}
>
{props.icon && <span className={"fa " + props.icon} aria-hidden="true" />}
{props.label}
<i
style={{ paddingLeft: "5px" }}
className="fa fa-info-circle"
data-toggle="tooltip"
data-placement="bottom"
title="Connect to HPC"
/>
</button>
);
};

export default ControlsButton
export default ControlsButton;
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
"use strict";
import * as React from "react";
import { getFormattedDateTime } from "./utils.ts";
import { InfoBarProps } from "./types.ts";

/**
* react pure component used to create a the info bar
*
* @export
* @extends {React.Component<InfoBarProps>}
*/
const InfoBar: React.FunctionComponent<InfoBarProps> = (props) => (
<div className="row justify-content-center">
<div className="col-3">Updated {getFormattedDateTime()}</div>
<div className="col-2">
Job id: <b>{props.jid}</b>
</div>
<div className="col-4">
Remote host: <b>{props.hostname}</b>
</div>
<div className="col-2">
Session: <b>{props.sessionExists ? "true" : "false"}</b>
</div>
</div>
);

export default InfoBar;
Original file line number Diff line number Diff line change
Expand Up @@ -11,44 +11,44 @@ import { JobCodesProps } from "./types";
export const JobCodes: React.FunctionComponent<JobCodesProps> = () => (
<React.Fragment>
<dt>JOB STATE CODES</dt>
<dt>BF BOOT_FAIL</dt>
<dt>BOOT_FAIL (BF)</dt>
<dd>
Job terminated due to launch failure, typically due to a hardware failure (e.g. unable to boot
the node or block and the job can not be requeued).
</dd>
<dt>CA CANCELLED</dt>
<dt>CANCELLED (CA)</dt>
<dd>
Job was explicitly cancelled by the user or system administrator. The job may or may not have
been initiated.
</dd>
<dt>CD COMPLETED</dt>
<dt>COMPLETED (CD)</dt>
<dd>Job has terminated all processes on all nodes with an exit code of zero.</dd>
<dt>DL DEADLINE</dt>
<dt>DEADLINE (DL)</dt>
<dd>Job terminated on deadline.</dd>
<dt>F FAILED</dt>
<dt>FAILED (F)</dt>
<dd>Job terminated with non-zero exit code or other failure condition.</dd>
<dt>NF NODE_FAIL</dt>
<dt>NODE_FAIL (NF)</dt>
<dd>Job terminated due to failure of one or more allocated nodes.</dd>
<dt>OOM OUT_OF_MEMORY</dt>
<dt>OUT_OF_MEMORY (OOM)</dt>
<dd>Job experienced out of memory error.</dd>
<dt>PD PENDING</dt>
<dt>PENDING (PD)</dt>
<dd>Job is awaiting resource allocation.</dd>
<dt>PR PREEMPTED</dt>
<dt>PREEMPTED (PR)</dt>
<dd>Job terminated due to preemption.</dd>
<dt>R RUNNING</dt>
<dt>RUNNING (R)</dt>
<dd>Job currently has an allocation.</dd>
<dt>RQ REQUEUED</dt>
<dt>REQUEUED (RQ)</dt>
<dd>Job was requeued.</dd>
<dt>RS RESIZING</dt>
<dt>RESIZING (RS)</dt>
<dd>Job is about to change size.</dd>
<dt>RV REVOKED</dt>
<dt>REVOKED (RV)</dt>
<dd>Sibling was removed from cluster due to other cluster starting the job.</dd>
<dt>S SUSPENDED</dt>
<dt>SUSPENDED (S)</dt>
<dd>
Job has an allocation, but execution has been suspended and CPUs have been released for other
jobs.
</dd>
<dt>TO TIMEOUT</dt>
<dt>TIMEOUT (TO)</dt>
<dd>Job terminated upon reaching its time limit. </dd>
</React.Fragment>
);
Loading

0 comments on commit 3a8c40b

Please sign in to comment.