Adds messages to footprint

web/frontend/src/JobFootprint.svelte

@@ -76,31 +76,45 @@
 
         if (mv.name !== 'mem_used') { // Alert if usage is low, peak is high good usage
             if (levelAlert > 0) {
-                return {data: [mv.avg, levelAlert], color: ['hsl(0, 100%, 60%)', '#AAA']} // 'hsl(0, 100%, 35%)'
+                return {data: [mv.avg, levelAlert], color: ['hsl(0, 100%, 60%)', '#AAA'], valueMessage: 'Metric strongly below recommended level!', thresholdMessage: 'Difference towards caution threshold', impact: 2} // 'hsl(0, 100%, 35%)'
             } else if (levelCaution > 0) {
-                return {data: [mv.avg, levelCaution], color: ['hsl(56, 100%, 50%)', '#AAA']} // '#d5b60a'
+                return {data: [mv.avg, levelCaution], color: ['hsl(56, 100%, 50%)', '#AAA'], valueMessage: 'Metric below recommended level!', thresholdMessage: 'Difference towards normal threshold', impact: 1} // '#d5b60a'
             } else if (levelNormal > 0) {
-                return {data: [mv.avg, levelNormal], color: ['hsl(100, 100%, 60%)', '#AAA']} // 'hsl(100, 100%, 35%)'
+                return {data: [mv.avg, levelNormal], color: ['hsl(100, 100%, 60%)', '#AAA'], valueMessage: 'Metric within recommended level!', thresholdMessage: 'Difference towards peak threshold', impact: 0} // 'hsl(100, 100%, 35%)'
             } else if (levelPeak > 0) {
-                return {data: [mv.avg, levelPeak], color: ['hsl(180, 100%, 60%)', '#AAA']} // 'hsl(180, 100%, 35%)'
+                return {data: [mv.avg, levelPeak], color: ['hsl(180, 100%, 60%)', '#AAA'], valueMessage: 'Metric above recommended level!', thresholdMessage: 'Difference towards maximum', impact: 0} // 'hsl(180, 100%, 35%)'
             } else { // If avg greater than configured peak: render negative diff as zero
-                return {data: [mv.avg, 0], color: ['hsl(180, 100%, 60%)', '#AAA']} // 'hsl(180, 100%, 35%)'
+                return {data: [mv.avg, 0], color: ['hsl(180, 100%, 60%)', '#AAA'], valueMessage: 'Metric above recommended level!', thresholdMessage: 'Maximum reached!', impact: 0} // 'hsl(180, 100%, 35%)'
             }
         } else { // Inverse Logic: Alert if usage is high, Peak is bad and limits execution
             if (levelPeak <= 0 && levelAlert <= 0 && levelCaution <= 0 && levelNormal <= 0) {  // If avg greater than configured peak: render negative diff as zero
-                return {data: [mv.avg, 0], color: ['#7F00FF', '#AAA']} // '#5D3FD3'
+                return {data: [mv.avg, 0], color: ['#7F00FF', '#AAA'], valueMessage: 'Memory usage at maximum!', thresholdMessage: 'Maximum reached!', impact: 4} // '#5D3FD3'
             } else if (levelPeak > 0 && (levelAlert <= 0 && levelCaution <= 0 && levelNormal <= 0)) {
-                return {data: [mv.avg, levelPeak], color: ['#7F00FF', '#AAA']} // '#5D3FD3'
+                return {data: [mv.avg, levelPeak], color: ['#7F00FF', '#AAA'], valueMessage: 'Memory usage extremely above recommended level!', thresholdMessage: 'Difference towards maximum', impact: 2} // '#5D3FD3'
             } else if (levelAlert > 0 && (levelCaution <= 0 && levelNormal <= 0)) {
-                return {data: [mv.avg, levelAlert], color: ['hsl(0, 100%, 60%)', '#AAA']} // 'hsl(0, 100%, 35%)'
+                return {data: [mv.avg, levelAlert], color: ['hsl(0, 100%, 60%)', '#AAA'], valueMessage: 'Memory usage strongly above recommended level!', thresholdMessage: 'Difference towards peak threshold', impact: 2} // 'hsl(0, 100%, 35%)'
             } else if (levelCaution > 0 && levelNormal <= 0) {
-                return {data: [mv.avg, levelCaution], color: ['hsl(56, 100%, 50%)', '#AAA']} // '#d5b60a'
+                return {data: [mv.avg, levelCaution], color: ['hsl(56, 100%, 50%)', '#AAA'], valueMessage: 'Memory usage above recommended level!', thresholdMessage: 'Difference towards alert threshold', impact: 1} // '#d5b60a'
             } else {
-                return {data: [mv.avg, levelNormal], color: ['hsl(100, 100%, 60%)', '#AAA']} // 'hsl(100, 100%, 35%)'
+                return {data: [mv.avg, levelNormal], color: ['hsl(100, 100%, 60%)', '#AAA'], valueMessage: 'Memory usage within recommended level!', thresholdMessage: 'Difference towards caution threshold', impact: 0} // 'hsl(100, 100%, 35%)'
             }
         }
     })
 
+    const footprintMessages  = footprintData.map((fpd) => [fpd.valueMessage, fpd.thresholdMessage]).flat()
+    const footprintResultSum = footprintData.map((fpd) => fpd.impact).reduce((accumulator, currentValue) => { return accumulator + currentValue }, 0)
+    let footprintResult = ''
+
+    if (footprintResultSum <= 1) {
+        footprintResult = 'good.'
+    } else if (footprintResultSum > 1 && footprintResultSum <= 3) {
+        footprintResult = 'well.'
+    } else if (footprintResultSum > 3 && footprintResultSum <= 5) {
+        footprintResult = 'acceptable.'
+    } else {
+        footprintResult = 'bad.'
+    }
+
     console.log("FPD", footprintData)
 
     $: data = {
@@ -183,6 +197,14 @@
                         } else {
                             return 'Average ' + context[0].chart.data.labels[labelIndex]
                         }
+                    },
+                    footer: function(context) {
+                        const labelIndex = (context[0].datasetIndex * 2) + context[0].dataIndex;
+                        if (context[0].chart.data.labels[labelIndex] === 'Threshold') {
+                            return  footprintMessages[labelIndex]
+                        } else {
+                            return  footprintMessages[labelIndex]
+                        }
                     }
                 }
             }
@@ -194,6 +216,10 @@
  <div class="chart-container" style="--container-width: {size}; --container-height: {size}">
     <Pie {data} {options}/>
 </div>
+<div class="mt-3 d-flex justify-content-center">
+    <b>Overall Job Performance:&nbsp;</b> Your job {job.state === 'running' ? 'performs' : 'performed'} {footprintResult}
+</div>
+
 
 <style>
     .chart-container {