custom instance component, hindi lang

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/CloudMonkey/Resource.vue

@@ -17,10 +17,15 @@
           :to="{ path: item.path === '' ? '/' : item.path }"
         >
           <a-icon v-if="index == 0" :type="item.meta.icon" />
-          {{ item.meta.title }}
+          {{ $t(item.meta.title) }}
         </router-link>
-        <span v-else-if="$route.params.id">{{ $route.params.id }}</span>
-        <span v-else>{{ item.meta.title }}</span>
+        <span v-else-if="$route.params.id">
+          {{ $route.params.id }}
+          <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
+            <a-icon type="copy" style="margin-left: 0px"/>
+          </a-button>
+        </span>
+        <span v-else>{{ $t(tem.meta.title) }}</span>
       </a-breadcrumb-item>
     </a-breadcrumb>
 
@@ -206,12 +211,7 @@
           <router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
         </a>
         <template slot="state" slot-scope="text">
-          <a-tooltip placement="right">
-            <template slot="title">
-              {{ text }}
-            </template>
-            <a-badge :title="text" :status="getBadgeStatus(text)"/>
-          </a-tooltip>
+          <status :text="text" />
         </template>
 
         <a slot="account" slot-scope="text, record" href="javascript:;">
@@ -242,13 +242,15 @@ import store from '@/store'
 import ChartCard from '@/components/chart/ChartCard'
 import DataView from '@/components/widgets/DataView'
 import InstanceView from '@/components/widgets/InstanceView'
+import Status from '@/components/widgets/Status'
 
 export default {
   name: 'Resource',
   components: {
     ChartCard,
     DataView,
-    InstanceView
+    InstanceView,
+    Status
   },
   data () {
     return {

ui/src/components/tools/TranslationMenu.vue

@@ -6,6 +6,7 @@
     </span>
     <a-menu slot="overlay" @click="onClick">
       <a-menu-item key="en" :value="enUS"><flag iso="gb"/> English</a-menu-item>
+      <a-menu-item key="hi" :value="hi"><flag iso="in"/> हिन्दी</a-menu-item>
       <a-menu-item key="ja_JP" :value="jpJP"><flag iso="jp"/> 日本語</a-menu-item>
       <a-menu-item key="ko_KR" :value="koKR"><flag iso="kr"/> 한국어</a-menu-item>
       <a-menu-item key="zh_CN" :value="zhCN"><flag iso="cn"/> 简体中文</a-menu-item>

ui/src/components/widgets/InstanceView.vue

@@ -1,59 +1,88 @@
 <template>
   <div style="padding-top: 12px">
-    <a-row>
+    <a-row :gutter="12">
       <a-col :span="24">
-        <h2>{{ vm.displayname }} ({{ vm.name }})</h2>
+        <h2>
+          <font-awesome-icon :icon="['fab', osLogo]" size="lg" style="color: #666;" />
+          {{ vm.name }} <span v-if="vm.instancename">({{ vm.instancename }})</span>
+          <a :href="'/client/console?cmd=access&vm=' + vm.id" target="_blank">
+            <a-button shape="circle">
+              <a-icon type="right-square" />
+            </a-button>
+          </a>
+        </h2>
       </a-col>
-      <a-col :span="5">
-        <a :href="'/client/console?cmd=access&vm=' + vm.id" target="_blank">
-          <a-avatar
-            shape="square"
-            :size="200"
-            style="color: #fff; backgroundColor: #333; width: 175px; height: 120px;">
-            <span style="text-align: bottom">
-              <a-icon type="right-square"/>
-              {{ vm.instancename }}
-            </span>
-          </a-avatar>
-        </a>
-      </a-col>
-      <a-col :span="15">
-        <p>
-          ID: {{ vm.id }} <br/>
-          State: {{ vm.state }} <br/>
-          Guest OS: {{ guestOsName }} <br/>
-          Offering: <router-link :to="{ path: '/computeoffering/' + vm.serviceofferingid }">{{ vm.serviceofferingname }}</router-link> <br/>
-          Template: <router-link :to="{ path: '/template/' + vm.templateid }">{{ vm.templatename }}</router-link> <br/>
-          Host: <router-link :to="{ path: '/host/' + vm.hostid }">{{ vm.hostname }}</router-link> ({{ vm.hypervisor }}) <br/>
-          Zone: <router-link :to="{ path: '/zone/' + vm.zoneid }">{{ vm.zonename }}</router-link> <br/>
-
-          IP Addresses: <ul>
-            <li v-for="eth in vm.nic" :key="eth.id">
-              {{ eth.ipaddress }} <router-link :to="{ path: '/guestnetwork/' + eth.networkid }">({{ eth.networkname }})</router-link> <br/>
-            </li>
-          </ul>
-        </p>
-      </a-col>
-      <a-col :span="4">
+      <a-col :span="8">
         <p>
+          <status :text="vm.state" displayText /> <br/>
+          <font-awesome-icon :icon="['fab', osLogo]" size="lg" style="color: #666;" /> {{ guestOsName }} <br/>
           <font-awesome-icon :icon="['fas', 'microchip']" />
           CPU: {{ vm.cpunumber }} x {{ vm.cpuspeed }} Mhz <br/>
           <font-awesome-icon :icon="['fas', 'memory']" />
           Memory: {{ vm.memory }} MiB <br/>
           <font-awesome-icon :icon="['fas', 'database']" />
           Storage: {{ (totalStorage / (1024 * 1024 * 1024.0)).toFixed(2) }} GiB <br/>
+          <font-awesome-icon :icon="['fas', 'ethernet']" /> {{ vm.nic.length }} NIC(s): <br/>
+          <span v-for="eth in vm.nic" :key="eth.id">
+            {{ eth.ipaddress }} <router-link :to="{ path: '/guestnetwork/' + eth.networkid }">({{ eth.networkname }})</router-link> <br/>
+          </span>
         </p>
       </a-col>
 
+      <a-col :span="8">
+        <p>
+          HA: {{ vm.haenable }} <br />
+          Dynamic Scalable: {{ vm.isdynamicallyscalable }} <br />
+          Offering: <router-link :to="{ path: '/computeoffering/' + vm.serviceofferingid }">{{ vm.serviceofferingname }}</router-link> <br/>
+          Template: <router-link :to="{ path: '/template/' + vm.templateid }">{{ vm.templatename }}</router-link> <br/>
+          Host: <router-link :to="{ path: '/host/' + vm.hostid }">{{ vm.hostname }}</router-link> ({{ vm.hypervisor }}) <br/>
+          Zone: <router-link :to="{ path: '/zone/' + vm.zoneid }">{{ vm.zonename }}</router-link> <br/>
+          Account: <router-link :to="{ path: '/account?name=' + vm.account }">{{ vm.account }}</router-link> <br />
+          Domain: <router-link :to="{ path: '/domain/' + vm.domainid }">{{ vm.domain }}</router-link> <br/>
+          Created: {{ vm.created }} <br />
+
+        </p>
+      </a-col>
+
+      <a-col :span="8">
+
+        <a-tag closable>key=value</a-tag>
+        <a-tag color="green">green</a-tag>
+        <a-tag color="red">red</a-tag>
+        <a-tag color="blue">blue</a-tag>
+
+        <template v-for="(tag, index) in tags">
+          <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
+            <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
+              {{`${tag.slice(0, 20)}...`}}
+            </a-tag>
+          </a-tooltip>
+          <a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
+            {{tag}}
+          </a-tag>
+        </template>
+
+        <a-input
+          v-if="inputVisible"
+          ref="input"
+          type="text"
+          size="small"
+          :style="{ width: '78px' }"
+          :value="inputValue"
+          @change="handleInputChange"
+          @blur="handleInputConfirm"
+          @keyup.enter="handleInputConfirm"
+        />
+        <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
+          <a-icon type="plus" /> New Tag
+        </a-tag>
+
+
+      </a-col>
+
       <a-col :span="16">
         <a-card title="VM Hardware">
           <a-collapse>
-            <a-collapse-panel :header="'CPU: ' + vm.cpunumber">
-              <p>{{ vm.cpunumber }} CPU(s) x {{ vm.cpuspeed }} Mhz</p>
-            </a-collapse-panel>
-            <a-collapse-panel :header="'Memory: ' + vm.memory + ' MB'">
-              <p>Total Memory: {{ vm.memory }} MiB<br/>Free Memory: {{ vm.memoryintfreekbs }} kBs</p>
-            </a-collapse-panel>
             <a-collapse-panel :header="'Storage: ' + volumes.length" >
               <a-list
                 itemLayout="horizontal"
@@ -94,6 +123,7 @@
                   </a-list-item-meta>
                   <p>
                     Network: <router-link :to="{ path: '/guestnetwork/' + item.networkid }">{{ item.networkname }}</router-link> <br/>
+                    Type: {{ item.type }}<br/>
                     Mac Address: {{ item.macaddress }}<br/>
                     Netmask: {{ item.netmask }}<br/>
                     Gateway: {{ item.gateway }}<br/>
@@ -107,6 +137,35 @@
         </a-card>
       </a-col>
 
+      <a-col :span="8">
+        Notes
+        <a-comment>
+          <a-avatar
+            slot="avatar"
+            icon="cloud"
+            alt="Han Solo"
+          />
+          <div slot="content">
+            <a-form-item>
+              <a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
+            </a-form-item>
+            <a-form-item>
+              <a-button
+                htmlType="submit"
+                :loading="submitting"
+                @click="handleSubmit"
+                type="primary"
+              >
+                Add Note
+              </a-button>
+            </a-form-item>
+          </div>
+        </a-comment>
+
+      </a-col>
+
+
+
     </a-row>
 
   </div>
@@ -115,10 +174,12 @@
 <script>
 
 import { api } from '@/api'
+import Status from '@/components/widgets/Status'
 
 export default {
   name: 'InstanceView',
   components: {
+    Status
   },
   props: {
     vm: {
@@ -130,7 +191,11 @@ export default {
     return {
       volumes: [],
       totalStorage: 0,
-      guestOsName: ''
+      guestOsName: '',
+      osLogo: 'linux',
+      tags: [],
+      inputVisible: false,
+      inputValue: '',
     }
   },
   watch: {
@@ -139,6 +204,30 @@ export default {
     }
   },
   methods: {
+    showInput () {
+      this.inputVisible = true
+      this.$nextTick(function () {
+        this.$refs.input.focus()
+      })
+    },
+
+    handleInputChange (e) {
+      this.inputValue = e.target.value
+    },
+    handleInputConfirm () {
+      const inputValue = this.inputValue
+      let tags = this.tags
+      if (inputValue && tags.indexOf(inputValue) === -1) {
+        tags = [...tags, inputValue]
+      }
+      console.log(tags)
+      Object.assign(this, {
+        tags,
+        inputVisible: false,
+        inputValue: '',
+      })
+    },
+
     fetchData () {
       api('listVolumes', { 'listall': true, 'virtualmachineid': this.vm.id }).then(json => {
         this.volumes = json.listvolumesresponse.volume
@@ -149,6 +238,30 @@ export default {
       })
       api('listOsTypes', { 'id': this.vm.ostypeid }).then(json => {
         this.guestOsName = json.listostypesresponse.ostype[0].description
+        const osname = this.guestOsName.toLowerCase()
+        if (osname.includes('centos')) {
+          this.osLogo = 'centos'
+        } else if (osname.includes('ubuntu')) {
+          this.osLogo = 'ubuntu'
+        } else if (osname.includes('suse')) {
+          this.osLogo = 'suse'
+        } else if (osname.includes('redhat')) {
+          this.osLogo = 'redhat'
+        } else if (osname.includes('fedora')) {
+          this.osLogo = 'fedora'
+        } else if (osname.includes('linux')) {
+          this.osLogo = 'linux'
+        } else if (osname.includes('bsd')) {
+          this.osLogo = 'freebsd'
+        } else if (osname.includes('apple')) {
+          this.osLogo = 'apple'
+        } else if (osname.includes('window') || osname.includes('dos')) {
+          this.osLogo = 'windows'
+        } else if (osname.includes('oracle')) {
+          this.osLogo = 'java'
+        } else {
+          this.osLogo = 'cloud'
+        }
       })
     }
   }

ui/src/components/widgets/Status.vue

@@ -0,0 +1,76 @@
+<template>
+  <a-tooltip placement="bottom">
+    <template slot="title">
+      {{ text }}
+    </template>
+    <span>
+    <a-badge :title="text" :status="getBadgeStatus(text)" />
+    <span v-if="displayText">{{ text }}</span>
+    </span>
+  </a-tooltip>
+</template>
+
+<script>
+
+export default {
+  name: 'Status',
+  components: {
+  },
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    displayText: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    getBadgeStatus (state) {
+      var status = 'default'
+      switch (state) {
+        case 'Running':
+        case 'Ready':
+        case 'Up':
+        case 'BackedUp':
+        case 'Allocated':
+        case 'Implemented':
+        case 'Enabled':
+        case 'enabled':
+        case 'Active':
+        case 'Completed':
+        case 'Started':
+          status = 'success'
+          break
+        case 'Stopped':
+        case 'Error':
+          status = 'error'
+          break
+        case 'Migrating':
+        case 'Starting':
+        case 'Stopping':
+        case 'Scheduled':
+          status = 'processing'
+          break
+        case 'Alert':
+        case 'Created':
+          status = 'warning'
+          break
+      }
+      return status
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ant-badge-status-dot {
+  width: 14px;
+  height: 14px;
+}
+</style>

ui/src/locales/hi.json

@@ -0,0 +1,6 @@
+{
+    "Dashboard": "डैशबोर्ड",
+    "Compute": "कंप्यूट",
+    "Instances": "इंस्टैंस",
+    "name": "नाम"
+}