feat(pipeline): make visual code works

inherd · Mar 2, 2021 · f7f908e · f7f908e
1 parent b66d251
commit f7f908e
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 44 deletions.
diff --git a/plugins/coco_pipeline/src/lib.rs b/plugins/coco_pipeline/src/lib.rs
@@ -42,7 +42,7 @@ mod tests {
     use std::io::Read;
     use std::path::PathBuf;
 
-    pub fn ctags_fixtures_dir() -> PathBuf {
+    pub fn fixtures_dir() -> PathBuf {
         let root_dir = PathBuf::from(env!("CARGO_MANIFEST_DIR"))
             .parent()
             .unwrap()
@@ -62,11 +62,11 @@ mod tests {
     fn should_run_pipeline_analysis() {
         let mut repos = vec![];
         repos.push(RepoConfig {
-            url: format!("{}", ctags_fixtures_dir().display()),
+            url: format!("{}", fixtures_dir().display()),
             languages: None,
         });
         let config = CocoConfig {
-            repos: repos,
+            repos,
             plugins: None,
         };
 

diff --git a/web/data/.gitkeeep → web/fake/.gitkeeep b/web/data/.gitkeeep → web/fake/.gitkeeep
diff --git a/web/fake/pipeline.json b/web/fake/pipeline.json
@@ -0,0 +1,30 @@
+[
+  {
+    "name": "",
+    "stages": [
+      {
+        "name": "Sequential",
+        "steps": [],
+        "is_parallel": false,
+        "sub_stages": [
+          {
+            "name": "In Sequential 1",
+            "steps": [
+              "echo \"In Sequential 1\"\n                    "
+            ],
+            "is_parallel": false,
+            "sub_stages": []
+          },
+          {
+            "name": "In Sequential 2",
+            "steps": [
+              "echo \"In Sequential 2\"\n                    "
+            ],
+            "is_parallel": false,
+            "sub_stages": []
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/web/index.html b/web/index.html
@@ -17,6 +17,7 @@
 
     #commit-contributions,
     #line-history,
+    #pipeline,
     #circle-packing, #nested-treemap, #branch-timeline, #members-lifecycle {
       width: 1200px;
       height: auto;
@@ -84,6 +85,8 @@
 <body>
 <h1>Coco Reporter</h1>
 
+<div id="pipeline"></div>
+
 <h2>Code Frequency</h2>
 <select id="code-frequency-select"></select>
 <div id="code-frequency"></div>

diff --git a/web/public/js/graph/plugins/pipeline-visual.js b/web/public/js/graph/plugins/pipeline-visual.js
@@ -21,14 +21,19 @@
 // SOFTWARE.
 
 // based on https://github.com/ledge-framework/engine/blob/master/projects/%40ledge-framework/render/src/lib/chart/ledge-pipeline/ledge-pipeline.component.ts
-function visualizationStruct(data, elementId) {
+function visualizationPipeline(data, elementId) {
   let Color = {
     GREEN: '#4A9900',
     RED: '#C4000A',
     GRAY: '#949393',
     WHITE: '#FFFFFF',
   }
 
+  let PolygonPoints = {
+    checkMark: '-2.00 2.80 -4.80 0.00 -5.73 0.933 -2.00 4.67 6.00 -3.33 5.07 -4.27',
+    crossMark: '4.67 -3.73 3.73 -4.67 0 -0.94 -3.73 -4.67 -4.67 -3.73 -0.94 0 -4.67 3.73 -3.73 4.67 0 0.94 3.73 4.67 4.67 3.73 0.94 0',
+  }
+
   let config = {
     connectionStrokeWidth: 4,
     stateStrokeWidth: 4,
@@ -189,29 +194,9 @@ function visualizationStruct(data, elementId) {
     const path = d3.path();
     const stateDiameter = 2 * config.stateRadius;
     path.arc(0, stateDiameter, config.stateRadius, Math.PI * 3 / 2, 0);
-    path.arc(
-      stateDiameter,
-      jobNumber * (stateDiameter + config.jobHeight),
-      config.stateRadius,
-      Math.PI * 2 / 2,
-      Math.PI * 1 / 2,
-      true
-    );
-    path.arc(
-      2 * config.stageSpace,
-      jobNumber * (stateDiameter + config.jobHeight),
-      config.stateRadius,
-      Math.PI * 1 / 2,
-      0,
-      true
-    );
-    path.arc(
-      2 * (config.stageSpace + config.stateRadius),
-      stateDiameter,
-      config.stateRadius,
-      Math.PI * 2 / 2,
-      Math.PI * 3 / 2
-    );
+    path.arc(stateDiameter, jobNumber * (stateDiameter + config.jobHeight), config.stateRadius, Math.PI * 2 / 2, Math.PI * 1 / 2, true);
+    path.arc(2 * config.stageSpace, jobNumber * (stateDiameter + config.jobHeight), config.stateRadius, Math.PI * 1 / 2, 0, true);
+    path.arc(2 * (config.stageSpace + config.stateRadius), stateDiameter, config.stateRadius, Math.PI * 2 / 2, Math.PI * 3 / 2);
     context.append('path').attr('d', path);
   }
 
@@ -291,19 +276,64 @@ function visualizationStruct(data, elementId) {
       .text('End');
   }
 
-}
 
-function calculateViewBox(stages) {
-  const maxJobsCountInStage = d3.max(stages.map(stage => stage.jobs.length));
-  const startNodeWidth = 2 * (config.startNodeRadius + config.startNodeSpace);
-  const stageWidth = 2 * (config.stageSpace + config.stateRadius + config.stateStrokeWidth);
-  // Start/End node suppose to have same width
-  const svgWidth = 2 * startNodeWidth + stages.length * stageWidth;
+  function calculateViewBox(stages) {
+    const maxJobsCountInStage = d3.max(stages.map(stage => stage.jobs.length));
+    const startNodeWidth = 2 * (config.startNodeRadius + config.startNodeSpace);
+    const stageWidth = 2 * (config.stageSpace + config.stateRadius + config.stateStrokeWidth);
+    // Start/End node suppose to have same width
+    const svgWidth = 2 * startNodeWidth + stages.length * stageWidth;
 
-  const singleJobHeight = (2 * config.stateRadius + config.jobHeight);
-  // With stage label height
-  const svgHeight = config.stageLabelHeight + maxJobsCountInStage * singleJobHeight;
+    const singleJobHeight = (2 * config.stateRadius + config.jobHeight);
+    // With stage label height
+    const svgHeight = config.stageLabelHeight + maxJobsCountInStage * singleJobHeight;
 
-  // -20 for Start label, otherwise it will be cut off
-  return `-20 0 ${svgWidth} ${svgHeight}`;
+    // -20 for Start label, otherwise it will be cut off
+    return `-20 0 ${svgWidth} ${svgHeight}`;
+  }
+
+  let JobState = {
+    UNTOUCHED: 'untouched',
+    PROCESSING: 'processing',
+    CURRENT: 'current',
+    SUCCESS: 'success',
+    ERROR: 'error',
+    PENDING: 'pending',
+  }
+
+  function getStateConfig(state) {
+    const stateConfig = {
+      polygonPoints: '',
+      circleStrokeWidth: config.stateStrokeWidth,
+      circleStroke: Color.WHITE,
+      circleFill: Color.GREEN,
+      symbolStrokeWidth: Color.WHITE,
+      symbolStroke: Color.WHITE,
+      symbolFill: Color.WHITE,
+    };
+
+    console.log(state);
+    switch (state) {
+      case 'success':
+        return {
+          ...stateConfig,
+          polygonPoints: PolygonPoints.checkMark,
+          circleFill: Color.GREEN,
+          circleStroke: Color.GREEN,
+        };
+      case 'error':
+        return {
+          ...stateConfig,
+          polygonPoints: PolygonPoints.crossMark,
+          circleFill: Color.RED,
+          circleStroke: Color.RED,
+        };
+      default:
+        return {
+          ...stateConfig,
+          circleFill: Color.WHITE,
+          circleStroke: Color.GRAY,
+        };
+    }
+  }
 }
diff --git a/web/public/js/index.js b/web/public/js/index.js
@@ -64,10 +64,41 @@ d3.json("data/git-commits.json").then(function (data) {
   renderCodeFrequency(commitByWeeks);
 });
 
-d3.json("data/struct_analysis.json").then(function (data) {
+d3.json("data/struct.json").then(function (data) {
   visualizationStruct(data);
 });
-//
-// d3.json("data/pipeline.json").then(function (data) {
-//   visualizationPipeline(data);
-// });
+
+d3.json("fake/pipeline.json").then(function (data) {
+  let testdata = [
+    {
+      name: 'Initialize',
+      children: [
+        { name: 'Initialize:success' }
+      ]
+    },
+    {
+      name: 'Build', children: [
+        { name: 'Pull code:success' },
+        { name: 'Test:error' },
+        { name: 'Build:current' }
+      ]
+    },
+    {
+      name: 'Deploy', children: [
+        { name: 'QA:pending' },
+        { name: 'UAT:processing' },
+        { name: 'STAGING:processing' },
+        { name: 'PROD:untouched' }
+      ]
+    },
+    {
+      name: 'Finish', children: [
+        { name: 'Finish:untouched' }
+      ]
+    }
+  ];
+
+  if (!!testdata) {
+    visualizationPipeline(testdata, '#pipeline');
+  }
+});