Support changing scale.

mnlipp · Oct 27, 2023 · d10f572 · d10f572
1 parent e14cc20
commit d10f572
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/...s.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/VmConlet-preview.ftl.html b/...s.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/VmConlet-preview.ftl.html
@@ -2,6 +2,27 @@
   data-conlet-grid-rows="5"
   data-jgwc-on-load="orgJDrupesVmOperatorVmConlet.initPreview"
   data-jgwc-on-unload="JGConsole.jgwc.unmountVueApps">
+
+  <form>
+    <fieldset>
+      <legend>{{ localize("Period") }}:</legend>
+      <ul>
+        <li>
+          <label>
+            <input type="radio" name="period" v-model="period" value="day">
+            <span>{{ localize("Last day") }}</span>
+          </label>
+        </li>
+        <li>
+          <label>
+            <input type="radio" name="period" v-model="period" value="hour">
+            <span>{{ localize("Last hour") }}</span>
+          </label>
+        </li>
+      </ul>
+    </fieldset>
+  </form>  
+
   <table>
     <tbody>
       <tr>

diff --git a/org.jdrupes.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/l10n_de.properties b/org.jdrupes.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/l10n_de.properties
@@ -4,6 +4,9 @@ VMsSummary = VMs (gestartet/gesamt)
 
 Used\ CPUs = Verwendete CPUs
 Used\ RAM = Verwendetes RAM
+Period = Zeitraum
+Last\ hour = Letzte Stunde
+Last\ day = Letzter Tag
 
 running = Gestartet
 currentCpus = Aktuelle CPUs

diff --git a/...pes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/VmConlet-functions.ts b/...pes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/VmConlet-functions.ts
@@ -149,7 +149,10 @@ let chartData = new TimeSeries(2);
 let chartDateUpdate = ref<Date>(null);
 
 class CpuRamChart extends Chart {
-    constructor(canvas: HTMLCanvasElement) {
+
+    period: ref<string>;
+
+    constructor(canvas: HTMLCanvasElement, period: ref<string>) {
         super(canvas.getContext('2d')!, {
             // The type of chart we want to create
             type: 'line',
@@ -214,8 +217,10 @@ class CpuRamChart extends Chart {
         this.setPropValue("options.scales.cpus.ticks.color", css.color);
         this.setPropValue("options.scales.ram.ticks.font.family", css.fontFamily);
         this.setPropValue("options.scales.ram.ticks.color", css.color);
-
         this.localize();
+
+        this.period = period;        
+        watch(period, (_period) => this.update())
     }
 
     setPropValue(path: string, value: any) {
@@ -245,8 +250,13 @@ class CpuRamChart extends Chart {
     }
 
     update() {
+        let hours = 24;
+        // super constructor calls update when period isn't initialized yet
+        if (this.period && this.period.value === "hour") {
+            hours = 1;
+        }
         this.setPropValue("options.scales.x.min",
-            Date.now() - 24 * 3600 * 1000);
+            Date.now() - hours * 3600 * 1000);
         super.update();
     }
 }
@@ -258,11 +268,13 @@ window.orgJDrupesVmOperatorVmConlet.initPreview = (previewDom: HTMLElement,
             const conletId: string
                 = (<HTMLElement>previewDom.parentNode!).dataset["conletId"]!;
 
+            const period = ref<string>("day");
+
             let chart: CpuRamChart | null = null;
             onMounted(() => {
                 let canvas: HTMLCanvasElement
                     = previewDom.querySelector(":scope .vmsChart")!;
-                chart = new CpuRamChart(canvas);
+                chart = new CpuRamChart(canvas, period);
             })
 
             watch(chartDateUpdate, (_) => {
@@ -274,7 +286,7 @@ window.orgJDrupesVmOperatorVmConlet.initPreview = (previewDom: HTMLElement,
                 chart?.update();
             })
 
-            return { localize, formatMemory, vmSummary };
+            return { localize, formatMemory, vmSummary, period };
         }
     });
     app.use(JgwcPlugin, []);

diff --git a/...rupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/VmConlet-style.scss b/...rupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/VmConlet-style.scss
@@ -21,13 +21,20 @@
  */
 
 .jdrupes-vmoperator-vmconlet-preview {
-    table {
-        margin-bottom: 1em;
-    }
+  form {
+    float: right;
+    padding: 0.5em;
+    border: 1px solid var(--panel-border);
+    border-radius: var(--corner-radius);    
+  }
+
+  table {
+    margin-bottom: 1em;
+  }
 
-    .vmsChart-wrapper {
-        height: 12em;
-    }    
+  .vmsChart-wrapper {
+    height: 12em;
+  }    
 }
 
 .jdrupes-vmoperator-vmconlet-view-search {