Fixing cks instance view (#832)

* Fixing instance view

* Chaning from ip to ssh port

* Fixing html tags in text

* Adding messages to kube actions

* Removing redundant code

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

ui/src/config/section/compute.js

@@ -432,6 +432,7 @@ export default {
           api: 'startKubernetesCluster',
           icon: 'caret-right',
           label: 'label.kubernetes.cluster.start',
+          message: 'message.kubernetes.cluster.start',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#starting-a-stopped-kubernetes-cluster',
           dataView: true,
           show: (record) => { return ['Stopped'].includes(record.state) }
@@ -440,6 +441,7 @@ export default {
           api: 'stopKubernetesCluster',
           icon: 'poweroff',
           label: 'label.kubernetes.cluster.stop',
+          message: 'message.kubernetes.cluster.stop',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#stopping-kubernetes-cluster',
           dataView: true,
           show: (record) => { return !['Stopped', 'Destroyed', 'Destroying'].includes(record.state) }
@@ -448,6 +450,7 @@ export default {
           api: 'scaleKubernetesCluster',
           icon: 'swap',
           label: 'label.kubernetes.cluster.scale',
+          message: 'message.kubernetes.cluster.scale',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#scaling-kubernetes-cluster',
           dataView: true,
           show: (record) => { return ['Created', 'Running'].includes(record.state) },
@@ -458,6 +461,7 @@ export default {
           api: 'upgradeKubernetesCluster',
           icon: 'plus-circle',
           label: 'label.kubernetes.cluster.upgrade',
+          message: 'message.kubernetes.cluster.upgrade',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#upgrading-kubernetes-cluster',
           dataView: true,
           show: (record) => { return ['Created', 'Running'].includes(record.state) },
@@ -468,6 +472,7 @@ export default {
           api: 'deleteKubernetesCluster',
           icon: 'delete',
           label: 'label.kubernetes.cluster.delete',
+          message: 'message.kubernetes.cluster.delete',
           docHelp: 'plugins/cloudstack-kubernetes-service.html#deleting-kubernetes-cluster',
           dataView: true,
           show: (record) => { return !['Destroyed', 'Destroying'].includes(record.state) }

ui/src/locales/en.json

@@ -793,8 +793,8 @@
 "label.done": "Done",
 "label.double.quotes.are.not.allowed": "Double quotes are not allowed",
 "label.download": "Download",
-"label.download.kubeconfig.cluster": "Download kubeconfig for the cluster <br><br> The <code>kubectl</code> command-line tool uses kubeconfig files to find the information it needs to choose a cluster and communicate with the API server of a cluster.",
-"label.download.kubectl": "Download <code>kubectl</code> tool for cluster's Kubernetes version",
+"label.download.kubeconfig.cluster": "Download kubeconfig for the cluster <br><br> The <code><b>kubectl</b></code> command-line tool uses kubeconfig files to find the information it needs to choose a cluster and communicate with the API server of a cluster.",
+"label.download.kubectl": "Download <code><b>kubectl</b></code> tool for cluster's Kubernetes version",
 "label.download.kubernetes.cluster.config": "Download Kubernetes cluster config",
 "label.download.progress": "Download Progress",
 "label.dpd": "Dead Peer Detection",
@@ -1966,6 +1966,7 @@
 "label.srx.firewall": "Juniper SRX Firewall",
 "label.ssh.key.pair.details": "SSH Key Pair Details",
 "label.ssh.key.pairs": "SSH Key Pairs",
+"label.ssh.port": "SSH Port",
 "label.sshkeypair": "New SSH Key Pair",
 "label.sshkeypairs": "SSH keypairs",
 "label.sslcertificates": "SSL Certificates",
@@ -2147,7 +2148,7 @@
 "label.usageinterface": "Usage Interface",
 "label.usagename": "Usage Type",
 "label.usageunit": "Unit",
-"label.use.kubectl.access.cluster": "Use <code>kubectl</code> and <code>kubeconfig</code> file to access cluster",
+"label.use.kubectl.access.cluster": "<code><b>kubectl</b></code> and <code><b>kubeconfig</b></code> file to access cluster",
 "label.use.vm.ip": "Use VM IP:",
 "label.use.vm.ips": "Use VM IPs",
 "label.used": "Used",
@@ -2891,6 +2892,11 @@
 "message.iso.desc": "Disc image containing data or bootable media for OS",
 "message.join.project": "You have now joined a project. Please switch to Project view to see the project.",
 "message.kubeconfig.cluster.not.available": "Kubernetes cluster kubeconfig not available currently",
+"message.kubernetes.cluster.delete": "Please confirm that you want to destroy the cluster",
+"message.kubernetes.cluster.scale": "Please select desired cluster configuration",
+"message.kubernetes.cluster.start": "Please confirm that you want to start the cluster",
+"message.kubernetes.cluster.stop": "Please confirm that you want to stop the cluster",
+"message.kubernetes.cluster.upgrade": "Please select new kubernetes version",
 "message.launch.vm.on.private.network": "Do you wish to launch your instance on your own private dedicated network?",
 "message.launch.zone": "Zone is ready to launch; please proceed to the next step.",
 "message.launch.zone.description": "Zone is ready to launch; please proceed to the next step.",

ui/src/views/compute/KubernetesServiceTab.vue

@@ -40,23 +40,21 @@
         <a-card :title="$t('label.using.cli')" :loading="this.versionLoading">
           <a-timeline>
             <a-timeline-item>
-              <p>
-                {{ $t('label.download.kubeconfig.cluster') }}
+              <p v-html="$t('label.download.kubeconfig.cluster')">
               </p>
             </a-timeline-item>
             <a-timeline-item>
+              <p v-html="$t('label.download.kubectl')"></p>
               <p>
-                {{ $t('label.download.kubectl') }} <br><br>
                 {{ $t('label.linux') }}: <a :href="this.kubectlLinuxLink">{{ this.kubectlLinuxLink }}</a><br>
                 {{ $t('label.macos') }}: <a :href="this.kubectlMacLink">{{ this.kubectlMacLink }}</a><br>
                 {{ $t('label.windows') }}: <a :href="this.kubectlWindowsLink">{{ this.kubectlWindowsLink }}</a>
               </p>
             </a-timeline-item>
             <a-timeline-item>
+              <p v-html="$t('label.use.kubectl.access.cluster')"></p>
               <p>
-                {{ $t('label.use.kubectl.access.cluster') }}<br><br>
                 <code><b>kubectl --kubeconfig /custom/path/kube.conf {COMMAND}</b></code><br><br>
-
                 <em>{{ $t('label.list.pods') }}</em><br>
                 <code>kubectl --kubeconfig /custom/path/kube.conf get pods --all-namespaces</code><br>
                 <em>{{ $t('label.list.nodes') }}</em><br>
@@ -106,6 +104,9 @@
           <template slot="state" slot-scope="text">
             <status :text="text ? text : ''" displayText />
           </template>
+          <template slot="port" slot-scope="text, record, index">
+            {{ cksSshStartingPort + index }}
+          </template>
         </a-table>
       </a-tab-pane>
       <a-tab-pane :tab="$t('label.firewall')" key="firewall" v-if="publicIpAddress">
@@ -165,7 +166,8 @@ export default {
       networkLoading: false,
       network: {},
       publicIpAddress: {},
-      currentTab: 'details'
+      currentTab: 'details',
+      cksSshStartingPort: 2222
     }
   },
   created () {
@@ -185,8 +187,9 @@ export default {
         dataIndex: 'instancename'
       },
       {
-        title: this.$t('label.ipaddress'),
-        dataIndex: 'ipaddress'
+        title: this.$t('label.ssh.port'),
+        dataIndex: 'port',
+        scopedSlots: { customRender: 'port' }
       },
       {
         title: this.$t('label.zonename'),
@@ -286,35 +289,8 @@ export default {
     },
     fetchInstances () {
       this.instanceLoading = true
-      this.virtualmachines = []
-      if (!this.isObjectEmpty(this.resource) && this.arrayHasItems(this.resource.virtualmachineids)) {
-        var params = {}
-        if (this.isAdminOrDomainAdmin()) {
-          params.listall = true
-        }
-        if (this.isValidValueForKey(this.resource, 'projectid') &&
-          this.resource.projectid !== '') {
-          params.projectid = this.resource.projectid
-        }
-        params.ids = this.resource.virtualmachineids.join()
-        api('listVirtualMachines', params).then(json => {
-          const listVms = json.listvirtualmachinesresponse.virtualmachine
-          if (this.arrayHasItems(listVms)) {
-            for (var i = 0; i < listVms.length; ++i) {
-              var vm = listVms[i]
-              if (vm.nic && vm.nic.length > 0 && vm.nic[0].ipaddress) {
-                vm.ipaddress = vm.nic[0].ipaddress
-                listVms[i] = vm
-              }
-            }
-            this.virtualmachines = this.virtualmachines.concat(listVms)
-          }
-        }).catch(error => {
-          this.$notifyError(error)
-        }).finally(() => {
-          this.instanceLoading = false
-        })
-      }
+      this.virtualmachines = this.resource.virtualmachines
+      this.instanceLoading = false
     },
     fetchPublicIpAddress () {
       this.networkLoading = true

ui/src/views/compute/ScaleKubernetesCluster.vue

@@ -18,6 +18,10 @@
 <template>
   <div class="form-layout">
     <a-spin :spinning="loading">
+      <a-alert type="warning">
+        <span slot="message" v-html="$t('message.kubernetes.cluster.scale')" />
+      </a-alert>
+      <br />
       <a-form
         :form="form"
         @submit="handleSubmit"

ui/src/views/compute/UpgradeKubernetesCluster.vue

@@ -18,6 +18,10 @@
 <template>
   <div class="form-layout">
     <a-spin :spinning="loading">
+      <a-alert type="warning">
+        <span slot="message" v-html="$t('message.kubernetes.cluster.upgrade')" />
+      </a-alert>
+      <br />
       <a-form
         :form="form"
         @submit="handleSubmit"