Feature/web gui2 (#16)

Add oveview and enhance.

org.jdrupes.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/VmConlet-preview.ftl.html

@@ -1,5 +1,46 @@
 <div class="jdrupes-vmoperator-vmconlet jdrupes-vmoperator-vmconlet-preview"
+  data-conlet-grid-rows="5"
   data-jgwc-on-load="orgJDrupesVmOperatorVmConlet.initPreview"
-  data-jgwc-on-unload="JGConsole.jgwc.unmountVueApps"> 
-  <div>Preview</div>
+  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>
+        <td>{{ localize("VMsSummary") }}:</td>
+        <td>{{ vmSummary.runningVms }} / {{ vmSummary.totalVms }}</td>
+      </tr>
+      <tr>
+        <td>{{ localize("Used CPUs") }}:</td>
+        <td>{{ vmSummary.usedCpus }}</td>
+      </tr>
+      <tr>
+        <td>{{ localize("Used RAM") }}:</td>
+        <td>{{ formatMemory(Number(vmSummary.usedRam)) }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="vmsChart-wrapper">
+    <canvas class="vmsChart"></canvas>
+  </div>
+  
 </div>

org.jdrupes.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/VmConlet-view.ftl.html

@@ -44,8 +44,10 @@
               class="fa fa-check" :title="localize('Yes')"></span>
             <span v-else-if="key === 'running' && !entry[key]"
               class="fa fa-close" :title="localize('No')"></span>
+            <span v-else-if="key === 'runningConditionSince'"
+              >{{ shortDateTime(entry[key].toString()) }}</span>
             <span v-else-if="key === 'currentRam'"
-              v-html="formatMemory(entry[key])"></span>
+              >{{ formatMemory(entry[key]) }}</span>
             <span v-else
               v-html="controller.breakBeforeDots(entry[key])"></span>
           </td>
@@ -64,7 +66,7 @@
         </tr>
         <tr :id="scopedId(rowIndex)" v-if="$aash.isDisclosed(scopedId(rowIndex))"
           :class="[(rowIndex % 2) ? 'odd' : 'even']">
-          <td colspan="4" class="details">
+          <td colspan="6" class="details">
             <table class="table--basic table--basic--autoStriped">
               <tr>
                 <td>{{ localize("maximumCpus") }}</td>
@@ -72,15 +74,31 @@
               </tr>
               <tr>
                 <td>{{ localize("requestedCpus") }}</td>
-                <td>{{ entry.spec.vm.maximumCpus }}</td>
+                <td v-if="cic.key !== (entry['name'] + ':cpus')" tabindex="0"
+                   v-on:focus="cic.startEdit(entry['name'] + ':cpus', entry.spec.vm.currentCpus)"
+                  >{{ entry.spec.vm.currentCpus }}</td>
+                <td v-else><form action="javascript:void();"
+                  ><input :ref="(el) => { cic.input = el; }"
+                   type="number" required :max="entry.spec.vm.maximumCpus"
+                   v-on:focusout="cic.endEdit(cic.parseNumber)"
+                   v-on:keydown.escape="cic.endEdit()"
+                  ><span>{{ cic.error }}</span></form></td>
               </tr>
               <tr>
                 <td>{{ localize("maximumRam") }}</td>
-                <td>{{ formatMemory(BigInt(entry.spec.vm.maximumRam)) }}</td>
+                <td>{{ formatMemory(Number(entry.spec.vm.maximumRam)) }}</td>
               </tr>
               <tr>
                 <td>{{ localize("requestedRam") }}</td>
-                <td>{{ formatMemory(BigInt(entry.spec.vm.maximumRam)) }}</td>
+                <td v-if="cic.key !== (entry['name'] + ':ram')" tabindex="0"
+                   v-on:focus="cic.startEdit(entry['name'] + ':ram', formatMemory(entry.spec.vm.currentRam))"
+                >{{ formatMemory(entry.spec.vm.currentRam) }}</td>
+                <td v-else><form action="javascript:void(0);"
+                  ><input :ref="(el) => { cic.input = el; }"
+                   type="text" required
+                   v-on:focusout="cic.endEdit(parseMemory)"
+                   v-on:keydown.escape="cic.endEdit()"
+                  ><span>{{ cic.error }}</span></form></td>
               </tr>
             </table>
           </td>

org.jdrupes.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/l10n.properties

@@ -1,5 +1,8 @@
 conletName = VM Viewer
 
+VMsSummary = VMs (running/total)
+
+since = Since
 currentCpus = Current CPUs
 currentRam = Current RAM
 maximumCpus = Maximum CPUs

org.jdrupes.vmoperator.vmconlet/resources/org/jdrupes/vmoperator/vmconlet/l10n_de.properties

@@ -1,6 +1,15 @@
 conletName = VM Anzeige
 
+VMsSummary = VMs (gestartet/gesamt)
+
+Used\ CPUs = Verwendete CPUs
+Used\ RAM = Verwendetes RAM
+Period = Zeitraum
+Last\ hour = Letzte Stunde
+Last\ day = Letzter Tag
+
 running = Gestartet
+since = Seit
 currentCpus = Aktuelle CPUs
 currentRam = Akuelles RAM
 maximumCpus = Maximale CPUs
@@ -10,6 +19,8 @@ requestedCpus = Angeforderte CPUs
 requestedRam = Angefordertes RAM
 vmActions = Aktionen
 vmname = Name
+Value\ is\ above\ maximum = Wert ist zu groß
+Illegal\ format = Ungültiges Format
 
 Start\ VM = VM Starten
 Stop\ VM = VM Anhalten