Merge pull request #355 from threefoldtech/development_weblet_general…

…_fixes

Fixed mountpoint & added space & added disk in GB

src/components/FormatData.svelte

@@ -39,9 +39,9 @@
   <Input data={vm.capacity.memory} field={memoryField} />
   {#each vm.mounts as disk}
     <Input
-      data={disk.size}
+      data={(disk.size * 10 ** -9).toFixed(2)}
       field={{
-        label: `Disk(${disk.mountPoint})`,
+        label: `Disk(${disk.mountPoint}) GB`,
         symbol: "size",
         type: "number",
         disabled: true,

src/components/SelectNodeId.svelte

@@ -302,7 +302,7 @@
   {/each}
 
   <button
-    class={"button is-primary mt-2 " + (loadingNodes ? "is-loading" : "")}
+    class={"button is-primary mt-2 mb-2 " + (loadingNodes ? "is-loading" : "")}
     disabled={loadingNodes || !profile}
     type="button"
     on:click={onLoadNodesHandler}

src/elements/vm/Vm.wc.svelte

@@ -86,25 +86,17 @@
     { label: 'Value', symbol: 'value', placeholder: "Environment Value", type: "text" },
   ];
 
-  // prettier-ignore
-  const diskFields: IFormField[] = [
-    { label: "Name", symbol: "name", placeholder: "Disk Name", type: "text" },
-    { label: "Size", symbol: "size", placeholder: "Disk size in GB", type: "number", validator: validateDisk, invalid: false },
-    { label: "Mount Point", symbol: "mountpoint", placeholder: "Disk Mount Point", type: "text" },
-  ];
-
   const deploymentStore = window.configs?.deploymentStore;
   let active: string = "config";
   let loading = false;
   let success = false;
   let failed = false;
   let profile: IProfile;
-  const configs = window.configs?.baseConfig;
 
   let message: string;
   let modalData: Object;
   let status: "valid" | "invalid";
-  $: disabled = ((loading || !data.valid) && !(success || failed)) || !profile || status !== "valid" || nameField.invalid || isInvalid(baseFields) || isInvalid(diskFields); // prettier-ignore
+  $: disabled = ((loading || !data.valid) && !(success || failed)) || !profile || status !== "valid" || nameField.invalid || isInvalid(baseFields); // prettier-ignore
   const currentDeployment = window.configs?.currentDeploymentStore;
 
   async function onDeployVM() {
@@ -242,7 +234,7 @@
                 on:click={() =>
                   (data.disks = data.disks.filter((_, i) => index !== i))}
               />
-              {#each diskFields as field (field.symbol)}
+              {#each disk.diskFields as field (field.symbol)}
                 <Input bind:data={disk[field.symbol]} {field} />
               {/each}
             </div>

src/types/vm.ts

@@ -1,14 +1,11 @@
 import { v4 } from "uuid";
+import type { IFormField } from ".";
 import isValidInteger from "../utils/isValidInteger";
 import { Network } from "./kubernetes";
 import NodeID from "./nodeId";
 
 export class Env {
-  constructor(
-    public id = v4(),
-    public key = "",
-    public value = ""
-  ) {}
+  constructor(public id = v4(), public key = "", public value = "") {}
 
   public get valid(): boolean {
     const { key, value } = this;
@@ -17,6 +14,16 @@ export class Env {
 }
 
 export class Disk {
+  // prettier-ignore
+  public diskFields: IFormField[] = [
+    { label: "Name", symbol: "name", placeholder: "Disk Name", type: "text" },
+    { label: "Size", symbol: "size", placeholder: "Disk size in GB", type: "number" },
+    { label: "Mount Point", symbol: "mountpoint", placeholder: "Disk Mount Point", type: "text", validator(point: string): string | void {
+      point = point.trim();
+      if (point === "" || point === "/" || !point.startsWith("/")) return "Mount Point must start '/' and can't be positioned at root('/')"
+    }, invalid: false },
+  ]
+
   constructor(
     public id = v4(),
     public name = "DISK" + id.split("-")[0],
@@ -26,7 +33,15 @@ export class Disk {
 
   public get valid(): boolean {
     const { name, size, mountpoint } = this;
-    return name !== "" && isValidInteger(size) && mountpoint !== "";
+    let point = mountpoint.trim();
+
+    return (
+      name !== "" &&
+      isValidInteger(size) &&
+      point !== "" &&
+      point !== "/" &&
+      point.startsWith("/")
+    );
   }
 }