Merge branch 'release/v2.3.0' into feature/rename-buildpacks-to-runpacks

Author: mms-gianni

client/src/components/apps/alerts.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+
+        <v-alert 
+            v-for="rule in rules" :key="rule.name"
+            :text="rule.alert?.annotations.description"
+            :title="rule.name"
+            :type="rule.alerting ? 'error' : 'success'"
+            variant="tonal"
+            density="compact"
+            style="transform: scale(0.7); transform-origin: left; margin-bottom: -8px;"
+        ></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+import axios from 'axios'
+
+
+export interface Rule {
+  duration: number
+  health: string
+  labels: Object
+  name: string
+  query: string
+  alerting: boolean
+  alert?: Alert
+}
+
+
+export interface Alert {
+  activeAt: string
+  annotations: {
+    description: string
+    summary: string
+  }
+  labels: Object
+  state: string
+  value: number
+}
+
+export default {
+    data() {
+        return {
+            rules: [] as Rule[],
+            timer: null as any
+        }
+    },
+    props: {
+        pipeline: {
+            type: String,
+            required: true
+        },
+        phase: {
+            type: String,
+            required: true
+        },
+        app: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        alertstate(rule: Rule) {
+            if (rule.alerting ) {
+                return 'error'
+            } else {
+                return 'info'
+            }
+        }
+    },
+    created() {
+        this.loadRules()
+    },
+    mounted() {
+        this.startTimer();
+    },
+    unmounted() {
+        clearInterval(this.timer);
+    },
+    methods: {
+        startTimer() {
+            this.timer = setInterval(() => {
+                this.loadRules()
+            }, 10000);
+        },
+        loadRules() {
+            axios.get(`/api/rules/${this.pipeline}/${this.phase}/${this.app}`)
+            .then(response => {
+                this.rules = response.data
+            })
+        }
+    }
+}
+</script>

client/src/components/apps/detail.vue

@@ -118,7 +118,7 @@ export default defineComponent({
                     href: `/pipeline/${this.pipeline}/${this.phase}/${this.app}/detail`,
                 },
                 {
-                    title: 'App-'+this.app,
+                    title: 'App.'+this.app,
                     disabled: true,
                     href: `/pipeline/${this.pipeline}/${this.phase}/${this.app}/detail`,
                 }

client/src/components/apps/metrics.vue

@@ -1,8 +1,31 @@
 <template>
     <v-container>
+
+      <div v-if="!kubero.metricsEnabled">
+        <v-row>
+            <v-col
+            cols="12"
+            md="6"
+            style="margin-top: 20px;"
+            >
+                <v-alert
+                    outlined
+                    type="info"
+                    variant="tonal"
+                    border="start"
+                >
+                    <h3>No metrics available</h3>
+                    <p>
+                        Metrics are not available for this application. Metrics can be enabled in the Kubero CRD.
+                    </p>
+                </v-alert>
+            </v-col>
+        </v-row>
+      </div>
+      <div v-if="kubero.metricsEnabled">
         <v-row class="justify-space-between mb-2">
             <v-col cols="8" sm="8" md="8" lg="8" xl="8">
-                <!--<h1>Vulnerabilities in {{ app }}</h1>-->
+              <Alerts :app="app" :phase="phase" :pipeline="pipeline"/>
             </v-col>
             <v-col>
               <v-select
@@ -30,10 +53,16 @@
             </v-col>
         </v-row>
         <v-row>
-            <v-col cols="12" sm="12" md="12">
+          <!--
+            <v-col cols="6" sm="6" md="6">
                 CPU usage
                 <VueApexCharts type="line" height="180" :options="cpuOptions" :series="cpuData"></VueApexCharts>
             </v-col>
+          -->
+            <v-col cols="12" sm="12" md="12">
+                CPU usage
+                <VueApexCharts type="line" height="180" :options="cpuOptions" :series="cpuDataRate"></VueApexCharts>
+            </v-col>
         </v-row>
         <!--
         <v-row>
@@ -65,14 +94,18 @@
                 <VueApexCharts type="area" height="180" :options="httpResponseTrafficOptions" :series="httpResponseTrafficData"></VueApexCharts>
             </v-col>
         </v-row>
+      </div>
     </v-container>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import VueApexCharts from "vue3-apexcharts";
+import { useKuberoStore } from '../../stores/kubero'
+import { mapState } from 'pinia'
 
 import axios from "axios";
+import Alerts from './alerts.vue';
 
 const colors = ['#8560a9', '#a887c9', '#b99bd6', '#d2bde6']
 
@@ -541,6 +574,10 @@ export default defineComponent({
             name: string,
             data: number[][],
       }[],
+      cpuDataRate: [] as {
+            name: string,
+            data: number[][],
+      }[],
       loadData: [] as {
             name: string,
             data: number[][],
@@ -565,19 +602,28 @@ export default defineComponent({
             name: string,
             data: number[][],
       }[],
-      scale: '24h' as '2h'| '24h' | '7d',
+      scale: '2h' as '2h'| '24h' | '7d',
+      timer: null as any,
     }),
     components: {
         VueApexCharts,
+        Alerts,
     },
     mounted() {
         this.refreshMetrics();
+        this.startTimer();
+    },
+    unmounted() {
+        clearInterval(this.timer);
     },
     watch: {
         scale: function (val) {
           this.refreshMetrics();
         }
     },
+    computed: {
+      ...mapState(useKuberoStore, ['kubero']),
+    },
     methods: {
         /*
         generateMetrics(limit: number) {
@@ -589,14 +635,23 @@ export default defineComponent({
             return metrics;
         },
         */
+        startTimer() {
+            this.timer = setInterval(() => {
+                console.log("refreshing metrics");
+                this.refreshMetrics();
+            }, 4000);
+        },
         refreshMetrics() {
+          if (this.kubero.metricsEnabled) {
             this.getMemoryMetrics();
             //this.getLoadMetrics();
-            this.getCpuMetrics();
+            //this.getCpuMetrics();
+            this.getCpuMetricsRate();
             this.getHttpStatusCodeMetrics();
             this.getResponseTimeMetrics();
             this.getHttpStatusCodeIncreaseMetrics();
             this.getResponseTrafficMetrics();
+          }
         },
         getMemoryMetrics() {
             
@@ -678,6 +733,7 @@ export default defineComponent({
             });
         },
         getCpuMetrics() {
+            // use 'rate' instead of 'increase' when comparing to limit and request
             axios.get(`/api/longtermmetrics/cpu/${this.pipeline}/${this.phase}/${this.app}/increase`, {
                 params: {
                     scale: this.scale
@@ -690,6 +746,20 @@ export default defineComponent({
                 console.log(error);
             });
         },
+        getCpuMetricsRate() {
+            // use 'rate' instead of 'increase' when comparing to limit and request
+            axios.get(`/api/longtermmetrics/cpu/${this.pipeline}/${this.phase}/${this.app}/rate`, {
+                params: {
+                    scale: this.scale
+                }
+            })
+            .then((response) => {
+              this.cpuDataRate = response.data;
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+        },
     },
 });
 </script>

client/src/layouts/default/View.vue

@@ -47,6 +47,7 @@ export default defineComponent({
                         this.kubero.buildPipeline = result.data.buildPipeline;
                         this.kubero.auditEnabled = result.data.auditEnabled;
                         this.kubero.consoleEnabled = result.data.consoleEnabled;
+                        this.kubero.metricsEnabled = result.data.metricsEnabled;
 
                     })
                     .catch((err) => {

client/src/stores/kubero.ts

@@ -17,6 +17,7 @@ export const useKuberoStore = defineStore('kubero', {
             templatesEnabled: true,
             buildPipeline: false,
             consoleEnabled: false,
+            metricsEnabled: false,
         },
         buildPipeline: false,
     }),