Implementing Multiple SSH Keys with Enhanced Management Features

packages/grid_client/src/storage/tfkvstore.ts

@@ -15,16 +15,33 @@ class TFKVStoreBackend implements BackendStorageInterface {
     this.client = new TFClient(url, mnemonic, storeSecret, keypairType);
   }
 
+  private async cleanFragments(key: string, start: number) {
+    let k = `${key}.${start}`;
+    let value = await this.client.kvStore.get({ key: k });
+    if (!value) {
+      return [];
+    }
+    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
+    while (value) {
+      extrinsics.push(await this.client.kvStore.delete({ key: k }));
+      start++;
+      k = `${key}.${start}`;
+      value = await this.client.kvStore.get({ key: k });
+    }
+    return extrinsics;
+  }
+
   @crop
   async set(key: string, value: string) {
     if (!value || value === '""') {
       return await this.remove(key);
     }
-    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
+    let extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
     const splits = this.split(key, value);
     for (const k of Object.keys(splits)) {
       extrinsics.push(await this.client.kvStore.set({ key: k, value: splits[k] }));
     }
+    extrinsics = extrinsics.concat(await this.cleanFragments(key, Object.keys(splits).length));
     return extrinsics;
   }
 
@@ -52,15 +69,9 @@ class TFKVStoreBackend implements BackendStorageInterface {
     if (!value) {
       return;
     }
-    let i = 0;
-    let val = value;
-    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = [];
-    while (val) {
-      extrinsics.push(await this.client.kvStore.delete({ key }));
-      i++;
-      key = `${key}.${i}`;
-      val = await this.client.kvStore.get({ key });
-    }
+
+    const extrinsics: SubmittableExtrinsic<"promise", ISubmittableResult>[] = await this.cleanFragments(key, 1);
+    extrinsics.push(await this.client.kvStore.delete({ key }));
     return extrinsics;
   }
 

packages/playground/src/components/copy_input_wrapper.vue

@@ -1,9 +1,13 @@
 <template>
   <slot
-    :props="{
-      'append-inner-icon': 'mdi-content-copy',
-      'onClick:append-inner': copy,
-    }"
+    :props="
+      props.data
+        ? {
+            'append-inner-icon': 'mdi-content-copy',
+            'onClick:append-inner': copy,
+          }
+        : {}
+    "
   ></slot>
 </template>
 

packages/playground/src/components/input_tooltip.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex" v-if="!disabled">
-    <v-tooltip :text="tooltip || 'None!'" :location="location">
+    <v-tooltip :text="tooltip || 'None!'" :location="location" :width="width ? width : ''">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}
         <div class="d-flex" :class="{ 'w-100': !inline, 'align-center': alignCenter }">
@@ -51,6 +51,10 @@ export default {
       type: String as PropType<VTooltip["location"]>,
       required: false,
     },
+    width: {
+      type: String,
+      required: false,
+    },
     disabled: Boolean,
   },
   setup() {

packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue

@@ -0,0 +1,191 @@
+<template>
+  <v-card class="" variant="tonal">
+    <v-card-title>
+      <v-icon>mdi-key-chain</v-icon>
+      Manage SSH keys
+    </v-card-title>
+    <v-card-text>
+      SSH grants secure remote access to your deployed machine for seamless management and execution of commands.
+      <v-alert v-if="selectedKeys.length === 0" type="warning" class="mt-2">
+        Attention: It appears that no SSH keys have been selected. In order to access your deployment, you must send at
+        least one SSH key. You can manage your SSH keys from the
+        <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH keys management page</router-link> and add more as needed.
+      </v-alert>
+    </v-card-text>
+
+    <VDivider />
+
+    <v-card-actions>
+      <VSpacer />
+      <v-btn color="primary" variant="flat" @click="openManageDialog = true" class="mr-2">Manage SSH keys</v-btn>
+    </v-card-actions>
+  </v-card>
+
+  <v-dialog v-model="openManageDialog" max-width="850">
+    <v-card>
+      <v-toolbar color="primary" class="custom-toolbar">
+        <p class="mb-5">
+          <v-icon>mdi-cog-sync</v-icon>
+          Manage SSH keys
+        </p>
+      </v-toolbar>
+
+      <v-card-text>
+        <v-alert type="info" class="mb-5">
+          The keys you've chosen will be forwarded to your deployment. To make changes, simply tap on the key you wish
+          to cancel or add.
+        </v-alert>
+
+        <v-row>
+          <v-tooltip
+            v-for="_key of sshKeys"
+            :key="_key.id"
+            :text="selectedKeys.includes(_key) ? 'Selected' : 'Not selected'"
+            location="bottom"
+          >
+            <template #activator="{ props }">
+              <v-chip
+                class="pa-5 ml-5 mt-5"
+                :variant="selectedKeys.includes(_key) ? 'flat' : 'outlined'"
+                :color="selectedKeys.includes(_key) ? 'primary' : 'white'"
+                v-bind="props"
+                @click="selectKey(_key)"
+              >
+                <div class="d-flex justify-center">
+                  <v-icon>mdi-key-variant</v-icon>
+                </div>
+                <div class="d-flex justify-center">
+                  <p class="ml-2">
+                    {{ capitalize(_key.name) }}
+                  </p>
+                </div>
+              </v-chip>
+            </template>
+          </v-tooltip>
+        </v-row>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn class="mt-2 mb-2 mr-2" variant="outlined" color="white" text="Close" @click="openManageDialog = false" />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- View SSH Key -->
+  <ssh-data-dialog :open="isViewSSHKey" :selected-key="selectedKey" @close="onCloseSelectKey" />
+</template>
+
+<script lang="ts">
+import { noop } from "lodash";
+import { capitalize, defineComponent, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
+import { onUnmounted } from "vue";
+
+import SshDataDialog from "@/components/ssh_keys/SshDataDialog.vue";
+import { useForm, ValidatorStatus } from "@/hooks/form_validator";
+import type { InputValidatorService } from "@/hooks/input_validator";
+import { DashboardRoutes } from "@/router/routes";
+import { useProfileManager } from "@/stores";
+import type { SSHKeyData } from "@/types";
+
+export default defineComponent({
+  name: "ManageSshDeployemnt",
+  emits: ["selectedKeys"],
+  components: {
+    SshDataDialog,
+  },
+
+  setup(_, { emit }) {
+    const defaultKeyData = { createdAt: "", id: 0, publicKey: "", name: "", isActive: false };
+    const openManageDialog = ref<boolean>(false);
+    const profileManager = useProfileManager();
+    const sshKeys = profileManager.profile?.ssh as SSHKeyData[];
+    const selectedKey = ref<SSHKeyData>(defaultKeyData);
+    const selectedKeys = ref<SSHKeyData[]>([]);
+    const isViewSSHKey = ref<boolean>(false);
+
+    // Each key will be added then add `\n` as a new line.
+    const selectedKeysString = ref<string>("");
+
+    onMounted(() => {
+      selectedKeys.value = sshKeys.filter(_key => _key.isActive === true);
+      handleKeys();
+      emit("selectedKeys", selectedKeysString.value);
+    });
+
+    function selectKey(key: SSHKeyData) {
+      if (selectedKeys.value.includes(key)) {
+        const index = selectedKeys.value.indexOf(key);
+        if (index !== -1) {
+          selectedKeys.value.splice(index, 1);
+        }
+      } else {
+        selectedKeys.value.push(key);
+      }
+      handleKeys();
+      emit("selectedKeys", selectedKeysString.value);
+    }
+
+    function onSelectKey(key: SSHKeyData) {
+      selectedKey.value = key;
+      isViewSSHKey.value = true;
+    }
+
+    function onCloseSelectKey() {
+      isViewSSHKey.value = false;
+      nextTick(() => {
+        selectedKey.value = defaultKeyData;
+      });
+    }
+
+    function handleKeys() {
+      selectedKeysString.value = selectedKeys.value.map(_key => _key.publicKey).join("\n\n");
+    }
+
+    /* interact with form_validator */
+    const { uid } = getCurrentInstance() as { uid: number };
+    const form = useForm();
+
+    const fakeService: InputValidatorService = {
+      validate: () => Promise.resolve(true),
+      setStatus: noop,
+      reset: noop,
+      status: ValidatorStatus.Init,
+      error: null,
+    };
+
+    onMounted(() => form?.register(uid, fakeService));
+    onUnmounted(() => form?.unregister(uid));
+
+    watch(
+      () => selectedKeys.value.length,
+      num => {
+        form?.updateStatus(uid, num === 0 ? ValidatorStatus.Invalid : ValidatorStatus.Valid);
+      },
+      { immediate: true },
+    );
+
+    return {
+      openManageDialog,
+      sshKeys,
+      selectedKeys,
+      selectedKey,
+      isViewSSHKey,
+      defaultKeyData,
+      selectedKeysString,
+      DashboardRoutes,
+
+      capitalize,
+      onSelectKey,
+      onCloseSelectKey,
+      selectKey,
+    };
+  },
+});
+</script>
+
+<style>
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>

packages/playground/src/components/ssh_keys/SshDataDialog.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-dialog
+    @click:outside="() => $emit('close')"
+    @keydown.esc="() => $emit('close')"
+    v-model="$props.open"
+    max-width="750"
+  >
+    <template v-slot:default>
+      <v-card>
+        <v-toolbar color="primary" class="custom-toolbar">
+          <p class="mb-5">SSH-Key Detials</p>
+        </v-toolbar>
+
+        <v-card-text>
+          <template v-for="[_key, value] of Object.entries(selectedKey).sort()" :key="_key">
+            <template v-if="!notNeededFields.includes(_key)">
+              <CopyInputWrapper v-if="_key !== 'publicKey'" :data="value" #="{ props: copyInputProps }">
+                <v-text-field v-bind="{ ...copyInputProps }" :label="_key" :model-value="value" :readonly="true" />
+              </CopyInputWrapper>
+              <CopyInputWrapper v-else :data="value" #="{ props: copyInputProps }">
+                <v-textarea
+                  :class="value.length ? 'ssh-key' : ''"
+                  :model-value="value"
+                  :readonly="true"
+                  label="Public SSH Key"
+                  no-resize
+                  :spellcheck="false"
+                  v-bind="{ ...copyInputProps }"
+                />
+              </CopyInputWrapper>
+            </template>
+          </template>
+
+          <v-tooltip text="Key status">
+            <template #activator="{ props }">
+              <v-chip v-bind="props" color="primary" v-if="selectedKey.isActive">Active</v-chip>
+              <v-chip v-bind="props" color="grey-lighten-1" v-else>Inactive</v-chip>
+            </template>
+          </v-tooltip>
+
+          <v-tooltip text="Created at">
+            <template #activator="{ props }">
+              <v-chip v-bind="props" class="ml-2" color="primary">{{ selectedKey.createdAt }}</v-chip>
+            </template>
+          </v-tooltip>
+        </v-card-text>
+
+        <v-card-actions class="mb-3 custom-actions">
+          <v-spacer></v-spacer>
+          <div class="mt-2">
+            <v-btn color="white" variant="outlined" text="Close" @click="$emit('close')"></v-btn>
+          </div>
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { capitalize, defineComponent, type PropType } from "vue";
+
+import type { SSHKeyData } from "@/types";
+
+export default defineComponent({
+  name: "SSHDataDialog",
+  emits: ["close"],
+  props: {
+    open: {
+      type: Boolean,
+      required: true,
+    },
+    selectedKey: {
+      type: Object as PropType<SSHKeyData>,
+      required: true,
+    },
+  },
+  setup() {
+    const notNeededFields = ["id", "activating", "deleting", "isActive", "createdAt"];
+    return {
+      notNeededFields,
+      capitalize,
+    };
+  },
+});
+</script>
+
+<style>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+.ssh-key .v-field__input {
+  height: 230px !important;
+}
+.custom-actions {
+  border-top: 1px solid rgb(101 99 99);
+  display: flex;
+  justify-content: center;
+  margin-right: 15px;
+  margin-left: 15px;
+  margin-top: 15px;
+}
+</style>