storage: resize volume form (#171)

Fixes #165

Co-authored-by: Rohit Yadav <rohit@apache.org>
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/config/section/storage.js

@@ -107,7 +107,8 @@ export default {
           icon: 'fullscreen',
           label: 'Resize Volume',
           dataView: true,
-          args: ['size']
+          popup: true,
+          component: () => import('@/views/storage/ResizeVolume.vue')
         },
         {
           api: 'migrateVolume',

ui/src/views/storage/CreateVolume.vue

@@ -110,7 +110,8 @@ export default {
     fetchDiskOfferings (zoneId) {
       this.loading = true
       api('listDiskOfferings', {
-        zoneId: zoneId
+        zoneid: zoneId,
+        listall: true
       }).then(json => {
         this.offerings = json.listdiskofferingsresponse.diskoffering || []
         this.selectedDiskOfferingId = this.offerings[0].id || ''

ui/src/views/storage/ResizeVolume.vue

@@ -0,0 +1,156 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout">
+    <a-form :form="form" layout="vertical">
+      <a-form-item :label="$t('diskoffering')" v-if="resource.type !== 'ROOT'">
+        <a-select
+          v-decorator="['diskofferingid', {
+            initialValue: selectedDiskOfferingId,
+            rules: [{ required: true, message: 'Please select an option' }]}]"
+          :loading="loading"
+          :placeholder="$t('Offering Type')"
+          @change="id => (customDiskOffering = offerings.filter(x => x.id === id)[0].iscustomized || false)"
+        >
+          <a-select-option
+            v-for="(offering, index) in offerings"
+            :value="offering.id"
+            :key="index"
+          >{{ offering.displaytext || offering.name }}</a-select-option>
+        </a-select>
+      </a-form-item>
+      <div v-if="customDiskOffering || resource.type === 'ROOT'">
+        <a-form-item :label="$t('Size (GB)')">
+          <a-input
+            v-decorator="['size', {
+              rules: [{ required: true, message: 'Please enter size in GB' }]}]"
+            :placeholder="$t('Enter Size')"/>
+        </a-form-item>
+      </div>
+      <a-form-item :label="$t('shrinkok')">
+        <a-checkbox v-decorator="['shrinkok']" />
+      </a-form-item>
+      <div :span="24" class="action-button">
+        <a-button @click="closeModal">{{ $t('cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('ok') }}</a-button>
+      </div>
+    </a-form>
+  </div>
+</template>
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'ResizeVolume',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      offerings: [],
+      selectedDiskOfferingId: '',
+      customDiskOffering: false,
+      loading: false
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.loading = true
+      api('listDiskOfferings', {
+        zoneid: this.resource.zoneid,
+        listall: true
+      }).then(json => {
+        this.offerings = json.listdiskofferingsresponse.diskoffering || []
+        this.selectedDiskOfferingId = this.offerings[0].id || ''
+        this.customDiskOffering = this.offerings[0].iscustomized || false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleSubmit (e) {
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        this.loading = true
+        values.id = this.resource.id
+        api('resizeVolume', values).then(response => {
+          this.$pollJob({
+            jobId: response.resizevolumeresponse.jobid,
+            successMessage: 'Successfully resized volume',
+            successMethod: () => {
+              this.$store.dispatch('AddAsyncJob', {
+                title: `Successfully resized Volume`,
+                jobid: response.resizevolumeresponse.jobid,
+                description: values.name,
+                status: 'progress'
+              })
+            },
+            errorMessage: 'Failed to resize volume',
+            errorMethod: () => {
+              this.closeModal()
+            },
+            loadingMessage: `Volume resize is in progress`,
+            catchMessage: 'Error encountered while fetching async job result',
+            catchMethod: () => {
+              this.loading = false
+              this.closeModal()
+            }
+          })
+        }).catch(error => {
+          this.$notification.error({
+            message: `Error ${error.response.status}`,
+            description: error.response.data.errorresponse.errortext,
+            duration: 0
+          })
+        }).finally(() => {
+          this.loading = false
+          this.closeModal()
+        })
+      })
+    },
+    closeModal () {
+      this.$emit('refresh-data')
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.form-layout {
+  width: 75vw;
+  @media (min-width: 700px) {
+    width: 40vw;
+  }
+}
+.action-button {
+  text-align: right;
+  button {
+    margin-right: 5px;
+  }
+}
+</style>