From 41a7a309b07ebecfbfbb4d09472ea18a3a38e43f Mon Sep 17 00:00:00 2001
From: Haitao Yue <hightall@me.com>
Date: Tue, 26 Sep 2017 23:36:39 +0800
Subject: [PATCH] [CE-146] Add host management page

Change build-js, npm-install support for react, vue

Change-Id: I31d6bace040491de4fc03bb4d8d149c840117f67
Signed-off-by: Haitao Yue <hightall@me.com>
---
 Makefile                                      |  10 +-
 docker-compose-build-js.yml                   |   5 +-
 docker-compose-npm-install.yml                |   3 +-
 .../{build_vuejs.sh => build_js.sh}           |   4 +-
 scripts/master_node/npm_install.sh            |   2 +-
 src/themes/vue/static/package.json            |   1 +
 src/themes/vue/static/src/api/host.js         |  36 ++++
 src/themes/vue/static/src/config/Urls.js      |  25 +++
 .../vue/static/src/pages/Host/HostModal.vue   | 169 ++++++++++++++++
 .../vue/static/src/pages/Host/Operation.vue   | 102 ++++++++++
 .../vue/static/src/pages/Host/index.vue       | 181 ++++++++++++++++++
 src/themes/vue/static/src/pages/HostPage.vue  |  18 --
 src/themes/vue/static/src/router/index.js     |   2 +-
 src/themes/vue/static/src/store/hosts.js      |  94 +++++++++
 src/themes/vue/static/src/store/index.js      |   4 +-
 15 files changed, 623 insertions(+), 33 deletions(-)
 rename scripts/master_node/{build_vuejs.sh => build_js.sh} (86%)
 create mode 100644 src/themes/vue/static/src/api/host.js
 create mode 100644 src/themes/vue/static/src/config/Urls.js
 create mode 100644 src/themes/vue/static/src/pages/Host/HostModal.vue
 create mode 100644 src/themes/vue/static/src/pages/Host/Operation.vue
 create mode 100644 src/themes/vue/static/src/pages/Host/index.vue
 delete mode 100644 src/themes/vue/static/src/pages/HostPage.vue
 create mode 100644 src/themes/vue/static/src/store/hosts.js

diff --git a/Makefile b/Makefile
index c89247588..348d988b2 100644
--- a/Makefile
+++ b/Makefile
@@ -18,13 +18,13 @@ else
 	SED = sed -i
 endif
 
-ifeq (${THEME}, react)
-	ifneq ($(wildcard ./src/themes/react/static/node_modules),)
+ifneq (${THEME}, basic)
+	ifneq ($(wildcard ./src/${STATIC_FOLDER}/node_modules),)
 		INSTALL_NPM=
 	else
 		INSTALL_NPM=npm-install
 	endif
-	ifneq ($(wildcard ./src/themes/react/static/js/dist),)
+	ifneq ($(wildcard ./src/${STATIC_FOLDER}/js/dist),)
 		BUILD_JS=
 	else
 		BUILD_JS=build-js
@@ -107,8 +107,8 @@ setup-master: ##@Environment Setup dependency for master node
 setup-worker: ##@Environment Setup dependency for worker node
 	cd scripts/worker_node && bash setup.sh
 
-build-js: ##@Nodejs Build js files for vue
-	bash scripts/master_node/build_vuejs.sh
+build-js: ##@Nodejs Build js files
+	bash scripts/master_node/build_js.sh
 
 watch-mode: ##@Nodejs Run watch mode with js files for react
 	bash scripts/master_node/watch_mode.sh
diff --git a/docker-compose-build-js.yml b/docker-compose-build-js.yml
index 67c8e39a4..c5f2c5037 100644
--- a/docker-compose-build-js.yml
+++ b/docker-compose-build-js.yml
@@ -15,8 +15,7 @@ services:
   # cello dashboard service
   build-js:
     image: node
-    container_name: build-js
     volumes:  # This should be removed in product env
-      - ./src/themes/vue/static:/app
-      - ./src/themes/vue/templates:/app/templates
+      - ./src/$STATIC_FOLDER:/app
+      - ./src/$TEMPLATE_FOLDER:/app/templates
     command: bash -c "cd /app && npm run build"
diff --git a/docker-compose-npm-install.yml b/docker-compose-npm-install.yml
index 0db0654c4..8e66a2c51 100644
--- a/docker-compose-npm-install.yml
+++ b/docker-compose-npm-install.yml
@@ -15,9 +15,8 @@ services:
   # cello dashboard service
   npm-install:
     image: node
-    container_name: npm-install
     volumes:  # This should be removed in product env
-      - ./src/themes/vue/static:/app
+      - ./src/$STATIC_FOLDER:/app
     environment:
       - NPM_REGISTRY=$NPM_REGISTRY
     command: bash -c "cd /app && npm install --loglevel http --registry https://$NPM_REGISTRY"
diff --git a/scripts/master_node/build_vuejs.sh b/scripts/master_node/build_js.sh
similarity index 86%
rename from scripts/master_node/build_vuejs.sh
rename to scripts/master_node/build_js.sh
index 37b5ba49b..407b69d23 100755
--- a/scripts/master_node/build_vuejs.sh
+++ b/scripts/master_node/build_js.sh
@@ -21,8 +21,8 @@ else
 fi
 
 
-echo_b "Start build react js files..."
-docker-compose -f docker-compose-build-js.yml up --no-recreate
+echo_b "Start build js files..."
+docker-compose -f docker-compose-build-js.yml up --force-recreate
 
 #echo "Restarting mongo_express"
 #[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express
\ No newline at end of file
diff --git a/scripts/master_node/npm_install.sh b/scripts/master_node/npm_install.sh
index a80c046ad..ea4f5f604 100755
--- a/scripts/master_node/npm_install.sh
+++ b/scripts/master_node/npm_install.sh
@@ -22,7 +22,7 @@ fi
 
 
 echo_b "Start install npm packages..."
-docker-compose -f docker-compose-npm-install.yml up --no-recreate
+docker-compose -f docker-compose-npm-install.yml up --force-recreate
 
 #echo "Restarting mongo_express"
 #[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express
\ No newline at end of file
diff --git a/src/themes/vue/static/package.json b/src/themes/vue/static/package.json
index 0af3a4720..35edfa690 100644
--- a/src/themes/vue/static/package.json
+++ b/src/themes/vue/static/package.json
@@ -21,6 +21,7 @@
     "axios": "^0.16.2",
     "vue-echarts": "*",
     "moment": "^2.18.1",
+    "qs": "^6.5.1",
     "vuex-router-sync": "^4.1.2"
   },
   "devDependencies": {
diff --git a/src/themes/vue/static/src/api/host.js b/src/themes/vue/static/src/api/host.js
new file mode 100644
index 000000000..dad8f476b
--- /dev/null
+++ b/src/themes/vue/static/src/api/host.js
@@ -0,0 +1,36 @@
+
+/* 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'
+
+export default {
+  getHosts (params, cb) {
+    axios.get(Urls.host.list, {params: params}).then(res => {
+      cb(res.data)
+    })
+  },
+  deleteHost (params, cb) {
+    axios.delete(Urls.host.delete, {data: params}).then(res => {
+      cb(res.data)
+    })
+  },
+  operateHost (params, cb) {
+    axios.post(Urls.host.operation, qs.stringify(params)).then(res => {
+      cb(res.data)
+    })
+  },
+  updateHost (params, cb) {
+    axios.put(Urls.host.update, qs.stringify(params)).then(res => {
+      cb(res.data)
+    })
+  },
+  createHost (params, cb) {
+    axios.post(Urls.host.create, qs.stringify(params)).then(res => {
+      cb(res.data)
+    })
+  }
+}
diff --git a/src/themes/vue/static/src/config/Urls.js b/src/themes/vue/static/src/config/Urls.js
new file mode 100644
index 000000000..bc0841302
--- /dev/null
+++ b/src/themes/vue/static/src/config/Urls.js
@@ -0,0 +1,25 @@
+
+/* Copyright IBM Corp, All Rights Reserved.
+
+ SPDX-License-Identifier: Apache-2.0
+ */
+
+const apiBase = '/api'
+export default {
+  overview: {
+    stat: apiBase + '/stat'
+  },
+  host: {
+    list: apiBase + '/hosts',
+    create: apiBase + '/host',
+    delete: apiBase + '/host',
+    update: apiBase + '/host',
+    operation: apiBase + '/host_op'
+  },
+  cluster: {
+    list: apiBase + '/clusters',
+    create: apiBase + '/cluster',
+    delete: apiBase + '/cluster',
+    operation: apiBase + '/cluster_op'
+  }
+}
diff --git a/src/themes/vue/static/src/pages/Host/HostModal.vue b/src/themes/vue/static/src/pages/Host/HostModal.vue
new file mode 100644
index 000000000..fb9135e96
--- /dev/null
+++ b/src/themes/vue/static/src/pages/Host/HostModal.vue
@@ -0,0 +1,169 @@
+
+<!-- Copyright IBM Corp, All Rights Reserved.
+
+SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <Modal
+    v-model="visible"
+    :title="title"
+    ok-text="OK"
+    cancel-text="Cancel">
+    <Form ref="hostForm" :model="formItem" :rules="ruleValidate" :label-width="80">
+      <FormItem label="Host Name" prop="name" :label-width="100">
+        <Input type="text" :readonly="type === 'update'" v-model="formItem.name" placeholder="Input host name" />
+      </FormItem>
+      <FormItem prop="worker_api" :label-width="100">
+        <label slot="label">
+          URL
+          <Tooltip placement="top-end">
+            <Icon type="help-circled" />
+            <div slot="content">
+              <p>Input the node ip and port</p>
+              <p>example: 192.168.1.1:6527</p>
+            </div>
+          </Tooltip>
+        </label>
+        <Input :readonly="type === 'update'" v-model="formItem.worker_api">
+          <span slot="prepend">tcp://</span>
+        </Input>
+      </FormItem>
+      <FormItem label="Capacity" :label-width="100">
+        <InputNumber :min="1" v-model="formItem.capacity"></InputNumber>
+      </FormItem>
+      <FormItem label="Log Level" prop="log_level" :label-width="100">
+        <Select v-model="formItem.log_level" placeholder="Select log level">
+          <Option value="DEBUG">DEBUG</Option>
+          <Option value="INFO">INFO</Option>
+          <Option value="NOTICE">NOTICE</Option>
+          <Option value="WARNING">WARNING</Option>
+          <Option value="ERROR">ERROR</Option>
+          <Option value="CRITICAL">CRITICAL</Option>
+        </Select>
+      </FormItem>
+      <FormItem label="Log Type" prop="log_type" :label-width="100">
+        <Select v-model="formItem.log_type" placeholder="Select log type">
+          <Option value="local">LOCAL</Option>
+          <Option value="syslog">SYSLOG</Option>
+        </Select>
+      </FormItem>
+      <FormItem v-if="formItem.log_type === 'syslog'" label="Log Server" :label-width="100">
+        <Input v-model="formItem.log_server" />
+      </FormItem>
+      <FormItem :label-width="100">
+        <label slot="label">
+          Schedulable
+          <Tooltip placement="top-end">
+            <Icon type="help-circled" />
+            <div slot="content">
+              Schedulable for cluster request
+            </div>
+          </Tooltip>
+        </label>
+        <i-switch v-model="formItem.schedulable" size="large">
+          <span v-for="item in switchChoices" :slot="item.value">{{ item.label }}</span>
+        </i-switch>
+      </FormItem>
+      <FormItem :label-width="100">
+        <label slot="label">
+          Keep filed
+          <Tooltip placement="top-end">
+            <Icon type="help-circled" />
+            <div slot="content">
+              Keep filled with cluster
+            </div>
+          </Tooltip>
+        </label>
+        <i-switch v-model="formItem.autofill" size="large">
+          <span v-for="item in switchChoices" :slot="item.value">{{ item.label }}</span>
+        </i-switch>
+      </FormItem>
+    </Form>
+    <div slot="footer">
+      <Button type="text" @click="hideModal">Cancel</Button>
+      <Button type="primary" :loading="submitting" @click="submitForm">Ok</Button>
+    </div>
+    </Modal>
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+  export default {
+    props: ['type', 'visible', 'onCancel', 'formItem', 'onOk', 'host'],
+    data () {
+      const validateName = (rule, value, callback) => {
+        callback()
+      }
+      return {
+        ruleValidate: {
+          name: [
+            { required: true, message: 'Please input Host name', trigger: 'blur' },
+            { validator: validateName, trigger: 'blur' }
+          ],
+          worker_api: [
+            { required: true, message: 'Please input URL', trigger: 'blur' }
+          ],
+          log_level: [
+            { required: true, message: 'Please Select a log level', trigger: 'blur' }
+          ],
+          log_type: [
+            { required: true, message: 'Please Select a log type', trigger: 'blur' }
+          ]
+        },
+        switchChoices: [
+          {
+            value: true,
+            label: 'Yes'
+          },
+          {
+            value: false,
+            label: 'No'
+          }
+        ]
+      }
+    },
+    computed: {
+      title () {
+        if (this.type === 'create') {
+          return 'Create Host'
+        } else {
+          return 'Edit Host'
+        }
+      }
+    },
+    methods: {
+      ...mapActions([
+        'updateHost',
+        'createHost'
+      ]),
+      hideModal () {
+        this.$refs['hostForm'].resetFields()
+        this.onCancel()
+      },
+      submitForm () {
+        this.$refs['hostForm'].validate((valid) => {
+          this.submitting = true
+          if (valid) {
+            this.formItem.schedulable = this.formItem.schedulable ? 'true' : 'false'
+            this.formItem.autofill = this.formItem.autofill ? 'true' : 'false'
+            if (this.type === 'create') {
+              this.createHost(this.formItem)
+              this.submitting = false
+              this.onCancel()
+            } else if (this.type === 'update') {
+              this.formItem.id = this.host.id
+              this.updateHost(this.formItem)
+              this.submitting = false
+              this.onCancel()
+            }
+          } else {
+            this.submitting = false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/src/themes/vue/static/src/pages/Host/Operation.vue b/src/themes/vue/static/src/pages/Host/Operation.vue
new file mode 100644
index 000000000..aeed24d68
--- /dev/null
+++ b/src/themes/vue/static/src/pages/Host/Operation.vue
@@ -0,0 +1,102 @@
+
+<!-- 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 name="edit">Edit</DropdownItem>
+      <DropdownItem name="fillup">Fill Up</DropdownItem>
+      <DropdownItem name="clean">Clean</DropdownItem>
+      <DropdownItem name="reset">Reset</DropdownItem>
+      <DropdownItem divided name="delete">Delete</DropdownItem>
+    </DropdownMenu>
+  </Dropdown>
+</template>
+
+<script>
+  export default {
+    props: ['host', 'showDeleteModal', 'showHostModal', 'onOperateHost', 'onDeleteHost'],
+    methods: {
+      clickMenu (name) {
+        const _that = this
+        switch (name) {
+          case 'edit':
+            this.showHostModal('update', this.host)
+            break
+          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.host.name),
+                    ' ? This operation is irreversible.'
+                  ])
+                ])
+              },
+              okText: 'Ok',
+              cancelText: 'Cancel',
+              onOk () {
+                console.log('delete')
+                _that.onDeleteHost({id: _that.host.id})
+              }
+            })
+            break
+          case 'reset':
+            this.$Modal.confirm({
+              title: 'Want to reset?',
+              render: (h) => {
+                return h('div', {
+                  style: {
+                    paddingTop: '10px'
+                  }
+                }, [
+                  h('p', {}, [
+                    'Do you are want to reset ',
+                    h('span', {
+                      style: {
+                        color: 'red',
+                        fontWeight: 'bold'
+                      }
+                    }, _that.host.name),
+                    ' ? This procedure is irreversible.'
+                  ])
+                ])
+              },
+              okText: 'Ok',
+              cancelText: 'Cancel',
+              onOk () {
+                _that.onOperateHost(_that.host, name)
+              }
+            })
+            break
+          case 'fillup':
+          case 'clean':
+            this.onOperateHost(this.host, name)
+            break
+          default:
+            break
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/src/themes/vue/static/src/pages/Host/index.vue b/src/themes/vue/static/src/pages/Host/index.vue
new file mode 100644
index 000000000..fbc13b615
--- /dev/null
+++ b/src/themes/vue/static/src/pages/Host/index.vue
@@ -0,0 +1,181 @@
+
+<!-- Copyright IBM Corp, All Rights Reserved.
+
+SPDX-License-Identifier: Apache-2.0
+-->
+<template>
+  <div class="main-content">
+    <Row class="page-title">
+      <Col span="6">
+      <h2 class="sub-title">Hosts</h2>
+      </Col>
+      <Col span="18" style="text-align: right">
+      <Button type="primary" @click="showHostModal('create')">Create Host</Button>
+      </Col>
+    </Row>
+    <Row class="table-row">
+      <Table class="custom-table" stripe no-data-text="There is no host" :columns="columns" :data="hosts"></Table>
+      <div style="margin: 10px;overflow: hidden">
+        <div style="float: right;">
+          <Page :total="hostPagination.total" :current="hostPagination.current" @on-change="changePage"></Page>
+        </div>
+      </div>
+    </Row>
+    <host-modal :type="modalType"
+                :onCancel="hideHostModal"
+                :visible="modalVisible"
+                :host="currentHost"
+                :formItem="formItem"></host-modal>
+  </div>
+</template>
+
+<script>
+  import { mapGetters, mapActions } from 'vuex'
+  import Operation from './Operation.vue'
+  import HostModal from './HostModal.vue'
+  export default {
+    components: {
+      'host-modal': HostModal
+    },
+    mounted () {
+      this.getHosts()
+    },
+    data () {
+      return {
+        modalType: 'create',
+        modalVisible: false,
+        currentHost: {},
+        formItem: {
+          name: '',
+          worker_api: '',
+          capacity: 1,
+          log_level: 'INFO',
+          log_type: 'local',
+          log_server: '',
+          schedulable: false,
+          autofill: false
+        },
+        columns: [
+          {title: 'Name', key: 'name'},
+          {
+            title: 'Status',
+            key: 'status',
+            width: 140,
+            render: (h, params) => {
+              const row = params.row
+              const loadingText = ['operating']
+              let color = 'green'
+              if (loadingText.indexOf(row.status) >= 0) {
+                color = 'blue'
+              } else if (row.status !== 'active') {
+                color = 'yellow'
+              }
+
+              return h('Tag', {
+                props: {
+                  type: 'dot',
+                  color: color
+                },
+                'class': {
+                  status_badge: true
+                }
+              }, row.status)
+            }
+          },
+          {title: 'Capacity', key: 'capacity'},
+          {
+            title: 'Chains',
+            key: 'clusters',
+            render: (h, params) => {
+              const row = params.row
+              return row.clusters.length
+            }
+          },
+          {title: 'Create Time', key: 'create_ts', width: 200},
+          {title: 'Log Level', key: 'log_level'},
+          {title: 'Type', key: 'type'},
+          {title: 'Log Type', key: 'log_type'},
+          {
+            title: 'Operations',
+            key: 'operation',
+            render: (h, params) => {
+              const row = params.row
+              return h(Operation, {
+                props: {
+                  host: row,
+                  showHostModal: this.showHostModal,
+                  onOperateHost: this.onOperateHost,
+                  onDeleteHost: this.onDeleteHost
+                }
+              })
+            },
+            width: 120
+          }
+        ]
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'isLoadingHosts',
+        'hosts',
+        'hostPagination'
+      ])
+    },
+    methods: {
+      ...mapActions([
+        'getHosts',
+        'operateHost',
+        'deleteHost'
+      ]),
+      changePage (params) {
+        console.log(params)
+      },
+      onDeleteHost (params) {
+        this.deleteHost(params)
+      },
+      showHostModal (type, host) {
+        if (host) {
+          this.currentHost = host
+          this.formItem = {
+            name: host.name,
+            worker_api: host.worker_api.split('//')[1],
+            capacity: host.capacity,
+            log_level: host.log_level,
+            log_type: host.log_type,
+            log_server: host.log_server,
+            schedulable: host.schedulable === 'true',
+            autofill: host.autofill === 'true'
+          }
+        } else {
+          this.formItem = {
+            name: '',
+            worker_api: '',
+            capacity: 1,
+            log_level: 'INFO',
+            log_type: 'local',
+            log_server: '',
+            schedulable: false,
+            autofill: false
+          }
+        }
+        this.modalVisible = true
+        this.modalType = type
+      },
+      hideHostModal () {
+        this.modalVisible = false
+      },
+      onOperateHost (item, operation) {
+        this.operateHost({
+          id: item.id,
+          action: operation
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .status_badge {
+    border-width: 0 !important;
+  }
+</style>
diff --git a/src/themes/vue/static/src/pages/HostPage.vue b/src/themes/vue/static/src/pages/HostPage.vue
deleted file mode 100644
index 006cf9c0c..000000000
--- a/src/themes/vue/static/src/pages/HostPage.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
-<!-- Copyright IBM Corp, All Rights Reserved.
-
-SPDX-License-Identifier: Apache-2.0
--->
-<template>
-  <div>
-    <Row class="page-title">
-      <h2 class="sub-title">Hosts</h2>
-    </Row>
-  </div>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>
diff --git a/src/themes/vue/static/src/router/index.js b/src/themes/vue/static/src/router/index.js
index dbd84517d..cad5fc0af 100644
--- a/src/themes/vue/static/src/router/index.js
+++ b/src/themes/vue/static/src/router/index.js
@@ -7,7 +7,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 const HostPage = resolve => {
   require.ensure([], () => {
-    resolve(require('@/pages/HostPage.vue'))
+    resolve(require('@/pages/Host/index.vue'))
   })
 }
 const HomePage = resolve => {
diff --git a/src/themes/vue/static/src/store/hosts.js b/src/themes/vue/static/src/store/hosts.js
new file mode 100644
index 000000000..4c2b1b43e
--- /dev/null
+++ b/src/themes/vue/static/src/store/hosts.js
@@ -0,0 +1,94 @@
+
+/* Copyright IBM Corp, All Rights Reserved.
+
+ SPDX-License-Identifier: Apache-2.0
+ */
+import host from '@/api/host'
+import {Message} from 'iview'
+
+const state = {
+  hosts: [],
+  pageNo: 1,
+  pageSize: 10,
+  totalCount: 1,
+  loadingHosts: false,
+  modalVisible: false,
+  modalType: 'create',
+  currentHost: {}
+}
+
+const actions = {
+  getHosts ({commit}, params) {
+    commit('show_loading')
+    host.getHosts(params, result => {
+      commit('receive_hosts', result)
+    })
+  },
+  operateHost ({dispatch}, params) {
+    host.operateHost(params, result => {
+      dispatch('getHosts')
+    })
+  },
+  updateHost ({dispatch}, params) {
+    host.updateHost(params, result => {
+      if (result.status === 'OK') {
+        Message.success('Update host ' + params.name + ' success')
+      } else {
+        Message.error('Update host ' + params.name + ' failed')
+      }
+      dispatch('getHosts')
+    })
+  },
+  createHost ({dispatch}, params) {
+    host.createHost(params, result => {
+      if (result.status === 'OK') {
+        Message.success('Create host ' + params.name + ' success')
+      } else {
+        Message.error('Create host ' + params.name + ' failed')
+      }
+      dispatch('getHosts')
+    })
+  },
+  deleteHost ({dispatch}, params) {
+    host.deleteHost(params, result => {
+      console.log(result)
+      dispatch('getHosts')
+    })
+  }
+}
+
+const mutations = {
+  show_loading (state) {
+    state.loadingHosts = true
+  },
+  hide_loading (state) {
+    state.loadingHosts = false
+  },
+  receive_hosts (state, result) {
+    state.loadingHosts = false
+    state.hosts = result.data
+  }
+}
+
+const getters = {
+  isLoadingHosts (state) {
+    return state.loadingHosts
+  },
+  hosts (state) {
+    return state.hosts
+  },
+  hostPagination (state) {
+    return {
+      current: state.pageNo,
+      pageSize: state.pageSize,
+      total: state.totalCount
+    }
+  }
+}
+
+export default {
+  state,
+  actions,
+  mutations,
+  getters
+}
diff --git a/src/themes/vue/static/src/store/index.js b/src/themes/vue/static/src/store/index.js
index 5d797aa9b..e6b73fe6d 100644
--- a/src/themes/vue/static/src/store/index.js
+++ b/src/themes/vue/static/src/store/index.js
@@ -7,12 +7,14 @@ import Vuex from 'vuex'
 import Vue from 'vue'
 import stats from './stats'
 import users from './users'
+import hosts from './hosts'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     stats,
-    users
+    users,
+    hosts
   }
 })