[CE-147] Add cluster management for vue

Fix vue dist directory no same with react

Change-Id: I1adafe892d7505f8a07060077c47c3f8a229f9a5
Signed-off-by: Haitao Yue <hightall@me.com>

Makefile

@@ -24,10 +24,18 @@ ifneq (${THEME}, basic)
 	else
 		INSTALL_NPM=npm-install
 	endif
-	ifneq ($(wildcard ./src/${STATIC_FOLDER}/js/dist),)
-		BUILD_JS=
+	ifeq (${THEME}, react)
+		ifneq ($(wildcard ./src/${STATIC_FOLDER}/js/dist),)
+			BUILD_JS=
+		else
+			BUILD_JS=build-js
+		endif
 	else
-		BUILD_JS=build-js
+		ifneq ($(wildcard ./src/${STATIC_FOLDER}/dist),)
+			BUILD_JS=
+		else
+			BUILD_JS=build-js
+		endif
 	endif
 	START_OPTIONS = initial-env $(INSTALL_NPM) $(BUILD_JS)
 else

src/themes/vue/static/src/api/cluster.js

@@ -0,0 +1,43 @@
+
+/* Copyright IBM Corp, All Rights Reserved.
+
+ SPDX-License-Identifier: Apache-2.0
+ */
+import axios from 'axios'
+import Urls from '@/config/Urls'
+import qs from 'qs'
+
+function getAllClusters (params) {
+  return axios.get(Urls.cluster.list, {params: params})
+}
+
+function getHosts () {
+  return axios.get(Urls.host.list, {params: {}})
+}
+
+export default {
+  getClusters (params, cb) {
+    axios.all([getAllClusters(params), getHosts()])
+      .then(axios.spread(function (cluster, host) {
+        cb({
+          host: host.data,
+          cluster: cluster.data
+        })
+      }))
+  },
+  deleteCluster (params, cb) {
+    axios.delete(Urls.cluster.delete, {data: params}).then(res => {
+      cb(res.data)
+    })
+  },
+  operateCluster (params, cb) {
+    axios.post(Urls.cluster.operation, qs.stringify(params)).then(res => {
+      cb(res.data)
+    })
+  },
+  createCluster (params, cb) {
+    axios.post(Urls.cluster.create, qs.stringify(params)).then(res => {
+      cb(res.data)
+    })
+  }
+}

src/themes/vue/static/src/pages/Chains/ChainModal.vue

@@ -0,0 +1,78 @@
+
+<!-- Copyright IBM Corp, All Rights Reserved.
+
+SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <Modal
+    v-model="visible"
+    title="Create a cluster"
+    ok-text="OK"
+    cancel-text="Cancel">
+    <Form ref="clusterForm" :model="formItem" :rules="ruleValidate" :label-width="80">
+      <FormItem label="Name" prop="name" :label-width="100">
+        <Input type="text" v-model="formItem.name" placeholder="Input chain name" />
+      </FormItem>
+      <FormItem label="Host" prop="host_id" :label-width="100">
+        <Select v-model="formItem.host_id" placeholder="Select a host">
+          <Option v-for="host in hosts" :value="host.id">{{host.name}}</Option>
+        </Select>
+      </FormItem>
+      <FormItem label="Network Type" :label-width="100">
+        <Select v-model="formItem.network_type">
+          <Option value="fabric-1.0">fabric-1.0</Option>
+        </Select>
+      </FormItem>
+      <FormItem label="Chain Size" :label-width="100">
+        <Select v-model="formItem.size">
+          <Option :value="4">4</Option>
+        </Select>
+      </FormItem>
+      <FormItem label="Consensus Plugin" :label-width="100">
+        <Select v-model="formItem.consensus_plugin" placeholder="Select consensus plugin">
+          <Option value="solo">SOLO</Option>
+          <Option value="kafka">KAFKA</Option>
+        </Select>
+      </FormItem>
+      <FormItem v-if="formItem.consensus_plugin === 'kafka'" label="Consensus Mode" :label-width="100">
+        <Select v-model="formItem.consensus_mode" placeholder="Select consensus mode">
+          <Option value="batch">BATCH</Option>
+        </Select>
+      </FormItem>
+    </Form>
+    <div slot="footer">
+      <Button type="text" @click="onCancel">Cancel</Button>
+      <Button type="primary" :loading="submitting" @click="submitForm">Ok</Button>
+    </div>
+    </Modal>
+</template>
+
+<script>
+  export default {
+    props: ['visible', 'onCancel', 'submitting', 'formItem', 'onOk', 'hosts', 'onSubmit'],
+    data () {
+      return {
+        ruleValidate: {
+          name: [
+            { required: true, message: 'Please input Cluster name', trigger: 'blur' }
+          ],
+          host_id: [
+            { required: true, message: 'Please Select a host', trigger: 'blur' }
+          ]
+        }
+      }
+    },
+    methods: {
+      submitForm () {
+        this.$refs['clusterForm'].validate((valid) => {
+          if (valid) {
+            this.onSubmit()
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+</style>

src/themes/vue/static/src/pages/Chains/ExpandRow.vue

@@ -0,0 +1,48 @@
+
+<!-- Copyright IBM Corp, All Rights Reserved.
+
+SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <div>
+    <Row class="expand-row">
+      <Col span="8">
+      <span class="expand-key">Create Time: </span>
+      <span class="expand-value">{{ chain.create_ts }}</span>
+      </Col>
+      <Col span="8">
+      <span class="expand-key">Network Type: </span>
+      <span class="expand-value">{{ chain.network_type }}</span>
+      </Col>
+      <Col span="8">
+      <span class="expand-key">Consensus Mode: </span>
+      <span class="expand-value">{{ chain.consensus_mode }}</span>
+      </Col>
+    </Row>
+    <Row class="expand-row">
+      <Col span="8">
+      <span class="expand-key">Host Type: </span>
+      <span class="expand-value">{{ host.type }}</span>
+      </Col>
+      <Col span="8">
+      <span class="expand-key">Host Capacity: </span>
+      <span class="expand-value">{{ host.capacity }}</span>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['chain', 'host']
+  }
+</script>
+
+<style scoped>
+  .expand-row {
+    margin-bottom: 16px;
+  }
+  .expand-key {
+    font-weight: bold;
+  }
+</style>

src/themes/vue/static/src/pages/Chains/Operation.vue

@@ -0,0 +1,70 @@
+
+<!-- Copyright IBM Corp, All Rights Reserved.
+
+SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <Dropdown @on-click="clickMenu">
+    <a href="javascript:void(0)">
+      Operations
+      <Icon type="arrow-down-b"></Icon>
+    </a>
+    <DropdownMenu slot="list">
+      <DropdownItem :disabled="cluster.status === 'running'" name="start">Start</DropdownItem>
+      <DropdownItem :disabled="cluster.status === 'stopped'" name="stop">Stop</DropdownItem>
+      <DropdownItem name="restart">Restart</DropdownItem>
+      <DropdownItem divided name="delete">Delete</DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+</template>
+
+<script>
+  export default {
+    props: ['cluster', 'onOperateCluster', 'onDelete'],
+    methods: {
+      clickMenu (name) {
+        const _that = this
+        switch (name) {
+          case 'delete':
+            this.$Modal.confirm({
+              title: 'Confirm to delete',
+              render: (h) => {
+                return h('div', {
+                  style: {
+                    paddingTop: '10px'
+                  }
+                }, [
+                  h('p', {}, [
+                    'Do you want to delete ',
+                    h('span', {
+                      style: {
+                        color: 'red',
+                        fontWeight: 'bold'
+                      }
+                    }, _that.cluster.name),
+                    ' ? This operation is irreversible.'
+                  ])
+                ])
+              },
+              okText: 'Ok',
+              cancelText: 'Cancel',
+              onOk () {
+                _that.onDelete({id: _that.cluster.id, col_name: 'active', name: _that.cluster.name})
+              }
+            })
+            break
+          case 'start':
+          case 'stop':
+          case 'restart':
+            this.onOperateCluster(this.cluster, name)
+            break
+          default:
+            break
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+</style>