add button to copy a VM console URL (apache#7351)

Co-authored-by: Eduardo Zanetta <eduardo.zanetta@scclouds.com.br>

Author: 2 people

ui/public/locales/en.json

@@ -503,6 +503,7 @@
 "label.copied.clipboard": "Copied to clipboard",
 "label.copy": "Copy",
 "label.copy.clipboard": "Copy to clipboard",
+"label.copy.consoleurl": "Copy console URL to clipboard",
 "label.copyid": "Copy ID",
 "label.core": "Core",
 "label.core.zone.type": "Core zone type",

ui/src/components/view/ActionButton.vue

@@ -21,7 +21,26 @@
       <template #title>
         {{ $t('label.view.console') }}
       </template>
-      <console :resource="resource" :size="size" />
+      <console
+        style="margin-top: -5px;"
+        :resource="resource"
+        size="default"
+        v-if="resource.id"
+        icon="code"
+      />
+    </a-tooltip>
+    <a-tooltip arrowPointAtCenter placement="bottomRight" v-if="resource && resource.id && dataView">
+      <template #title>
+        {{ $t('label.copy.consoleurl') }}
+      </template>
+      <console
+        copyUrlToClipboard
+        style="margin-top: -5px;"
+        :resource="resource"
+        size="default"
+        v-if="resource.id"
+        icon="copy"
+      />
     </a-tooltip>
     <a-tooltip
       v-for="(action, actionIndex) in actions"

ui/src/components/view/InfoCard.vue

@@ -88,7 +88,24 @@
                 <template #title>
                   <span>{{ $t('label.view.console') }}</span>
                 </template>
-                <console style="margin-top: -5px;" :resource="resource" size="default" v-if="resource.id" />
+                <console
+                  style="margin-top: -5px;"
+                  :resource="resource"
+                  size="default"
+                  v-if="resource.id"
+                />
+              </a-tooltip>
+              <a-tooltip placement="right" >
+                <template #title>
+                  <span>{{ $t('label.copy.consoleurl') }}</span>
+                </template>
+                <console
+                  copyUrlToClipboard
+                  style="margin-top: -5px;"
+                  :resource="resource"
+                  size="default"
+                  v-if="resource.id"
+                />
               </a-tooltip>
             </div>
           </slot>

ui/src/components/widgets/Console.vue

@@ -20,7 +20,8 @@
     v-if="['vm', 'systemvm', 'router', 'ilbvm'].includes($route.meta.name) && 'listVirtualMachines' in $store.getters.apis && 'createConsoleEndpoint' in $store.getters.apis"
     @click="consoleUrl">
     <a-button style="margin-left: 5px" shape="circle" type="dashed" :size="size" :disabled="['Stopped', 'Error', 'Destroyed'].includes(resource.state) || resource.hostcontrolstate === 'Offline'" >
-      <code-outlined />
+      <code-outlined v-if="!copyUrlToClipboard"/>
+      <copy-outlined v-else />
     </a-button>
   </a>
 </template>
@@ -39,7 +40,8 @@ export default {
     size: {
       type: String,
       default: 'small'
-    }
+    },
+    copyUrlToClipboard: Boolean
   },
   data () {
     return {
@@ -53,7 +55,21 @@ export default {
       api('createConsoleEndpoint', params).then(json => {
         this.url = (json && json.createconsoleendpointresponse) ? json.createconsoleendpointresponse.consoleendpoint.url : '#/exception/404'
         if (json.createconsoleendpointresponse.consoleendpoint.success) {
-          window.open(this.url, '_blank')
+          if (this.copyUrlToClipboard) {
+            this.$message.success({
+              content: this.$t('label.copied.clipboard')
+            })
+            const hiddenElement = document.createElement('textarea')
+            hiddenElement.value = this.url
+            document.body.appendChild(hiddenElement)
+            hiddenElement.focus()
+            hiddenElement.select()
+
+            document.execCommand('copy')
+            document.body.removeChild(hiddenElement)
+          } else {
+            window.open(this.url, '_blank')
+          }
         } else {
           this.$notification.error({
             message: this.$t('error.execute.api.failed') + ' ' + 'createConsoleEndpoint',