Bugfix/ts style (#17)

Fix style warnings.

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "root": true,
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_",
+          "caughtErrorsIgnorePattern": "^_"
+        }
+      ]
+    },
+    "ignorePatterns": ["src/**/*.test.ts", "build/**"]
+}
+

org.jdrupes.vmoperator.vmconlet/.eslintrc.json

@@ -0,0 +1,15 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": { "project": ["./tsconfig.json"] },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+	"constructor-super": "off"
+    }
+}
+

org.jdrupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/ConditionalInputController.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ref, Ref, nextTick } from "vue";
+import { ref, nextTick } from "vue";
 
 /**
  * A controller for conditionally shown inputs. "Conditionally shown"
@@ -26,16 +26,18 @@ import { ref, Ref, nextTick } from "vue";
  */
 export default class ConditionlInputController {
 
-    private submitCallback: (selected: string, value: any) => string | null;
+    private submitCallback: (selected: string, value: number | null) 
+        => string | null;
     private readonly inputKey = ref("");
-    private startValue: any;
+    private startValue: string | null = null;
     private inputElement: HTMLInputElement | null = null;
     private errorMessage = ref("");
 
     /**
      * Creates a new controller.
      */
-    constructor(submitCallback: (selected: string, value: string) => string | null) {
+    constructor(submitCallback: (selected: string, value: number | null) 
+        => string | null) {
         // this.inputRef = inputRef;
         this.submitCallback = submitCallback;
     }
@@ -52,7 +54,7 @@ export default class ConditionlInputController {
         this.inputElement = element;
     }
 
-    startEdit (key: string, value: any) {
+    startEdit (key: string, value: string) {
         if (this.inputKey.value != "") {
             return;
         }
@@ -65,17 +67,17 @@ export default class ConditionlInputController {
         });
     }
 
-    endEdit (converter?: (value: string) => any | null) : boolean {
+    endEdit (converter?: (value: string) => number | null) : boolean {
         if (typeof converter === 'undefined') {
             this.inputKey.value = "";
             return false;
         }
-        let newValue = converter(this.inputElement!.value);
+        const newValue = converter(this.inputElement!.value);
         if (newValue === this.startValue) {
             this.inputKey.value = "";
             return false;
         }
-        let submitResult = this.submitCallback (this.inputKey.value, newValue);
+        const submitResult = this.submitCallback (this.inputKey.value, newValue);
         if (submitResult !== null) {
             this.errorMessage.value = submitResult;
             // Neither doing it directly nor doing it with nextTick works.

org.jdrupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/CpuRamChart.ts

@@ -22,6 +22,7 @@ import { formatMemory } from "./MemorySize";
 import JGConsole from "jgconsole";
 import l10nBundles from "l10nBundles";
 import { JGWC } from "jgwc";
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 export default class CpuRamChart extends Chart {
     
@@ -83,7 +84,7 @@ export default class CpuRamChart extends Chart {
             }
         });
         
-        let css = getComputedStyle(canvas);
+        const css = getComputedStyle(canvas);
         this.setPropValue("options.plugins.legend.labels.font.family", css.fontFamily);
         this.setPropValue("options.plugins.legend.labels.color", css.color);
         this.setPropValue("options.scales.x.ticks.font.family", css.fontFamily);
@@ -102,11 +103,12 @@ export default class CpuRamChart extends Chart {
     }
 
     setPropValue(path: string, value: any) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         let ptr: any = this;
-        let segs = path.split(".");
+        const segs = path.split(".");
-        let lastSeg = segs.pop()!;
+        const lastSeg = segs.pop()!;
-        for (let seg of segs) {
+        for (const seg of segs) {
-            let cur = ptr[seg];
+            const cur = ptr[seg];
             if (!cur) {
                 ptr[seg] = {};
             }

org.jdrupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/MemorySize.ts

@@ -16,15 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-let unitMap = new Map<string, number>();
+const unitMap = new Map<string, number>();
-let unitMappings = new Array<{ key: string; value: number }>();
+const unitMappings = new Array<{ key: string; value: number }>();
-let memorySize = /^(\d+(\.\d+)?)\s*(B|kB|MB|GB|TB|PB|EB|KiB|MiB|GiB|TiB|PiB|EiB)?$/;
+const memorySize = /^(\d+(\.\d+)?)\s*(B|kB|MB|GB|TB|PB|EB|KiB|MiB|GiB|TiB|PiB|EiB)?$/;
 
 // SI units and common abbreviations
 let factor = 1;
 unitMap.set("", factor);
 let scale = 1000;
-for (let unit of ["B", "kB", "MB", "GB", "TB", "PB", "EB"]) {
+for (const unit of ["B", "kB", "MB", "GB", "TB", "PB", "EB"]) {
     unitMap.set(unit, factor);
     factor = factor * scale;
 }
@@ -32,7 +32,7 @@ for (let unit of ["B", "kB", "MB", "GB", "TB", "PB", "EB"]) {
 // Binary units
 factor = 1024;
 scale = 1024;
-for (let unit of ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB"]) {
+for (const unit of ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB"]) {
     unitMap.set(unit, factor);
     factor = factor * scale;
 }
@@ -42,7 +42,7 @@ unitMap.forEach((value: number, key: string) => {
 unitMappings.sort((a, b) => a.value < b.value ? 1 : a.value > b.value ? -1 : 0);
 
 export function formatMemory(size: number): string {
-    for (let mapping of unitMappings) {
+    for (const mapping of unitMappings) {
         if (size >= mapping.value
             && (size % mapping.value) === 0) {
             return (size / mapping.value + " " + mapping.key).trim();
@@ -52,7 +52,7 @@ export function formatMemory(size: number): string {
 }
 
 export function parseMemory(value: string): number | null {
-    let match = value.match(memorySize);
+    const match = value.match(memorySize);
     if (!match) {
         return null;
     }

org.jdrupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/TimeSeries.ts

@@ -36,7 +36,7 @@ export default class TimeSeries {
 
     clear() {
         this.timestamps.length = 0;
-        for (let values of this.series) {
+        for (const values of this.series) {
             values.length = 0;
         }
         if (this.onChange) {
@@ -66,12 +66,12 @@ export default class TimeSeries {
         }
         
         // Purge
-        let limit = time.getTime() - this.period;
+        const limit = time.getTime() - this.period;
         while (this.timestamps.length > 2
             && this.timestamps[0].getTime() < limit
             && this.timestamps[1].getTime() < limit) {
             this.timestamps.shift();
-            for (let values of this.series) {
+            for (const values of this.series) {
                 values.shift();
             }
         }

org.jdrupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/VmConlet-functions.ts

@@ -17,7 +17,7 @@
  */
 
 import {
-    reactive, ref, Ref, createApp, computed, onMounted, watch, nextTick
+    reactive, ref, Ref, createApp, computed, onMounted, watch
 } from "vue";
 import JGConsole from "jgconsole";
 import JgwcPlugin, { JGWC } from "jgwc";
@@ -32,14 +32,17 @@ import "./VmConlet-style.scss";
 // For global access
 declare global {
     interface Window {
-        orgJDrupesVmOperatorVmConlet: any;
+        orgJDrupesVmOperatorVmConlet: { 
+            initPreview?: (previewDom: HTMLElement, isUpdate: boolean) => void,
+            initView?: (viewDom: HTMLElement, isUpdate: boolean) => void
+        }
     }
 }
 
 window.orgJDrupesVmOperatorVmConlet = {};
 
-let vmInfos = reactive(new Map());
+const vmInfos = reactive(new Map());
-let vmSummary = reactive({
+const vmSummary = reactive({
     totalVms: 0,
     runningVms: 0,
     usedCpus: 0,
@@ -58,19 +61,16 @@ const shortDateTime = (time: Date) => {
 };
 
 // Cannot be reactive, leads to infinite recursion.
-let chartData = new TimeSeries(2);
+const chartData = new TimeSeries(2);
-let chartDateUpdate = ref<Date>(null);
+const chartDateUpdate = ref<Date>(null);
 
 window.orgJDrupesVmOperatorVmConlet.initPreview = (previewDom: HTMLElement,
     _isUpdate: boolean) => {
     const app = createApp({
-        setup(_props: any) {
+        setup(_props: object) {
-            const conletId: string
-                = (<HTMLElement>previewDom.parentNode!).dataset["conletId"]!;
-
             let chart: CpuRamChart | null = null;
             onMounted(() => {
-                let canvas: HTMLCanvasElement
+                const canvas: HTMLCanvasElement
                     = previewDom.querySelector(":scope .vmsChart")!;
                 chart = new CpuRamChart(canvas, chartData);
             })
@@ -86,7 +86,7 @@ window.orgJDrupesVmOperatorVmConlet.initPreview = (previewDom: HTMLElement,
             const period: Ref<string> = ref<string>("day");
             
             watch(period, (_) => { 
-                let hours = (period.value === "day") ? 24 : 1;
+                const hours = (period.value === "day") ? 24 : 1;
                 chart?.setPeriod(hours * 3600 * 1000);
             });
 
@@ -101,7 +101,7 @@ window.orgJDrupesVmOperatorVmConlet.initPreview = (previewDom: HTMLElement,
 window.orgJDrupesVmOperatorVmConlet.initView = (viewDom: HTMLElement,
     _isUpdate: boolean) => {
     const app = createApp({
-        setup(_props: any) {
+        setup(_props: object) {
             const conletId: string
                 = (<HTMLElement>viewDom.parentNode!).dataset["conletId"]!;
 
@@ -117,8 +117,8 @@ window.orgJDrupesVmOperatorVmConlet.initView = (viewDom: HTMLElement,
                 sortOrder: "up"
             }));
 
-            let filteredData = computed(() => {
+            const filteredData = computed(() => {
-                let infos = Array.from(vmInfos.values());
+                const infos = Array.from(vmInfos.values());
                 return controller.filter(infos);
             });
 
@@ -129,14 +129,14 @@ window.orgJDrupesVmOperatorVmConlet.initView = (viewDom: HTMLElement,
             const idScope = JGWC.createIdScope();
             const detailsByName = reactive(new Set());
             
-            const submitCallback = (selected: string, value: any) => {
+            const submitCallback = (selected: string, value: number | null) => {
                 if (value === null) {
                     return localize("Illegal format");
                 }
-                let vmName = selected.substring(0, selected.lastIndexOf(":"));
+                const vmName = selected.substring(0, selected.lastIndexOf(":"));
-                let property = selected.substring(selected.lastIndexOf(":") + 1);
+                const property = selected.substring(selected.lastIndexOf(":") + 1);
-                var vmDef = vmInfos.get(vmName);
+                const vmDef = vmInfos.get(vmName);
-                let maxValue = vmDef.spec.vm["maximum" 
+                const maxValue = vmDef.spec.vm["maximum" 
                     + property.substring(0, 1).toUpperCase() + property.substring(1)];
                 if (value > maxValue) {
                     return localize("Value is above maximum");
@@ -160,12 +160,13 @@ window.orgJDrupesVmOperatorVmConlet.initView = (viewDom: HTMLElement,
 };
 
 JGConsole.registerConletFunction("org.jdrupes.vmoperator.vmconlet.VmConlet",
-    "updateVm", function(_conletId: String, vmDefinition: any) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    "updateVm", function(_conletId: string, vmDefinition: any) {
         // Add some short-cuts for table controller
         vmDefinition.name = vmDefinition.metadata.name;
         vmDefinition.currentCpus = vmDefinition.status.cpus;
         vmDefinition.currentRam = Number(vmDefinition.status.ram);
-        for (let condition of vmDefinition.status.conditions) {
+        for (const condition of vmDefinition.status.conditions) {
             if (condition.type === "Running") {
                 vmDefinition.running = condition.status === "True";
                 vmDefinition.runningConditionSince 
@@ -177,14 +178,15 @@ JGConsole.registerConletFunction("org.jdrupes.vmoperator.vmconlet.VmConlet",
     });
 
 JGConsole.registerConletFunction("org.jdrupes.vmoperator.vmconlet.VmConlet",
-    "removeVm", function(_conletId: String, vmName: String) {
+    "removeVm", function(_conletId: string, vmName: string) {
         vmInfos.delete(vmName);
     });
 
 JGConsole.registerConletFunction("org.jdrupes.vmoperator.vmconlet.VmConlet",
-    "summarySeries", function(_conletId: String, series: any[]) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    "summarySeries", function(_conletId: string, series: any[]) {
         chartData.clear();
-        for (let entry of series) {
+        for (const entry of series) {
             chartData.push(new Date(entry.time.epochSecond * 1000
                 + entry.time.nano / 1000000),
                 entry.values[0], entry.values[1]);
@@ -193,7 +195,8 @@ JGConsole.registerConletFunction("org.jdrupes.vmoperator.vmconlet.VmConlet",
 });
 
 JGConsole.registerConletFunction("org.jdrupes.vmoperator.vmconlet.VmConlet",
-    "updateSummary", function(_conletId: String, summary: any) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    "updateSummary", function(_conletId: string, summary: any) {
         chartData.push(new Date(), summary.usedCpus, Number(summary.usedRam));
         chartDateUpdate.value = new Date();
         Object.assign(vmSummary, summary);

org.jdrupes.vmoperator.vmconlet/src/org/jdrupes/vmoperator/vmconlet/browser/VmConlet-style.scss

@@ -38,57 +38,47 @@
 }
  
 .jdrupes-vmoperator-vmconlet-view-search {
-  display: flex; 
+  display: flex;
+
   justify-content: flex-end
-}
-
-.jdrupes-vmoperator-vmconlet-view-search form {
-  white-space: nowrap;
-}
-
-.jdrupes-vmoperator-vmconlet-view-action-list {
-  white-space: nowrap;
-}
-
-.jdrupes-vmoperator-vmconlet-view-action-list [role=button]:not(:last-child) {
-  margin-right: 0.5em;
-}
-
-.jdrupes-vmoperator-vmconlet-view td {
-  vertical-align: top;
   
-  &[tabindex] {
+  form {
-    outline: 1px solid var(--primary);
+    white-space: nowrap;
-    cursor: text;
   }
 }
 
-.jdrupes-vmoperator-vmconlet-view td:not([colspan]):first-child {
-  white-space: nowrap;
-}
-
-.jdrupes-vmoperator-vmconlet-view table td.details {
-  padding-left: 1em;
-}
-
 .jdrupes-vmoperator-vmconlet-view-table {
-  td.column-running {
+  td {
-    text-align: center;
+    vertical-align: top;
 
-    span {
+    &[tabindex] {
-      &.fa-check {
+      outline: 1px solid var(--primary);
-        color: var(--success);
+      cursor: text;
-      }
+    }
+    
+    &:not([colspan]):first-child {
+      white-space: nowrap;
+    }
 
-      &.fa-close {
+    &.column-running {
-        color: var(--danger);
+      text-align: center;
+
+      span {
+        &.fa-check {
+          color: var(--success);
+        }
+
+        &.fa-close {
+          color: var(--danger);
+        }
       }
     }
   }
-
+  
   td.details {
+    padding-left: 1em;
+
     table {
-      
       td:nth-child(2) {
         min-width: 7em;
 
@@ -104,3 +94,11 @@
     }
   }
 }
+
+.jdrupes-vmoperator-vmconlet-view-action-list {
+  white-space: nowrap;
+
+  [role=button]:not(:last-child) {
+    margin-right: 0.5em;
+  }
+}

package.json

@@ -3,6 +3,7 @@
         "@rollup/plugin-node-resolve": "^15.0.1",
         "@rollup/plugin-replace": "^5.0.2",
         "@rollup/plugin-terser": "^0.4.0",
+        "@typescript-eslint/eslint-plugin": "^6.9.1",
         "documentation": "^14.0.1",
         "install": "^0.13.0",
         "jsdoc": "^4.0.2",