added image loading and selection on frontend

Former-commit-id: e6469997

fda-container-service/services/src/main/java/at/tuwien/mapper/ImageMapper.java

@@ -18,6 +18,9 @@ import java.util.stream.Collectors;
 @Mapper(componentModel = "spring")
 public interface ImageMapper {
 
+    @Mappings({
+            @Mapping(target = "label", expression = "java(data.getRepository() + \":\" + data.getTag())")
+    })
     ImageBriefDto containerImageToImageBriefDto(ContainerImage data);
 
     ImageDto containerImageToImageDto(ContainerImage data);

fda-metadata-db/api/src/main/java/at/tuwien/api/container/image/ImageBriefDto.java

@@ -18,6 +18,10 @@ public class ImageBriefDto {
     @ApiModelProperty(required = true, example = "1")
     private Long id;
 
+    @NotBlank
+    @ApiModelProperty(required = true, example = "postgres:latest")
+    private String label;
+
     @NotBlank
     @ApiModelProperty(required = true, example = "postgres")
     private String repository;

fda-ui/.env

 # DB Service API url
 API_CONTAINER="http://localhost:9091"
+API_IMAGE="http://localhost:9091"
 API_DATABASE="http://localhost:9092"
 API_TABLES="http://localhost:9094"
 API_ANALYSE="http://localhost:5000"

fda-ui/components/dialogs/CreateDB.vue

@@ -14,9 +14,11 @@
         <v-select
           v-model="engine"
           label="Engine"
-          :items="[engine]"
+          :items="engines"
+          :loading="loading"
           item-text="label"
           :rules="[v => !!v || $t('Required')]"
+          return-object
           required />
       </v-form>
     </v-card-text>
@@ -44,19 +46,31 @@ export default {
     return {
       formValid: false,
       loading: false,
-      database: '',
-      engine: {
-        label: 'PostgreSQL, latest',
-        repo: 'postgres',
-        tag: 'latest'
-      },
-      container: ''
+      database: null,
+      engine: null,
+      engines: [],
+      container: null
     }
   },
+  beforeMount () {
+    this.getImages()
+  },
   methods: {
     cancel () {
       this.$parent.$parent.$parent.createDbDialog = false
     },
+    async getImages () {
+      this.loading = true
+      let res
+      try {
+        res = await this.$axios.get('/api/image/')
+        this.engines = res.data
+        console.debug('engines', this.engines)
+      } catch (err) {
+        this.$toast.error('Failed to fetch supported engines. Try reload the page.')
+      }
+      this.loading = false
+    },
     async createDB () {
       this.loading = true
 
@@ -73,10 +87,11 @@ export default {
       // create a container
       let containerId
       const isPublic = false
+      console.debug('model', this.engine)
       try {
         res = await this.$axios.post('/api/container/', {
           name: this.database,
-          repository: this.engine.repo,
+          repository: this.engine.repository,
           tag: this.engine.tag
         })
         containerId = res.data.id
@@ -122,5 +137,4 @@ export default {
     }
   }
 }
-
 </script>

fda-ui/nuxt.config.js

@@ -65,6 +65,7 @@ export default {
 
   proxy: {
     '/api/container': process.env.API_CONTAINER,
+    '/api/image': process.env.API_IMAGE,
     '/api/database': process.env.API_DATABASE,
     '/api/analyse': process.env.API_ANALYSE,
     '/api/tables': { target: process.env.API_TABLES, pathRewrite: { '^/api/tables/': '' } }

fda-ui/pages/db/_db_id/tables/index.vue

@@ -3,19 +3,23 @@
     <DBToolbar v-model="db" />
     <TableList />
     <TableCreate />
-    <TableFromCSV></TableFromCSV>
+    <v-card class="mt-1">
+      <v-card-text>
+        <nuxt-link class="table_from_csv" :to="`/db/${$route.params.db_id}/tables/table_from_csv`">
+          Create table from CSV file
+        </nuxt-link>
+      </v-card-text>
+    </v-card>
   </div>
 </template>
 <script>
 import TableList from '@/components/TableList'
 import TableCreate from '@/components/TableCreate'
 import DBToolbar from '@/components/DBToolbar'
-import TableFromCSV from './table_from_csv'
 
 export default {
   name: 'Tables',
   components: {
-    TableFromCSV,
     TableList,
     TableCreate,
     DBToolbar
@@ -32,5 +36,8 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+a.table_from_csv {
+  font-size: 14pt;
+}
 </style>