changes

components/server/ContainerMgnt.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+  <div class="columns is-multiline mx-0" v-if="data">
+    <div class="column is-12" v-for="v in data">
+    <div>
+      <div class="field is-grouped is-grouped-multiline">
+        <div class="control">
+          <span class="icon-text has-text-warning">
+          <span class="fsb-20">{{ v.name }}</span>
+          </span>
+        </div>
+        <div class="control">
+          <a class="ml-4" @click="refresh(v)">
+            <SvgIcon v-bind="{name: 'refresh.svg', type: 'findata', size: 17}"></SvgIcon>
+          </a>
+        </div>
+      </div>
+  </div>
+    <DockerContainer class="mt-2" :ref="`c${v.id}`" v-bind="{ssh: v.id, vpagename: v.vpagename}" />
+    </div>
+  </div>
+  <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
+</div>
+</template>
+<script>
+import DockerContainer from "@/components/server/DockerContainer"
+export default {
+  components: {DockerContainer}, 
+  data() {
+    return {
+      data: undefined,
+      showmodal: undefined
+    }
+  },
+  async created() {
+    let found = this.$findapi('ssh')
+    let rs = await this.$getapi([found])
+    this.data = this.$copy(rs[0].data.rows)
+    this.data.map((v,i)=>{
+      v.vpagename = `pagedata7.7.${i+1}`
+    })
+  },
+  methods: {
+    refresh(v) {
+      this.$refs[`c${v.id}`][0].getApi()
+    },
+    terminal(row) {
+      this.showmodal = {component: 'docker/CheckStatus', title: 'Open SSH', vbind: { row: row}, height: '200px', width: '500px'}
+    },
+    command(row) {
+      this.showmodal = {component: 'server/ExecuteCmd', title: 'Chạy câu lệnh', width: '50%', height: '600px', vbind: {sshid: row.id, path: '/home/stackops/'}}
+    },
+    ssh(v) {
+      let cmd = `sshpass -p "${v.password}" ssh -p ${v.port} ${v.username}@${v.host}`
+      this.$copyToClipboard(cmd)
+    }
+  }
+}
+</script>

components/server/CpuRam.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+ <div>
+  <span class="tag is-medium is-light"><b class="fs-17 has-text-black">CPU: {{ cpuinfo }}</b></span>
+  </div>
+ <div class="field is-grouped is-grouped-multiline mt-3 mb-1" v-if="data">
+  <div class="control" v-for="vkey in  Object.keys(data)">
+    <div class="px-2 py-1" style="border: 1px solid #E8E8E8; border-radius: 6px;">
+      <p class="has-text-grey">{{ vkey }}</p>
+      <p>{{ data[vkey] }}</p>
+      <p class="has-text-primary">{{ $formatUnit(data[vkey] / data.total, 0.01, 0, true, 0) }}</p>
+    </div>
+  </div>
+  </div>
+</div>
+</template>
+<script>
+export default {
+  props: ['ssh'],
+  data() {
+    return {
+      data: undefined,
+      cpuinfo: undefined
+    }
+  },
+  created() {
+    this.getram()
+    this.getcpu()
+  },
+  methods: {
+    async getram() {
+      let data = {ssh: this.ssh || 1, path: '', cmd: `free -m`, user: this.$store.login.id}
+      let obj = await this.$insertapi('executecommand', data, undefined, false)
+      let rows = obj.output[1].split(' ')
+      let arr = rows.filter(v=>!this.$empty(v))
+      this.data = {total: arr[1], used: arr[2], free: arr[3], shared: arr[4], cache: arr[5], avail: arr[6].replace('\r\n', '')}
+    },
+    async getcpu() {
+      let data = {ssh: this.ssh || 1, path: '', cmd: `grep 'cpu ' /proc/stat | awk '{usage=($2+$4)*100/($2+$4+$5)} END {print usage "%"}'`, user: this.$store.login.id}
+      let obj = await this.$insertapi('executecommand', data, undefined, false)
+      let num = obj.output[0].replace('\r\n', '').replace('%', '')
+      this.cpuinfo = this.$formatUnit(num, 1, 2, true, 2) + '%'
+    }
+  }
+}
+</script>

components/server/DiskInfo.vue

@@ -0,0 +1,25 @@
+<template>
+  <DataView v-bind="vbind" v-if="vbind"></DataView>
+</template>
+<script>
+export default {
+  props: ['ssh', 'vpagename'],
+  data() {
+    return {
+      showmodal: undefined,
+      vbind: undefined
+    }
+  },
+  async created() {
+    await this.getApi()
+  },
+  methods: {
+    async getApi() {
+      let data = {ssh: this.ssh || 1, path: '', cmd: `df -h`, format: 'diskinfo', user: this.$store.login.id}
+      let rows = await this.$insertapi('executecommand', data, undefined, false)
+      console.log('rows', rows)
+      this.vbind = {pagename: this.vpagename, setting: 'diskinfo-fields', data: rows}
+    }
+  }
+}
+</script>

components/server/DockerContainer.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <DataView v-bind="vbind" v-if="vbind" @dataevent="dockerEvent"></DataView>
+  </div>
+</template>
+<script>
+import DataTable from "@/components/datatable/DataTable"
+export default {
+  components: {DataTable},
+  props: ['curtab', 'ssh', 'notitle', 'vpagename'],
+  data() {
+    return {
+      vbind: undefined
+    }
+  },
+  async created() {
+    this.getApi()
+  },
+  methods: {
+    dockerEvent(row, field, event) {
+      if(event==='stop') this.doAction(`docker stop ${row.Names}`)
+      else if(event==='start') this.doAction(`docker restart ${row.Names}`)
+    },
+    async getApi() {
+      let data = {ssh: this.ssh || 1, path: '', cmd: `docker container ps -a --format "{{json .}}"`, user: this.$store.login.id}
+      let arr = (await this.$insertapi('executecommand', data, undefined, false))['output']
+      let rows = arr.map(v=>JSON.parse(v))
+      this.vbind = undefined
+      setTimeout(()=>this.vbind = {pagename: this.vpagename, setting: 'container-fields', data: rows})
+    },
+    choiceSsh() {
+      this.showmodal = {component: 'DataView', title: 'Chọn SSH', width: '40%', height: '400px', 
+      vbind: {api: 'ssh', setting: 'ssh-select', component: 'server/NewSsh'}}
+    },
+    async doAction(cmd) {
+      console.log('doAction')
+      let data = {ssh: this.ssh || 1, path: null, cmd: cmd, user: this.$store.login.id}
+      let rs = (await this.$insertapi('executecommand', data, undefined, false))['output']
+      if(rs==='error') return
+      let obj = {ssh: this.ssh || 1, path: '', cmd: `docker container ps -a --format "{{json .}}"`, user: this.$store.login.id}
+      rs = await this.$insertapi('executecommand', obj, undefined, false)
+      let rows = rs.output.map(v=>JSON.parse(v))
+      this.vbind = undefined
+      setTimeout(() => this.vbind = {pagename: this.vpagename, setting: 'container-fields', data: rows}) 
+    },
+    async stop(row) {
+      this.doAction(`docker stop ${row.Names}`)
+    },
+    async start(row) {
+      this.doAction(`docker restart ${row.Names}`)
+    }
+  }
+}
+</script>

components/server/ServerInfo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="columns is-multiline mx-0" v-if="data">
+    <div class="column is-4" v-for="v in data">
+      <div class="field is-grouped">
+        <div class="control">
+          <span class="icon-text has-text-warning">
+            <span class="fsb-20">{{ v.name }}</span>
+          </span>
+        </div>
+      </div>
+      <CpuRam v-bind="{ssh: v.id}"></CpuRam>
+      <DiskInfo class="mt-3" v-bind="{ssh: v.id, vpagename: v.vpagename}"></DiskInfo>
+    </div>
+  </div>
+</template>
+<script>
+import CpuRam from "@/components/server/CpuRam"
+import DiskInfo from "@/components/server/DiskInfo"
+export default {
+  components: {CpuRam, DiskInfo},
+  data() {
+    return {
+      data: undefined,
+      showmodal: undefined
+    }
+  },
+  async created() {
+    let found = this.$findapi('ssh')
+    let rs = await this.$getapi([found])
+    this.data = this.$copy(rs[0].data.rows)
+    this.data.map((v,i)=>{
+      v.vpagename = `pagedata8.8.${i+1}`
+    })
+  }
+}
+</script>