From d6e889979e5bf1cfe209fafe4345c0d5a7fb8ea6 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Sat, 8 Feb 2025 12:23:06 +0000
Subject: [PATCH 01/32] feat: begin adding gpu views

---
 src/components/MobileNavigation.vue      |  5 ++
 src/components/SideNavigation.vue        |  5 ++
 src/modules/gpu/components/GPUSelect.vue | 93 ++++++++++++++++++++++++
 src/modules/gpu/views/GPUDeploy.vue      | 24 ++++++
 src/modules/gpu/views/GPUList.vue        | 83 +++++++++++++++++++++
 src/router/index.js                      | 10 +++
 6 files changed, 220 insertions(+)
 create mode 100644 src/modules/gpu/components/GPUSelect.vue
 create mode 100644 src/modules/gpu/views/GPUDeploy.vue
 create mode 100644 src/modules/gpu/views/GPUList.vue

diff --git a/src/components/MobileNavigation.vue b/src/components/MobileNavigation.vue
index 819f4ed9..ac6cde43 100644
--- a/src/components/MobileNavigation.vue
+++ b/src/components/MobileNavigation.vue
@@ -51,6 +51,11 @@ export default {
           link: '/servers',
           text: 'Servers'
         },
+        {
+          _key: 'gpu',
+          link: '/gpus',
+          text: 'GPUs'
+        },
         {
           _key: 'dns',
           link: '/domains',
diff --git a/src/components/SideNavigation.vue b/src/components/SideNavigation.vue
index 3777863f..c9112d74 100644
--- a/src/components/SideNavigation.vue
+++ b/src/components/SideNavigation.vue
@@ -34,6 +34,11 @@ export default {
           link: '/servers',
           text: 'Servers'
         },
+        {
+          _key: 'gpu',
+          link: '/gpus',
+          text: 'GPUs'
+        },
         {
           _key: 'dns',
           link: '/domains',
diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
new file mode 100644
index 00000000..09759f65
--- /dev/null
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { defineModel } from 'vue'
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+
+const model = defineModel()
+
+const gpus = [
+  {
+    id: 'nvidia-a100-pcie',
+    vendorName: 'nvidia',
+    modelName: 'A100 PCI-E',
+    memoryGib: 80
+  },
+  {
+    id: 'nvidia-h100-nvl-pcie',
+    vendorName: 'nvidia',
+    modelName: 'H100 NVL PCI-E',
+    memoryGib: 96
+  }
+]
+</script>
+
+<template>
+  <RadioGroup v-model="model">
+    <RadioGroupLabel class="sr-only">GPU Model</RadioGroupLabel>
+
+    <div class="box__grid">
+      <RadioGroupOption
+        v-for="gpu in gpus"
+        v-slot="{ active, checked, disabled }"
+        as="template"
+        :disabled="disabled"
+        :key="gpu.id"
+        :value="gpu.id"
+      >
+        <div
+          :class="{ active, checked, disabled }"
+          class="radioOption"
+        >
+          <div class="flex flex-col items-center w-full">
+            <RadioGroupLabel
+              as="div"
+              class="optionTitle"
+              :class="{ active, checked, disabled }"
+            >
+              <h4 class="capitalize">{{ gpu.modelName }}</h4>
+            </RadioGroupLabel>
+          </div>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>
+
+<style scoped>
+  .box__grid {
+    @apply mt-6 w-full grid grid-cols-1 gap-4;
+    @apply sm:grid-cols-1 lg:grid-cols-3;
+  }
+
+  /* radio option */
+  .radioOption {
+    @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+    @apply hover:bg-gray-100 hover:bg-opacity-50;
+    @apply focus:outline-none;
+  }
+  .radioOption.active {
+    @apply border-green border-opacity-40;
+  }
+  .radioOption.checked {
+    @apply bg-gray-100 border-green bg-opacity-75;
+    @apply ring-4 ring-green ring-opacity-10;
+  }
+  .radioOption.disabled {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  /* option title */
+  .optionTitle {
+    @apply text-center w-full;
+  }
+  .optionTitle.active {
+
+  }
+  .optionTitle.checked {
+
+  }
+
+  /* option specs */
+  .optionSpecs {
+    @apply flex flex-col items-center w-full mt-4 text-sm text-gray-500;
+  }
+</style>
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
new file mode 100644
index 00000000..335614e0
--- /dev/null
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -0,0 +1,24 @@
+<script setup>
+import GPUSelect from '../components/GPUSelect.vue'
+import { reactive } from 'vue'
+import { required } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+
+const formState = reactive({
+  gpu: ''
+})
+
+const v$ = useVuelidate({
+  gpu: [required]
+}, formState)
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <h1>Deploy a new Edge GPU</h1>
+
+    <div class="box">
+      <GPUSelect v-model="v$.gpu.$model" />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
new file mode 100644
index 00000000..73f8e9dd
--- /dev/null
+++ b/src/modules/gpu/views/GPUList.vue
@@ -0,0 +1,83 @@
+<script setup>
+import ListSortingMenu from '../../../components/ListSortingMenu.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Pagination from '../../../components/Pagination.vue'
+
+const gpus = []
+
+const currentPage = 1
+const limit = 20
+const loaded = true
+const totalCount = 0
+
+const sortFields = [
+  { label: 'Name', param: 'name' },
+  { label: 'Created', param: 'created' }
+]
+
+function changePage(e) {
+  console.log(e)
+}
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <div class="flex flex-col sm:flex-row justify-between">
+      <h1>Edge GPUs</h1>
+      <router-link
+        v-if="gpus.length"
+        :to="{ name: 'ServerDeploy' }"
+        class="button button--success button--small h-full mb-5 sm:mb-0"
+      >
+        Deploy Server
+      </router-link>
+    </div>
+
+    <div v-if="!loaded" class="flex items-center">
+      <span>Loading servers</span>
+      <div class="ml-2"><LoadingSpinner /></div>
+    </div>
+
+    <ul v-else-if="gpus.length" role="list" class="gpuList">
+      <div class="float-right mb-2">
+        <ListSortingMenu
+          :fields="sortFields"
+          :query="sortQuery"
+          @update-sort="updateSortQuery"
+        />
+      </div>
+      <!--
+      <ServerListItem
+        v-for="gpu in gpus"
+        :key="gpu._key"
+        :regions=regions
+        :server=server
+      />
+      -->
+      <Pagination
+        :currentPage="currentPage"
+        :limit="limit"
+        :totalCount="totalCount"
+        @change-page="changePage"
+      />
+    </ul>
+
+    <div v-else class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        <p>You haven't deployed any GPUs yet. Once you deploy your first GPU it will be available here.</p>
+        <router-link
+          :to="{ name: 'Deploy GPU' }"
+          class="button button--success button--small"
+        >
+          Deploy GPU
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .gpuList {
+    @apply space-y-2;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index bc93f410..d8aa012c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -138,6 +138,16 @@ const routes = [
         name: 'Getting Started',
         component: GettingStarted
       },
+      {
+        path: 'gpus',
+        name: 'GPUs',
+        component: () => import('../modules/gpu/views/GPUList.vue')
+      },
+      {
+        path: 'gpus/deploy',
+        name: 'Deploy GPU',
+        component: () => import('../modules/gpu/views/GPUDeploy.vue')
+      },
       {
         path: 'notifications',
         name: 'Notifications',

From f4ccd1c6f2dc74ea71442d8ce3ee6ee6c91e85be Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Sat, 8 Feb 2025 12:29:02 +0000
Subject: [PATCH 02/32] chore: copy EditableTitle, Slider from vpn branch

---
 src/layout/EditableTitle.vue | 98 ++++++++++++++++++++++++++++++++++++
 src/layout/Slider.vue        | 60 ++++++++++++++++++++++
 2 files changed, 158 insertions(+)
 create mode 100644 src/layout/EditableTitle.vue
 create mode 100644 src/layout/Slider.vue

diff --git a/src/layout/EditableTitle.vue b/src/layout/EditableTitle.vue
new file mode 100644
index 00000000..a33c6b40
--- /dev/null
+++ b/src/layout/EditableTitle.vue
@@ -0,0 +1,98 @@
+<script setup>
+import LoadingSpinner from '@/components/icons/LoadingSpinner.vue'
+import { CheckIcon, PencilIcon, XIcon } from '@heroicons/vue/outline'
+import { defineEmits, defineModel, defineProps, ref, watchPostEffect } from 'vue'
+
+const emit = defineEmits(['cancel', 'edit','save'])
+
+const props = defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  invalid: Boolean,
+  placeholder: String
+})
+
+const editing = ref(false)
+const input = ref(null)
+const model = defineModel()
+const previousValue = ref(model.value)
+
+function cancel() {
+  editing.value = false
+  model.value = previousValue.value
+
+  emit('cancel')
+}
+
+function edit() {
+  editing.value = true
+
+  emit('edit')
+}
+
+function save() {
+  if (props.invalid) return
+
+  editing.value = false
+  previousValue.value = model.value
+
+  emit('save')
+}
+
+watchPostEffect(() => {
+  if (input.value) {
+    input.value.focus()
+  }
+})
+</script>
+
+<template>
+  <div v-if="editing" class="editable-title__container flex">
+    <input
+      v-model="model"
+      @keypress.enter="save"
+      class="editable-title__value"
+      :placeholder="placeholder"
+      ref="input"
+      type="text"
+    />
+
+    <div class="mt-3 flex">
+      <button class="ml-2" @click="save" :disabled="invalid || disabled">
+        <CheckIcon class="button__icon text-green hover:text-green-600" />
+      </button>
+      <button @click="cancel" class="ml-2">
+        <XIcon class="button__icon text-red hover:text-red-600" />
+      </button>
+    </div>
+  </div>
+
+  <div v-else class="editable-title__container flex">
+    <h1 class="w-max mb-0">{{ model }}</h1>
+
+    <div class="mt-3">
+      <button v-if="busy" class="ml-2" disabled>
+        <LoadingSpinner />
+      </button>
+      <button v-else class="ml-2" @click="edit" :disabled="disabled">
+        <PencilIcon class="button__icon text-gray-400 hover:text-green" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.editable-title__value {
+  @apply bg-transparent text-3xl text-gray-600 border-b border-gray-400 w-full;
+  @apply focus:outline-none focus:border-green focus:text-green;
+}
+
+.editable-title__container .button__icon {
+  @apply w-5 ml-1;
+}
+
+.editable-title__container button:disabled,
+.editable-title__container button:disabled .button__icon {
+  @apply text-gray-400 hover:no-underline;
+}
+</style>
diff --git a/src/layout/Slider.vue b/src/layout/Slider.vue
new file mode 100644
index 00000000..68871cb9
--- /dev/null
+++ b/src/layout/Slider.vue
@@ -0,0 +1,60 @@
+<script setup>
+import 'vue-slider-component/theme/antd.css'
+import VueSlider from 'vue-slider-component'
+import { defineEmits, defineModel, defineProps } from 'vue'
+
+defineProps({
+  disabled: Boolean,
+  formatter: Function,
+  marks: Object,
+  max: Number,
+  min: Number,
+  title: String,
+  tooltip: String
+})
+
+const emit = defineEmits(['change'])
+
+const model = defineModel()
+</script>
+
+<template>
+  <div class="slider__container" :class="{ disabled }">
+    <span v-if="title" class="slider__title">{{ title }}</span>
+    <vue-slider
+      v-model="model"
+      adsorb
+      tooltipPlacement="top"
+      width="100%"
+      :contained="true"
+      :disabled="disabled"
+      :dot-style="{ background: '#4ecd5f', boxShadow: '0 0 2px 1px #eee', border: 'none' }"
+      :dotSize="20"
+      :label-style="{ color: '#999', fontSize: '12px' }"
+      :marks="marks"
+      :max="max"
+      :min="min"
+      :process-style="{ background: '#4ecd5f' }"
+      :step-active-style="{ background: '#fff', opacity: '1', border: 'none', boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px' }"
+      :tooltip="tooltip || 'hover'"
+      :tooltip-formatter="formatter"
+      :tooltip-style="{ background: '#4ecd5f', borderColor: '#4ecd5f' }"
+      @change="val => emit('change', val)"
+    />
+  </div>
+</template>
+
+<style>
+.slider__container {
+  @apply relative flex space-x-3 items-start justify-center pr-5 pl-2 pt-14 pb-8 border border-gray-300 rounded-md;
+}
+
+.slider__container.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.slider__title {
+  @apply absolute top-0 inline-block px-3 text-gray-500 transform -translate-y-1/2 bg-white;
+}
+
+</style>

From 11b596649f1389e5fc8b144f038e7a2c93a41c83 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Sat, 8 Feb 2025 14:45:35 +0000
Subject: [PATCH 03/32] feat: add sliders to gpu deploy

---
 src/modules/gpu/components/GPUSelect.vue | 10 +++--
 src/modules/gpu/views/GPUDeploy.vue      | 53 +++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
index 09759f65..f796bcbd 100644
--- a/src/modules/gpu/components/GPUSelect.vue
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -6,13 +6,15 @@ const model = defineModel()
 
 const gpus = [
   {
-    id: 'nvidia-a100-pcie',
+    _key: 'a100',
+    cudoId: 'nvidia-a100-pcie',
     vendorName: 'nvidia',
     modelName: 'A100 PCI-E',
     memoryGib: 80
   },
   {
-    id: 'nvidia-h100-nvl-pcie',
+    _key: 'h100',
+    cudoId: 'nvidia-h100-nvl-pcie',
     vendorName: 'nvidia',
     modelName: 'H100 NVL PCI-E',
     memoryGib: 96
@@ -30,8 +32,8 @@ const gpus = [
         v-slot="{ active, checked, disabled }"
         as="template"
         :disabled="disabled"
-        :key="gpu.id"
-        :value="gpu.id"
+        :key="gpu._key"
+        :value="gpu._key"
       >
         <div
           :class="{ active, checked, disabled }"
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 335614e0..58862b41 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,15 +1,24 @@
 <script setup>
 import GPUSelect from '../components/GPUSelect.vue'
+import Slider from '../../../layout/Slider.vue'
 import { reactive } from 'vue'
 import { required } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 
 const formState = reactive({
-  gpu: ''
+  gpu: '',
+  disk: 10,
+  gpus: 1,
+  ram: 2,
+  vcpus: 1
 })
 
 const v$ = useVuelidate({
-  gpu: [required]
+  gpu: [required],
+  disk: [],
+  gpus: [],
+  ram: [],
+  vcpus: []
 }, formState)
 </script>
 
@@ -19,6 +28,46 @@ const v$ = useVuelidate({
 
     <div class="box">
       <GPUSelect v-model="v$.gpu.$model" />
+
+      <div class="grid grid-cols-2 gap-4">
+        <Slider
+          v-model="v$.gpus.$model"
+          :marks="[1,2,4,8]"
+          :max="8"
+          :min="1"
+          title="GPUs"
+          tooltip="always"
+        />
+
+        <Slider
+          v-model="v$.vcpus.$model"
+          :marks="[1,2,4,8,12,16,24,32]"
+          :max="32"
+          :min="1"
+          title="vCPUs"
+          tooltip="always"
+        />
+
+        <Slider
+          v-model="v$.ram.$model"
+          :formatter="size => `${size} GiB`"
+          :marks="[2,4,8,12,16,24,32]"
+          :max="32"
+          :min="2"
+          title="RAM (GiB)"
+          tooltip="always"
+        />
+
+        <Slider
+          v-model="v$.disk.$model"
+          :formatter="size => `${size} GiB`"
+          :marks="[10,20,50,100,200]"
+          :max="200"
+          :min="10"
+          title="Disk (GiB)"
+          tooltip="always"
+        />
+      </div>
     </div>
   </div>
 </template>

From bfc76bf9f6b60d36a0748ae2051730bd2658e57d Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 17 Feb 2025 13:37:19 +0000
Subject: [PATCH 04/32] feat: complete deploy form

---
 src/modules/gpu/components/GPUSelect.vue |   5 +-
 src/modules/gpu/views/GPUDeploy.vue      | 178 +++++++++++++++++------
 2 files changed, 137 insertions(+), 46 deletions(-)

diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
index f796bcbd..be536cf9 100644
--- a/src/modules/gpu/components/GPUSelect.vue
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -1,8 +1,11 @@
 <script setup>
-import { defineModel } from 'vue'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { defineModel, defineProps } from 'vue'
 
 const model = defineModel()
+defineProps({
+  disabled: Boolean
+})
 
 const gpus = [
   {
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 58862b41..db4a70d8 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,73 +1,161 @@
 <script setup>
 import GPUSelect from '../components/GPUSelect.vue'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Password from '../../../components/server/deploy/Password.vue'
 import Slider from '../../../layout/Slider.vue'
-import { reactive } from 'vue'
-import { required } from '@vuelidate/validators'
+import ValidationError from '../../../components/ValidationError.vue'
 import useVuelidate from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { maxValue, minLength, minValue, required } from '@vuelidate/validators'
 
 const formState = reactive({
   gpu: '',
   disk: 10,
   gpus: 1,
   ram: 2,
-  vcpus: 1
+  vcpus: 1,
+  name: '',
+  password: ''
 })
 
 const v$ = useVuelidate({
   gpu: [required],
-  disk: [],
-  gpus: [],
-  ram: [],
-  vcpus: []
+  disk: [minValue(10), maxValue(200)],
+  gpus: [minValue(1), maxValue(8)],
+  ram: [minValue(2), maxValue(32)],
+  vcpus: [minValue(1), maxValue(32)],
+  name: [required, minLength(3)],
+  password: [required, minLength(8)]
 }, formState)
+
+const busy = ref(false)
+const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+
+function setPassword(value) {
+  v$.value.password.$model = value
+}
+
+async function submit() {
+  const data = {
+    gpu: v$.value.gpu.$model,
+    disk: v$.value.disk.$model,
+    gpus: v$.value.gpus.$model,
+    ram: v$.value.ram.$model,
+    vcpus: v$.value.vcpus.$model,
+    name: v$.value.name.$model,
+    password: v$.value.password.$model
+  }
+  console.log(data)
+}
 </script>
 
 <template>
   <div class="mainContent__inner">
     <h1>Deploy a new Edge GPU</h1>
 
-    <div class="box">
-      <GPUSelect v-model="v$.gpu.$model" />
+    <form class="flex flex-col col-span-12 pb-20 space-y-4" @submit.prevent="submit">
+      <div class="box">
+        <h4>Select GPU</h4>
+        <GPUSelect v-model="v$.gpu.$model" />
+        <ValidationError :errors="v$.gpu.$errors" />
+      </div>
+
+      <div class="box">
+        <h4>Specs</h4>
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <Slider
+              v-model="v$.gpus.$model"
+              :disabled="busy"
+              :marks="[1,2,4,8]"
+              :max="8"
+              :min="1"
+              title="GPUs"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.gpus.$errors" />
+          </div>
 
-      <div class="grid grid-cols-2 gap-4">
-        <Slider
-          v-model="v$.gpus.$model"
-          :marks="[1,2,4,8]"
-          :max="8"
-          :min="1"
-          title="GPUs"
-          tooltip="always"
-        />
+          <div>
+            <Slider
+              v-model="v$.vcpus.$model"
+              :disabled="busy"
+              :marks="[1,2,4,8,12,16,24,32]"
+              :max="32"
+              :min="1"
+              title="vCPUs"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.vcpus.$errors" />
+          </div>
 
-        <Slider
-          v-model="v$.vcpus.$model"
-          :marks="[1,2,4,8,12,16,24,32]"
-          :max="32"
-          :min="1"
-          title="vCPUs"
-          tooltip="always"
-        />
+          <div>
+            <Slider
+              v-model="v$.ram.$model"
+              :disabled="busy"
+              :formatter="size => `${size} GiB`"
+              :marks="[2,4,8,12,16,24,32]"
+              :max="32"
+              :min="2"
+              title="RAM (GiB)"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.ram.$errors" />
+          </div>
 
-        <Slider
-          v-model="v$.ram.$model"
-          :formatter="size => `${size} GiB`"
-          :marks="[2,4,8,12,16,24,32]"
-          :max="32"
-          :min="2"
-          title="RAM (GiB)"
-          tooltip="always"
-        />
+          <div>
+            <Slider
+              v-model="v$.disk.$model"
+              :disabled="busy"
+              :formatter="size => `${size} GiB`"
+              :marks="[10,20,50,100,200]"
+              :max="200"
+              :min="10"
+              title="Disk (GiB)"
+              tooltip="always"
+            />
+            <ValidationError :errors="v$.disk.$errors" />
+          </div>
+        </div>
+      </div>
+
+      <div class="box">
+        <!-- Name -->
+        <div class="flex flex-col pb-2 space-y-6">
+          <div class="input-group">
+            <label class="label">Name</label>
+            <input
+              v-model="v$.name.$model"
+              :disabled="busy"
+              :class="busy ? 'disabled' : ''"
+              class="input input--floating"
+              placeholder="Name of your server e.g. My Edge GPU"
+              required
+              type="text"
+            />
+            <ValidationError :errors="v$.name.$errors" />
+          </div>
+        </div>
+      </div>
+
+      <div class="box">
+        <Password :disableControls="busy" @password-changed="setPassword" />
+        <ValidationError :errors="v$.password.$errors" />
+      </div>
 
-        <Slider
-          v-model="v$.disk.$model"
-          :formatter="size => `${size} GiB`"
-          :marks="[10,20,50,100,200]"
-          :max="200"
-          :min="10"
-          title="Disk (GiB)"
-          tooltip="always"
-        />
+      <div class="flex flex-col w-full space-y-2">
+        <button
+          :disabled="!canDeploy"
+          class="button button--success self-end w-full md:max-w-xs"
+          type="submit"
+        >
+          <span v-if="busy" class="flex">
+            <span>Deploying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </span>
+          <span v-else>Deploy</span>
+        </button>
       </div>
-    </div>
+    </form>
   </div>
 </template>

From ebbf3302d7e93aa20cb22d99b0073f201e28d900 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 10:30:43 +0000
Subject: [PATCH 05/32] feat: begin to integrate gpu endpoints

---
 src/modules/gpu/components/GPUSelect.vue | 70 ++++++++++++-----
 src/modules/gpu/views/GPUDeploy.vue      | 99 +++++++++++++++++-------
 src/modules/gpu/views/GPUDetail.vue      | 69 +++++++++++++++++
 src/router/index.js                      |  5 ++
 4 files changed, 199 insertions(+), 44 deletions(-)
 create mode 100644 src/modules/gpu/views/GPUDetail.vue

diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
index be536cf9..0975d722 100644
--- a/src/modules/gpu/components/GPUSelect.vue
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -1,28 +1,62 @@
 <script setup>
+/* global process */
+
+import superagent from 'superagent'
+import { useStore } from 'vuex'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
-import { defineModel, defineProps } from 'vue'
+import { defineModel, defineProps, effect, ref } from 'vue'
 
 const model = defineModel()
+const store = useStore()
+
 defineProps({
   disabled: Boolean
 })
 
-const gpus = [
-  {
-    _key: 'a100',
-    cudoId: 'nvidia-a100-pcie',
-    vendorName: 'nvidia',
-    modelName: 'A100 PCI-E',
-    memoryGib: 80
-  },
-  {
-    _key: 'h100',
-    cudoId: 'nvidia-h100-nvl-pcie',
-    vendorName: 'nvidia',
-    modelName: 'H100 NVL PCI-E',
-    memoryGib: 96
+const error = ref()
+const gpus = ref([])
+const loading = ref(true)
+
+async function reload() {
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/gpu-models`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    gpus.value = res.body
   }
-]
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+
+// const gpus = [
+//   {
+//     _key: 'a100',
+//     cudoId: 'nvidia-a100-pcie',
+//     vendorName: 'nvidia',
+//     modelName: 'A100 PCI-E',
+//     memoryGib: 80
+//   },
+//   {
+//     _key: 'h100',
+//     cudoId: 'nvidia-h100-nvl-pcie',
+//     vendorName: 'nvidia',
+//     modelName: 'H100 NVL PCI-E',
+//     memoryGib: 96
+//   }
+// ]
 </script>
 
 <template>
@@ -35,8 +69,8 @@ const gpus = [
         v-slot="{ active, checked, disabled }"
         as="template"
         :disabled="disabled"
-        :key="gpu._key"
-        :value="gpu._key"
+        :key="gpu.id"
+        :value="gpu.id"
       >
         <div
           :class="{ active, checked, disabled }"
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index db4a70d8..88dcbd0f 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,51 +1,83 @@
 <script setup>
+/* global process */
+
 import GPUSelect from '../components/GPUSelect.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import Password from '../../../components/server/deploy/Password.vue'
 import Slider from '../../../layout/Slider.vue'
 import ValidationError from '../../../components/ValidationError.vue'
+import { serverNameChars } from '../../../utils/validation'
+import superagent from 'superagent'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
 import { computed, reactive, ref } from 'vue'
 import { maxValue, minLength, minValue, required } from '@vuelidate/validators'
 
+const router = useRouter()
+const store = useStore()
+
 const formState = reactive({
-  gpu: '',
-  disk: 10,
-  gpus: 1,
-  ram: 2,
-  vcpus: 1,
   name: '',
+  hostname: '',
+  gpuModel: '',
+  gpuCount: 1,
+  cpuCount: 1,
+  memoryGiB: 2,
+  diskGiB: 10,
   password: ''
 })
 
 const v$ = useVuelidate({
-  gpu: [required],
-  disk: [minValue(10), maxValue(200)],
-  gpus: [minValue(1), maxValue(8)],
-  ram: [minValue(2), maxValue(32)],
-  vcpus: [minValue(1), maxValue(32)],
   name: [required, minLength(3)],
+  hostname: [required, minLength(3), serverNameChars],
+  gpuModel: [required],
+  gpuCount: [minValue(1), maxValue(8)],
+  cpuCount: [minValue(1), maxValue(32)],
+  memoryGiB: [minValue(2), maxValue(32)],
+  diskGiB: [minValue(10), maxValue(200)],
   password: [required, minLength(8)]
 }, formState)
 
 const busy = ref(false)
 const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
+const error = ref()
+
 
 function setPassword(value) {
   v$.value.password.$model = value
 }
 
 async function submit() {
+  if (!store.state.session || !store.state.session._key) return
+
   const data = {
-    gpu: v$.value.gpu.$model,
-    disk: v$.value.disk.$model,
-    gpus: v$.value.gpus.$model,
-    ram: v$.value.ram.$model,
-    vcpus: v$.value.vcpus.$model,
     name: v$.value.name.$model,
+    hostname: v$.value.hostname.$model,
+    gpuModel: v$.value.gpuModel.$model,
+    gpuCount: v$.value.gpuCount.$model,
+    cpuCount: v$.value.cpuCount.$model,
+    memoryGiB: v$.value.memoryGiB.$model,
+    diskGiB: v$.value.diskGiB.$model,
     password: v$.value.password.$model
   }
-  console.log(data)
+
+  try {
+    busy.value = true
+    error.value = undefined
+
+    const res = await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+      .send(data)
+
+    router.push({ name: 'GPU', params: { id: res.id } })
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
 }
 </script>
 
@@ -56,8 +88,8 @@ async function submit() {
     <form class="flex flex-col col-span-12 pb-20 space-y-4" @submit.prevent="submit">
       <div class="box">
         <h4>Select GPU</h4>
-        <GPUSelect v-model="v$.gpu.$model" />
-        <ValidationError :errors="v$.gpu.$errors" />
+        <GPUSelect v-model="v$.gpuModel.$model" />
+        <ValidationError :errors="v$.gpuModel.$errors" />
       </div>
 
       <div class="box">
@@ -65,7 +97,7 @@ async function submit() {
         <div class="grid grid-cols-2 gap-4">
           <div>
             <Slider
-              v-model="v$.gpus.$model"
+              v-model="v$.gpuCount.$model"
               :disabled="busy"
               :marks="[1,2,4,8]"
               :max="8"
@@ -73,12 +105,12 @@ async function submit() {
               title="GPUs"
               tooltip="always"
             />
-            <ValidationError :errors="v$.gpus.$errors" />
+            <ValidationError :errors="v$.gpuCount.$errors" />
           </div>
 
           <div>
             <Slider
-              v-model="v$.vcpus.$model"
+              v-model="v$.cpuCount.$model"
               :disabled="busy"
               :marks="[1,2,4,8,12,16,24,32]"
               :max="32"
@@ -86,12 +118,12 @@ async function submit() {
               title="vCPUs"
               tooltip="always"
             />
-            <ValidationError :errors="v$.vcpus.$errors" />
+            <ValidationError :errors="v$.cpuCount.$errors" />
           </div>
 
           <div>
             <Slider
-              v-model="v$.ram.$model"
+              v-model="v$.memoryGiB.$model"
               :disabled="busy"
               :formatter="size => `${size} GiB`"
               :marks="[2,4,8,12,16,24,32]"
@@ -100,12 +132,12 @@ async function submit() {
               title="RAM (GiB)"
               tooltip="always"
             />
-            <ValidationError :errors="v$.ram.$errors" />
+            <ValidationError :errors="v$.memoryGiB.$errors" />
           </div>
 
           <div>
             <Slider
-              v-model="v$.disk.$model"
+              v-model="v$.diskGiB.$model"
               :disabled="busy"
               :formatter="size => `${size} GiB`"
               :marks="[10,20,50,100,200]"
@@ -114,7 +146,7 @@ async function submit() {
               title="Disk (GiB)"
               tooltip="always"
             />
-            <ValidationError :errors="v$.disk.$errors" />
+            <ValidationError :errors="v$.diskGiB.$errors" />
           </div>
         </div>
       </div>
@@ -135,6 +167,21 @@ async function submit() {
             />
             <ValidationError :errors="v$.name.$errors" />
           </div>
+
+          <!-- Hostname -->
+          <div class="input-group">
+            <label class="label">Hostname</label>
+            <input
+              v-model="v$.hostname.$model"
+              :disabled="busy"
+              :class="busy ? 'disabled' : ''"
+              class="input input--floating"
+              placeholder="Hostname of your server e.g. my-gpu.example.com"
+              required
+              type="text"
+            />
+            <ValidationError :errors="v$.hostname.$errors" />
+          </div>
         </div>
       </div>
 
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
new file mode 100644
index 00000000..173dd51e
--- /dev/null
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -0,0 +1,69 @@
+<script setup>
+/* global process */
+
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import superagent from 'superagent'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
+
+const route = useRoute()
+const store = useStore()
+
+const error = ref()
+const gpu = ref()
+const loading = ref(true)
+
+async function reload() {
+  if (!route.params.id || !store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    console.log(res)
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div class="mainContent__inner">
+    <div class="flex flex-col sm:flex-row justify-between">
+      <h1>Edge GPU</h1>
+    </div>
+
+    <div v-if="loading" class="flex items-center">
+      <span>Loading GPU</span>
+      <div class="ml-2"><LoadingSpinner /></div>
+    </div>
+
+    <div v-else-if="gpu" class="box">
+      {{ gpu.name }}
+    </div>
+
+    <div v-else class="box">
+      <div class="flex flex-col space-y-4 items-center justify-center py-4">
+        <p>Not found</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .gpuList {
+    @apply space-y-2;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index d8aa012c..f3f6e65b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -148,6 +148,11 @@ const routes = [
         name: 'Deploy GPU',
         component: () => import('../modules/gpu/views/GPUDeploy.vue')
       },
+      {
+        path: 'gpu/:id',
+        name: 'GPU',
+        component: () => import('../modules/gpu/views/GPUDetail.vue')
+      },
       {
         path: 'notifications',
         name: 'Notifications',

From 96a454583e07bab321ed9f809f32bbe97b363db7 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 12:10:57 +0000
Subject: [PATCH 06/32] feat: integrate gpu list view

---
 src/modules/gpu/views/GPUList.vue | 117 ++++++++++++++++++++++++------
 1 file changed, 93 insertions(+), 24 deletions(-)

diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 73f8e9dd..79d5ab64 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -1,23 +1,55 @@
 <script setup>
-import ListSortingMenu from '../../../components/ListSortingMenu.vue'
+/* global process */
+
+// import ListSortingMenu from '../../../components/ListSortingMenu.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import Pagination from '../../../components/Pagination.vue'
+import StatusDot from '../../../components/StatusDot.vue'
+import superagent from 'superagent'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
 
-const gpus = []
+const router = useRouter()
+const store = useStore()
 
 const currentPage = 1
+const error = ref()
+const gpus = ref([])
 const limit = 20
-const loaded = true
+const loading = ref(true)
 const totalCount = 0
 
-const sortFields = [
-  { label: 'Name', param: 'name' },
-  { label: 'Created', param: 'created' }
-]
+// const sortFields = [
+//   { label: 'Name', param: 'name' },
+//   { label: 'Created', param: 'created' }
+// ]
 
 function changePage(e) {
   console.log(e)
 }
+
+async function reload() {
+  try {
+    loading.value = true
+    error.value = undefined
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    gpus.value = res.body.vms
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
 </script>
 
 <template>
@@ -33,12 +65,13 @@ function changePage(e) {
       </router-link>
     </div>
 
-    <div v-if="!loaded" class="flex items-center">
-      <span>Loading servers</span>
+    <div v-if="loading" class="flex items-center">
+      <span>Loading GPUs</span>
       <div class="ml-2"><LoadingSpinner /></div>
     </div>
 
-    <ul v-else-if="gpus.length" role="list" class="gpuList">
+    <div v-else-if="gpus.length">
+      <!--
       <div class="float-right mb-2">
         <ListSortingMenu
           :fields="sortFields"
@@ -46,21 +79,63 @@ function changePage(e) {
           @update-sort="updateSortQuery"
         />
       </div>
-      <!--
-      <ServerListItem
-        v-for="gpu in gpus"
-        :key="gpu._key"
-        :regions=regions
-        :server=server
-      />
       -->
+      <ul role="list" class="space-y-2">
+        <li
+          v-for="gpu in gpus"
+          class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-t-8 border-gray-400 rounded-md w-full p-5 pr-8 cursor-pointer transition-all duration-100"
+          :class="{ 'border-green': gpu.status === 'active', 'border-red': gpu.status !== 'active' }"
+          :key="gpu.id"
+          @click="router.push({ name: 'GPU', params: { id: gpu.id }})"
+        >
+          <!-- Basic details -->
+          <div class="flex flex-col details overflow-hidden">
+            <!-- Name -->
+            <span class="text-md text-gray-500 truncate">{{ gpu.name }}</span>
+            <!-- IP address / hostname -->
+            <div class="flex flex-row space-x-1 text-m">
+              <span v-if="gpu.ipAddress">{{ gpu.ipAddress }}</span>
+              <span v-if="gpu.ipAddress" class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <div class="truncate" :data="gpu.hostname">{{ gpu.hostname }}</div>
+            </div>
+          </div>
+
+          <!-- Specs -->
+          <div class="flex flex-col lg:flex-shrink-0" style="flex-basis: 320px">
+            <!-- GPU model -->
+            <div class="text-md mr-2 sm:mr-0">
+              <span>{{ gpu.gpuModel }}</span>
+            </div>
+            <!-- specs -->
+            <div class="flex flex-col space-x-0 sm:flex-row sm:space-x-1.5 text-m">
+              <span>{{ gpu.cpuCount }} vCPU</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.diskGiB }} Disk</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
+              <span>{{ gpu.memoryGiB }} RAM</span>
+            </div>
+          </div>
+
+          <!-- Created -->
+          <div class="flex flex-col">
+            <span class="text-md mr-2 sm:mr-0">Created</span>
+            <span class="text-m">{{ gpu.created }}</span>
+          </div>
+
+          <!-- status dot -->
+          <div class="flex flex-col">
+            <span class="text-md mr-2 sm:mr-0">Status</span>
+            <StatusDot :isActive="gpu.status === 'active'" :isInactive="gpu.status !== 'active'" small :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'" />
+          </div>
+        </li>
+      </ul>
       <Pagination
         :currentPage="currentPage"
         :limit="limit"
         :totalCount="totalCount"
         @change-page="changePage"
       />
-    </ul>
+    </div>
 
     <div v-else class="box">
       <div class="flex flex-col space-y-4 items-center justify-center py-4">
@@ -75,9 +150,3 @@ function changePage(e) {
     </div>
   </div>
 </template>
-
-<style scoped>
-  .gpuList {
-    @apply space-y-2;
-  }
-</style>

From f38db8bb2b0ea8ab2c8e8dc5df96c57f2738e59c Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 12:29:00 +0000
Subject: [PATCH 07/32] feat: misc development

---
 src/modules/gpu/views/GPUDetail.vue | 192 +++++++++++++++++++++++++---
 src/modules/gpu/views/GPUList.vue   |   2 +
 2 files changed, 179 insertions(+), 15 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 173dd51e..b8dc818d 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -1,19 +1,35 @@
 <script setup>
 /* global process */
 
+import { ArrowLeftIcon } from '@heroicons/vue/solid'
+import EditableTitle from '../../../layout/EditableTitle.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import ValidationError from '../../../components/ValidationError.vue'
 import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
-import { effect, ref } from 'vue'
+import useVuelidate from '@vuelidate/core'
+import { effect, reactive, ref } from 'vue'
+import { minLength, required } from '@vuelidate/validators'
+import StatusDot from '../../../components/StatusDot.vue'
 
 const route = useRoute()
 const store = useStore()
 
+const busy = ref(false)
+const disabled = ref(false)
 const error = ref()
 const gpu = ref()
 const loading = ref(true)
 
+const formState = reactive({
+  name: ''
+})
+
+const v$ = useVuelidate({
+  name: [required, minLength(3)]
+}, formState)
+
 async function reload() {
   if (!route.params.id || !store.state.session || !store.state.session._key) return
 
@@ -24,7 +40,8 @@ async function reload() {
     const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
       .set('Authorization', `Bearer ${store.state.session._key}`)
 
-    console.log(res)
+    gpu.value = res.body
+    reset()
   }
   catch (err) {
     error.value = err
@@ -34,36 +51,181 @@ async function reload() {
   }
 }
 
+function reset() {
+  v$.value.name.$model = gpu.value.name
+}
+
+/** @todo */
+async function updateName() {
+  console.log(v$.value.name.$model)
+}
+
 effect(() => {
   reload()
 })
 </script>
 
 <template>
-  <div class="mainContent__inner">
-    <div class="flex flex-col sm:flex-row justify-between">
-      <h1>Edge GPU</h1>
+  <div v-if="loading" class="mainContent__inner pt-0 mt-6">
+    <div class="flex items-center">
+      <span>Loading GPU</span>
+      <LoadingSpinner />
     </div>
+  </div>
 
-    <div v-if="loading" class="flex items-center">
-      <span>Loading GPU</span>
-      <div class="ml-2"><LoadingSpinner /></div>
+  <div v-else-if="error">
+    <div class="box">
+      <div class="flex flex-col items-center justify-center text-center">
+        <div class="flex items-center mt-4">
+          <h4>Error</h4>
+        </div>
+        <p class="mt-3 mb-1 text-gray-500">{{ error.message }}</p>
+        <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
+          <span>Return to Edge GPUs</span>
+        </router-link>
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="gpu" class="mainContent__inner pt-0 mt-6">
+    <!-- Backlink -->
+    <div class="w-max">
+      <router-link :to="{ name: 'GPUs' }" class="flex items-center space-x-1 hover:text-green mb-4">
+        <ArrowLeftIcon class="w-4" /><span>GPUs</span>
+      </router-link>
     </div>
 
-    <div v-else-if="gpu" class="box">
-      {{ gpu.name }}
+    <!-- Name -->
+    <EditableTitle
+      v-model="v$.name.$model"
+      :busy="busy || loading"
+      :disabled="busy || disabled"
+      :invalid="v$.name.$invalid"
+      @save="updateName"
+    />
+    <ValidationError :errors="v$.name.$errors" />
+
+    <!-- IP address and hostname -->
+    <div
+      class="flex items-center mt-1 text-gray-500 truncate collapse sub-header"
+      :class="gpu.ipAddress ? 'space-x-2' : ''"
+    >
+      <span v-if="gpu.ipAddress">{{ gpu.ipAddress }}</span>
+      <span v-if="gpu.ipAddress" class="divider"/>
+      <span class="truncate">{{ gpu.hostname }}</span>
     </div>
 
-    <div v-else class="box">
-      <div class="flex flex-col space-y-4 items-center justify-center py-4">
-        <p>Not found</p>
+    <!-- Overview and power toggle -->
+    <div class="flex items-center mt-3 space-x-3 text-gray-500 md:justify-between sm:mt-4 collapse status-row">
+      <div class="relative flex-1">
+        <div class="flex items-center justify-start space-x-2 collapse gpu-info">
+          <div class="flex items-center flex-shrink-0 space-x-1 text-gray-900">
+            <span class="gpu-detail">{{ gpu.gpuModel }}</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-2 flex-shrink-0 specs">
+            <span class="gpu-detail">{{ gpu.gpuCount }} GPU</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.cpuCount }} vCPU</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.diskGiB }} Disk</span>
+            <span class="divider"/>
+            <span class="gpu-detail">{{ gpu.memoryGiB }} RAM</span>
+          </div>
+          <span class="divider"/>
+          <div class="flex items-center space-x-1">
+            <StatusDot
+              :isActive="gpu.status === 'active'"
+              :isInactive="gpu.status !== 'active'"
+              :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="flex-shrink-0" v-if="!isDestroyed && !isCrashed">
+        <ServerPowerToggle
+          :activeTasks=activeTasks
+          :disableActions=disableActions
+          :server=server
+        />
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="mainContent__inner pt-0 mt-6">
+    <div class="box">
+      <div class="flex flex-col items-center justify-center text-center">
+        <div class="flex items-center mt-4">
+          <h4>GPU not found</h4>
+        </div>
+        <p class="mt-3 mb-1 text-gray-500">This GPU does not exist or has been destroyed.</p>
+        <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
+          <span>Return to Edge GPUs</span>
+        </router-link>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-  .gpuList {
-    @apply space-y-2;
+.divider {
+  @apply h-4 bg-gray-400 w-px flex-shrink-0;
+}
+
+@media (max-width: 450px) {
+  .collapse.sub-header {
+    @apply flex-col space-x-0 items-start;
   }
+  .collapse .divider {
+    @apply hidden;
+  }
+  .collapse .specs {
+    @apply flex-col items-start space-x-0
+  }
+  .collapse .specs .divider {
+    @apply hidden;
+  }
+}
+
+@media (min-width: 450px) and (max-width: 650px) {
+  .collapse .specs .divider {
+    @apply block
+  }
+  .collapse.sub-header .divider {
+    @apply block
+  }
+}
+
+@media (max-width: 650px) {
+  .collapse.gpu-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse .sub-header {
+    @apply flex-col space-x-0 items-start;
+  }
+  .collapse .divider {
+    @apply hidden;
+  }
+}
+
+@screen md {
+  .collapse.gpu-info {
+    @apply flex-col items-start space-x-0 space-y-1;
+  }
+  .collapse.gpu-info .divider {
+    @apply hidden;
+  }
+  .collapse .specs .divider {
+    @apply block
+  }
+}
+
+@screen lg {
+  .collapse.gpu-info {
+    @apply flex-row items-center space-x-2 space-y-0;
+  }
+  .collapse.gpu-info .divider {
+    @apply block;
+  }
+}
 </style>
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 79d5ab64..88f39664 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -108,6 +108,8 @@ effect(() => {
             </div>
             <!-- specs -->
             <div class="flex flex-col space-x-0 sm:flex-row sm:space-x-1.5 text-m">
+              <span>{{ gpu.gpuCount }} GPU</span>
+              <span class="h-full bg-gray-400 block" style="width: 1px"></span>
               <span>{{ gpu.cpuCount }} vCPU</span>
               <span class="h-full bg-gray-400 block" style="width: 1px"></span>
               <span>{{ gpu.diskGiB }} Disk</span>

From 3000fa62c08aea9cacc67a08d9bde8b3120c9099 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 14:29:54 +0000
Subject: [PATCH 08/32] feat: add gpu overview

---
 src/layout/PowerToggle.vue          |  46 +++++++
 src/modules/gpu/views/GPUDetail.vue | 202 ++++++++++++++++++++++++++--
 2 files changed, 238 insertions(+), 10 deletions(-)
 create mode 100644 src/layout/PowerToggle.vue

diff --git a/src/layout/PowerToggle.vue b/src/layout/PowerToggle.vue
new file mode 100644
index 00000000..427d4cd4
--- /dev/null
+++ b/src/layout/PowerToggle.vue
@@ -0,0 +1,46 @@
+<script setup>
+import LoadingSpinner from '../components/icons/LoadingSpinner.vue'
+import { Switch } from '@headlessui/vue'
+import { defineEmits, defineModel, defineProps } from 'vue'
+
+const emit = defineEmits(['click'])
+
+/** v-model must be a Boolean ref! */
+const model = defineModel()
+
+defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  offText: String,
+  on: Boolean,
+  onText: String
+})
+</script>
+
+<template>
+  <Switch
+    v-model="model"
+    class="relative inline-flex flex-shrink-0 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-16 md:w-20 h-7 md:h-8 focus:outline-none"
+    :class="model ? 'bg-green' : 'bg-gray-300'"
+    :disabled="busy || disabled"
+    @click="emit('click', !model)"
+  >
+    <span class="sr-only">Status</span>
+
+    <span v-if="model" class="absolute w-full h-full flex items-center text-xs leading-none justify-start text-white pl-3 md:pl-4">
+      <span v-if="busy">
+        <LoadingSpinner />
+      </span>
+      <span v-else>{{ onText || 'ON' }}</span>
+    </span>
+    <span v-else class="absolute w-full h-full flex items-center text-xs leading-none justify-end text-gray-500 pr-2.5 md:pr-3.5">
+      <span v-if="busy">
+        <LoadingSpinner />
+      </span>
+      <span v-else>{{ offText || 'OFF' }}</span>
+    </span>
+
+    <span v-if="model" aria-hidden class="translate-x-9 md:translate-x-12 transform inline-block w-6 h-6 md:w-7 md:h-7 transition duration-200 ease-in-out bg-white rounded-full shadow-lg pointer-events-none ring-0"/>
+    <span v-else aria-hidden class="translate-x-0 transform inline-block w-6 h-6 md:w-7 md:h-7 transition duration-200 ease-in-out bg-white rounded-full shadow-lg pointer-events-none ring-0"/>
+  </Switch>
+</template>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index b8dc818d..4ac87b91 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -1,17 +1,19 @@
 <script setup>
 /* global process */
 
-import { ArrowLeftIcon } from '@heroicons/vue/solid'
 import EditableTitle from '../../../layout/EditableTitle.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import PowerToggle from '../../../layout/PowerToggle.vue'
+import StatusDot from '../../../components/StatusDot.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
+import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/solid'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { effect, reactive, ref } from 'vue'
 import { minLength, required } from '@vuelidate/validators'
-import StatusDot from '../../../components/StatusDot.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -23,11 +25,13 @@ const gpu = ref()
 const loading = ref(true)
 
 const formState = reactive({
-  name: ''
+  name: '',
+  active: true
 })
 
 const v$ = useVuelidate({
-  name: [required, minLength(3)]
+  name: [required, minLength(3)],
+  active: []
 }, formState)
 
 async function reload() {
@@ -53,6 +57,17 @@ async function reload() {
 
 function reset() {
   v$.value.name.$model = gpu.value.name
+  v$.value.active.$model = gpu.value.status === 'active'
+
+  v$.value.$reset()
+}
+
+async function togglePower(toActive) {
+  console.log(toActive)
+  busy.value = true
+  setTimeout(() => {
+    busy.value = false
+  }, 5000)
 }
 
 /** @todo */
@@ -142,14 +157,103 @@ effect(() => {
           </div>
         </div>
       </div>
-      <div class="flex-shrink-0" v-if="!isDestroyed && !isCrashed">
-        <ServerPowerToggle
-          :activeTasks=activeTasks
-          :disableActions=disableActions
-          :server=server
-        />
+
+      <div class="flex-shrink-0">
+        <PowerToggle v-model="v$.active.$model" :busy="busy" @click="togglePower" />
       </div>
     </div>
+
+    <div class="mt-4 space-x-10">
+      <!-- Tabs -->
+      <TabGroup as="div" class="tabGroup">
+        <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+        <TabList class="tabs pr-6">
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
+          </Tab>
+        </TabList>
+
+        <TabPanels class="mt-4">
+          <!-- Overview -->
+          <TabPanel>
+            <div class="grid gap-4 xl:grid-cols-2">
+              <div class="box overflow_hidden server__details xl:col-span-2">
+                <h4 class="section__title">Details</h4>
+                <div class="overview__grid">
+                  <!-- Name, hostname, IP address -->
+                  <div class="grid__col col__1">
+                    <div class="info__section">
+                      <span class="label">Name</span><span class="info">{{ gpu.name }}</span>
+                    </div>
+                    <div class="info__section">
+                      <span class="label">Hostname</span><span class="info">{{ gpu.hostname }}</span>
+                    </div>
+                    <div class="info__section">
+                      <span class="label">IP Address</span>
+                      <div class="relative flex w-max">
+                        <span>{{ gpu.ipAddress }}</span>
+                        <!--
+                        <button
+                          @click.prevent="copyToClipboard(gpu.ipAddress)"
+                          class="text-gray-400 hover:text-green"
+                        >
+                          <DuplicateIcon class="ml-2 w-5 h-5" />
+                        </button>
+                        <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
+                        -->
+                      </div>
+                    </div>
+                  </div>
+                  <div class="grid__col col__2">
+                    <div class="info__section">
+                      <span class="label">Status</span>
+                      <span class="info">
+                        <StatusDot
+                          :isActive="gpu.status === 'active'"
+                          :isInactive="gpu.status !== 'active'"
+                          :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+                        />
+                      </span>
+                    </div>
+                    <div class="info__section">
+                      <span class="label">Created</span>
+                      <span class="info">{{ gpu.created }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="box overflow_hidden server__specs">
+                <h4 class="section__title">GPU specs</h4>
+                <!-- vcpus, ram, disk, bandwidth -->
+                <div class="overview__grid">
+                  <div class="info__section col-span-2 lg:col-span-4">
+                    <span class="label">GPU Model</span>
+                    <span class="info">{{ gpu.gpuModel }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">GPU</span>
+                    <span class="info">{{ gpu.gpuCount }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">vCPUs</span>
+                    <span class="info">{{ gpu.cpuCount }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">RAM</span>
+                    <span class="info">{{ gpu.memoryGiB }}</span>
+                  </div>
+                  <div class="info__section">
+                    <span class="label">Disk</span>
+                    <span class="info">{{ gpu.diskGiB }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
   </div>
 
   <div v-else class="mainContent__inner pt-0 mt-6">
@@ -228,4 +332,82 @@ effect(() => {
     @apply block;
   }
 }
+
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.server__details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .server__details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .server__details .info__section {
+    @apply flex-row;
+  }
+
+  .server__specs .overview__grid, .server__costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .server__specs .label, .server__costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .server__specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .server__specs .label {
+    @apply w-max;
+  }
+  .server__costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .server__details .overview__grid {
+    @apply grid-cols-2
+  }
+  .server__specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .server__specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
 </style>

From 3ef9b282163ab8fa3b5c0a075b0367a615aee014 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:06:51 +0000
Subject: [PATCH 09/32] feat: working power toggle, misc fixes

---
 src/modules/gpu/views/GPUDeploy.vue |  3 +-
 src/modules/gpu/views/GPUDetail.vue | 50 ++++++++++++++++++++++++++---
 src/modules/gpu/views/GPUList.vue   |  4 +--
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 88dcbd0f..d822d117 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -43,7 +43,6 @@ const busy = ref(false)
 const canDeploy = computed(() => v$.value.$anyDirty && !v$.value.$invalid)
 const error = ref()
 
-
 function setPassword(value) {
   v$.value.password.$model = value
 }
@@ -70,7 +69,7 @@ async function submit() {
       .set('Authorization', `Bearer ${store.state.session._key}`)
       .send(data)
 
-    router.push({ name: 'GPU', params: { id: res.id } })
+    router.push({ name: 'GPU', params: { id: res.body.id } })
   }
   catch (err) {
     error.value = err
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 4ac87b91..991b2429 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -23,6 +23,7 @@ const disabled = ref(false)
 const error = ref()
 const gpu = ref()
 const loading = ref(true)
+const poll = ref()
 
 const formState = reactive({
   name: '',
@@ -62,12 +63,49 @@ function reset() {
   v$.value.$reset()
 }
 
+function stopPoll() {
+  if (poll.value) {
+    clearInterval(poll.value)
+    poll.value = undefined
+  }
+}
+
+function startPoll(cb) {
+  if (poll.value) return
+  poll.value = setInterval(() => {
+    reload().then(() => {
+      cb?.()
+    })
+  }, 5000)
+}
+
 async function togglePower(toActive) {
-  console.log(toActive)
-  busy.value = true
-  setTimeout(() => {
+  if (!gpu.value) return
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    busy.value = true
+
+    if (toActive) {
+      await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/start/${gpu.value.id}`)
+        .set('Authorization', `Bearer ${store.state.session._key}`)
+    }
+    else {
+      await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/stop/${gpu.value.id}`)
+        .set('Authorization', `Bearer ${store.state.session._key}`)
+    }
+
+    startPoll(() => {
+      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
+        stopPoll()
+        busy.value = false
+      }
+    })
+  }
+  catch (err) {
+    error.value = err
     busy.value = false
-  }, 5000)
+  }
 }
 
 /** @todo */
@@ -77,6 +115,10 @@ async function updateName() {
 
 effect(() => {
   reload()
+
+  return () => {
+    stopPoll()
+  }
 })
 </script>
 
diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 88f39664..15299698 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -58,10 +58,10 @@ effect(() => {
       <h1>Edge GPUs</h1>
       <router-link
         v-if="gpus.length"
-        :to="{ name: 'ServerDeploy' }"
+        :to="{ name: 'Deploy GPU' }"
         class="button button--success button--small h-full mb-5 sm:mb-0"
       >
-        Deploy Server
+        Deploy GPU
       </router-link>
     </div>
 

From be39e28ce21a92724666261414205053d9e2e315 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:38:17 +0000
Subject: [PATCH 10/32] feat: more polling fixes, add ip address copy

---
 src/modules/gpu/views/GPUDetail.vue | 40 ++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 991b2429..278e035d 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -10,7 +10,7 @@ import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
-import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/solid'
+import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/outline'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { effect, reactive, ref } from 'vue'
 import { minLength, required } from '@vuelidate/validators'
@@ -19,6 +19,7 @@ const route = useRoute()
 const store = useStore()
 
 const busy = ref(false)
+const copied = ref(false)
 const disabled = ref(false)
 const error = ref()
 const gpu = ref()
@@ -35,6 +36,15 @@ const v$ = useVuelidate({
   active: []
 }, formState)
 
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+
 async function reload() {
   if (!route.params.id || !store.state.session || !store.state.session._key) return
 
@@ -67,14 +77,20 @@ function stopPoll() {
   if (poll.value) {
     clearInterval(poll.value)
     poll.value = undefined
+    busy.value = false
   }
 }
 
-function startPoll(cb) {
+function startPoll() {
   if (poll.value) return
+  busy.value = true
+
   poll.value = setInterval(() => {
     reload().then(() => {
-      cb?.()
+      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
+        stopPoll()
+        busy.value = false
+      }
     })
   }, 5000)
 }
@@ -84,8 +100,6 @@ async function togglePower(toActive) {
   if (!store.state.session || !store.state.session._key) return
 
   try {
-    busy.value = true
-
     if (toActive) {
       await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/start/${gpu.value.id}`)
         .set('Authorization', `Bearer ${store.state.session._key}`)
@@ -95,16 +109,10 @@ async function togglePower(toActive) {
         .set('Authorization', `Bearer ${store.state.session._key}`)
     }
 
-    startPoll(() => {
-      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
-        stopPoll()
-        busy.value = false
-      }
-    })
+    startPoll()
   }
   catch (err) {
     error.value = err
-    busy.value = false
   }
 }
 
@@ -114,7 +122,11 @@ async function updateName() {
 }
 
 effect(() => {
-  reload()
+  reload().then(() => {
+    if (gpu.value.status !== 'active' && gpu.value.status !== 'stopped') {
+      startPoll()
+    }
+  })
 
   return () => {
     stopPoll()
@@ -234,7 +246,6 @@ effect(() => {
                       <span class="label">IP Address</span>
                       <div class="relative flex w-max">
                         <span>{{ gpu.ipAddress }}</span>
-                        <!--
                         <button
                           @click.prevent="copyToClipboard(gpu.ipAddress)"
                           class="text-gray-400 hover:text-green"
@@ -242,7 +253,6 @@ effect(() => {
                           <DuplicateIcon class="ml-2 w-5 h-5" />
                         </button>
                         <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
-                        -->
                       </div>
                     </div>
                   </div>

From 70afe71fc595f9f6061b0815d2eea39763bda08e Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:40:31 +0000
Subject: [PATCH 11/32] fix: gpu list design

---
 src/modules/gpu/views/GPUList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 15299698..11b10c9f 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -83,7 +83,7 @@ effect(() => {
       <ul role="list" class="space-y-2">
         <li
           v-for="gpu in gpus"
-          class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-t-8 border-gray-400 rounded-md w-full p-5 pr-8 cursor-pointer transition-all duration-100"
+          class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-l-8 border-gray-400 rounded-md w-full p-5 pr-8 cursor-pointer transition-all duration-100"
           :class="{ 'border-green': gpu.status === 'active', 'border-red': gpu.status !== 'active' }"
           :key="gpu.id"
           @click="router.push({ name: 'GPU', params: { id: gpu.id }})"

From 4d24187b9ac136fc5120d8bebe265fd9093b74e9 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:46:53 +0000
Subject: [PATCH 12/32] fix: flickering while polling; name change validation

---
 src/modules/gpu/views/GPUDetail.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 278e035d..c862c663 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -13,7 +13,7 @@ import useVuelidate from '@vuelidate/core'
 import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/outline'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { effect, reactive, ref } from 'vue'
-import { minLength, required } from '@vuelidate/validators'
+import { helpers, minLength, required } from '@vuelidate/validators'
 
 const route = useRoute()
 const store = useStore()
@@ -32,7 +32,7 @@ const formState = reactive({
 })
 
 const v$ = useVuelidate({
-  name: [required, minLength(3)],
+  name: [required, minLength(3), helpers.withMessage('Currently unable to change GPU name. This feature is coming soon', () => false)],
   active: []
 }, formState)
 
@@ -135,7 +135,7 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="loading" class="mainContent__inner pt-0 mt-6">
+  <div v-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
     <div class="flex items-center">
       <span>Loading GPU</span>
       <LoadingSpinner />

From 1471e8015123ae0c56bc6597383d1b46d3347352 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 15:48:54 +0000
Subject: [PATCH 13/32] fix: clear validation error on name edit

---
 src/modules/gpu/views/GPUDetail.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index c862c663..ec2a8bc9 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -170,6 +170,7 @@ effect(() => {
       :busy="busy || loading"
       :disabled="busy || disabled"
       :invalid="v$.name.$invalid"
+      @cancel="v$.name.$reset()"
       @save="updateName"
     />
     <ValidationError :errors="v$.name.$errors" />

From 1a0e41ec9be9af470a2a107066d92f6ba48e5aab Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 24 Feb 2025 17:38:21 +0000
Subject: [PATCH 14/32] feat: implement destroy gpu flow

---
 .../gpu/components/GPUDestroyPanel.vue        |  77 ++++++++
 .../gpu/components/GPUOverviewPanel.vue       | 175 ++++++++++++++++++
 src/modules/gpu/views/GPUDetail.vue           | 151 +++++++--------
 3 files changed, 314 insertions(+), 89 deletions(-)
 create mode 100644 src/modules/gpu/components/GPUDestroyPanel.vue
 create mode 100644 src/modules/gpu/components/GPUOverviewPanel.vue

diff --git a/src/modules/gpu/components/GPUDestroyPanel.vue b/src/modules/gpu/components/GPUDestroyPanel.vue
new file mode 100644
index 00000000..f7761e51
--- /dev/null
+++ b/src/modules/gpu/components/GPUDestroyPanel.vue
@@ -0,0 +1,77 @@
+<script setup>
+// import HttpError from '../../../components/HttpError.vue'
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import Modal from '../../../components/Modal.vue'
+import { defineEmits, defineProps, ref } from 'vue'
+
+const emit = defineEmits(['destroy'])
+
+defineProps({
+  busy: Boolean,
+  disabled: Boolean,
+  gpu: Object
+})
+
+const showModal = ref(false)
+
+function toggleModal() {
+  showModal.value = !showModal.value
+}
+</script>
+
+<template>
+  <div class="pb-20">
+    <div class="box">
+      <h4>Destroy GPU</h4>
+      <p class="mt-3 mb-1 text-gray-500">This is irreversible. All data will be irretrievable.</p>
+      <p class="text-gray-500">Upon destruction, you will no longer be billed for this GPU.</p>
+      <div class="flex flex-col space-y-2">
+        <button
+          class="mt-4 button button--error button--small w-full md:max-w-xs"
+          :disabled="disabled"
+          @click.prevent="toggleModal"
+        >
+          <div v-if="busy" class="flex">
+            <span>Destroying</span>
+            <span class="ml-2"><LoadingSpinner /></span>
+          </div>
+          <span v-else>Destroy this GPU</span>
+        </button>
+
+        <!--<HttpError :error=httpError />-->
+      </div>
+    </div>
+    <!-- destroy confirmation modal -->
+    <Modal v-if="showModal">
+      <template v-slot:icon>
+        <ExclamationIcon class="w-8 h-8" aria-hidden="true" />
+      </template>
+      <template v-slot:header>
+        <span>Destroy {{ gpu.name }}</span>
+      </template>
+      <template v-slot:body>
+        <span class="font-semibold">Warning: this cannot be undone.</span>
+        <div class="flex flex-col space-y-2 pt-4">
+          <li>All data will be lost and cannot be recovered</li>
+          <li>Server will be powered off immediately</li>
+          <li>IP Address will be unassigned</li>
+        </div>
+      </template>
+      <template v-slot:buttons>
+        <button
+          class="w-full mt-3 button button--small button--outline sm:mt-0"
+          @click="toggleModal"
+        >
+          Cancel
+        </button>
+        <button
+          class="w-full button button--small button--error"
+          @click="emit('destroy')"
+        >
+          Yes, Destroy GPU
+        </button>
+      </template>
+    </Modal>
+  </div>
+</template>
diff --git a/src/modules/gpu/components/GPUOverviewPanel.vue b/src/modules/gpu/components/GPUOverviewPanel.vue
new file mode 100644
index 00000000..d776129b
--- /dev/null
+++ b/src/modules/gpu/components/GPUOverviewPanel.vue
@@ -0,0 +1,175 @@
+<script setup>
+import { DuplicateIcon } from '@heroicons/vue/outline'
+import StatusDot from '../../../components/StatusDot.vue'
+import { defineProps, ref } from 'vue'
+
+defineProps({
+  gpu: Object
+})
+
+const copied = ref(false)
+
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+</script>
+
+<template>
+  <div class="grid gap-4 xl:grid-cols-2">
+    <div class="box overflow_hidden gpu-details xl:col-span-2">
+      <h4 class="section__title">Details</h4>
+      <div class="overview__grid">
+        <!-- Name, hostname, IP address -->
+        <div class="grid__col col__1">
+          <div class="info__section">
+            <span class="label">Name</span><span class="info">{{ gpu.name }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">Hostname</span><span class="info">{{ gpu.hostname }}</span>
+          </div>
+          <div class="info__section">
+            <span class="label">IP Address</span>
+            <div class="relative flex w-max">
+              <span>{{ gpu.ipAddress }}</span>
+              <button
+                @click.prevent="copyToClipboard(gpu.ipAddress)"
+                class="text-gray-400 hover:text-green"
+              >
+                <DuplicateIcon class="ml-2 w-5 h-5" />
+              </button>
+              <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
+            </div>
+          </div>
+        </div>
+        <div class="grid__col col__2">
+          <div class="info__section">
+            <span class="label">Status</span>
+            <span class="info">
+              <StatusDot
+                :isActive="gpu.status === 'active'"
+                :isInactive="gpu.status !== 'active'"
+                :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
+              />
+            </span>
+          </div>
+          <div class="info__section">
+            <span class="label">Created</span>
+            <span class="info">{{ gpu.created }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="box overflow_hidden gpu-specs">
+      <h4 class="section__title">GPU specs</h4>
+      <!-- vcpus, ram, disk, bandwidth -->
+      <div class="overview__grid">
+        <div class="info__section col-span-2 lg:col-span-4">
+          <span class="label">GPU Model</span>
+          <span class="info">{{ gpu.gpuModel }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">GPU</span>
+          <span class="info">{{ gpu.gpuCount }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">vCPUs</span>
+          <span class="info">{{ gpu.cpuCount }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">RAM</span>
+          <span class="info">{{ gpu.memoryGiB }}</span>
+        </div>
+        <div class="info__section">
+          <span class="label">Disk</span>
+          <span class="info">{{ gpu.diskGiB }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.section__title {
+  @apply mb-4;
+}
+.overview__grid {
+  @apply grid grid-cols-1 gap-y-4;
+}
+.grid__col {
+  @apply flex flex-col space-y-4
+}
+.info__section {
+  @apply flex overflow-hidden w-full;
+}
+.label {
+  @apply font-bold block mr-2 flex-shrink-0 w-24;
+}
+.gpu-details .info__section {
+  @apply flex-col;
+}
+
+.info {
+  @apply flex-shrink-0 truncate w-full;
+}
+
+.copied {
+  @apply absolute pointer-events-none opacity-0 top-0 left-0 flex items-center justify-center w-full h-full font-medium bg-white bg-opacity-95 text-green;
+  @apply transition-opacity duration-200 ease-in;
+}
+.copied.visible {
+  @apply opacity-100;
+}
+
+@media (max-width: 450px) {
+  .gpu-details .info__section {
+    @apply flex-col;
+  }
+}
+
+@media (min-width: 450px) {
+  .gpu-details .info__section {
+    @apply flex-row;
+  }
+
+  .gpu-specs .overview__grid, .gpu-costs .overview__grid {
+    @apply grid-cols-2;
+  }
+  .gpu-specs .label, .gpu-costs .label {
+    @apply w-20;
+  }
+
+  /* .overview__grid {
+    @apply grid-cols-2
+  } */
+}
+@screen lg {
+  .gpu-specs .overview__grid {
+    @apply grid-cols-4;
+  }
+  .gpu-specs .label {
+    @apply w-max;
+  }
+  .gpu-costs .label {
+    @apply w-max;
+  }
+}
+@screen xl {
+  .gpu-details .overview__grid {
+    @apply grid-cols-2
+  }
+  .gpu-specs .overview__grid {
+    @apply grid-cols-2
+  }
+}
+@screen 2xl {
+  .gpu-specs .overview__grid {
+    grid-template-columns: repeat(3, 1fr) auto;
+  }
+}
+</style>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index ec2a8bc9..f56f6e0c 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -1,7 +1,10 @@
 <script setup>
 /* global process */
 
+import { ArrowLeftIcon } from '@heroicons/vue/outline'
 import EditableTitle from '../../../layout/EditableTitle.vue'
+import GPUDestroyPanel from '../components/GPUDestroyPanel.vue'
+import GPUOverviewPanel from '../components/GPUOverviewPanel.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import PowerToggle from '../../../layout/PowerToggle.vue'
 import StatusDot from '../../../components/StatusDot.vue'
@@ -10,22 +13,23 @@ import superagent from 'superagent'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
-import { ArrowLeftIcon, DuplicateIcon } from '@heroicons/vue/outline'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
-import { effect, reactive, ref } from 'vue'
+import { computed, effect, reactive, ref } from 'vue'
 import { helpers, minLength, required } from '@vuelidate/validators'
 
 const route = useRoute()
 const store = useStore()
 
 const busy = ref(false)
-const copied = ref(false)
+const destroying = ref(false)
 const disabled = ref(false)
 const error = ref()
 const gpu = ref()
 const loading = ref(true)
 const poll = ref()
 
+const destroyed = computed(() => gpu.value && gpu.value.status === 'deleted')
+
 const formState = reactive({
   name: '',
   active: true
@@ -36,13 +40,19 @@ const v$ = useVuelidate({
   active: []
 }, formState)
 
-async function copyToClipboard(str) {
-  await navigator.clipboard.writeText(str)
-  copied.value = true
+async function destroy() {
+  try {
+    destroying.value = true
+    error.value = undefined
+
+    await superagent.delete(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/${route.params.id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
 
-  setTimeout(() => {
-    copied.value = false
-  }, 1000)
+    startPoll(['deleted'])
+  }
+  catch (err) {
+    error.value = err
+  }
 }
 
 async function reload() {
@@ -59,7 +69,13 @@ async function reload() {
     reset()
   }
   catch (err) {
-    error.value = err
+    // Workaround for deletion
+    if (destroying.value && gpu.value && err.status === 404) {
+      gpu.value.status = 'deleted'
+    }
+    else {
+      error.value = err
+    }
   }
   finally {
     loading.value = false
@@ -81,13 +97,13 @@ function stopPoll() {
   }
 }
 
-function startPoll() {
+function startPoll(stopOnStatus) {
   if (poll.value) return
   busy.value = true
 
   poll.value = setInterval(() => {
     reload().then(() => {
-      if (gpu.value.status === 'active' || gpu.value.status === 'stopped') {
+      if (stopOnStatus.includes(gpu.value.status)) {
         stopPoll()
         busy.value = false
       }
@@ -109,7 +125,7 @@ async function togglePower(toActive) {
         .set('Authorization', `Bearer ${store.state.session._key}`)
     }
 
-    startPoll()
+    startPoll(['active', 'deleted', 'stopped'])
   }
   catch (err) {
     error.value = err
@@ -123,8 +139,8 @@ async function updateName() {
 
 effect(() => {
   reload().then(() => {
-    if (gpu.value.status !== 'active' && gpu.value.status !== 'stopped') {
-      startPoll()
+    if (!['active', 'deleted', 'stopped'].includes(gpu.value.status)) {
+      startPoll(['active', 'deleted', 'stopped'])
     }
   })
 
@@ -135,14 +151,34 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
+  <div v-if="destroying || destroyed" class="mainContent__inner pt-0 mt-6">
+    <div v-if="destroyed" class="box">
+      <h4>Destroy GPU</h4>
+      <p class="mt-3 mb-1 text-gray-500">Your GPU and backups have been successfully deleted.</p>
+      <router-link
+        class="button button--success button--small w-full md:max-w-xs"
+        :to="{ name: 'GPUs' }"
+      >
+      <span>Return to GPUs</span>
+      </router-link>
+    </div>
+    <div v-else class="box">
+      <h4>Destroy GPU</h4>
+      <div class="flex">
+        <span>Destroying {{ gpu && gpu.name }}</span>
+        <span class="ml-2"><LoadingSpinner /></span>
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
     <div class="flex items-center">
       <span>Loading GPU</span>
       <LoadingSpinner />
     </div>
   </div>
 
-  <div v-else-if="error">
+  <div v-else-if="error" class="mainContent__inner pt-0 mt-6">
     <div class="box">
       <div class="flex flex-col items-center justify-center text-center">
         <div class="flex items-center mt-4">
@@ -226,83 +262,20 @@ effect(() => {
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
           </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Destroy</button>
+          </Tab>
         </TabList>
 
         <TabPanels class="mt-4">
           <!-- Overview -->
           <TabPanel>
-            <div class="grid gap-4 xl:grid-cols-2">
-              <div class="box overflow_hidden server__details xl:col-span-2">
-                <h4 class="section__title">Details</h4>
-                <div class="overview__grid">
-                  <!-- Name, hostname, IP address -->
-                  <div class="grid__col col__1">
-                    <div class="info__section">
-                      <span class="label">Name</span><span class="info">{{ gpu.name }}</span>
-                    </div>
-                    <div class="info__section">
-                      <span class="label">Hostname</span><span class="info">{{ gpu.hostname }}</span>
-                    </div>
-                    <div class="info__section">
-                      <span class="label">IP Address</span>
-                      <div class="relative flex w-max">
-                        <span>{{ gpu.ipAddress }}</span>
-                        <button
-                          @click.prevent="copyToClipboard(gpu.ipAddress)"
-                          class="text-gray-400 hover:text-green"
-                        >
-                          <DuplicateIcon class="ml-2 w-5 h-5" />
-                        </button>
-                        <div class="copied" :class="copied ? 'visible' : ''">Copied!</div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="grid__col col__2">
-                    <div class="info__section">
-                      <span class="label">Status</span>
-                      <span class="info">
-                        <StatusDot
-                          :isActive="gpu.status === 'active'"
-                          :isInactive="gpu.status !== 'active'"
-                          :statusText="gpu.status === 'active' ? 'Active' : 'Inactive'"
-                        />
-                      </span>
-                    </div>
-                    <div class="info__section">
-                      <span class="label">Created</span>
-                      <span class="info">{{ gpu.created }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="box overflow_hidden server__specs">
-                <h4 class="section__title">GPU specs</h4>
-                <!-- vcpus, ram, disk, bandwidth -->
-                <div class="overview__grid">
-                  <div class="info__section col-span-2 lg:col-span-4">
-                    <span class="label">GPU Model</span>
-                    <span class="info">{{ gpu.gpuModel }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">GPU</span>
-                    <span class="info">{{ gpu.gpuCount }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">vCPUs</span>
-                    <span class="info">{{ gpu.cpuCount }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">RAM</span>
-                    <span class="info">{{ gpu.memoryGiB }}</span>
-                  </div>
-                  <div class="info__section">
-                    <span class="label">Disk</span>
-                    <span class="info">{{ gpu.diskGiB }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <GPUOverviewPanel :gpu="gpu" />
+          </TabPanel>
+
+          <!-- Destroy -->
+          <TabPanel>
+            <GPUDestroyPanel :gpu="gpu" @destroy="destroy" />
           </TabPanel>
         </TabPanels>
       </TabGroup>

From 35f53fe0ff93401a58a13e44ac3a24fce43d5c22 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 25 Feb 2025 12:22:37 +0000
Subject: [PATCH 15/32] feat: begin to add api key integration

---
 .../gpu/components/GPUAPIKeysPanel.vue        | 96 +++++++++++++++++++
 src/modules/gpu/views/GPUDetail.vue           |  9 ++
 2 files changed, 105 insertions(+)
 create mode 100644 src/modules/gpu/components/GPUAPIKeysPanel.vue

diff --git a/src/modules/gpu/components/GPUAPIKeysPanel.vue b/src/modules/gpu/components/GPUAPIKeysPanel.vue
new file mode 100644
index 00000000..1ff412af
--- /dev/null
+++ b/src/modules/gpu/components/GPUAPIKeysPanel.vue
@@ -0,0 +1,96 @@
+<script setup>
+/* global process */
+
+import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
+import superagent from 'superagent'
+import { useStore } from 'vuex'
+import { effect, ref } from 'vue'
+
+const store = useStore()
+
+const busy = ref(false)
+const error = ref()
+const generatedKey = ref()
+const loading = ref(true)
+const keys = ref([])
+
+async function generate() {
+  try {
+    busy.value = true
+
+    const res = await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    generatedKey.value = res.body
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+async function reload() {
+  if (!store.state.session || !store.state.session._key) return
+
+  try {
+    loading.value = true
+
+    const res = await superagent.get(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    keys.value = res.body
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+effect(() => {
+  reload()
+})
+</script>
+
+<template>
+  <div v-if="loading" class="pb-20">
+    <div class="box">
+      <h4>API Keys</h4>
+
+      <div class="flex">
+        <span class="mr-2">Loading</span>
+        <LoadingSpinner />
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="pb-20">
+    <div class="box">
+      <h4>API Keys</h4>
+
+      <div v-if="generatedKey">
+        <span>Your new API key:</span>
+        <span>{{ generatedKey.secret }}</span>
+      </div>
+
+      <ul>
+        <li v-for="key in keys" v-bind:key="key._key">
+          {{ key.id }}
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex flex-col w-full mt-4 space-y-2">
+      <button
+        :disabled="busy"
+        class="button button--success self-end w-full md:max-w-xs"
+        @click="generate"
+      >
+        Generate API Key
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index f56f6e0c..25189e4b 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -16,6 +16,7 @@ import useVuelidate from '@vuelidate/core'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { computed, effect, reactive, ref } from 'vue'
 import { helpers, minLength, required } from '@vuelidate/validators'
+import GPUAPIKeysPanel from '../components/GPUAPIKeysPanel.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -262,6 +263,9 @@ effect(() => {
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
           </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">API Keys</button>
+          </Tab>
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Destroy</button>
           </Tab>
@@ -273,6 +277,11 @@ effect(() => {
             <GPUOverviewPanel :gpu="gpu" />
           </TabPanel>
 
+          <!-- API keys -->
+          <TabPanel>
+            <GPUAPIKeysPanel :gpu="gpu" />
+          </TabPanel>
+
           <!-- Destroy -->
           <TabPanel>
             <GPUDestroyPanel :gpu="gpu" @destroy="destroy" />

From a4b7c297e8636bd7a4ba311dbf909635bf7da17f Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Mar 2025 11:05:43 +0000
Subject: [PATCH 16/32] feat: improve error handling in deploy, destroy

---
 src/layout/ErrorV2.vue              | 35 +++++++++++++++++++++++++++++
 src/modules/gpu/views/GPUDeploy.vue |  5 ++++-
 src/modules/gpu/views/GPUDetail.vue |  1 +
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/layout/ErrorV2.vue

diff --git a/src/layout/ErrorV2.vue b/src/layout/ErrorV2.vue
new file mode 100644
index 00000000..1bfebdcd
--- /dev/null
+++ b/src/layout/ErrorV2.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { ExclamationIcon } from '@heroicons/vue/outline'
+import { computed, defineProps } from 'vue'
+
+const props = defineProps({
+  error: Object
+})
+
+const message = computed(() => {
+  if (!props.error) return ''
+
+  if (props.error && props.error.response && props.error.response.body) {
+    const body = props.error.response.body
+    if (body.hint) return body.hint
+    if (body.reason) return body.reason
+    if (body.error) return body.error
+    if (body.message) return body.message
+  }
+
+  if (props.error.value && props.error.message) {
+    return props.error.message
+  }
+
+  return 'Unknown error'
+})
+</script>
+
+<template>
+  <div v-if="error" class="error_wrapper block errorMessage">
+    <div class="float-left">
+      <ExclamationIcon class="w-3.5 text-red" />
+    </div>
+    <span class="errorMessage__text text-red">{{ message }}</span>
+  </div>
+</template>
diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index d822d117..3573f5c0 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -1,6 +1,7 @@
 <script setup>
 /* global process */
 
+import ErrorV2 from '../../../layout/ErrorV2.vue'
 import GPUSelect from '../components/GPUSelect.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import Password from '../../../components/server/deploy/Password.vue'
@@ -189,7 +190,9 @@ async function submit() {
         <ValidationError :errors="v$.password.$errors" />
       </div>
 
-      <div class="flex flex-col w-full space-y-2">
+      <div class="flex flex-col w-full space-y-2 items-end">
+        <ErrorV2 :error="error" />
+
         <button
           :disabled="!canDeploy"
           class="button button--success self-end w-full md:max-w-xs"
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 25189e4b..915a14c0 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -53,6 +53,7 @@ async function destroy() {
   }
   catch (err) {
     error.value = err
+    destroying.value = false
   }
 }
 

From a74576287731125169dc48ef85bc3ed957acd167 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Mar 2025 14:54:24 +0000
Subject: [PATCH 17/32] feat: create tabulated settings view, replaces account

---
 src/components/UserMenu.vue                   |   2 +-
 src/components/billing/Invoices.vue           |   4 +-
 src/components/billing/PaymentCards.vue       |   2 +-
 src/components/billing/Wallet.vue             |   2 +-
 src/modules/gpu/views/GPUDetail.vue           |   9 --
 .../components/APIKeysPanel.vue}              |   0
 .../settings/components/AccountPanel.vue      |  77 ++++++++++
 .../components/CryptoPaymentsPanel.vue        |  32 ++++
 src/modules/settings/views/SettingsView.vue   |  48 ++++++
 src/router/index.js                           |  11 +-
 src/views/dashboard/Account.vue               | 144 ------------------
 11 files changed, 167 insertions(+), 164 deletions(-)
 rename src/modules/{gpu/components/GPUAPIKeysPanel.vue => settings/components/APIKeysPanel.vue} (100%)
 create mode 100644 src/modules/settings/components/AccountPanel.vue
 create mode 100644 src/modules/settings/components/CryptoPaymentsPanel.vue
 create mode 100644 src/modules/settings/views/SettingsView.vue
 delete mode 100644 src/views/dashboard/Account.vue

diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index 957885b3..c76028cc 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -28,7 +28,7 @@
         </MenuItem>
         <MenuItem v-slot="{ active }">
           <button
-            @click.prevent="navigate('/account')"
+            @click.prevent="navigate({ name: 'Settings' })"
             :class="[
               'menu__item',
               active ? 'active' : ''
diff --git a/src/components/billing/Invoices.vue b/src/components/billing/Invoices.vue
index 42687553..44923059 100644
--- a/src/components/billing/Invoices.vue
+++ b/src/components/billing/Invoices.vue
@@ -43,11 +43,11 @@ const isCryptoView = Boolean(store.state.account?.useCryptoView)
               If you add an email address to your account, you will receive an email notification when a new invoice is generated and whenever your account status changes.
               You can also use your email address to log in to your Edge Account, keeping your account number secure.
               <span v-if="!accountEmail">
-                <RouterLink :to="{ name: 'Account' }" class="text-green">Add an email address</RouterLink>.
+                <RouterLink :to="{ name: 'Settings' }" class="text-green">Add an email address</RouterLink>.
               </span>
               <span v-else>
                 Your email address is <span class="text-green">{{ accountEmail }}</span>.
-                You can <RouterLink :to="{ name: 'Account' }" class="text-green">change your email address</RouterLink> if you need to.
+                You can <RouterLink :to="{ name: 'Settings' }" class="text-green">change your email address</RouterLink> if you need to.
               </span>
             </p>
             <p>
diff --git a/src/components/billing/PaymentCards.vue b/src/components/billing/PaymentCards.vue
index 0363789d..dc55ef3b 100644
--- a/src/components/billing/PaymentCards.vue
+++ b/src/components/billing/PaymentCards.vue
@@ -101,7 +101,7 @@
                 <RouterLink :to="{ name: 'Wallet' }" class="text-green">View your wallet</RouterLink> to start funding your account manually.
               </p>
               <p v-else>
-                <RouterLink :to="{ name: 'Account' }" class="text-green">Enable Crypto View</RouterLink> to start funding your account manually.
+                <RouterLink :to="{ name: 'Settings' }" class="text-green">Enable Crypto View</RouterLink> to start funding your account manually.
               </p>
             </section>
           </article>
diff --git a/src/components/billing/Wallet.vue b/src/components/billing/Wallet.vue
index 6a1ec4c6..fc43eb09 100644
--- a/src/components/billing/Wallet.vue
+++ b/src/components/billing/Wallet.vue
@@ -108,7 +108,7 @@ async function startPurchase() {
                 You're currently using the crypto view, which provides comprehensive visibility of your wallet and transactions on the XE blockchain.
                 This page enables you to manage your account balance directly using XE.
                 If you're new to cryptocurrency, you can <a href="https://wiki.edge.network/getting-and-storing-tokens/wallets" target="_blank" class="text-green">learn more about XE on the Edge Wiki</a>.
-                Alternatively, if you prefer a more streamlined interface, you can <RouterLink :to="{ name: 'Account' }" class="text-green">disable the crypto view</RouterLink>.
+                Alternatively, if you prefer a more streamlined interface, you can <RouterLink :to="{ name: 'Settings' }" class="text-green">disable the crypto view</RouterLink>.
               </p>
             </section>
           </article>
diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 915a14c0..80035990 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -16,7 +16,6 @@ import useVuelidate from '@vuelidate/core'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { computed, effect, reactive, ref } from 'vue'
 import { helpers, minLength, required } from '@vuelidate/validators'
-import GPUAPIKeysPanel from '../components/GPUAPIKeysPanel.vue'
 
 const route = useRoute()
 const store = useStore()
@@ -264,9 +263,6 @@ effect(() => {
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Overview</button>
           </Tab>
-          <Tab v-slot="{selected}">
-            <button :class="{ tab: true, 'tab--selected': selected }">API Keys</button>
-          </Tab>
           <Tab v-slot="{selected}">
             <button :class="{ tab: true, 'tab--selected': selected }">Destroy</button>
           </Tab>
@@ -278,11 +274,6 @@ effect(() => {
             <GPUOverviewPanel :gpu="gpu" />
           </TabPanel>
 
-          <!-- API keys -->
-          <TabPanel>
-            <GPUAPIKeysPanel :gpu="gpu" />
-          </TabPanel>
-
           <!-- Destroy -->
           <TabPanel>
             <GPUDestroyPanel :gpu="gpu" @destroy="destroy" />
diff --git a/src/modules/gpu/components/GPUAPIKeysPanel.vue b/src/modules/settings/components/APIKeysPanel.vue
similarity index 100%
rename from src/modules/gpu/components/GPUAPIKeysPanel.vue
rename to src/modules/settings/components/APIKeysPanel.vue
diff --git a/src/modules/settings/components/AccountPanel.vue b/src/modules/settings/components/AccountPanel.vue
new file mode 100644
index 00000000..3008d894
--- /dev/null
+++ b/src/modules/settings/components/AccountPanel.vue
@@ -0,0 +1,77 @@
+<script setup>
+import * as format from '@/utils/format'
+import AddAccountEmail from '../../../components/account/AddAccountEmail.vue'
+import Disable2FA from '../../../components/account/Disable2FA.vue'
+import Enable2FA from '../../../components/account/Enable2FA.vue'
+import ManageAccountEmail from '../../../components/account/ManageAccountEmail.vue'
+import { useStore } from 'vuex'
+import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
+import { computed, ref } from 'vue'
+
+const store = useStore()
+
+const showAccountNumber = ref(false)
+const showAddTwoFactor = ref(false)
+
+const accountNumber = computed(() => {
+  if (showAccountNumber.value) return format.accountNumber(store.state.account._key)
+  return format.accountNumberMasked(store.state.account._key)
+})
+
+const hasEmail = computed(() => Boolean(store.state.account && store.state.account.email && store.state.account.email.address))
+const hasTwoFactor = computed(() => Boolean(store.state.account && store.state.account.totps))
+
+function toggleShowAccountNumber() {
+  showAccountNumber.value = !showAccountNumber.value
+}
+
+function toggleShowAddTwoFactor() {
+  showAddTwoFactor.value = !showAddTwoFactor.value
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="box">
+      <div>
+        <h4>Account Number</h4>
+        <p class="text-gray-500">Write down your account number and keep it secret. You can use your account number to sign into the account.</p>
+      </div>
+      <!-- account number display -->
+      <div class="flex items-center justify-between relative w-max max-w-full">
+        <span class="text-3xl pr-4 monospace" :class="{ 'text-gray': !showAccountNumber, 'text-green': showAccountNumber }">{{ accountNumber }}</span>
+        <!-- hide/show account number button button -->
+        <button
+          @click.prevent="toggleShowAccountNumber"
+          class="ml-2 text-gray-400 hover:text-green"
+        >
+          <EyeIcon v-if="showAccountNumber" class="ml-2 w-5 h-5" />
+          <EyeOffIcon v-else class="ml-2 w-5 h-5" />
+        </button>
+      </div>
+    </div>
+
+    <div class="box">
+      <h4>Account Email</h4>
+      <div>
+        <ManageAccountEmail v-if="hasEmail" />
+        <AddAccountEmail v-else />
+      </div>
+    </div>
+
+    <div class="box">
+      <h4>Two-factor Authentication (2FA)</h4>
+      <div>
+        <Disable2FA v-if="hasTwoFactor && !showAddTwoFactor && !backupCodes" />
+        <Enable2FA v-else @enable2FA="toggleShowAddTwoFactor" />
+        <button
+          v-if="hasTwoFactor && !backupCodes"
+          @click="toggleShowAddTwoFactor"
+          class="mt-2 underline text-gray-500 hover:text-green"
+        >
+          {{ showAddTwoFactor ? 'Return to remove existing 2FA code' : 'Add extra 2FA code' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/settings/components/CryptoPaymentsPanel.vue b/src/modules/settings/components/CryptoPaymentsPanel.vue
new file mode 100644
index 00000000..f3e9eed5
--- /dev/null
+++ b/src/modules/settings/components/CryptoPaymentsPanel.vue
@@ -0,0 +1,32 @@
+<script setup>
+/* global process */
+
+import * as utils from '@edge/account-utils'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+async function toggleCryptoView() {
+  if (!store.state.account) return
+
+  await utils.updateAccount(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key, {
+    account: store.state.account._key,
+    useCryptoView: !store.state.account.useCryptoView
+  })
+
+  store.dispatch('updateAccount')
+}
+</script>
+
+<template>
+  <div class="box">
+    <h4>Crypto Payments</h4>
+    <p class="text-gray-500">
+      Edge runs on its own layer 0 blockchain, and payments are settled in its own coin, called XE, in the background.
+      By default payment information in the account interface is presented in fiat.
+      If you would prefer to see payment information in crypto, you can enable it here.
+    </p>
+    <button v-if="store.state.account.useCryptoView" @click="toggleCryptoView" class="text-sm py-3 button button--outline-error">Disable Crypto Payments</button>
+    <button v-else @click="toggleCryptoView" class="text-sm py-3 button button--outline-success">Enable Crypto Payments</button>
+  </div>
+</template>
diff --git a/src/modules/settings/views/SettingsView.vue b/src/modules/settings/views/SettingsView.vue
new file mode 100644
index 00000000..6a518f6a
--- /dev/null
+++ b/src/modules/settings/views/SettingsView.vue
@@ -0,0 +1,48 @@
+<script setup>
+import APIKeysPanel from '../components/APIKeysPanel.vue'
+import AccountPanel from '../components/AccountPanel.vue'
+import CryptoPaymentsPanel from '../components/CryptoPaymentsPanel.vue'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+
+</script>
+
+<template>
+  <div class="mainContent__inner space-y-4">
+    <h1>Settings</h1>
+
+    <div class="mt-4 space-x-10">
+      <TabGroup as="div" class="tabGroup">
+        <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
+
+        <TabList class="tabs pr-6">
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Account</button>
+          </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">API Keys</button>
+          </Tab>
+          <Tab v-slot="{selected}">
+            <button :class="{ tab: true, 'tab--selected': selected }">Crypto Payments</button>
+          </Tab>
+        </TabList>
+
+        <TabPanels class="mt-4">
+          <!-- Account -->
+          <TabPanel>
+            <AccountPanel />
+          </TabPanel>
+
+          <!-- API Keys -->
+          <TabPanel>
+            <APIKeysPanel />
+          </TabPanel>
+
+          <!-- Crypto Payments -->
+          <TabPanel>
+            <CryptoPaymentsPanel />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
+  </div>
+</template>
diff --git a/src/router/index.js b/src/router/index.js
index f3f6e65b..b5cda9be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,6 @@
 /* global process */
 
 import * as utils from '@edge/account-utils'
-import Account from '@/views/dashboard/Account'
 import BareMetal from '../modules/bareMetals/views/BareMetal.vue'
 import BareMetals from '../modules/bareMetals/views/BareMetals.vue'
 import Billing from '@/views/dashboard/Billing'
@@ -56,11 +55,6 @@ const routes = [
         name: 'Index',
         component: Index
       },
-      {
-        path: 'account',
-        name: 'Account',
-        component: Account
-      },
       {
         path: 'bare-metals',
         name: 'Bare Metals',
@@ -193,6 +187,11 @@ const routes = [
         name: 'Server',
         component: Server
       },
+      {
+        path: 'settings',
+        name: 'Settings',
+        component: () => import('../modules/settings/views/SettingsView.vue')
+      },
       {
         path: 'shield',
         name: 'Shield',
diff --git a/src/views/dashboard/Account.vue b/src/views/dashboard/Account.vue
deleted file mode 100644
index 33542910..00000000
--- a/src/views/dashboard/Account.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div class="mainContent__inner space-y-4">
-    <h1>Account</h1>
-    <div class="box">
-      <div>
-        <h4>Account Number</h4>
-        <p class="text-gray-500">Write down your account number and keep it secret. You can use your account number to sign into the account.</p>
-      </div>
-      <!-- account number display -->
-      <div class="account-number-wrapper">
-        <span v-if="showAccountNumber" class="account-number monospace">{{ formattedAccountNumber }}</span>
-        <span v-else class="account-number masked monospace">{{ formattedAccountNumberMasked }}</span>
-        <!-- hide/show account number button button -->
-        <button
-          @click.prevent="toggleShowAccountNumber"
-          class="ml-2 text-gray-400 hover:text-green"
-        >
-          <EyeIcon v-if="showAccountNumber" class="ml-2 w-5 h-5" />
-          <EyeOffIcon v-if="!showAccountNumber" class="ml-2 w-5 h-5" />
-        </button>
-      </div>
-    </div>
-    <div class="box">
-      <h4>Account Email</h4>
-      <div>
-        <ManageAccountEmail v-if="isEmailEnabled" />
-        <AddAccountEmail v-else />
-      </div>
-    </div>
-    <div class="box">
-      <h4>Two-factor Authentication (2FA)</h4>
-      <div>
-        <Disable2FA v-if="is2FAEnabled && !showAddExtra2FA && !backupCodes" />
-        <Enable2FA v-else @enable2FA="onEnable2FA" />
-        <button
-          v-if="is2FAEnabled && !backupCodes"
-          @click="toggleAddExtra2FA"
-          class="mt-2 underline text-gray-500 hover:text-green"
-        >
-          {{ showAddExtra2FA ? 'Return to remove existing 2FA code' : 'Add extra 2FA code' }}
-        </button>
-      </div>
-    </div>
-
-    <div class="box">
-      <h4>Crypto Payments</h4>
-      <p class="text-gray-500">
-        Edge runs on its own layer 0 blockchain, and payments are settled in its own coin, called XE, in the background.
-        By default payment information in the account interface is presented in fiat.
-        If you would prefer to see payment information in crypto, you can enable it here.
-      </p>
-      <button v-if="account.useCryptoView" @click="toggleCryptoView" class="text-sm py-3 button button--outline-error">Disable Crypto Payments</button>
-      <button v-else @click="toggleCryptoView" class="text-sm py-3 button button--outline-success">Enable Crypto Payments</button>
-    </div>
-  </div>
-</template>
-
-<script>
-/* global process */
-
-import * as format from '@/utils/format'
-import * as utils from '@edge/account-utils'
-import AddAccountEmail from '@/components/account/AddAccountEmail'
-import Disable2FA from '@/components/account/Disable2FA'
-import Enable2FA from '@/components/account/Enable2FA'
-import ManageAccountEmail from '@/components/account/ManageAccountEmail'
-import ReferralCode from '@/components/ReferralCode'
-import { mapState } from 'vuex'
-import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
-
-export default {
-  name: 'Account',
-  title() {
-    return 'Edge Account Portal » Account'
-  },
-  components: {
-    AddAccountEmail,
-    Disable2FA,
-    EyeIcon,
-    EyeOffIcon,
-    Enable2FA,
-    ManageAccountEmail,
-    ReferralCode
-  },
-  computed: {
-    ...mapState(['account', 'backupCodes', 'session']),
-    formattedAccountNumber() {
-      return format.accountNumber(this.account._key)
-    },
-    formattedAccountNumberMasked() {
-      return format.accountNumberMasked(this.account._key)
-    },
-    is2FAEnabled() {
-      return this.account.totps
-    },
-    isEmailEnabled() {
-      return this.account.email && this.account.email.address
-    }
-  },
-  data() {
-    return {
-      copied: false,
-      showAccountNumber: false,
-      showAddExtra2FA: false
-    }
-  },
-  methods: {
-    async copyToClipboard () {
-      this.copied = true
-      await navigator.clipboard.writeText(this.account._key)
-      setTimeout(() => {
-        this.copied = false
-      }, 2000)
-    },
-    onEnable2FA() {
-      this.showAddExtra2FA = false
-    },
-    async toggleCryptoView() {
-      await utils.updateAccount(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, {
-        account: this.account._key,
-        useCryptoView: !this.account.useCryptoView
-      })
-      this.$store.dispatch('updateAccount')
-    },
-    toggleShowAccountNumber() {
-      this.showAccountNumber = !this.showAccountNumber
-    },
-    toggleAddExtra2FA() {
-      this.showAddExtra2FA = !this.showAddExtra2FA
-    }
-  }
-}
-</script>
-<style scoped>
-.account-number-wrapper {
-  @apply flex items-center justify-between relative w-max max-w-full;
-}
-.account-number {
-  @apply text-3xl text-green pr-4;
-}
-.account-number.masked {
-  @apply text-gray;
-}
-</style>

From 3644db3260eb8981abe01818800ccd9aa2464ccc Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Mon, 3 Mar 2025 15:46:02 +0000
Subject: [PATCH 18/32] feat: visual improvements to api keys panel

---
 .../settings/components/APIKeysPanel.vue      | 112 ++++++++++++++----
 1 file changed, 90 insertions(+), 22 deletions(-)

diff --git a/src/modules/settings/components/APIKeysPanel.vue b/src/modules/settings/components/APIKeysPanel.vue
index 1ff412af..1e741222 100644
--- a/src/modules/settings/components/APIKeysPanel.vue
+++ b/src/modules/settings/components/APIKeysPanel.vue
@@ -4,16 +4,48 @@
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import superagent from 'superagent'
 import { useStore } from 'vuex'
+import { DuplicateIcon, TrashIcon } from '@heroicons/vue/solid'
 import { effect, ref } from 'vue'
 
 const store = useStore()
 
 const busy = ref(false)
+const copied = ref(false)
 const error = ref()
 const generatedKey = ref()
 const loading = ref(true)
 const keys = ref([])
 
+async function copyToClipboard(str) {
+  await navigator.clipboard.writeText(str)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 1000)
+}
+
+async function deleteKey(id) {
+  try {
+    busy.value = true
+
+    await superagent.delete(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/admin/api-keys/${id}`)
+      .set('Authorization', `Bearer ${store.state.session._key}`)
+
+    return reload()
+  }
+  catch (err) {
+    error.value = err
+  }
+  finally {
+    busy.value = false
+  }
+}
+
+function hideGeneratedKey() {
+  generatedKey.value = undefined
+}
+
 async function generate() {
   try {
     busy.value = true
@@ -22,6 +54,8 @@ async function generate() {
       .set('Authorization', `Bearer ${store.state.session._key}`)
 
     generatedKey.value = res.body
+
+    return reload()
   }
   catch (err) {
     error.value = err
@@ -56,31 +90,50 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="loading" class="pb-20">
-    <div class="box">
-      <h4>API Keys</h4>
-
-      <div class="flex">
-        <span class="mr-2">Loading</span>
-        <LoadingSpinner />
-      </div>
-    </div>
+  <div v-if="loading" class="box flex pb-20">
+    <span class="mr-2">Loading</span>
+    <LoadingSpinner />
   </div>
 
-  <div v-else class="pb-20">
-    <div class="box">
-      <h4>API Keys</h4>
-
-      <div v-if="generatedKey">
-        <span>Your new API key:</span>
-        <span>{{ generatedKey.secret }}</span>
+  <div v-else-if="keys.length" class="pb-20">
+    <ul class="space-y-2">
+      <li
+        v-for="key in keys"
+        class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-l-8 border-green rounded-md w-full p-5 pr-8 transition-all duration-100"
+        :key="key.id"
+      >
+        <span class="text-md text-gray-500 truncate">{{ key.id }}</span>
+        <div class="flex flex-col">
+          <span class="text-md text-gray-500">Created</span>
+          <span class="text-sm text-gray-500">{{ key.created }}</span>
+        </div>
+        <div class="flex flex-col items-end">
+          <button class="button button--error" @click.prevent="deleteKey(key.id)">
+            <TrashIcon class="w-4" />
+            <span>Delete</span>
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <div v-if="generatedKey" class="box flex flex-col mt-4">
+      <h4>Your new API key</h4>
+      <div class="mb-2">
+        <code class="font-mono text-green text-lg">{{ generatedKey.secret }}</code>
+        <button
+          class="text-gray-400 hover:text-green"
+          @click.prevent="copyToClipboard(generatedKey.secret)"
+        >
+          <DuplicateIcon class="ml-2 w-5 h-5" />
+        </button>
       </div>
-
-      <ul>
-        <li v-for="key in keys" v-bind:key="key._key">
-          {{ key.id }}
-        </li>
-      </ul>
+      <p>
+        Copy this API key to a safe place.
+        This key's ID is {{ generatedKey.id }}.
+      </p>
+      <button @click="hideGeneratedKey" class="button button--success">
+        <span>I confirm have stored my API key in a safe place</span>
+      </button>
     </div>
 
     <div class="flex flex-col w-full mt-4 space-y-2">
@@ -93,4 +146,19 @@ effect(() => {
       </button>
     </div>
   </div>
+
+  <div v-else class="pb-20">
+    <div class="box box-flex">
+      <div class="flex flex-col items-center justify-center py-4">
+        <p>You haven't created any API keys yet.</p>
+        <button
+          :disabled="busy"
+          class="button button--success w-full md:max-w-xs"
+          @click="generate"
+        >
+          Generate API Key
+        </button>
+      </div>
+    </div>
+  </div>
 </template>

From b4bb84dab054ababce389e46b65f38087763ea40 Mon Sep 17 00:00:00 2001
From: Aneurin Barker Snook <a@aneur.in>
Date: Tue, 4 Mar 2025 09:50:45 +0000
Subject: [PATCH 19/32] feat: improve error display, grid layout for api keys

---
 .../settings/components/APIKeysPanel.vue      | 123 ++++++++++--------
 1 file changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/modules/settings/components/APIKeysPanel.vue b/src/modules/settings/components/APIKeysPanel.vue
index 1e741222..660fedee 100644
--- a/src/modules/settings/components/APIKeysPanel.vue
+++ b/src/modules/settings/components/APIKeysPanel.vue
@@ -1,6 +1,7 @@
 <script setup>
 /* global process */
 
+import ErrorV2 from '../../../layout/ErrorV2.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import superagent from 'superagent'
 import { useStore } from 'vuex'
@@ -90,75 +91,85 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="loading" class="box flex pb-20">
-    <span class="mr-2">Loading</span>
-    <LoadingSpinner />
-  </div>
+  <div>
+    <ErrorV2 class="mb-2 text-center w-full" :error="error" />
 
-  <div v-else-if="keys.length" class="pb-20">
-    <ul class="space-y-2">
-      <li
-        v-for="key in keys"
-        class="grid grid-cols-2 lg:grid-cols-4 gap-y-4 bg-white text-gray-500 border-l-8 border-green rounded-md w-full p-5 pr-8 transition-all duration-100"
-        :key="key.id"
-      >
-        <span class="text-md text-gray-500 truncate">{{ key.id }}</span>
-        <div class="flex flex-col">
-          <span class="text-md text-gray-500">Created</span>
-          <span class="text-sm text-gray-500">{{ key.created }}</span>
-        </div>
-        <div class="flex flex-col items-end">
-          <button class="button button--error" @click.prevent="deleteKey(key.id)">
-            <TrashIcon class="w-4" />
-            <span>Delete</span>
-          </button>
-        </div>
-      </li>
-    </ul>
+    <div v-if="loading" class="box flex pb-20">
+      <span class="mr-2">Loading</span>
+      <LoadingSpinner />
+    </div>
 
-    <div v-if="generatedKey" class="box flex flex-col mt-4">
-      <h4>Your new API key</h4>
-      <div class="mb-2">
-        <code class="font-mono text-green text-lg">{{ generatedKey.secret }}</code>
-        <button
-          class="text-gray-400 hover:text-green"
-          @click.prevent="copyToClipboard(generatedKey.secret)"
+    <div v-if="keys.length" class="pb-20">
+      <ul class="space-y-2">
+        <li
+          v-for="key in keys"
+          class="flex flex-col lg:grid keys-grid gap-y-4 bg-white text-gray-500 border-l-8 border-green rounded-md w-full p-5 pr-8 transition-all duration-100"
+          :key="key.id"
         >
-          <DuplicateIcon class="ml-2 w-5 h-5" />
+          <span class="text-md text-gray-500 truncate">{{ key.id }}</span>
+          <div class="flex flex-col">
+            <span class="text-md text-gray-500">Created</span>
+            <span class="text-sm text-gray-500">{{ key.created }}</span>
+          </div>
+          <div class="flex flex-col items-end">
+            <button class="button button--error" @click.prevent="deleteKey(key.id)">
+              <TrashIcon class="w-4" />
+              <span>Delete</span>
+            </button>
+          </div>
+        </li>
+      </ul>
+
+      <div v-if="generatedKey" class="box flex flex-col mt-4">
+        <h4>Your new API key</h4>
+        <div class="mb-2">
+          <code class="font-mono text-green text-lg">{{ generatedKey.secret }}</code>
+          <button
+            class="text-gray-400 hover:text-green"
+            @click.prevent="copyToClipboard(generatedKey.secret)"
+          >
+            <DuplicateIcon class="ml-2 w-5 h-5" />
+          </button>
+        </div>
+        <p>
+          Copy this API key to a safe place.
+          This key's ID is {{ generatedKey.id }}.
+        </p>
+        <button @click="hideGeneratedKey" class="button button--success">
+          <span>I confirm have stored my API key in a safe place</span>
         </button>
       </div>
-      <p>
-        Copy this API key to a safe place.
-        This key's ID is {{ generatedKey.id }}.
-      </p>
-      <button @click="hideGeneratedKey" class="button button--success">
-        <span>I confirm have stored my API key in a safe place</span>
-      </button>
-    </div>
 
-    <div class="flex flex-col w-full mt-4 space-y-2">
-      <button
-        :disabled="busy"
-        class="button button--success self-end w-full md:max-w-xs"
-        @click="generate"
-      >
-        Generate API Key
-      </button>
-    </div>
-  </div>
-
-  <div v-else class="pb-20">
-    <div class="box box-flex">
-      <div class="flex flex-col items-center justify-center py-4">
-        <p>You haven't created any API keys yet.</p>
+      <div class="flex flex-col w-full mt-4 space-y-2">
         <button
           :disabled="busy"
-          class="button button--success w-full md:max-w-xs"
+          class="button button--success self-end w-full md:max-w-xs"
           @click="generate"
         >
           Generate API Key
         </button>
       </div>
     </div>
+
+    <div v-else class="pb-20">
+      <div class="box box-flex">
+        <div class="flex flex-col items-center justify-center py-4">
+          <p>You haven't created any API keys yet.</p>
+          <button
+            :disabled="busy"
+            class="button button--success w-full md:max-w-xs"
+            @click="generate"
+          >
+            Generate API Key
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.keys-grid {
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</style>

From 325e9e9aeff76af3086738945dab39f81d26ca53 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Tue, 22 Apr 2025 19:06:49 +0300
Subject: [PATCH 20/32] feat: prepopulate gpu server name and hostname

---
 src/modules/gpu/views/GPUDeploy.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 3573f5c0..8a5cace5 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -12,8 +12,9 @@ import superagent from 'superagent'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import useVuelidate from '@vuelidate/core'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, onMounted } from 'vue'
 import { maxValue, minLength, minValue, required } from '@vuelidate/validators'
+import * as utils from '@edge/account-utils'
 
 const router = useRouter()
 const store = useStore()
@@ -79,6 +80,16 @@ async function submit() {
     busy.value = false
   }
 }
+
+async function getHostname() {
+  const { hostname } = await utils.createServerHostname(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key)
+  formState.hostname = `${hostname}.edge.network`
+  formState.name = hostname
+}
+
+onMounted(() => {
+  getHostname()
+})
 </script>
 
 <template>
@@ -155,7 +166,7 @@ async function submit() {
         <!-- Name -->
         <div class="flex flex-col pb-2 space-y-6">
           <div class="input-group">
-            <label class="label">Name</label>
+            <label class="label">Server Name</label>
             <input
               v-model="v$.name.$model"
               :disabled="busy"

From 60bada6bfd1d5dab1a445c557c47b41280b3d778 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Tue, 22 Apr 2025 19:26:14 +0300
Subject: [PATCH 21/32] feat: gpu root password hint

---
 src/modules/gpu/views/GPUDeploy.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 8a5cace5..fa6fa6f4 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -199,6 +199,9 @@ onMounted(() => {
       <div class="box">
         <Password :disableControls="busy" @password-changed="setPassword" />
         <ValidationError :errors="v$.password.$errors" />
+        <p class="mt-4 mb-0">
+          You can connect to the server as <code>root</code> with this password.
+        </p>
       </div>
 
       <div class="flex flex-col w-full space-y-2 items-end">

From 5c8441f5ced0d3a94b1eb43d4cab1368596a6127 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Tue, 22 Apr 2025 19:33:10 +0300
Subject: [PATCH 22/32] feat: update gpu server specs

---
 src/modules/gpu/views/GPUDeploy.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index fa6fa6f4..306332e6 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -104,7 +104,7 @@ onMounted(() => {
       </div>
 
       <div class="box">
-        <h4>Specs</h4>
+        <h4>Server specs</h4>
         <div class="grid grid-cols-2 gap-4">
           <div>
             <Slider
@@ -160,6 +160,19 @@ onMounted(() => {
             <ValidationError :errors="v$.diskGiB.$errors" />
           </div>
         </div>
+
+        <div class="flex flex-col items-baseline mt-8">
+          <span class="text-green">Your server</span>
+          <div class="flex items-center space-x-2 mt-1">
+            <span class="text-lg">{{ v$.gpuCount.$model }} GPU</span>
+            <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+            <span class="text-lg">{{ v$.cpuCount.$model }} vCPU</span>
+            <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+            <span class="text-lg">{{ v$.memoryGiB.$model }} GiB RAM</span>
+            <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+            <span class="text-lg">{{ v$.diskGiB.$model }} GiB Disk</span>
+          </div>
+        </div>
       </div>
 
       <div class="box">

From eaa13ae8d8e85320c3ee0d85ad4031c8cd66307a Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Tue, 22 Apr 2025 19:57:39 +0300
Subject: [PATCH 23/32] feat: select gpu with nvidia logo and text

---
 src/components/icons/NvidiaIcon.vue      |  17 +++
 src/modules/gpu/components/GPUSelect.vue | 139 ++++++++++++++---------
 2 files changed, 104 insertions(+), 52 deletions(-)
 create mode 100644 src/components/icons/NvidiaIcon.vue

diff --git a/src/components/icons/NvidiaIcon.vue b/src/components/icons/NvidiaIcon.vue
new file mode 100644
index 00000000..5df0cc30
--- /dev/null
+++ b/src/components/icons/NvidiaIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' :class="className">
+    <path fill="rgb(118 185 0)" d='M8.948 8.798v-1.43a7 7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851a3.7 3.7 0 0 1-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6 6 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964a6.5 6.5 0 0 1-1.095-.097v1.325c.3.035.61.062.91.062c3.957 0 6.82-2.023 9.593-4.408c.459.371 2.34 1.263 2.73 1.652c-2.633 2.208-8.772 3.984-12.253 3.984c-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936'/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'NvidiaIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'w-6 h-6'
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/modules/gpu/components/GPUSelect.vue b/src/modules/gpu/components/GPUSelect.vue
index 0975d722..625cca27 100644
--- a/src/modules/gpu/components/GPUSelect.vue
+++ b/src/modules/gpu/components/GPUSelect.vue
@@ -3,8 +3,10 @@
 
 import superagent from 'superagent'
 import { useStore } from 'vuex'
-import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
+import { RadioGroup, RadioGroupLabel, RadioGroupOption, RadioGroupDescription } from '@headlessui/vue'
 import { defineModel, defineProps, effect, ref } from 'vue'
+import NvidiaIcon from '../../../components/icons/NvidiaIcon.vue'
+import { CheckIcon } from '@heroicons/vue/outline'
 
 const model = defineModel()
 const store = useStore()
@@ -64,69 +66,102 @@ effect(() => {
     <RadioGroupLabel class="sr-only">GPU Model</RadioGroupLabel>
 
     <div class="box__grid">
-      <RadioGroupOption
+      <div
         v-for="gpu in gpus"
-        v-slot="{ active, checked, disabled }"
-        as="template"
-        :disabled="disabled"
         :key="gpu.id"
-        :value="gpu.id"
+        class="flex flex-col"
       >
-        <div
-          :class="{ active, checked, disabled }"
-          class="radioOption"
+        <RadioGroupOption
+          as="template"
+          :value="gpu.id"
+          v-slot="{ active, checked, disabled }"
+          :disabled="disabled"
         >
-          <div class="flex flex-col items-center w-full">
-            <RadioGroupLabel
-              as="div"
-              class="optionTitle"
-              :class="{ active, checked, disabled }"
+          <div
+            :class="[
+              active ? 'active' : '',
+              checked ? 'checked' : '',
+              disabled ? 'disabled' : ''
+            ]"
+            class="radioOption"
+          >
+            <div
+              class="checkmark"
+              :class="[
+                active ? 'active' : '',
+                checked ? 'checked' : ''
+              ]"
             >
-              <h4 class="capitalize">{{ gpu.modelName }}</h4>
-            </RadioGroupLabel>
+              <CheckIcon class="checkmark__icon" />
+            </div>
+            <div class="optionDetails">
+              <RadioGroupLabel as="h4" class="optionDetails__model">
+                {{ gpu.modelName }}
+              </RadioGroupLabel>
+              <RadioGroupDescription as="span" class="optionDetails__memory">
+                <span class="flex items-center space-x-2">
+                  <span>NVIDIA</span>
+                  <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
+                  <span>{{ gpu.memoryGib }} GB</span>
+                </span>
+              </RadioGroupDescription>
+            </div>
+            <NvidiaIcon className="w-10" />
           </div>
-        </div>
-      </RadioGroupOption>
+        </RadioGroupOption>
+      </div>
     </div>
   </RadioGroup>
 </template>
 
 <style scoped>
-  .box__grid {
-    @apply mt-6 w-full grid grid-cols-1 gap-4;
-    @apply sm:grid-cols-1 lg:grid-cols-3;
-  }
-
-  /* radio option */
-  .radioOption {
-    @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
-    @apply hover:bg-gray-100 hover:bg-opacity-50;
-    @apply focus:outline-none;
-  }
-  .radioOption.active {
-    @apply border-green border-opacity-40;
-  }
-  .radioOption.checked {
-    @apply bg-gray-100 border-green bg-opacity-75;
-    @apply ring-4 ring-green ring-opacity-10;
-  }
-  .radioOption.disabled {
-    @apply cursor-not-allowed opacity-50;
-  }
-
-  /* option title */
-  .optionTitle {
-    @apply text-center w-full;
-  }
-  .optionTitle.active {
+.box__grid {
+  @apply mt-6 w-full grid grid-cols-1 gap-4;
+  @apply sm:grid-cols-1 lg:grid-cols-2;
+}
 
-  }
-  .optionTitle.checked {
+/* radio option */
+.radioOption {
+  @apply relative flex space-x-3 items-start p-5 border border-gray-300 rounded-md cursor-pointer;
+  @apply hover:bg-gray-100 hover:bg-opacity-50;
+  @apply focus:outline-none;
+}
+.radioOption.active {
+  @apply border-green border-opacity-40;
+}
+.radioOption.checked {
+  @apply bg-gray-100 border-green bg-opacity-75;
+  @apply ring-4 ring-green ring-opacity-10;
+}
+.radioOption.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
 
-  }
+/* radio option details */
+.optionDetails {
+  @apply flex flex-col flex-1 text-sm;
+}
+.optionDetails__memory {
+  @apply text-sm text-gray-500;
+}
 
-  /* option specs */
-  .optionSpecs {
-    @apply flex flex-col items-center w-full mt-4 text-sm text-gray-500;
-  }
+/* checkmark */
+.checkmark {
+  @apply flex items-center justify-center text-white flex-shrink-0 rounded-full w-5 h-5 bg-gray-100 border border-gray-300;
+}
+.checkmark.active {
+  @apply border-green border-opacity-40 bg-opacity-20;
+}
+.checkmark.checked {
+  @apply border-green bg-green;
+}
+.checkmark .checkmark__icon {
+  @apply opacity-0 w-3 h-3;
+}
+.checkmark.active .checkmark__icon {
+  @apply opacity-40;
+}
+.checkmark.checked .checkmark__icon {
+  @apply opacity-100;
+}
 </style>

From a9bf1c8568fb58a2adaaa4b71db5fb7a72ab5977 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 00:09:02 +0300
Subject: [PATCH 24/32] feat: increased root password complexity for gpu

---
 src/components/server/deploy/Password.vue | 29 ++++++++++++++++-------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/server/deploy/Password.vue b/src/components/server/deploy/Password.vue
index 1f276a17..68ff584e 100644
--- a/src/components/server/deploy/Password.vue
+++ b/src/components/server/deploy/Password.vue
@@ -55,7 +55,12 @@
 <script>
 import { EyeIcon, EyeOffIcon } from '@heroicons/vue/solid'
 
-const passwordCharset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789*#$!?-_'
+const passwordCharset = {
+  lowercase: 'abcdefghijklmnopqrstuvwxyz',
+  uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  numbers: '0123456789',
+  symbols: '@#$%^&*'
+}
 
 export default {
   name: 'Password',
@@ -82,13 +87,21 @@ export default {
       }, 2000)
     },
     generate() {
-      this.password = (new Array(24))
-        .fill(null)
-        .map(() => {
-          const n = Math.floor(Math.random() * passwordCharset.length)
-          return passwordCharset[n]
-        })
-        .join('')
+      const password = [
+        passwordCharset.lowercase[Math.floor(Math.random() * passwordCharset.lowercase.length)],
+        passwordCharset.uppercase[Math.floor(Math.random() * passwordCharset.uppercase.length)],
+        passwordCharset.numbers[Math.floor(Math.random() * passwordCharset.numbers.length)],
+        passwordCharset.symbols[Math.floor(Math.random() * passwordCharset.symbols.length)]
+      ]
+      const allChars = Object.values(passwordCharset).join('')
+      for (let i = password.length; i < 24; i++) {
+        password.push(allChars[Math.floor(Math.random() * allChars.length)])
+      }
+      for (let i = password.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1))
+        ;[password[i], password[j]] = [password[j], password[i]]
+      }
+      this.password = password.join('')
     },
     toggleShowPassword() {
       if (this.disableControls) return

From 01878587030fa5375e82c3adcbfb1276642905fb Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 00:09:46 +0300
Subject: [PATCH 25/32] fix: gpu overview formatting

---
 src/modules/gpu/components/GPUOverviewPanel.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/modules/gpu/components/GPUOverviewPanel.vue b/src/modules/gpu/components/GPUOverviewPanel.vue
index d776129b..a82bf99a 100644
--- a/src/modules/gpu/components/GPUOverviewPanel.vue
+++ b/src/modules/gpu/components/GPUOverviewPanel.vue
@@ -2,6 +2,7 @@
 import { DuplicateIcon } from '@heroicons/vue/outline'
 import StatusDot from '../../../components/StatusDot.vue'
 import { defineProps, ref } from 'vue'
+import * as format from '@/utils/format'
 
 defineProps({
   gpu: Object
@@ -17,12 +18,16 @@ async function copyToClipboard(str) {
     copied.value = false
   }, 1000)
 }
+
+function formatTimestamp(ts) {
+  return `${format.date(ts)}, ${format.time(ts)}`
+}
 </script>
 
 <template>
   <div class="grid gap-4 xl:grid-cols-2">
     <div class="box overflow_hidden gpu-details xl:col-span-2">
-      <h4 class="section__title">Details</h4>
+      <h4 class="section__title">Server details</h4>
       <div class="overview__grid">
         <!-- Name, hostname, IP address -->
         <div class="grid__col col__1">
@@ -59,7 +64,7 @@ async function copyToClipboard(str) {
           </div>
           <div class="info__section">
             <span class="label">Created</span>
-            <span class="info">{{ gpu.created }}</span>
+            <span class="info">{{ formatTimestamp(gpu.created) }}</span>
           </div>
         </div>
       </div>
@@ -83,11 +88,11 @@ async function copyToClipboard(str) {
         </div>
         <div class="info__section">
           <span class="label">RAM</span>
-          <span class="info">{{ gpu.memoryGiB }}</span>
+          <span class="info">{{ gpu.memoryGiB }} GiB</span>
         </div>
         <div class="info__section">
           <span class="label">Disk</span>
-          <span class="info">{{ gpu.diskGiB }}</span>
+          <span class="info">{{ gpu.diskGiB }} GiB</span>
         </div>
       </div>
     </div>

From 70f10af0a4c314d64142edd3fa518df112f29d94 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 11:52:22 +0300
Subject: [PATCH 26/32] feat: improve gpu details

---
 src/modules/gpu/views/GPUDetail.vue | 34 +++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 80035990..7daa2ce9 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -7,6 +7,7 @@ import GPUDestroyPanel from '../components/GPUDestroyPanel.vue'
 import GPUOverviewPanel from '../components/GPUOverviewPanel.vue'
 import LoadingSpinner from '../../../components/icons/LoadingSpinner.vue'
 import PowerToggle from '../../../layout/PowerToggle.vue'
+import ProgressBar from '../../../components/ProgressBar.vue'
 import StatusDot from '../../../components/StatusDot.vue'
 import ValidationError from '../../../components/ValidationError.vue'
 import superagent from 'superagent'
@@ -27,8 +28,10 @@ const error = ref()
 const gpu = ref()
 const loading = ref(true)
 const poll = ref()
+const deploymentMessage = ref('')
 
 const destroyed = computed(() => gpu.value && gpu.value.status === 'deleted')
+const isCreating = computed(() => gpu.value && ['queued', 'created', 'starting'].includes(gpu.value.status))
 
 const formState = reactive({
   name: '',
@@ -140,6 +143,16 @@ async function updateName() {
 
 effect(() => {
   reload().then(() => {
+    if (gpu.value) {
+      if (isCreating.value) {
+        deploymentMessage.value = 'Deploying your new server'
+      } else if (destroying.value) {
+        deploymentMessage.value = 'Destroying your server'
+      } else {
+        deploymentMessage.value = ''
+      }
+    }
+
     if (!['active', 'deleted', 'stopped'].includes(gpu.value.status)) {
       startPoll(['active', 'deleted', 'stopped'])
     }
@@ -155,7 +168,7 @@ effect(() => {
   <div v-if="destroying || destroyed" class="mainContent__inner pt-0 mt-6">
     <div v-if="destroyed" class="box">
       <h4>Destroy GPU</h4>
-      <p class="mt-3 mb-1 text-gray-500">Your GPU and backups have been successfully deleted.</p>
+      <p class="mt-3 mb-1 text-gray-500">Your GPU has been successfully deleted.</p>
       <router-link
         class="button button--success button--small w-full md:max-w-xs"
         :to="{ name: 'GPUs' }"
@@ -235,9 +248,9 @@ effect(() => {
             <span class="divider"/>
             <span class="gpu-detail">{{ gpu.cpuCount }} vCPU</span>
             <span class="divider"/>
-            <span class="gpu-detail">{{ gpu.diskGiB }} Disk</span>
+            <span class="gpu-detail">{{ gpu.diskGiB }} GiB Disk</span>
             <span class="divider"/>
-            <span class="gpu-detail">{{ gpu.memoryGiB }} RAM</span>
+            <span class="gpu-detail">{{ gpu.memoryGiB }} GiB RAM</span>
           </div>
           <span class="divider"/>
           <div class="flex items-center space-x-1">
@@ -255,7 +268,16 @@ effect(() => {
       </div>
     </div>
 
-    <div class="mt-4 space-x-10">
+    <!-- action in progress section -->
+    <div v-if="isCreating || destroying" class="box box--tall">
+      <div class="flex flex-col items-center justify-center text-center">
+        <h4 class="mt-4">{{ deploymentMessage }}</h4>
+        <p class="mt-2 mb-0 text-gray-500">This may take a few minutes. Feel free to close this page.</p>
+        <div class="mt-4 max-w-full"><ProgressBar :red="destroying" /></div>
+      </div>
+    </div>
+
+    <div v-else class="mt-4 space-x-10">
       <!-- Tabs -->
       <TabGroup as="div" class="tabGroup">
         <div class="absolute top-0 right-0 w-10 h-5 bg-gradient-to-l from-gray-200" />
@@ -437,4 +459,8 @@ effect(() => {
     grid-template-columns: repeat(3, 1fr) auto;
   }
 }
+
+.box.box--tall {
+  @apply py-20 !important;
+}
 </style>

From 23d1210a90da6e1b417d8c2c4f2afc74c6401e6c Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 12:32:53 +0300
Subject: [PATCH 27/32] feat: improve gpu details loading

---
 src/modules/gpu/views/GPUDetail.vue | 83 ++++++++++++++---------------
 1 file changed, 39 insertions(+), 44 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 7daa2ce9..62f5cabf 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -31,7 +31,7 @@ const poll = ref()
 const deploymentMessage = ref('')
 
 const destroyed = computed(() => gpu.value && gpu.value.status === 'deleted')
-const isCreating = computed(() => gpu.value && ['queued', 'created', 'starting'].includes(gpu.value.status))
+const isCreating = computed(() => gpu.value && ['queued', 'created', 'pending', 'starting'].includes(gpu.value.status))
 
 const formState = reactive({
   name: '',
@@ -165,48 +165,7 @@ effect(() => {
 </script>
 
 <template>
-  <div v-if="destroying || destroyed" class="mainContent__inner pt-0 mt-6">
-    <div v-if="destroyed" class="box">
-      <h4>Destroy GPU</h4>
-      <p class="mt-3 mb-1 text-gray-500">Your GPU has been successfully deleted.</p>
-      <router-link
-        class="button button--success button--small w-full md:max-w-xs"
-        :to="{ name: 'GPUs' }"
-      >
-      <span>Return to GPUs</span>
-      </router-link>
-    </div>
-    <div v-else class="box">
-      <h4>Destroy GPU</h4>
-      <div class="flex">
-        <span>Destroying {{ gpu && gpu.name }}</span>
-        <span class="ml-2"><LoadingSpinner /></span>
-      </div>
-    </div>
-  </div>
-
-  <div v-else-if="!gpu && loading" class="mainContent__inner pt-0 mt-6">
-    <div class="flex items-center">
-      <span>Loading GPU</span>
-      <LoadingSpinner />
-    </div>
-  </div>
-
-  <div v-else-if="error" class="mainContent__inner pt-0 mt-6">
-    <div class="box">
-      <div class="flex flex-col items-center justify-center text-center">
-        <div class="flex items-center mt-4">
-          <h4>Error</h4>
-        </div>
-        <p class="mt-3 mb-1 text-gray-500">{{ error.message }}</p>
-        <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
-          <span>Return to Edge GPUs</span>
-        </router-link>
-      </div>
-    </div>
-  </div>
-
-  <div v-else-if="gpu" class="mainContent__inner pt-0 mt-6">
+  <div v-if="gpu" class="mainContent__inner pt-0 mt-6">
     <!-- Backlink -->
     <div class="w-max">
       <router-link :to="{ name: 'GPUs' }" class="flex items-center space-x-1 hover:text-green mb-4">
@@ -268,8 +227,37 @@ effect(() => {
       </div>
     </div>
 
+    <div v-if="destroyed" class="mainContent__inner pt-0 mt-6">
+      <div class="box">
+        <div class="flex flex-col items-center justify-center text-center">
+          <h4>GPU Destroyed</h4>
+          <p class="mb-0 text-gray-500">This GPU has been successfully destroyed.</p>
+          <router-link
+            class="mt-4 button button--success button--small"
+            :to="{ name: 'GPUs' }"
+          >
+          <span>Return to GPUs</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="error" class="mainContent__inner pt-0 mt-6">
+      <div class="box">
+        <div class="flex flex-col items-center justify-center text-center">
+          <div class="flex items-center mt-4">
+            <h4>Error</h4>
+          </div>
+          <p class="mt-3 mb-1 text-gray-500">{{ error.message }}</p>
+          <router-link :to="{ name: 'GPUs' }" class="mt-4 button button--success button--small">
+            <span>Return to Edge GPUs</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+
     <!-- action in progress section -->
-    <div v-if="isCreating || destroying" class="box box--tall">
+    <div v-else-if="isCreating || destroying" class="box box--tall">
       <div class="flex flex-col items-center justify-center text-center">
         <h4 class="mt-4">{{ deploymentMessage }}</h4>
         <p class="mt-2 mb-0 text-gray-500">This may take a few minutes. Feel free to close this page.</p>
@@ -305,6 +293,13 @@ effect(() => {
     </div>
   </div>
 
+  <div v-else-if="loading" class="mainContent__inner pt-0 mt-6">
+    <div class="flex items-center">
+      <span>Loading GPU</span>
+      <LoadingSpinner />
+    </div>
+  </div>
+
   <div v-else class="mainContent__inner pt-0 mt-6">
     <div class="box">
       <div class="flex flex-col items-center justify-center text-center">

From 1d8a7e6172067c0f82c4133990d2b9b3c04db395 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 12:33:16 +0300
Subject: [PATCH 28/32] fix: gpu list formatting

---
 src/modules/gpu/views/GPUList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/gpu/views/GPUList.vue b/src/modules/gpu/views/GPUList.vue
index 11b10c9f..b35da546 100644
--- a/src/modules/gpu/views/GPUList.vue
+++ b/src/modules/gpu/views/GPUList.vue
@@ -112,9 +112,9 @@ effect(() => {
               <span class="h-full bg-gray-400 block" style="width: 1px"></span>
               <span>{{ gpu.cpuCount }} vCPU</span>
               <span class="h-full bg-gray-400 block" style="width: 1px"></span>
-              <span>{{ gpu.diskGiB }} Disk</span>
+              <span>{{ gpu.diskGiB }} GiB Disk</span>
               <span class="h-full bg-gray-400 block" style="width: 1px"></span>
-              <span>{{ gpu.memoryGiB }} RAM</span>
+              <span>{{ gpu.memoryGiB }} GiB RAM</span>
             </div>
           </div>
 

From 7934b5101718cda90b25ad013f1cf6664c409b5b Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 12:50:09 +0300
Subject: [PATCH 29/32] fix: rename server to gpu in loaders

---
 src/modules/gpu/views/GPUDetail.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index 62f5cabf..a58c1943 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -145,9 +145,9 @@ effect(() => {
   reload().then(() => {
     if (gpu.value) {
       if (isCreating.value) {
-        deploymentMessage.value = 'Deploying your new server'
+        deploymentMessage.value = 'Deploying your new GPU'
       } else if (destroying.value) {
-        deploymentMessage.value = 'Destroying your server'
+        deploymentMessage.value = 'Destroying your GPU'
       } else {
         deploymentMessage.value = ''
       }

From 2842dea85a0dca9e1cc688c970037b57047d8a55 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 13:09:38 +0300
Subject: [PATCH 30/32] fix: gpu overview spacing

---
 src/modules/gpu/components/GPUOverviewPanel.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/gpu/components/GPUOverviewPanel.vue b/src/modules/gpu/components/GPUOverviewPanel.vue
index a82bf99a..4e43421c 100644
--- a/src/modules/gpu/components/GPUOverviewPanel.vue
+++ b/src/modules/gpu/components/GPUOverviewPanel.vue
@@ -72,12 +72,12 @@ function formatTimestamp(ts) {
 
     <div class="box overflow_hidden gpu-specs">
       <h4 class="section__title">GPU specs</h4>
+      <div class="info__section mb-4">
+        <span class="label">GPU Model</span>
+        <span class="info">{{ gpu.gpuModel }}</span>
+      </div>
       <!-- vcpus, ram, disk, bandwidth -->
       <div class="overview__grid">
-        <div class="info__section col-span-2 lg:col-span-4">
-          <span class="label">GPU Model</span>
-          <span class="info">{{ gpu.gpuModel }}</span>
-        </div>
         <div class="info__section">
           <span class="label">GPU</span>
           <span class="info">{{ gpu.gpuCount }}</span>

From 8691bbe200b86f945429123884b239a4020ebfd2 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 13:39:16 +0300
Subject: [PATCH 31/32] fix: gpu detail states

---
 src/modules/gpu/views/GPUDetail.vue | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/modules/gpu/views/GPUDetail.vue b/src/modules/gpu/views/GPUDetail.vue
index a58c1943..328c6506 100644
--- a/src/modules/gpu/views/GPUDetail.vue
+++ b/src/modules/gpu/views/GPUDetail.vue
@@ -28,10 +28,14 @@ const error = ref()
 const gpu = ref()
 const loading = ref(true)
 const poll = ref()
-const deploymentMessage = ref('')
 
 const destroyed = computed(() => gpu.value && gpu.value.status === 'deleted')
 const isCreating = computed(() => gpu.value && ['queued', 'created', 'pending', 'starting'].includes(gpu.value.status))
+const deploymentMessage = computed(() => {
+  if (destroying.value) return 'Destroying your GPU'
+  if (isCreating.value) return 'Deploying your new GPU'
+  return ''
+})
 
 const formState = reactive({
   name: '',
@@ -123,13 +127,13 @@ async function togglePower(toActive) {
     if (toActive) {
       await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/start/${gpu.value.id}`)
         .set('Authorization', `Bearer ${store.state.session._key}`)
+      startPoll(['active'])
     }
     else {
       await superagent.post(`${process.env.VUE_APP_ACCOUNT_API_URL}/v2/v1/vms/stop/${gpu.value.id}`)
         .set('Authorization', `Bearer ${store.state.session._key}`)
+      startPoll(['stopped'])
     }
-
-    startPoll(['active', 'deleted', 'stopped'])
   }
   catch (err) {
     error.value = err
@@ -143,16 +147,6 @@ async function updateName() {
 
 effect(() => {
   reload().then(() => {
-    if (gpu.value) {
-      if (isCreating.value) {
-        deploymentMessage.value = 'Deploying your new GPU'
-      } else if (destroying.value) {
-        deploymentMessage.value = 'Destroying your GPU'
-      } else {
-        deploymentMessage.value = ''
-      }
-    }
-
     if (!['active', 'deleted', 'stopped'].includes(gpu.value.status)) {
       startPoll(['active', 'deleted', 'stopped'])
     }

From 7cb1d36743a432a5b6f30da1f77f213a64d8b3a9 Mon Sep 17 00:00:00 2001
From: Andrei Radulescu <andi.radulescu@gmail.com>
Date: Wed, 23 Apr 2025 16:13:57 +0300
Subject: [PATCH 32/32] refactor: call createServerHostname directly in
 onMounted

---
 src/modules/gpu/views/GPUDeploy.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/modules/gpu/views/GPUDeploy.vue b/src/modules/gpu/views/GPUDeploy.vue
index 306332e6..1049d629 100644
--- a/src/modules/gpu/views/GPUDeploy.vue
+++ b/src/modules/gpu/views/GPUDeploy.vue
@@ -81,14 +81,10 @@ async function submit() {
   }
 }
 
-async function getHostname() {
+onMounted(async () => {
   const { hostname } = await utils.createServerHostname(process.env.VUE_APP_ACCOUNT_API_URL, store.state.session._key)
   formState.hostname = `${hostname}.edge.network`
   formState.name = hostname
-}
-
-onMounted(() => {
-  getHostname()
 })
 </script>