Cycle analytics second iteration

- Vue app has been completely rewritten
- New components
- Basic CSS

.eslintrc

@@ -23,7 +23,8 @@
     "spyOn": false,
     "spyOnEvent": false,
     "Turbolinks": false,
-    "window": false
+    "window": false,
+    "Vue": false,
+    "Flash": false
   }
 }
-

app/assets/javascripts/cycle_analytics/components/item_build_component.js.es6

@@ -0,0 +1,24 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  /*
+  `build` prop should have
+
+  - Build name/title
+  - Build ID
+  - Build URL
+  - Build branch
+  - Build branch URL
+  - Build short SHA
+  - Build commit URL
+  - Build date
+  - Total time
+  */
+
+  global.cycleAnalytics.ItemBuildComponent = Vue.extend({
+    template: '#item-build-component',
+    props: {
+      build: Object,
+    }
+  });
+}(window.gl || (window.gl = {})));

app/assets/javascripts/cycle_analytics/components/item_commit_component.js.es6

@@ -0,0 +1,22 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  /*
+  `commit` prop should have
+
+  - Commit title
+  - Commit URL
+  - Commit Short SHA
+  - Commit author
+  - Commit author profile URL
+  - Commit author avatar URL
+  - Total time
+  */
+
+  global.cycleAnalytics.ItemCommitComponent = Vue.extend({
+    template: '#item-commit-component',
+    props: {
+      commit: Object,
+    }
+  });
+}(window.gl || (window.gl = {})));

app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6

@@ -0,0 +1,23 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  /*
+  `issue` prop should have
+
+  - Issue title
+  - Issue URL
+  - Issue ID
+  - Issue date created
+  - Issue author
+  - Issue author profile URL
+  - Issue author avatar URL
+  - Total time
+  */
+
+  global.cycleAnalytics.ItemIssueComponent = Vue.extend({
+    template: '#item-issue-component',
+    props: {
+      issue: Object,
+    }
+  });
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/item_merge_request_component.js.es6

@@ -0,0 +1,23 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  /*
+  `mergeRequest` prop should have
+
+  - MR title
+  - MR URL
+  - MR ID
+  - MR date opened
+  - MR author
+  - MR author profile URL
+  - MR author avatar URL
+  - Total time
+  */
+
+  global.cycleAnalytics.ItemMergeRequestComponent = Vue.extend({
+    template: '#item-merge-request-component',
+    props: {
+      mergeRequest: Object,
+    }
+  });
+}(window.gl || (window.gl = {})));

app/assets/javascripts/cycle_analytics/components/stage_button.js.es6

@@ -0,0 +1,26 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageButton = Vue.extend({
+    props: {
+      stage: Object,
+      onStageClick: Function
+    },
+    computed: {
+      classObject() {
+        return {
+          'active': this.stage.active
+        }
+      }
+    },
+    methods: {
+      onClick(stage) {
+        this.onStageClick(stage);
+      }
+    }
+  });
+
+
+})(window.gl || (window.gl = {}));
+

app/assets/javascripts/cycle_analytics/components/stage_code_component.js.es6

@@ -0,0 +1,15 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageCodeComponent = Vue.extend({
+    template: '#stage-code-component',
+    components: {
+      'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
+    },
+    props: {
+      items: Array,
+    }
+  });
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_issue_component.js.es6

@@ -0,0 +1,15 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageIssueComponent = Vue.extend({
+    template: '#stage-issue-component',
+    components: {
+      'item-issue-component': gl.cycleAnalytics.ItemIssueComponent,
+    },
+    props: {
+      items: Array,
+    }
+  });
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_plan_component.js.es6

@@ -0,0 +1,15 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StagePlanComponent = Vue.extend({
+    template: '#stage-plan-component',
+    components: {
+      'item-commit-component': gl.cycleAnalytics.ItemCommitComponent,
+    },
+    props: {
+      items: Array,
+    }
+  });
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_production_component.js.es6

@@ -0,0 +1,15 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageProductionComponent = Vue.extend({
+    template: '#stage-production-component',
+    components: {
+      'item-issue-component': gl.cycleAnalytics.ItemIssueComponent,
+    },
+    props: {
+      items: Array,
+    }
+  });
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_review_component.js.es6

@@ -0,0 +1,15 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageReviewComponent = Vue.extend({
+    template: '#stage-review-component',
+    components: {
+      'item-merge-request-component': gl.cycleAnalytics.ItemMergeRequestComponent,
+    },
+    props: {
+      items: Array,
+    }
+  });
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_staging_component.js.es6

@@ -0,0 +1,15 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageStagingComponent = Vue.extend({
+    template: '#stage-staging-component',
+    components: {
+      'item-build-component': gl.cycleAnalytics.ItemBuildComponent,
+    },
+    props: {
+      items: Array,
+    }
+  });
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/components/stage_test_component.js.es6

@@ -0,0 +1,15 @@
+((global) => {
+
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageTestComponent = Vue.extend({
+    template: '#stage-test-component',
+    components: {
+      'item-build-component': gl.cycleAnalytics.ItemBuildComponent,
+    },
+    props: {
+      items: Array,
+    }
+  });
+
+})(window.gl || (window.gl = {}));