Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(frontend): undefined error on plan view without outputs changes (#…
…211)

* fix(frontend): undefined error on plan view without outputs

* feat(frontend): add link to go back to lineage on plan/state views
  • Loading branch information
hbollon committed Sep 1, 2021
1 parent 91b3dab commit a5d6050
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 67 deletions.
139 changes: 74 additions & 65 deletions static/terraboard-vuejs/src/components/PlanContent.vue
Expand Up @@ -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>
Expand Down Expand Up @@ -88,11 +88,11 @@
<td>Changes:</td>
<td>
<div class="row justify-content-middle align-middle">
<div class="overview-chart col-5 text-center" style="min-width: 150px; max-width: 240px;">
<div v-if="this.plan.parsed_plan.resource_changes != undefined" class="overview-chart col-5 text-center" style="min-width: 150px; max-width: 240px;">
<canvas id="chart-pie-resource-changes" class="chart mb-2"></canvas>
<p>Resource changes</p>
</div>
<div class="overview-chart col-5 text-center" style="min-width: 150px; max-width: 240px;">
<div v-if="this.plan.parsed_plan.output_changes != undefined" class="overview-chart col-5 text-center" style="min-width: 150px; max-width: 240px;">
<canvas id="chart-pie-output-changes" class="chart mb-2"></canvas>
<p>Output changes</p>
</div>
Expand Down Expand Up @@ -254,30 +254,35 @@ Chart.register( PieController, ArcElement, Tooltip )
return new Date(date).toUTCString();
},
checkPlannedChanges() {
this.plan.parsed_plan.output_changes.forEach((change: any) => {
let actions = change.change.actions;
if (actions.includes("create")) {
this.changes.outputs.added++;
} else if (actions.includes("update")) {
this.changes.outputs.changed++;
} else if (actions.includes("delete")) {
this.changes.outputs.deleted++;
} else {
this.changes.outputs.none++;
}
});
this.plan.parsed_plan.resource_changes.forEach((change: any) => {
let actions = change.change.actions;
if (actions.includes("create")) {
this.changes.resources.added++;
} else if (actions.includes("update")) {
this.changes.resources.changed++;
} else if (actions.includes("delete")) {
this.changes.resources.deleted++;
} else {
this.changes.resources.none++;
}
});
if (this.plan.parsed_plan.output_changes != undefined) {
this.plan.parsed_plan.output_changes.forEach((change: any) => {
let actions = change.change.actions;
if (actions.includes("create")) {
this.changes.outputs.added++;
} else if (actions.includes("update")) {
this.changes.outputs.changed++;
} else if (actions.includes("delete")) {
this.changes.outputs.deleted++;
} else {
this.changes.outputs.none++;
}
});
}
if (this.plan.parsed_plan.resource_changes != undefined) {
this.plan.parsed_plan.resource_changes.forEach((change: any) => {
let actions = change.change.actions;
if (actions.includes("create")) {
this.changes.resources.added++;
} else if (actions.includes("update")) {
this.changes.resources.changed++;
} else if (actions.includes("delete")) {
this.changes.resources.deleted++;
} else {
this.changes.resources.none++;
}
});
}
},
},
computed: {
Expand All @@ -303,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 {}
Expand Down
3 changes: 2 additions & 1 deletion static/terraboard-vuejs/src/views/Plan.vue
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion static/terraboard-vuejs/src/views/State.vue
Expand Up @@ -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
Expand Down

0 comments on commit a5d6050

Please sign in to comment.