Skip to content

Commit 2905dcc

Browse files
hightallhightall
committed
[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>
1 parent 41a7a30 commit 2905dcc

File tree

10 files changed

+597
-25
lines changed

10 files changed

+597
-25
lines changed

‎Makefile‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,18 @@ ifneq (${THEME}, basic)
2424
else
2525
INSTALL_NPM=npm-install
2626
endif
27-
ifneq ($(wildcard ./src/${STATIC_FOLDER}/js/dist),)
28-
BUILD_JS=
27+
ifeq (${THEME}, react)
28+
ifneq ($(wildcard ./src/${STATIC_FOLDER}/js/dist),)
29+
BUILD_JS=
30+
else
31+
BUILD_JS=build-js
32+
endif
2933
else
30-
BUILD_JS=build-js
34+
ifneq ($(wildcard ./src/${STATIC_FOLDER}/dist),)
35+
BUILD_JS=
36+
else
37+
BUILD_JS=build-js
38+
endif
3139
endif
3240
START_OPTIONS = initial-env $(INSTALL_NPM) $(BUILD_JS)
3341
else

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
/* Copyright IBM Corp, All Rights Reserved.
3+
4+
SPDX-License-Identifier: Apache-2.0
5+
*/
6+
import axios from 'axios'
7+
import Urls from '@/config/Urls'
8+
import qs from 'qs'
9+
10+
function getAllClusters (params) {
11+
return axios.get(Urls.cluster.list, {params: params})
12+
}
13+
14+
function getHosts () {
15+
return axios.get(Urls.host.list, {params: {}})
16+
}
17+
18+
export default {
19+
getClusters (params, cb) {
20+
axios.all([getAllClusters(params), getHosts()])
21+
.then(axios.spread(function (cluster, host) {
22+
cb({
23+
host: host.data,
24+
cluster: cluster.data
25+
})
26+
}))
27+
},
28+
deleteCluster (params, cb) {
29+
axios.delete(Urls.cluster.delete, {data: params}).then(res => {
30+
cb(res.data)
31+
})
32+
},
33+
operateCluster (params, cb) {
34+
axios.post(Urls.cluster.operation, qs.stringify(params)).then(res => {
35+
cb(res.data)
36+
})
37+
},
38+
createCluster (params, cb) {
39+
axios.post(Urls.cluster.create, qs.stringify(params)).then(res => {
40+
cb(res.data)
41+
})
42+
}
43+
}

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
2+
<!-- Copyright IBM Corp, All Rights Reserved.
3+
4+
SPDX-License-Identifier: Apache-2.0
5+
-->
6+
<template>
7+
<Modal
8+
v-model="visible"
9+
title="Create a cluster"
10+
ok-text="OK"
11+
cancel-text="Cancel">
12+
<Form ref="clusterForm" :model="formItem" :rules="ruleValidate" :label-width="80">
13+
<FormItem label="Name" prop="name" :label-width="100">
14+
<Input type="text" v-model="formItem.name" placeholder="Input chain name" />
15+
</FormItem>
16+
<FormItem label="Host" prop="host_id" :label-width="100">
17+
<Select v-model="formItem.host_id" placeholder="Select a host">
18+
<Option v-for="host in hosts" :value="host.id">{{host.name}}</Option>
19+
</Select>
20+
</FormItem>
21+
<FormItem label="Network Type" :label-width="100">
22+
<Select v-model="formItem.network_type">
23+
<Option value="fabric-1.0">fabric-1.0</Option>
24+
</Select>
25+
</FormItem>
26+
<FormItem label="Chain Size" :label-width="100">
27+
<Select v-model="formItem.size">
28+
<Option :value="4">4</Option>
29+
</Select>
30+
</FormItem>
31+
<FormItem label="Consensus Plugin" :label-width="100">
32+
<Select v-model="formItem.consensus_plugin" placeholder="Select consensus plugin">
33+
<Option value="solo">SOLO</Option>
34+
<Option value="kafka">KAFKA</Option>
35+
</Select>
36+
</FormItem>
37+
<FormItem v-if="formItem.consensus_plugin === 'kafka'" label="Consensus Mode" :label-width="100">
38+
<Select v-model="formItem.consensus_mode" placeholder="Select consensus mode">
39+
<Option value="batch">BATCH</Option>
40+
</Select>
41+
</FormItem>
42+
</Form>
43+
<div slot="footer">
44+
<Button type="text" @click="onCancel">Cancel</Button>
45+
<Button type="primary" :loading="submitting" @click="submitForm">Ok</Button>
46+
</div>
47+
</Modal>
48+
</template>
49+
50+
<script>
51+
export default {
52+
props: ['visible', 'onCancel', 'submitting', 'formItem', 'onOk', 'hosts', 'onSubmit'],
53+
data () {
54+
return {
55+
ruleValidate: {
56+
name: [
57+
{ required: true, message: 'Please input Cluster name', trigger: 'blur' }
58+
],
59+
host_id: [
60+
{ required: true, message: 'Please Select a host', trigger: 'blur' }
61+
]
62+
}
63+
}
64+
},
65+
methods: {
66+
submitForm () {
67+
this.$refs['clusterForm'].validate((valid) => {
68+
if (valid) {
69+
this.onSubmit()
70+
}
71+
})
72+
}
73+
}
74+
}
75+
</script>
76+
77+
<style>
78+
</style>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
<!-- Copyright IBM Corp, All Rights Reserved.
3+
4+
SPDX-License-Identifier: Apache-2.0
5+
-->
6+
<template>
7+
<div>
8+
<Row class="expand-row">
9+
<Col span="8">
10+
<span class="expand-key">Create Time: </span>
11+
<span class="expand-value">{{ chain.create_ts }}</span>
12+
</Col>
13+
<Col span="8">
14+
<span class="expand-key">Network Type: </span>
15+
<span class="expand-value">{{ chain.network_type }}</span>
16+
</Col>
17+
<Col span="8">
18+
<span class="expand-key">Consensus Mode: </span>
19+
<span class="expand-value">{{ chain.consensus_mode }}</span>
20+
</Col>
21+
</Row>
22+
<Row class="expand-row">
23+
<Col span="8">
24+
<span class="expand-key">Host Type: </span>
25+
<span class="expand-value">{{ host.type }}</span>
26+
</Col>
27+
<Col span="8">
28+
<span class="expand-key">Host Capacity: </span>
29+
<span class="expand-value">{{ host.capacity }}</span>
30+
</Col>
31+
</Row>
32+
</div>
33+
</template>
34+
35+
<script>
36+
export default {
37+
props: ['chain', 'host']
38+
}
39+
</script>
40+
41+
<style scoped>
42+
.expand-row {
43+
margin-bottom: 16px;
44+
}
45+
.expand-key {
46+
font-weight: bold;
47+
}
48+
</style>

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
2+
<!-- Copyright IBM Corp, All Rights Reserved.
3+
4+
SPDX-License-Identifier: Apache-2.0
5+
-->
6+
<template>
7+
<Dropdown @on-click="clickMenu">
8+
<a href="javascript:void(0)">
9+
Operations
10+
<Icon type="arrow-down-b"></Icon>
11+
</a>
12+
<DropdownMenu slot="list">
13+
<DropdownItem :disabled="cluster.status === 'running'" name="start">Start</DropdownItem>
14+
<DropdownItem :disabled="cluster.status === 'stopped'" name="stop">Stop</DropdownItem>
15+
<DropdownItem name="restart">Restart</DropdownItem>
16+
<DropdownItem divided name="delete">Delete</DropdownItem>
17+
</DropdownMenu>
18+
</Dropdown>
19+
</template>
20+
21+
<script>
22+
export default {
23+
props: ['cluster', 'onOperateCluster', 'onDelete'],
24+
methods: {
25+
clickMenu (name) {
26+
const _that = this
27+
switch (name) {
28+
case 'delete':
29+
this.$Modal.confirm({
30+
title: 'Confirm to delete',
31+
render: (h) => {
32+
return h('div', {
33+
style: {
34+
paddingTop: '10px'
35+
}
36+
}, [
37+
h('p', {}, [
38+
'Do you want to delete ',
39+
h('span', {
40+
style: {
41+
color: 'red',
42+
fontWeight: 'bold'
43+
}
44+
}, _that.cluster.name),
45+
' ? This operation is irreversible.'
46+
])
47+
])
48+
},
49+
okText: 'Ok',
50+
cancelText: 'Cancel',
51+
onOk () {
52+
_that.onDelete({id: _that.cluster.id, col_name: 'active', name: _that.cluster.name})
53+
}
54+
})
55+
break
56+
case 'start':
57+
case 'stop':
58+
case 'restart':
59+
this.onOperateCluster(this.cluster, name)
60+
break
61+
default:
62+
break
63+
}
64+
}
65+
}
66+
}
67+
</script>
68+
69+
<style>
70+
</style>

0 commit comments

Comments
 (0)