Pipeline console log - alpha (#15)

Co-authored-by: Tim Brown <[email protected]>
Co-authored-by: timb <[email protected]>
Co-authored-by: Tim Jacomb <[email protected]>
Co-authored-by: Zbynek Konecny <[email protected]>

Author: 4 people

package-lock.json

@@ -21,8 +21,14 @@
   },
   "homepage": "https://github.com/jenkinsci/pipeline-graph-view-plugin/#readme",
   "dependencies": {
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@react-spring/web": "^9.1.2",
+    "html-react-parser": "^1.2.7",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-split-pane": "^0.1.92"
   },
   "devDependencies": {
     "@types/node": "10.17.35",

package.json

@@ -0,0 +1,20 @@
+import React from "react";
+//import ReactDOM from "react-dom";
+import { FunctionComponent } from 'react';
+
+import { PipelineConsole } from './pipeline-console/main/';
+
+//const rootElement = document.getElementById("root");
+//ReactDOM.render(<DataTreeView />, rootElement);
+
+const App: FunctionComponent = () => {
+
+    return (
+      <React.Fragment>
+        <div>
+            <PipelineConsole />
+        </div>
+      </React.Fragment>
+    );
+}
+export default App;

src/main/frontend/reset-environment.ts renamed to src/main/frontend/common/reset-environment.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+import { resetEnvironment } from '../common/reset-environment';
+
+resetEnvironment();
+const root = document.getElementById('root');
+ReactDOM.render(<App />, root);

src/main/frontend/pipeline-console-view/app.tsx

@@ -0,0 +1,166 @@
+import * as React from "react";
+
+import TreeView from "@material-ui/lab/TreeView";
+
+import {
+  fade,
+  makeStyles,
+  withStyles,
+  Theme,
+  createStyles,
+} from "@material-ui/core/styles";
+import TreeItem, { TreeItemProps } from "@material-ui/lab/TreeItem";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+import {
+  StageInfo,
+  Result,
+} from "../../../pipeline-graph-view/pipeline-graph/main/";
+
+/**
+ * StageInfo is the input, in the form of an Array<StageInfo> of the top-level stages of a pipeline
+ */
+export interface StepInfo {
+  name: string;
+  title: string;
+  state: Result;
+  completePercent: number;
+  id: number;
+  type: string;
+}
+
+export interface TreeItemData {
+  id: string;
+  name: string;
+  children: TreeItemData[];
+}
+
+// Tree Item for stages
+const StageTreeItem = withStyles((theme: Theme) =>
+  createStyles({
+    iconContainer: {
+      "& .close": {
+        opacity: 0.3,
+      },
+    },
+    // TODO: Make line show status of block (green = passed, red = failed, etc.)
+    group: {
+      marginLeft: 7,
+      paddingLeft: 18,
+      borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
+    },
+  })
+)((props: TreeItemProps) => <TreeItem {...props} />);
+
+// Tree Item for steps
+const StepTreeItem = withStyles((theme: Theme) =>
+  createStyles({
+    label: {
+      textDecoration: "underline",
+    },
+  })
+)((props: TreeItemProps) => <TreeItem {...props} />);
+
+const getTreeItemsFromStepList = (stepsItems: StepInfo[]) => {
+  return stepsItems.map((stepItemData) => {
+    return (
+      <StepTreeItem
+        key={stepItemData.id}
+        nodeId={String(stepItemData.id)}
+        label={stepItemData.name}
+      />
+    );
+  });
+};
+
+const getTreeItemsFromStage = (
+  stageItems: StageInfo[],
+  stageSteps: Map<String, StepInfo[]>
+) => {
+  return stageItems.map((stageItemData) => {
+    let children: JSX.Element[] = []
+    if (stageItemData.children && stageItemData.children.length > 0) {
+      children = [...getTreeItemsFromStage(stageItemData.children, stageSteps)]
+    }
+    let steps = stageSteps.get(`${stageItemData.id}`);
+    if (steps) {
+      let stepsItems = getTreeItemsFromStepList(steps);
+      children = [...children, ...stepsItems]
+    }
+    return (
+      <StageTreeItem
+        key={stageItemData.id}
+        nodeId={String(stageItemData.id)}
+        label={stageItemData.name}
+        children={children}
+      />
+    );
+  });
+};
+
+interface DataTreeViewProps {
+  stages: Array<StageInfo>;
+  onActionNodeSelect: (event: React.ChangeEvent<any>, nodeIds: string) => void;
+}
+
+interface State {
+  stages: Array<StageInfo>;
+  steps: Map<String, StepInfo[]>;
+}
+
+export class DataTreeView extends React.Component {
+  props!: DataTreeViewProps;
+  state: State;
+
+  constructor(props: DataTreeViewProps) {
+    super(props);
+    this.state = {
+      stages: [],
+      steps: new Map(),
+    };
+  }
+
+  componentDidMount() {
+    fetch("tree")
+      .then((res) => res.json())
+      .then((result) =>
+        // Get steps for a each stage and add to 'steps' state
+        this.setState(
+          {
+            stages: result.data.stages,
+          },
+          () => {
+            // Add Steps to state - consider moving this code to a new function.
+            this.state.stages.forEach((stageData) => {
+              fetch(`steps?nodeId=${stageData.id}`)
+                .then((step_res) => step_res.json())
+                .then((step_result) =>
+                  this.setState({
+                    steps: new Map(
+                      this.state.steps.set(`${stageData.id}`, step_result.steps)
+                    ),
+                  })
+                );
+            });
+          }
+        )
+      )
+      .catch(console.log);
+  }
+
+  handleOnNodeSelect() {
+    this.props.onActionNodeSelect;
+  }
+
+  render() {
+    return (
+      <TreeView
+        defaultCollapseIcon={<ExpandMoreIcon />}
+        defaultExpandIcon={<ChevronRightIcon />}
+        onNodeSelect={this.props.onActionNodeSelect}
+      >
+        {getTreeItemsFromStage(this.state.stages, this.state.steps)}
+      </TreeView>
+    );
+  }
+}

src/main/frontend/pipeline-console-view/index.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import SplitPane from 'react-split-pane';
+import { DataTreeView } from './DataTreeView';
+
+import "./pipeline-console.scss";
+
+
+interface PipelineConsoleProps { }
+interface PipelineConsoleState {
+  consoleText: string
+}
+
+export class PipelineConsole extends React.Component {
+  constructor(props: PipelineConsoleProps) {
+    super(props)
+    this.handleActionNodeSelect = this.handleActionNodeSelect.bind(this)
+  }
+  state: PipelineConsoleState = {
+    consoleText: 'Select a node to view console output.'
+  }
+
+  handleActionNodeSelect(event: React.ChangeEvent<any>, nodeId: string) {
+    fetch(`consoleOutput?nodeId=${nodeId}`)
+      .then(res => res.text())
+      .then(text => {
+        console.log(text)
+        this.setState({ consoleText: text })
+      })
+      .catch(console.log);
+  }
+
+  render() {
+    const splitPaneStyle: React.CSSProperties = {
+      position: 'relative',
+      height: '100%',
+    }
+    const paneStyle: React.CSSProperties = {
+      paddingLeft: '8px',
+      textAlign: 'left'
+    }
+
+    return (
+      <React.Fragment>
+        <div className="App">
+          <SplitPane split="vertical" minSize={150}
+            defaultSize={parseInt(localStorage.getItem('splitPos') || '250')}
+            onChange={(size) => localStorage.setItem('splitPos', `${size}`)}
+            style={splitPaneStyle}>
+            <div style={paneStyle}>
+              <DataTreeView stages={[]} onActionNodeSelect={this.handleActionNodeSelect} />
+            </div>
+            <div className="console-output">
+              <pre className="console-pane">
+                {this.state.consoleText}
+              </pre>
+            </div>
+          </SplitPane>
+        </div>
+      </React.Fragment>
+    );
+  }
+}

src/main/frontend/pipeline-console-view/pipeline-console/main/DataTreeView.tsx

@@ -0,0 +1,2 @@
+//export { TreeItemData, DataTreeView, PipelineConsole } from './DataTreeView';
+export { PipelineConsole } from './PipelineConsole';

src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx

@@ -0,0 +1,57 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  height: 80%;
+}
+.Resizer {
+  background: #000;
+  opacity: 0.2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+  &:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+  }
+}
+.Resizer.horizontal {
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+  &:hover {
+    border-top: 5px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+  }
+}
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+  &:hover {
+    border-left: 5px solid rgba(0, 0, 0, 0.5);
+    border-right: 5px solid rgba(0, 0, 0, 0.5);
+  }
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+  &:hover {
+    border-color: transparent;
+  }
+}
+.SplitPane {
+  position: relative;
+}
+
+.console-output {
+  text-align: left;
+  padding-left: 16px;
+}

src/main/frontend/pipeline-console-view/pipeline-console/main/index.ts

@@ -24,4 +24,4 @@ const App: FunctionComponent = () => {
   );
 }
 
-export default App;
+export default App;

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -2,8 +2,8 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import App from './app';
-import { resetEnvironment } from './reset-environment';
+import { resetEnvironment } from '../common/reset-environment';
 
 resetEnvironment();
 const root = document.getElementById('root');
-ReactDOM.render(<App/>, root);
+ReactDOM.render(<App/>, root);

src/main/frontend/app.scss renamed to src/main/frontend/pipeline-graph-view/app.scss

@@ -62,6 +62,7 @@ export class PipelineGraph extends React.Component {
             selectedStage: props.selectedStage,
         };
     }
+    
 
     componentDidMount() {
         const onPipelineDataReceived = (data: { stages: Array<StageInfo> }) => {