show breadcrump on top global header for desktop

...otherwise in view panel for desktop and mobile

Signed-off-by: Rohit Yadav <[email protected]>

Author: rohityadavcloud

ui/src/components/CloudMonkey/Resource.vue

@@ -1,16 +1,6 @@
 <template>
   <div>
-    <!--
-    <font-awesome-icon :icon="['far', 'bell']" />
-    <font-awesome-icon :icon="['fas', 'dharmachakra']" size='2x' />
-    <font-awesome-icon :icon="['fab', 'ubuntu']" />
-    <font-awesome-icon :icon="['fab', 'ubuntu']" size="lg" />
-    <font-awesome-icon :icon="['fab', 'ubuntu']" size="2x" />
-    <font-awesome-icon :icon="['fab', 'centos']" size="4x" />
-    <font-awesome-icon icon="coffee" />
-    -->
-
-    <a-breadcrumb class="breadcrumb">
+    <a-breadcrumb class="breadcrumb" v-if="device !== 'desktop'">
       <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
         <router-link
           v-if="item.name"
@@ -243,6 +233,7 @@ import ChartCard from '@/components/chart/ChartCard'
 import DataView from '@/components/widgets/DataView'
 import InstanceView from '@/components/widgets/InstanceView'
 import Status from '@/components/widgets/Status'
+import { mixinDevice } from '@/utils/mixin.js'
 
 export default {
   name: 'Resource',
@@ -252,6 +243,7 @@ export default {
     InstanceView,
     Status
   },
+  mixins: [mixinDevice],
   data () {
     return {
       apiName: '',

ui/src/components/page/GlobalHeader.vue

@@ -12,21 +12,25 @@
         :type="collapsed ? 'menu-unfold' : 'menu-fold'"
         @click="toggle"/>
 
-      <!--
-      <a-breadcrumb class="breadcrumb" v-if="device !== 'mobile'">
+      <a-breadcrumb class="breadcrumb" v-if="device === 'desktop'">
         <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
           <router-link
             v-if="item.name"
             :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>
-      -->
+
       <user-menu></user-menu>
     </div>
     <div v-else :class="['top-nav-header-index', theme]">