core:frontend: Add Load/Install ext frontend

Author: joaomariolago

core/frontend/src/components/kraken/KrakenManager.ts

@@ -1,9 +1,11 @@
 import {
   ExtensionData,
+  ExtensionUploadResponse,
   InstalledExtensionData,
   Manifest,
   ManifestSource,
   RunningContainer,
+  UploadProgressEvent,
 } from '@/types/kraken'
 import back_axios from '@/utils/api'
 
@@ -335,6 +337,74 @@ export async function getContainerLogs(
   })
 }
 
+/**
+ * Upload a tar file containing a Docker image and extract metadata
+ * @param {File} file The tar file to upload
+ * @returns {Promise<{temp_tag: string, metadata: any, image_name: string}>}
+ */
+export async function uploadExtensionTarFile(
+  file: File,
+  progressHandler?: (event: UploadProgressEvent) => void,
+): Promise<ExtensionUploadResponse> {
+  const formData = new FormData()
+  formData.append('file', file)
+
+  const response = await back_axios({
+    method: 'POST',
+    url: `${KRAKEN_API_V2_URL}/extension/upload`,
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    timeout: 120000,
+    onUploadProgress: progressHandler,
+  })
+
+  return response.data
+}
+
+/**
+ * Keep a temporary uploaded extension alive while the user configures metadata.
+ * @param {string} tempTag The temporary tag returned by the upload endpoint
+ * @returns {Promise<void>}
+ */
+export async function keepTemporaryExtensionAlive(tempTag: string): Promise<void> {
+  await back_axios({
+    method: 'POST',
+    url: `${KRAKEN_API_V2_URL}/extension/upload/keep-alive?temp_tag=${tempTag}`,
+    timeout: 10000,
+  })
+}
+
+/**
+ * Finalize a temporary extension by assigning a valid identifier and installing it
+ * @param {InstalledExtensionData} extension The extension data to finalize
+ * @param {string} tempTag The temporary tag from upload response
+ * @param {function} progressHandler The progress handler for the download
+ * @returns {Promise<void>}
+ */
+export async function finalizeExtension(
+  extension: InstalledExtensionData,
+  tempTag: string,
+  progressHandler: (event: any) => void,
+): Promise<void> {
+  await back_axios({
+    method: 'POST',
+    url: `${KRAKEN_API_V2_URL}/extension/upload/finalize?temp_tag=${tempTag}`,
+    data: {
+      identifier: extension.identifier,
+      name: extension.name,
+      docker: extension.docker,
+      tag: extension.tag,
+      enabled: true,
+      permissions: extension?.permissions ?? '',
+      user_permissions: extension?.user_permissions ?? '',
+    },
+    timeout: 120000,
+    onDownloadProgress: progressHandler,
+  })
+}
+
 export default {
   fetchManifestSources,
   fetchManifestSource,
@@ -357,4 +427,7 @@ export default {
   listContainers,
   getContainersStats,
   getContainerLogs,
+  uploadExtensionTarFile,
+  keepTemporaryExtensionAlive,
+  finalizeExtension,
 }

core/frontend/src/components/kraken/modals/ExtensionCreationModal.vue

@@ -9,7 +9,7 @@
   >
     <v-card>
       <v-card-title class="d-flex align-center justify-space-between">
-        <span>{{ is_editing ? 'Edit' : 'Create' }} Extension</span>
+        <span>{{ is_editing ? 'Edit' : (is_from_upload ? 'Configure Uploaded' : 'Create') }} Extension</span>
         <v-btn
           icon
           x-small
@@ -89,7 +89,7 @@
           :disabled="!valid_permissions"
           @click="saveExtension"
         >
-          {{ is_editing ? 'Save' : 'Create' }}
+          {{ is_editing ? 'Save' : (is_from_upload ? 'Install' : 'Create') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -118,6 +118,10 @@ export default Vue.extend({
       type: Object as PropType<InstalledExtensionData & { editing: boolean } | null>,
       default: null,
     },
+    tempTag: {
+      type: String,
+      default: null,
+    },
   },
 
   data() {
@@ -141,6 +145,9 @@ export default Vue.extend({
     is_editing() {
       return this.extension?.editing ?? false
     },
+    is_from_upload() {
+      return Boolean(this.tempTag)
+    },
     is_reset_editing_permissions_visible() {
       return this.new_permissions !== this.extension?.permissions
     },

core/frontend/src/types/kraken.ts

@@ -94,8 +94,27 @@ export interface Manifest extends ManifestSource {
   data?: [ExtensionData]
 }
 
-export interface ProgressEvent {
+export interface StreamProgressEvent {
     currentTarget: {
         response: string
     }
-}
+}
+
+export interface UploadProgressEvent {
+    loaded: number
+    total?: number
+}
+
+export interface ExtensionUploadMetadata {
+    identifier?: string
+    name?: string
+    docker?: string
+    tag?: string
+    permissions?: JSONValue
+}
+
+export interface ExtensionUploadResponse {
+    temp_tag: string
+    metadata: ExtensionUploadMetadata
+    image_name: string
+}