Gives the possibility to redirect to external links when the property is defined (#6505)

Co-authored-by: Lopez <rodrigo@scclouds.com.br>

Author: RodrigoDLopez

ui/public/locales/en.json

@@ -1420,6 +1420,7 @@
 "label.reboot": "Reboot",
 "label.receivedbytes": "Bytes received",
 "label.recover.vm": "Recover VM",
+"label.redirect": "Redirect to:",
 "label.redundantrouter": "Redundant router",
 "label.redundantstate": "Redundant state",
 "label.redundantvpcrouter": "Redundant VPC",

ui/public/locales/pt_BR.json

@@ -1297,7 +1297,9 @@
 "label.reboot": "Reiniciar",
 "label.receivedbytes": "Bytes recebidos",
 "label.recover.vm": "Recuperar VM",
-"label.redundantrouter": "Roteador redundantee",
+"label.redirect": "Clique para acessar:",
+"label.redundantrouter": "Roteador Redundante",
+"label.redundantrouterstate": "Estado redundante",
 "label.redundantstate": "Estado redundante",
 "label.redundantvpcrouter": "VPC redundante",
 "label.refresh": "Atualizar",

ui/src/components/header/ExternalLink.vue

@@ -0,0 +1,54 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <span v-if="$config.plugins.some(item => item.path && item.isExternalLink)">
+    <span class="action" v-if="$config.plugins.length == 1">
+      <a-tooltip placement="bottom">
+        <template #title>
+          {{ $t('label.redirect') + ' ' + ( $config.plugins[0].name || $config.plugins[0].path) }}
+        </template>
+        <a-button shape="circle" >
+          <a :href=" $config.plugins[0].path" target="_blank">
+            <img v-if="$config.plugins[0].icon" :src="$config.plugins[0].icon" :style="{height: '24px', padding: '2px', align: 'center'}"/>
+            <link-outlined v-else/>
+          </a>
+        </a-button>
+      </a-tooltip>
+    </span>
+    <a-dropdown v-else-if="$config.plugins.length > 1 && $config.plugins.some(item => item.path && item.isExternalLink)">
+      <span class="action ant-dropdown-link">
+        <a-button shape="circle" >
+          <link-outlined/>
+        </a-button>
+      </span>
+      <template #overlay>
+        <a-menu class="user-menu-wrapper">
+          <span v-for="external in $config.plugins" :key="external.isExternalLink">
+            <a-menu-item  v-if="external.path && external.isExternalLink=='true'" :key="external.isExternalLink">
+              <a :href="external.path" target="_blank">
+                <img v-if="external.icon" :src="external.icon" :style="{ height: '18px', width: '18px', align: 'center' }"/>
+                <link-outlined v-else/>
+                {{ external.name || external.path }}
+              </a>
+            </a-menu-item>
+          </span>
+        </a-menu>
+      </template>
+    </a-dropdown>
+  </span>
+</template>

ui/src/components/header/UserMenu.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div class="user-menu">
-
+    <external-link class="action"/>
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <label class="user-menu-server-info action" v-if="$config.multipleServer">
@@ -73,6 +73,7 @@
 
 <script>
 import { api } from '@/api'
+import ExternalLink from './ExternalLink'
 import HeaderNotice from './HeaderNotice'
 import TranslationMenu from './TranslationMenu'
 import { mapActions, mapGetters } from 'vuex'
@@ -83,6 +84,7 @@ import { SERVER_MANAGER } from '@/store/mutation-types'
 export default {
   name: 'UserMenu',
   components: {
+    ExternalLink,
     TranslationMenu,
     HeaderNotice,
     ResourceIcon

ui/src/config/router.js

@@ -281,12 +281,14 @@ export function asyncRouterMap () {
   const plugins = vueProps.$config.plugins
   if (plugins && plugins.length > 0) {
     plugins.map(plugin => {
-      routerMap[0].children.push({
-        path: '/plugins/' + plugin.name,
-        name: plugin.name,
-        component: IFramePlugin,
-        meta: { title: plugin.name, icon: plugin.icon, path: plugin.path }
-      })
+      if (!plugin.isExternalLink && plugin.path) {
+        routerMap[0].children.push({
+          path: '/plugins/' + plugin.name,
+          name: plugin.name,
+          component: IFramePlugin,
+          meta: { title: plugin.name, icon: plugin.icon, path: plugin.path }
+        })
+      }
     })
   }