From 03517665fb32c5d1db808807f66ed89c22e16e1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Thu, 9 Dec 2021 01:03:26 +0100
Subject: [PATCH] resources client side.

---
 client/src/components/RoomInfo.vue    |  8 ++---
 client/src/components/RoomsCreate.vue | 44 +++++++++++++++++++++++++++
 client/src/plugins/filters.ts         | 27 ++++++++--------
 3 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/client/src/components/RoomInfo.vue b/client/src/components/RoomInfo.vue
index 276c712..d3162c5 100644
--- a/client/src/components/RoomInfo.vue
+++ b/client/src/components/RoomInfo.vue
@@ -160,10 +160,10 @@
       <v-simple-table>
         <template v-slot:default>
           <tbody>
-            <tr><th style="width:50%;"> CPU Shares </th><td :title="settings.resources.cpu_shares"><span v-if="settings.resources.cpu_shares">{{ settings.resources.cpu_shares | bytes }}</span><i v-else>--unlimited--</i></td></tr>
-            <tr><th> Nano CPUs </th><td :title="settings.resources.nano_cpus"><span v-if="settings.resources.nano_cpus">{{ settings.resources.nano_cpus | bytes }}</span><i v-else>--unlimited--</i></td></tr>
-            <tr><th> Shm Size </th><td :title="settings.resources.shm_size">{{ settings.resources.shm_size | bytes }}</td></tr>
-            <tr><th> Memory </th><td :title="settings.resources.memory"><span v-if="settings.resources.memory">{{ settings.resources.memory | bytes }}</span><i v-else>--unlimited--</i></td></tr>
+            <tr><th style="width:50%;"> CPUs </th><td :title="settings.resources.nano_cpus"><span v-if="settings.resources.nano_cpus">{{ settings.resources.nano_cpus | nanocpus }}</span><i v-else>--undefined--</i></td></tr>
+            <tr><th> Memory </th><td :title="settings.resources.memory"><span v-if="settings.resources.memory">{{ settings.resources.memory | memory }}</span><i v-else>--undefined--</i></td></tr>
+            <tr><th> CPU Shares </th><td :title="settings.resources.cpu_shares"><span v-if="settings.resources.cpu_shares">{{ settings.resources.cpu_shares }}</span><i v-else>--undefined--</i></td></tr>
+            <tr><th> Shm Size </th><td :title="settings.resources.shm_size">{{ settings.resources.shm_size | memory }}</td></tr>
           </tbody>
         </template>
       </v-simple-table>
diff --git a/client/src/components/RoomsCreate.vue b/client/src/components/RoomsCreate.vue
index b50a524..5b71f9e 100644
--- a/client/src/components/RoomsCreate.vue
+++ b/client/src/components/RoomsCreate.vue
@@ -270,6 +270,45 @@
               <strong>Public</strong>: Host path must be whitelisted in config and exists on the host.
             </p>
           </v-row>
+          <v-row align="center" no-gutters>
+            <h2> Resources </h2>
+          </v-row>
+          <v-row align="center">
+            <v-col>
+              <v-slider
+                v-model="data.resources.memory"
+                label="Memory"
+                thumb-label="always"
+                :thumb-size="30"
+                :min="0"
+                :max="8*1e9"
+                :step="0.2*1e9"
+                color="blue"
+              >
+                <template v-slot:thumb-label="{ value }">
+                  <span v-if="value">{{ value | memory }}</span>
+                  <span v-else>N/A</span>
+                </template>
+              </v-slider>
+            </v-col>
+            <v-col>
+              <v-slider
+                v-model="data.resources.nano_cpus"
+                label="CPUs"
+                thumb-label="always"
+                :thumb-size="30"
+                :min="0"
+                :max="8*1e9"
+                :step="0.2*1e9"
+                color="blue"
+              >
+                <template v-slot:thumb-label="{ value }">
+                  <span v-if="value">{{ value | nanocpus }}</span>
+                  <span v-else>N/A</span>
+                </template>
+              </v-slider>
+            </v-col>
+          </v-row>
         </template>
 
         <hr />
@@ -578,6 +617,11 @@ export default class RoomsCreate extends Vue {
       ...this.$store.state.defaultRoomSettings,
       // eslint-disable-next-line
       neko_image: this.nekoImages[0],
+      resources: {
+        // eslint-disable-next-line
+        nano_cpus: 0,
+        memory: 0,
+      },
     }
     this.browserPolicyContent = { ...this.$store.state.defaultBrowserPolicyContent }
     this.envList = Object.entries({...this.data.envs}).map(([ key, val ]) => ({ key, val, }))
diff --git a/client/src/plugins/filters.ts b/client/src/plugins/filters.ts
index 9ab46b4..ded443d 100644
--- a/client/src/plugins/filters.ts
+++ b/client/src/plugins/filters.ts
@@ -21,20 +21,23 @@ Vue.filter('percent', function(value: any) {
 })
 
 // eslint-disable-next-line
-Vue.filter('bytes', function(value: any) {
-  if (Math.abs(value) < 1000) {
-    return value + ' B';
+Vue.filter('memory', function(value: any) {
+  if (value < 1e3) {
+    return value + 'B'
   }
 
-  const units = ['K', 'M', 'G']
-  let u = -1;
-  const r = 10**2;
+  if (value < 1e6) {
+    return (value / 1e3).toFixed(0) + 'K'
+  }
 
-  do {
-    value /= 1000;
-    ++u;
-  } while (Math.round(Math.abs(value) * r) / r >= 1000 && u < units.length - 1);
+  if (value < 1e9) {
+    return (value / 1e6).toFixed(0) + 'M'
+  }
 
-
-  return value.toFixed(2) + units[u];
+  return (value / 1e9).toFixed(1) + 'G'
+})
+
+// eslint-disable-next-line
+Vue.filter('nanocpus', function(value: any) {
+  return (value / 1e9).toFixed(1) + 'x'
 })