feat(frontend): add link to go back to lineage on plan/state views

camptocamp · Aug 31, 2021 · 1c1cec5 · 1c1cec5
1 parent 1e8ddb6
commit 1c1cec5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 41 deletions.
diff --git a/static/terraboard-vuejs/src/components/PlanContent.vue b/static/terraboard-vuejs/src/components/PlanContent.vue
@@ -58,7 +58,7 @@
             <tbody>
               <tr>
                 <td>Lineage:</td>
-                <td>{{ plan.lineage_data.lineage }}</td>
+                <td><router-link :to="`/lineage/${plan.lineage_data.lineage}`">{{ plan.lineage_data.lineage }}</router-link></td>
               </tr>
               <tr>
                 <td>TF Version:</td>
@@ -308,45 +308,49 @@ Chart.register( PieController, ArcElement, Tooltip )
     this.checkPlannedChanges();
   },
   mounted() {
-    const ctxResources = document.getElementById('chart-pie-resource-changes') as ChartItem;
-    const resourceChangesChart = new Chart(ctxResources, {
-        type: 'pie',
-        data: {
-            labels: ["No changes", "Added", "Updated", "Deleted"],
-            datasets: [{
-                label: 'Resource Changes',
-                data: [this.changes.resources.none, this.changes.resources.added, this.changes.resources.changed, this.changes.resources.deleted],
-                backgroundColor: [
-                  '#0d6efd',
-                  '#198754',
-                  '#fd7e14',
-                  '#dc3545',
-                ],
-                hoverOffset: 4
-            }]
-        },
-        options: this.chartOptions
-    });
+    if (this.plan.parsed_plan.resource_changes != undefined) {
+      const ctxResources = document.getElementById('chart-pie-resource-changes') as ChartItem;
+      const resourceChangesChart = new Chart(ctxResources, {
+          type: 'pie',
+          data: {
+              labels: ["No changes", "Added", "Updated", "Deleted"],
+              datasets: [{
+                  label: 'Resource Changes',
+                  data: [this.changes.resources.none, this.changes.resources.added, this.changes.resources.changed, this.changes.resources.deleted],
+                  backgroundColor: [
+                    '#0d6efd',
+                    '#198754',
+                    '#fd7e14',
+                    '#dc3545',
+                  ],
+                  hoverOffset: 4
+              }]
+          },
+          options: this.chartOptions
+      });
+    }
 
-    const ctxOutputs = document.getElementById('chart-pie-output-changes') as ChartItem;
-    const outputChangesChart = new Chart(ctxOutputs, {
-        type: 'pie',
-        data: {
-            labels: ["No changes", "Added", "Updated", "Deleted"],
-            datasets: [{
-                label: 'Output Changes',
-                data: [this.changes.outputs.none, this.changes.outputs.added, this.changes.outputs.changed, this.changes.outputs.deleted],
-                backgroundColor: [
-                  '#0d6efd',
-                  '#198754',
-                  '#fd7e14',
-                  '#dc3545',
-                ],
-                hoverOffset: 4
-            }]
-        },
-        options: this.chartOptions
-    });
+    if (this.plan.parsed_plan.output_changes != undefined) {
+      const ctxOutputs = document.getElementById('chart-pie-output-changes') as ChartItem;
+      const outputChangesChart = new Chart(ctxOutputs, {
+          type: 'pie',
+          data: {
+              labels: ["No changes", "Added", "Updated", "Deleted"],
+              datasets: [{
+                  label: 'Output Changes',
+                  data: [this.changes.outputs.none, this.changes.outputs.added, this.changes.outputs.changed, this.changes.outputs.deleted],
+                  backgroundColor: [
+                    '#0d6efd',
+                    '#198754',
+                    '#fd7e14',
+                    '#dc3545',
+                  ],
+                  hoverOffset: 4
+              }]
+          },
+          options: this.chartOptions
+      });
+    }
   },
 })
 export default class PlanContent extends Vue {}

diff --git a/static/terraboard-vuejs/src/views/Plan.vue b/static/terraboard-vuejs/src/views/Plan.vue
@@ -2,7 +2,8 @@
   <div id="mainrow" class="row">
     <div id="leftcol" class="col-xl-4 col-xxl-3">
       <div class="mr-4">
-        <div id="nodes" class="card mt-4">
+        <router-link class="ms-2" :to="`/lineage/${url.lineage}`"><i class="fas fa-arrow-left"></i> Back to workspace</router-link>
+        <div id="nodes" class="card mt-2">
           <h5 class="card-header">Plans</h5>
               <ul id="nodeslist" class="list-group m-3">
                 <li

diff --git a/static/terraboard-vuejs/src/views/State.vue b/static/terraboard-vuejs/src/views/State.vue
@@ -2,7 +2,8 @@
   <div id="mainrow" class="row">
     <div id="leftcol" class="col-xl-4 col-xxl-3">
       <div class="mr-4">
-        <div class="card">
+        <router-link class="ms-2" :to="`/lineage/${url.lineage}`"><i class="fas fa-arrow-left"></i> Back to workspace</router-link>
+        <div class="card mt-2">
           <h5 class="card-header">
             General Information
             <span