✨ : add credentials list page

src/main/client/app/pages/credentials/credentials-routes.js

@@ -0,0 +1,14 @@
+const credentialsRoutes = [
+  {
+    path: '/credentials',
+    name: 'credentials',
+    component: () => import(/* webpackChunkName: "chunk-stacks" */ '@/pages/credentials/credentials.vue'),
+    meta: {
+      authorities: ['ROLE_USER'],
+      breadcrumb: [{ text: 'Credentials' }],
+      title: 'Gaia - Credentials',
+    },
+  },
+];
+
+export default credentialsRoutes;

src/main/client/app/pages/credentials/credentials.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <b-button
+      :to="{ name: 'new_credentials' }"
+      title="Create new credentials"
+      variant="success"
+      class="mb-4"
+    >
+      <font-awesome-icon icon="plus" /> Create new credentials
+    </b-button>
+
+    <b-card-group deck>
+      <b-card
+        v-for="credentials in credentialsList"
+        :key="credentials.id"
+        :title="credentials.name"
+        style="max-width: 20rem;"
+        :header-class="credentials.provider"
+      >
+        <template v-slot:header>
+          <b-img
+            :src="imageUrl(credentials)"
+            class="rounded-logo"
+            rounded="circle"
+            width="80px"
+            height="80px"
+            left
+          />
+          <p class="providerName">
+            {{ providerName(credentials) }}
+          </p>
+        </template>
+
+        <b-button
+          :to="{ name: 'credentials', params: { credentialsId: credentials.id }}"
+          title="Edit this credentials"
+          variant="primary"
+          class="mr-1"
+        >
+          <font-awesome-icon icon="edit" />
+        </b-button>
+      </b-card>
+    </b-card-group>
+  </div>
+</template>
+
+<script>
+  import { getCredentialsList } from '@/shared/api/credentials-api';
+
+  export default {
+    name: 'Credentials',
+
+    data: function data() {
+      return {
+        credentialsList: [],
+      };
+    },
+
+    async created() {
+      this.credentialsList = await getCredentialsList();
+    },
+
+    methods: {
+      imageUrl(credentials) {
+        console.log(`@/assets/images/providers/${JSON.stringify(credentials)}.png`);
+        // eslint-disable-next-line global-require, import/no-dynamic-require
+        return require(`@/assets/images/providers/logos/${credentials.provider}.png`);
+      },
+
+      providerName(credentials) {
+        return {
+          aws: 'AWS',
+          google: 'GCP',
+          azurerm: 'Azure',
+        }[credentials.provider];
+      },
+    },
+
+  };
+</script>
+
+<style scoped>
+  .card-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .card-header img {
+    margin-right: 1rem;
+  }
+
+  .card-header.google {
+    background-color: #2f6fd8;
+  }
+
+  .card-header.aws {
+    background-color: #ea8c00;
+  }
+
+  .card-header.azurerm {
+    background-color: #007cc1;
+  }
+
+  .rounded-logo {
+    background-color: white;
+  }
+
+  .providerName {
+    color: white;
+    font-weight: bold;
+    font-size: x-large;
+  }
+</style>

src/main/client/app/pages/credentials/index.js

@@ -0,0 +1 @@
+export { default as credentialsRoutes } from '@/pages/credentials/credentials-routes';

src/main/client/app/router.js

@@ -5,6 +5,7 @@ import { loginRoutes } from '@/pages/login';
 import { dashboardRoutes } from '@/pages/dashboard';
 import { modulesRoutes } from '@/pages/modules';
 import { stacksRoutes } from '@/pages/stacks';
+import { credentialsRoutes } from '@/pages/credentials';
 import { settingsRoutes } from '@/pages/settings';
 import { usersRoutes } from '@/pages/users';
 
@@ -45,6 +46,7 @@ const router = new VueRouter({
     ...dashboardRoutes,
     ...modulesRoutes,
     ...stacksRoutes,
+    ...credentialsRoutes,
     ...settingsRoutes,
     ...usersRoutes,
     ...appRoutes,

src/main/client/app/shared/api/credentials-api.js

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const getCredentialsList = async () => axios.get('/api/credentials');
+
+export const getCredentials = async (credentialsId) => axios.get(`/api/credentials/${credentialsId}`);
+
+export const updateCredentials = async (credentials) => axios.put(`/api/credentials/${credentials.id}`, credentials);
+
+export const createCredentials = async (credentials) => axios.post('/api/credentials', credentials);

src/main/client/app/shared/components/sidebar/side-bar-links.vue

@@ -35,6 +35,9 @@
         {
           route: 'stacks', icon: 'layer-group', class: 'blue2_color', title: 'Stacks', roles: ['ROLE_USER'],
         },
+        {
+          route: 'credentials', icon: 'lock', class: 'orange_color', title: 'Credentials', roles: ['ROLE_USER'],
+        },
         {
           route: 'settings', icon: 'cog', class: 'yellow_color', title: 'Settings', roles: ['ROLE_ADMIN'],
         },

src/main/java/io/gaia_app/credentials/Credentials.kt

@@ -12,30 +12,32 @@ import com.fasterxml.jackson.annotation.JsonTypeInfo.Id.NAME
 
 @JsonTypeInfo(use = NAME, include = PROPERTY, property = "provider")
 @JsonSubTypes(
-    Type(value = AWSCredentials::class, name = "AWS"),
-    Type(value = GCPCredentials::class, name = "GCP"),
-    Type(value = AzureCredentials::class, name = "Azure")
+    Type(value = AWSCredentials::class, name = "aws"),
+    Type(value = GoogleCredentials::class, name = "google"),
+    Type(value = AzureRMCredentials::class, name = "azurerm")
 )
 abstract class Credentials {
 
     @Id
     lateinit var id: String
 
+    lateinit var name: String
+
     abstract fun toEnv(): List<String>
     abstract fun provider(): String
 }
 
 data class AWSCredentials(val accessKey:String, val secretKey:String):Credentials() {
-    override fun toEnv() = listOf("""AWS_ACCESS_KEY_ID=${accessKey}""", """AWS_SECRET_ACCESS_KEY=${secretKey}""")
-    override fun provider() = "AWS"
+    override fun toEnv() = listOf("AWS_ACCESS_KEY_ID=$accessKey", "AWS_SECRET_ACCESS_KEY=$secretKey")
+    override fun provider() = "aws"
 }
 
-data class GCPCredentials(val serviceAccountJSONContents:String):Credentials() {
-    override fun toEnv() = listOf("""GOOGLE_CREDENTIALS=${serviceAccountJSONContents}""")
-    override fun provider() = "GCP"
+data class GoogleCredentials(val serviceAccountJSONContents:String):Credentials() {
+    override fun toEnv() = listOf("GOOGLE_CREDENTIALS=$serviceAccountJSONContents")
+    override fun provider() = "google"
 }
 
-data class AzureCredentials(val clientId:String, val clientSecret:String):Credentials() {
-    override fun toEnv() = listOf("""ARM_CLIENT_ID=${clientId}""", """ARM_CLIENT_SECRET=${clientSecret}""")
-    override fun provider() = "Azure"
+data class AzureRMCredentials(val clientId:String, val clientSecret:String):Credentials() {
+    override fun toEnv() = listOf("ARM_CLIENT_ID=$clientId", "ARM_CLIENT_SECRET=$clientSecret")
+    override fun provider() = "azurerm"
 }