front-end run API integration

.gitignore

@@ -6,6 +6,8 @@ __pycache__/
 # C extensions
 *.so
 
+.vscode/
+
 # Distribution / packaging
 .Python
 build/

orchest/webserver/orchest/static/css/main.css

@@ -669,7 +669,7 @@ svg.mdc-button__icon {
   /* @alternate */
   background-color: var(--mdc-theme-secondary, #0a6df7); }
 
-@keyframes mdc-checkbox-fade-in-background-u90d4a125 {
+@keyframes mdc-checkbox-fade-in-background-u01a3ced9 {
   0% {
     border-color: rgba(0, 0, 0, 0.54);
     background-color: transparent; }
@@ -681,7 +681,7 @@ svg.mdc-button__icon {
     /* @alternate */
     background-color: var(--mdc-theme-secondary, #0a6df7); } }
 
-@keyframes mdc-checkbox-fade-out-background-u90d4a125 {
+@keyframes mdc-checkbox-fade-out-background-u01a3ced9 {
   0%,
   80% {
     border-color: #0a6df7;
@@ -695,10 +695,10 @@ svg.mdc-button__icon {
     background-color: transparent; } }
 
 .mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-in-background-u90d4a125; }
+  animation-name: mdc-checkbox-fade-in-background-u01a3ced9; }
 
 .mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-out-background-u90d4a125; }
+  animation-name: mdc-checkbox-fade-out-background-u01a3ced9; }
 
 .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   border-color: rgba(0, 0, 0, 0.26);
@@ -1444,7 +1444,7 @@ svg.mdc-button__icon {
   /* @alternate */
   background-color: var(--mdc-theme-primary, #000000); }
 
-@keyframes mdc-checkbox-fade-in-background-u59735576 {
+@keyframes mdc-checkbox-fade-in-background-u8bb50c61 {
   0% {
     border-color: rgba(0, 0, 0, 0.54);
     background-color: transparent; }
@@ -1456,7 +1456,7 @@ svg.mdc-button__icon {
     /* @alternate */
     background-color: var(--mdc-theme-primary, #000000); } }
 
-@keyframes mdc-checkbox-fade-out-background-u59735576 {
+@keyframes mdc-checkbox-fade-out-background-u8bb50c61 {
   0%,
   80% {
     border-color: #000000;
@@ -1472,12 +1472,12 @@ svg.mdc-button__icon {
 .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-in-background-u59735576; }
+  animation-name: mdc-checkbox-fade-in-background-u8bb50c61; }
 
 .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background, .mdc-data-table__header-row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background,
 .mdc-data-table__row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background {
-  animation-name: mdc-checkbox-fade-out-background-u59735576; }
+  animation-name: mdc-checkbox-fade-out-background-u8bb50c61; }
 
 .mdc-dialog,
 .mdc-dialog__scrim {
@@ -7511,6 +7511,13 @@ h2.header {
     top: 0;
     z-index: 9;
     padding: 20px; }
+    .pipeline-view .pipeline-actions.bottom-left {
+      top: auto;
+      bottom: 0;
+      right: auto;
+      left: 0; }
+      .pipeline-view .pipeline-actions.bottom-left button {
+        background-color: #0a6df7; }
     .pipeline-view .pipeline-actions button {
       margin-left: 20px;
       min-width: 0; }

orchest/webserver/orchest/static/css/main.scss

@@ -226,6 +226,17 @@ h2.header {
     z-index: 9;
     padding: $generalPadding;
 
+    &.bottom-left {
+      top: auto;
+      bottom: 0;
+      right: auto;
+      left: 0;
+
+      button {
+        background-color: $mdc-theme-secondary;
+      }
+    }
+
     button {
       margin-left: $generalPadding;
       min-width: 0;

orchest/webserver/orchest/static/js/mdc-components/MDCButtonReact.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MDCRipple } from '@material/ripple';
+
+class MDCButtonReact extends React.Component {
+    componentDidMount() {
+        this.mdc = new MDCRipple(this.refs.button);
+    }
+    render() {
+
+        return <button ref={"button"} onClick={this.props.onClick} className={"mdc-button mdc-button--raised"}>
+            <div className="mdc-button__ripple"></div>
+            <span className="mdc-button__label">{this.props.label}</span>
+        </button>;
+    }
+}
+
+export default MDCButtonReact;

orchest/webserver/orchest/static/js/views/PipelineDetails.js

@@ -157,8 +157,8 @@ class PipelineDetails extends React.Component {
         this.props.onOpenNotebook(this);
     }
 
-    onRerunIncoming() {
-        this.props.onRerunIncoming(this);
+    onRunIncoming() {
+        this.props.onRunIncoming(this);
     }
 
     componentDidMount() {
@@ -439,10 +439,10 @@ class PipelineDetails extends React.Component {
                         <span className="mdc-button__label">Open notebook</span>
                     </button>
 
-                    <button ref={"launchNotebook"} onClick={this.onRerunIncoming.bind(this)} className="mdc-button mdc-button--raised save-button">
+                    <button ref={"launchNotebook"} onClick={this.onRunIncoming.bind(this)} className="mdc-button mdc-button--raised save-button">
                         <div className="mdc-button__ripple"></div>
                         <i className="material-icons mdc-button__icon" aria-hidden="true">replay</i>
-                        <span className="mdc-button__label">Rerun incoming steps</span>
+                        <span className="mdc-button__label">Run incoming steps</span>
                     </button>
                 </div>
 

orchest/webserver/orchest/static/js/views/PipelineStep.js

@@ -26,14 +26,14 @@ class PipelineStep extends React.Component {
 
         classNames.push(this.props.executionState.status);
 
-        if(this.props.executionState.status === "success"){
+        if(this.props.executionState.status === "SUCCESS"){
             stateText = "Success";
         }
-        if(this.props.executionState.status === "running"){
+        if(this.props.executionState.status === "STARTED"){
             let seconds = Math.round((new Date() - this.props.executionState.time)/1000);
             stateText = "Running (" + seconds + " sec.)";
         }
-        if(this.props.executionState.status == "pending"){
+        if(this.props.executionState.status == "PENDING"){
             stateText = "Pending";
         }
 
@@ -42,7 +42,7 @@ class PipelineStep extends React.Component {
 
             </div>
             <div className={"execution-indicator"}>
-                { ( () => { if(this.props.executionState.status === "success"){ return <span>✓ </span>} } )() }
+                { ( () => { if(this.props.executionState.status === "SUCCESS"){ return <span>✓ </span>} } )() }
                 {stateText}
             </div>
             <div className="step-label-holder">