feat #965 pipelines: show pipeline activity & details

config-ui/package.json

@@ -15,6 +15,7 @@
     "@blueprintjs/select": "^3.18.10",
     "axios": "^0.21.4",
     "babel-plugin-module-resolver": "^4.1.0",
+    "dayjs": "^1.10.7",
     "dotenv": "^10.0.0",
     "dotenv-webpack": "^7.0.3",
     "react": "17.0.2",

config-ui/src/App.js

@@ -22,7 +22,7 @@ import Offline from '@/pages/offline/index'
 // #963 Create Pipelines
 import CreatePipeline from '@/pages/pipelines/create'
 // #965 Pipeline Activity
-// import PipelineActivity from '@/pages/pipelines/activity'
+import PipelineActivity from '@/pages/pipelines/activity'
 
 function App () {
   return (
@@ -55,9 +55,12 @@ function App () {
       {/* #964 <Route exact path='/pipelines'>
         <Pipelines />
       </Route> */}
-      {/* #965 <Route exact path='/pipelines/activity/:id'>
+      <Route exact path='/pipelines/activity'>
         <PipelineActivity />
-      </Route> */}
+      </Route>
+      <Route exact path='/pipelines/activity/:pId'>
+        <PipelineActivity />
+      </Route>
       <Route exact path='/lake/api/configuration'>
         <Configure />
       </Route>

config-ui/src/components/pipelines/CodeInspector.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+// import { CSSTransition } from 'react-transition-group'
+import {
+  Classes,
+  Drawer,
+  DrawerSize,
+  Card,
+  Elevation,
+  Position,
+} from '@blueprintjs/core'
+
+const CodeInspector = (props) => {
+  const { activePipeline, isOpen, onClose } = props
+
+  return (
+    <Drawer
+      className='drawer-json-inspector'
+      icon='code'
+      onClose={() => onClose(false)}
+      title={`Inspect RUN #${activePipeline.ID}`}
+      position={Position.RIGHT}
+      size={DrawerSize.SMALL}
+      autoFocus
+      canEscapeKeyClose
+      canOutsideClickClose
+      enforceFocus
+      hasBackdrop
+      isOpen={isOpen}
+      usePortal
+    >
+      <div className={Classes.DRAWER_BODY}>
+        <div className={Classes.DIALOG_BODY}>
+          <h3 style={{ margin: 0, padding: '8px 0' }}>
+            <span style={{ float: 'right', fontSize: '9px', color: '#aaaaaa' }}>application/json</span> JSON RESPONSE
+          </h3>
+          <p>
+            If you are submitting a
+            <strong> Bug-Report</strong> regarding a Pipeline Run, include the output below for better debugging.
+          </p>
+          <div className='formContainer'>
+            <Card
+              interactive={false}
+              elevation={Elevation.ZERO}
+              style={{ padding: '6px 12px', minWidth: '320px', width: '100%', maxWidth: '601px', marginBottom: '20px', overflow: 'auto' }}
+            >
+
+              <code>
+                <pre style={{ fontSize: '10px' }}>
+                  {JSON.stringify(activePipeline, null, '  ')}
+                </pre>
+              </code>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+
+  )
+}
+
+export default CodeInspector

config-ui/src/components/pipelines/ProviderSettings.jsx

@@ -143,7 +143,7 @@ const ProviderSettings = (props) => {
             <InputGroup
               id='owner'
               disabled={isRunning || !isEnabled(providerId)}
-              placeholder='eg. merio-dev'
+              placeholder='eg. merico-dev'
               value={owner}
               onChange={(e) => setOwner(e.target.value)}
               className='input-owner'

config-ui/src/components/pipelines/StagePanel.jsx

@@ -0,0 +1,217 @@
+import React from 'react'
+import { CSSTransition } from 'react-transition-group'
+import {
+  Card,
+  Button, Icon,
+  ButtonGroup,
+  Elevation,
+  Colors,
+  Spinner,
+  Intent
+  // Alignment, Classes, Spinner
+} from '@blueprintjs/core'
+import { ReactComponent as PipelineRunningIcon } from '@/images/synchronize.svg'
+import { ReactComponent as PipelineFailedIcon } from '@/images/no-synchronize.svg'
+import { ReactComponent as PipelineCompleteIcon } from '@/images/check-circle.svg'
+
+const StagePanel = (props) => {
+  const { activePipeline, pipelineReady = false, stages, activeStageId = 1, isLoading = false } = props
+
+  return (
+    <>
+      <CSSTransition
+        in={pipelineReady}
+        timeout={350}
+        classNames='activity-panel'
+      >
+        <Card
+          elevation={Elevation.TWO}
+          style={{
+            display: 'flex',
+            width: '100%',
+            justifySelf: 'flex-start',
+            marginBottom: '8px',
+            padding: 0,
+            backgroundColor: activePipeline.status === 'TASK_COMPLETED' ? 'rgba(245, 255, 250, 0.99)' : 'inherit',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis'
+          }}
+        >
+
+          <ButtonGroup style={{ backgroundColor: 'transparent' }}>
+            <Button minimal active style={{ width: '32px', backgroundColor: '#eeeeee', padding: 0 }}>
+              <div style={{
+                margin: 0,
+                display: 'flex',
+                position: 'relative',
+                justifyContent: 'center',
+                alignItems: 'center',
+                alignContent: 'center'
+              }}
+              >
+                {isLoading && (
+                  <span style={{
+                    position: 'absolute',
+                    width: '24px',
+                    height: '24px',
+                    marginLeft: '4px',
+                    display: 'flex',
+                    justifyContent: 'center'
+                  }}
+                  >
+                    <Spinner size={20} intent={Intent.PRIMARY} />
+                  </span>)}
+                {(() => {
+                  let statusIcon = null
+                  switch (activePipeline.status) {
+                    case 'TASK_COMPLETED':
+                      statusIcon = (
+                        <Icon
+                          icon={<PipelineCompleteIcon
+                            width={24} height={24} style={{
+                              margin: '0 0 0 0',
+                              display: 'flex',
+                              alignSelf: 'center'
+                            }}
+                                />}
+                          size={24}
+                        />
+                      )
+                      break
+                    case 'TASK_FAILED':
+                      statusIcon = (
+                        <Icon
+                          icon={<PipelineFailedIcon
+                            width={24}
+                            height={24} style={{
+                              margin: '0 0 0 0',
+                              display: 'flex',
+                              alignSelf: 'center'
+                            }}
+                                />}
+                          size={24}
+                        />
+                      )
+                      break
+                    case 'TASK_RUNNING':
+                    default:
+                      statusIcon = (
+                        <Icon
+                          style={{ margin: 0, padding: 0, float: 'left' }}
+                          icon={<PipelineRunningIcon
+                            width={24}
+                            height={24} style={{
+                              margin: '0 0 0 0',
+                              padding: 0,
+                              display: 'inline',
+                              alignSelf: 'center'
+                            }}
+                                />}
+                          size={24}
+                        />
+                      )
+                      break
+                  }
+                  return !isLoading && (<span style={{ position: 'absolute', marginLeft: '3px', width: '24px', height: '24px' }}>{statusIcon}</span>)
+                })()}
+              </div>
+            </Button>
+            {/* @todo: re-activate "stage" ux in a future release */}
+            {Object.keys(stages).length > 0 && (
+              <>
+                {Object.keys(stages).map((s, sIdx) => (
+                  // <Button
+                  //   minimal style={{
+                  //     backgroundColor: '#eeeeee',
+                  //     color: '#cccccc',
+                  //     fontSize: '35px',
+                  //     lineHeight: '20px',
+                  //     padding: 0,
+                  //     fontWeight: 100,
+                  //   }}
+                  // >/
+                  // </Button>
+                  <Button
+                    key={`stage-btn-key${sIdx}`}
+                    disabled={activeStageId !== (sIdx + 1)}
+                    minimal
+                    style={{
+                      position: 'relative',
+                      backgroundColor: '#eeeeee',
+                      paddingRight: '50px',
+                    }}
+                    rightIcon={
+                      sIdx !== (Object.keys(stages).length - 1)
+                        ? (
+                          <span
+                            className='stage-panel-stage-separator'
+                            style={{
+                              backgroundColor: '#eeeeee',
+                              color: '#cccccc',
+                              fontSize: '35px',
+                              lineHeight: '100%',
+                              padding: 0,
+                              margin: 'auto 0 auto 0',
+                              position: 'absolute',
+                              right: 0,
+                              fontWeight: 100,
+                            }}
+                          >/
+                          </span>
+                          )
+                        : null
+                    }
+                  >
+                    <h3
+                      className='stage-panel-stage-name'
+                      style={{ margin: 0, fontSize: '18px', color: activeStageId === (sIdx + 1) ? Colors.BLACK : Colors.GRAY3 }}
+                    >
+                      Stage {sIdx + 1}
+                    </h3>
+                  </Button>
+                ))}
+
+                <Button
+                  className='stage-panel-stage-endcap'
+                  minimal
+                  style={{
+                    marginLeft: '1px',
+                    background: '#ffffff!!important',
+                    width: 0,
+                    height: 0,
+                    borderTop: '16px solid transparent',
+                    borderBottom: '16px solid transparent',
+                    borderLeft: '16px solid #eeeeee',
+                    pointerEvents: 'none'
+                  }}
+                />
+              </>
+            )}
+          </ButtonGroup>
+          <div style={{ display: 'flex', marginLeft: 'auto', padding: '0 10px' }}>
+            <h3
+              className='h3-finished-tasks-indicator'
+              style={{
+                textTransform: 'uppercase',
+                lineHeight: '33px',
+                margin: 0,
+                fontFamily: 'Montserrat',
+                fontWeight: 800,
+                fontSize: '13px',
+                letterSpacing: '2px',
+                justifySelf: 'flex-end'
+              }}
+            >Finished Tasks &middot; <span style={{ color: Colors.GREEN5 }}>{activePipeline.finishedTasks}</span>
+              <em style={{ color: '#dddddd', padding: '0 4px', textTransform: 'lowercase' }}>/</em>{activePipeline.totalTasks}
+            </h3>
+            {/* <span style={{fontSize: '16px', fontWeight: 700, marginLeft: 'auto', lineHeight: '33px'}} /> */}
+            {/* {Number((activePipeline.finishedTasks / activePipeline.totalTasks) * 100).toFixed(1)}% */}
+          </div>
+        </Card>
+      </CSSTransition>
+    </>
+  )
+}
+
+export default StagePanel