Dev (#25)

* Synchronizing code from bitbucket repository

* Removing TomSelect because it is no longer updated

* Metric template remove restriction

* Multiple environment variables fix

* - Setting dark mode by default in the login window
- Providing better view of current build id and build environment for debugging
- Added environment variables to set_env.sh so that they can be set during build

* Application saving and traversing through the ui fixed #8 #11

* Fixing ts errors on Error handling

* Adding build specific information for better debugging

* Added new button to duplicate application

* Bug fixes and improvements

---------

Co-authored-by: Fotis Paraskevopoulos <[email protected]>

gui/src/components/Application/Resources.vue

@@ -54,18 +54,21 @@ const props = withDefaults(defineProps<ResourcesProps>(), {
 
 const resources = computed<Array<IAppResource>>(() =>
 
-  resourceStore.resources.results.map((resource) => {
-    // prettier-ignore
-    const isEnabled = props.payload.appResources
+    resourceStore.resources.results.map((resource) => {
+      const regions = Array.isArray(resource.regions)
+          ? resource.regions.map((region) => region.region).join(', ')
+          : resource.regions;
+
+      const isEnabled = props.payload.appResources
         .find((appResource: IAppResource) => appResource.uuid === resource.uuid)?.enabled ?? false
-    return {
-      uuid: resource.uuid,
-      title: resource.title,
-      platform: resource.platform.title,
-      regions: resource.regions,
-      enabled: isEnabled
+      return {
+        uuid: resource.uuid,
+        title: resource.title,
+        platform: resource.platform.title,
+        regions: regions,
+        enabled: isEnabled
     }
-  })
+    })
 )
 
 const retrieveAllResources = async () => {

gui/src/components/Modal/DuplicationConfirmation.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col text-start">
+    <div class="p-5 text-center">
+      <Lucide icon="Copy" class="w-16 h-16 mx-auto mt-3 text-primary" />
+      <div class="mt-5 text-3xl">Confirm Duplication</div>
+      <div class="mt-2 text-slate-500">
+        Do you want to duplicate the selected application? <br />
+        This action will create a new application based on the original.
+      </div>
+    </div>
+    <div class="px-5 pb-8 text-center">
+      <Button type="button" variant="outline-secondary" @click="cancelAction" class="w-24 mr-1"> Cancel </Button>
+      <Button type="button" variant="primary" class="w-24" @click="confirmAction"> Duplicate </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from "@/base-components/Button"
+import Lucide from "@/base-components/Lucide"
+import { useUIStore } from "@/store/modules/ui.ts"
+
+const props = defineProps({
+  payload: {
+    type: Object,
+    default: () => ({
+      itemType: "",
+      itemName: "",
+      cancelAction: () => {},
+      confirmAction: () => {
+        console.log("No action performed")
+      }
+    })
+  }
+})
+
+const uiStore = useUIStore()
+
+const closeModal = () => {
+  uiStore.setModalWindowState()
+}
+
+const cancelAction = () => {
+  props.payload?.cancelAction()
+  closeModal()
+}
+
+const confirmAction = () => {
+  props.payload.confirmAction()
+  closeModal()
+}
+</script>

gui/src/components/Modal/ResourceCreation.vue

@@ -24,6 +24,7 @@ import {SNACKBAR_MESSAGE_TYPES} from "@/constants"
 import {IResourcePayload} from "@/types/resource.ts"
 import ResourceForm from "@/components/Modal/ResourceForm.vue";
 import {IPlatform} from "@/interfaces/platform.interface.ts";
+import { IRegion } from "@/interfaces/resources.interface.ts"
 
 const resourceStore = useResourceStore()
 const uiStore = useUIStore()
@@ -67,24 +68,30 @@ const closeModal = (skipConfirmation: boolean = false) => {
 
 
 const createResource = async () => {
-  if (!(await v$.value.$validate())){
-    console.log("Failed validation")
-    return
+  // Map regions from objects to string (comma-separated region identifiers)
+  if (Array.isArray(resourceData.regions)) {
+    resourceData.regions = resourceData.regions.map((region: IRegion) => region.region).join(',');
+  }
+
+  if (!(await v$.value.$validate())) {
+    console.log("Failed validation");
+    return;
   }
 
   resourceStore
-    .createResource(resourceData)
-    .then((createdResource) => {
-      closeModal(true)
-      uiStore.setSnackbarMessage({
-        message: `Successfully created resource ${createdResource.title}`,
-        type: SNACKBAR_MESSAGE_TYPES.SUCCESS
+      .createResource(resourceData)
+      .then((createdResource) => {
+        closeModal(true);
+        uiStore.setSnackbarMessage({
+          message: `Successfully created resource ${createdResource.title}`,
+          type: SNACKBAR_MESSAGE_TYPES.SUCCESS
+        });
       })
-    })
-    .catch((error) => {
-      const errors = extractExternalResults(error)
-      Object.assign($externalResults, errors)
-    })
-}
+      .catch((error) => {
+        const errors = extractExternalResults(error);
+        Object.assign($externalResults, errors);
+      });
+};
+
 
 </script>