Merge pull request #17 from cloudblue/feature/LITE-27142

LITE-27142 Administrative UI
cloudblue · Apr 6, 2023 · d92fdab · d92fdab
2 parents 12e7a4e + 0d735b4
commit d92fdab
Show file tree

Hide file tree

Showing 16 changed files with 395 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,4 +14,5 @@
     * `ez-` for Connect SPA components replicas
     * `ui-` for ones imported from Connect UI Toolkit
   * Table columns now may be styled directly with a column descriptor `style` property
-* 0.2.3: Better handling of DB and Client Server errors
+* 0.2.3: Better handling of DB and Client Server errors
+* 0.3.0: Administrative UI
diff --git a/dbaas/extension.json b/dbaas/extension.json
@@ -1,9 +1,9 @@
 {
   "name": "DBaaS",
   "description": "On-demand provisioning of cloud-based database storages as a service.",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "audience": ["reseller", "distributor", "vendor"],
-  "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.2.3/README.md",
-  "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.2.3/CHANGELOG.md",
+  "readme_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.3.0/README.md",
+  "changelog_url": "https://github.com/cloudblue/connect-extension-dbaas/blob/0.3.0/CHANGELOG.md",
   "icon": "googleExtensionBaseline"
 }
diff --git a/dbaas/static/528e7daa04dc61e214a6.js b/dbaas/static/528e7daa04dc61e214a6.js
diff --git a/dbaas/static/6c5bb1bba5eebb952b58.js b/dbaas/static/6c5bb1bba5eebb952b58.js
diff --git a/...tatic/528e7daa04dc61e214a6.js.LICENSE.txt → ...tatic/6c5bb1bba5eebb952b58.js.LICENSE.txt b/...tatic/528e7daa04dc61e214a6.js.LICENSE.txt → ...tatic/6c5bb1bba5eebb952b58.js.LICENSE.txt
diff --git a/dbaas/static/index.html b/dbaas/static/index.html
@@ -1 +1 @@
-<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:400,500|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="528e7daa04dc61e214a6.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
+<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Mono:400,500|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="6c5bb1bba5eebb952b58.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
diff --git a/dbaas/static/main.css b/dbaas/static/main.css
diff --git a/package-lock.json b/package-lock.json
diff --git a/ui/app/api/databases.js b/ui/app/api/databases.js
@@ -11,8 +11,13 @@ export default rest(URL, {
     { body: data, ...opts },
   ),
 
-  activate: (id, opts = {}) => http.post(
-    `${URL}/${id}/activate`,
+  delete: (id, opts = {}) => http.delete(
+    `${URL}/${id}`,
     opts,
   ),
+
+  activate: (id, data, opts = {}) => http.post(
+    `${URL}/${id}/activate`,
+    { body: data, ...opts },
+  ),
 });
diff --git a/ui/app/app.js b/ui/app/app.js
@@ -24,6 +24,10 @@ createApp({
     },
   });
 
+  connectBus.watch('*', (ctx) => {
+    store.commit('setInstallationContext', ctx);
+  }, { immediate: true });
+
   const app = new Vue({
     store,
 

diff --git a/ui/app/store.js b/ui/app/store.js
@@ -4,4 +4,16 @@ import Vue from 'vue';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store();
+export default new Vuex.Store({
+  state: {
+    installationContext: {
+      isAdmin: false,
+    },
+  },
+
+  mutations: {
+    setInstallationContext(state, ctx) {
+      state.installationContext = Object.assign(state.installationContext, ctx);
+    },
+  },
+});
diff --git a/ui/app/styles/materialize.styl b/ui/app/styles/materialize.styl
@@ -29,6 +29,30 @@ input[type=text][materialize] {
   }
 }
 
+input[type=password][materialize] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  width: 100%
+  padding: 12px;
+  background: $theme-controls-background;
+  border: 1px solid $theme-border-color;
+  border-radius: 2px;
+
+  color: $base-text-color;
+  font-family: $theme-font-family;
+  font-size: $theme-font-size-smaller;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.2em;
+
+  &:focus-visible {
+    outline-width: 0;
+    border-color: $accent;
+  }
+}
+
 textarea[materialize] {
   appearance: none;
   -webkit-appearance: none;

diff --git a/ui/app/views/ActivateDialog.vue b/ui/app/views/ActivateDialog.vue
@@ -0,0 +1,187 @@
+<template lang="pug">
+ez-dialog(
+  v-model="dialogOpened",
+  width="800",
+  title="Activate database",
+)
+  ui-card(title="Access")
+    .detail-item._mt_0
+      .detail-item-head.item-label._mb_8 Username
+        sup.red._ml_4 *
+      .detail-item__text
+        input(required, v-model="form.credentials.username", type="text", materialize)
+
+    .detail-item
+      .detail-item-head.item-label._mb_8 Password
+        sup.red._ml_4 *
+      .detail-item__text
+        input(required, v-model="form.credentials.password", type="password" materialize)
+
+    .detail-item
+      .detail-item-head.item-label._mb_8 Host
+        sup.red._ml_4 *
+      .detail-item__text
+        input(required, v-model="form.credentials.host", type="text", materialize)
+
+    .detail-item
+      .detail-item-head.item-label._mb_8 DB Name
+      .detail-item__text
+        input(v-model="form.credentials.name", type="text", materialize)
+
+  ._mt_24
+
+  ui-card(title="General")
+    .detail-item._mt_0
+      .detail-item-head.item-label._mb_12 Workload type
+      .detail-item__text.vertical-middle
+        input#small(type="radio" v-model="form.workload" value="small", materialize)
+        label._ml_8(for="small", materialize) Small
+        ._ml_24
+        input#medium(type="radio" v-model="form.workload" value="medium", materialize)
+        label._ml_8(for="medium", materialize) Medium
+        ._ml_24
+        input#large._ml_24(type="radio" v-model="form.workload" value="large", materialize)
+        label._ml_8(for="large", materialize) Large
+
+  template(#actions="")
+    c-button(
+      mode="outlined",
+      label="Cancel",
+      @click="close",
+    )
+
+    c-button(
+      :disabled="!allowSaving",
+      mode="solid",
+      :loading="saving",
+      label="Activate",
+      color="accent",
+      @click="save",
+    )
+</template>
+
+<script>
+import {
+  clone,
+} from 'ramda';
+
+import {
+  mapActions,
+} from 'vuex';
+
+import {
+  template,
+} from '~utils';
+
+import ezDialog from '~components/ezDialog.vue';
+import cButton from '~components/cButton.vue';
+
+import databases from '~api/databases';
+
+
+
+const initialForm = () => ({
+  credentials: {
+    name: '',
+    host: '',
+    username: '',
+    password: '',
+  },
+  workload: 'small',
+});
+
+const prepareForm = template({
+  workload: ['workload'],
+  credentials: ['credentials'],
+});
+
+export default {
+  components: {
+    ezDialog,
+    cButton,
+  },
+
+  props: {
+    value: Boolean,
+    item: [Object, null],
+  },
+
+  data: () => ({
+    dialogOpened: false,
+    saving: false,
+    form: initialForm(),
+  }),
+
+  computed: {
+    isEdit: ({ item }) => Boolean(item),
+    allowSaving: ({ form }) => Boolean((
+      form.credentials.username
+      && form.credentials.password
+      && form.credentials.host
+    )),
+  },
+
+  methods: {
+    ...mapActions('bus', ['emit']),
+
+    close() {
+      this.dialogOpened = false;
+      this.$emit('closed');
+      this.form = initialForm();
+      this.users = [];
+      this.regions = [];
+    },
+
+    async save() {
+      this.saving = true;
+
+      try {
+        await databases.activate(this.item.id, prepareForm(this.form));
+
+        this.$emit('saved');
+        this.close();
+      } catch (e) {
+        this.emit({ name: 'snackbar:error', value: e });
+      }
+
+      this.saving = false;
+    },
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(v) {
+        const data = clone(this.item);
+        if (!data?.credentials) data.credentials = initialForm().credentials;
+        this.form = data;
+
+        this.dialogOpened = v;
+      },
+    },
+
+    dialogOpened(v) {
+      if (this.value !== v) this.$emit('input', v);
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+@import '~styles/common';
+</style>
+
+<style lang="stylus" scoped>
+@import '~styles/common';
+
+.red {
+  color: $nice-red;
+}
+
+.vertical-middle {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+}
+</style>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Roboto+Mono:400,500\|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="528e7daa04dc61e214a6.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
		<html><head><title>Lorem ipsum</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Roboto+Mono:400,500\|Material+Icons" rel="stylesheet"><link id="mock-favicon" rel="shortcut icon" href="#"><script defer="defer" src="6c5bb1bba5eebb952b58.js"></script><link href="main.css" rel="stylesheet"></head><body><div id="app"></div></body></html>