components: styling and placement refactoring

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

ui/src/components/header/ProjectMenu.vue

@@ -16,49 +16,27 @@
 // under the License.
 
 <template>
-  <a-popover
+  <span class="header-notice-opener">
-    class="project"
+    <a-select
-    v-model="visible"
+      class="project-select"
-    trigger="click"
+      defaultValue="Default View"
-    placement="bottom"
+      :value="selectedProject"
-    :autoAdjustOverflow="true"
+      :disabled="isDisabled()"
-    :arrowPointAtCenter="true">
+      :filterOption="filterProject"
-    <template slot="content">
+      @change="changeProject"
-      <a-menu style="margin: -12px -16px">
+      showSearch>
-        <a-menu-item>
+      <a-icon slot="suffixIcon" style="font-size:14px" type="project" />
-          <a-icon class="project-icon" type="login" />
+      <a-select-option v-for="(project, index) in projects" :key="index">
-          <a-select
+        {{ project.displaytext || project.name }}
-            class="project-select"
+      </a-select-option>
-            size="default"
+    </a-select>
-            defaultValue="Default View"
+  </span>
-            :value="selectedProject"
-            :disabled="isDisabled()"
-            :filterOption="filterProject"
-            @change="changeProject"
-            showSearch>
-            <a-select-option v-for="(project, index) in projects" :key="index">
-              {{ project.displaytext || project.name }}
-            </a-select-option>
-          </a-select>
-        </a-menu-item>
-        <a-menu-item>
-          <router-link :to="{ path: '/project' }">
-            <a-icon class="project-icon" type="project" />
-            {{ $t('Projects') }}
-          </router-link>
-        </a-menu-item>
-      </a-menu>
-    </template>
-    <span @click="visible = !visible" class="header-notice-opener">
-      <a-icon class="project-icon" type="project" />
-    </span>
-  </a-popover>
 </template>
 
 <script>
 import Vue from 'vue'
-import { api } from '@/api'
 import store from '@/store'
+import { api } from '@/api'
 import { CURRENT_PROJECT } from '@/store/mutation-types'
 
 export default {
@@ -73,8 +51,6 @@ export default {
   mounted () {
     this.fetchData()
   },
-  computed: {
-  },
   methods: {
     fetchData () {
       if (this.isDisabled()) {
@@ -130,11 +106,11 @@ export default {
 <style lang="less" scoped>
 .project {
   &-select {
-    width: 200px;
+    width: 40%;
   }
 
   &-icon {
-    font-size: 18px;
+    font-size: 20px;
     line-height: 1;
     padding-top: 5px;
     padding-right: 5px;

ui/src/components/header/UserMenu.vue

@@ -18,7 +18,6 @@
 <template>
   <div class="user-menu">
 
-    <project-menu class="action"/>
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <a-dropdown>
@@ -60,14 +59,12 @@
 <script>
 import config from '@/config/settings'
 import HeaderNotice from './HeaderNotice'
-import ProjectMenu from './ProjectMenu'
 import TranslationMenu from './TranslationMenu'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'UserMenu',
   components: {
-    ProjectMenu,
     TranslationMenu,
     HeaderNotice
   },

ui/src/components/page/GlobalHeader.vue

@@ -28,7 +28,7 @@
         class="trigger"
         :type="collapsed ? 'menu-unfold' : 'menu-fold'"
         @click="toggle"/>
-      <breadcrumb v-if="device !== 'mobile'" />
+      <project-menu v-if="device !== 'mobile'" />
       <user-menu></user-menu>
     </div>
     <div v-else :class="['top-nav-header-index', theme]">
@@ -47,8 +47,8 @@
             :type="collapsed ? 'menu-fold' : 'menu-unfold'"
             @click="toggle"></a-icon>
         </div>
-        <breadcrumb v-if="device !== 'mobile'" />
+        <project-menu v-if="device !== 'mobile'" />
-        <user-menu class="header-index-right"></user-menu>
+        <user-menu></user-menu>
       </div>
     </div>
 
@@ -59,6 +59,7 @@
 import Breadcrumb from '@/components/widgets/Breadcrumb'
 import Logo from '../header/Logo'
 import SMenu from '../menu/'
+import ProjectMenu from '../header/ProjectMenu'
 import UserMenu from '../header/UserMenu'
 
 import { mixin } from '@/utils/mixin.js'
@@ -69,6 +70,7 @@ export default {
     Breadcrumb,
     Logo,
     SMenu,
+    ProjectMenu,
     UserMenu
   },
   mixins: [mixin],

ui/src/components/view/DetailSettings.vue

@@ -52,7 +52,7 @@
                 <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" style="font-size: 24px"/>
               </a-button>
               <a-button shape="circle" size="small" @click="hideEditDetail(index)" style="margin: 2px">
-                <a-icon type="close-circle" theme="twoTone" twoToneColor="#eb2f96" style="font-size: 24px"/>
+                <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" style="font-size: 24px"/>
               </a-button>
             </span>
             <span v-else>{{ item.value }}</span>

ui/src/components/widgets/Breadcrumb.vue

@@ -27,11 +27,25 @@
       </router-link>
       <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: -1px; margin-top: 1px"/>
-        </a-button>
       </span>
-      <span v-else>{{ $t(item.meta.title) }}</span>
+      <span v-else>
+        {{ $t(item.meta.title) }}
+      </span>
+      <a-tooltip v-if="index === (breadList.length - 1)" placement="bottom">
+        <template slot="title">
+          {{ "Refresh" }}
+        </template>
+        <a-button
+          shape="circle"
+          style="margin-left: 8px"
+          @click="$emit('refresh')" >
+          <a-icon
+            type="reload"
+            style="margin-left: 0px"
+            @click="$emit('refresh')"
+          />
+        </a-button>
+      </a-tooltip>
     </a-breadcrumb-item>
   </a-breadcrumb>
 </template>

ui/src/layouts/ResourceLayout.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div style="padding-top: 12px" class="page-header-index-wide page-header-wrapper-grid-content-main">
+  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
     <a-row :gutter="12">
       <a-col :md="24" :lg="9" style="margin-bottom: 12px">
         <slot name="left">

ui/src/views/AutogenView.vue

@@ -17,93 +17,67 @@
 
 <template>
   <div>
-    <a-card class="mobile-breadcrumb" v-if="device === 'mobile'">
+    <a-card class="mobile-breadcrumb">
-      <breadcrumb />
+      <a-row>
-    </a-card>
+        <a-col :span="24" style="display: inline-flex">
-    <a-row>
+          <breadcrumb style="margin-right: 10px; width: 100%" @refresh="fetchData()" />
-      <a-col :span="18">
+          <span
-        <span
+            v-for="(action, actionIndex) in actions"
-          v-for="(action, actionIndex) in actions"
+            :key="actionIndex">
-          :key="actionIndex">
+            <a-tooltip
-          <a-tooltip
+              placement="bottom"
-            placement="bottom"
+              v-if="action.api in $store.getters.apis &&
-            v-if="action.api in $store.getters.apis &&
+                ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) ||
-              ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) ||
+                (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))">
-              (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))">
+              <template slot="title">
-            <template slot="title">
+                {{ $t(action.label) }}
-              {{ $t(action.label) }}
+              </template>
-            </template>
+              <a-button
-            <a-button
+                :icon="action.icon"
-              :icon="action.icon"
+                :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
-              :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
+                shape="circle"
-              shape="circle"
+                style="margin-right: 5px"
-              style="margin-right: 5px"
+                @click="execAction(action)"
-              @click="execAction(action)"
+              >
-            >
+              </a-button>
-            </a-button>
+            </a-tooltip>
-          </a-tooltip>
+          </span>
-        </span>
-        <span v-if="!dataView" style="float: right; padding-right: 8px; margin-top: -2px">
-          <a-tooltip placement="bottom">
-            <template slot="title">
-              {{ "Auto-Refresh" }}
-            </template>
-            <a-switch
-              style="margin: 8px;"
-              :loading="loading"
-              :checked="autoRefresh"
-              @change="toggleAutoRefresh"
-            />
-          </a-tooltip>
-          <a-tooltip placement="bottom">
-            <template slot="title">
-              {{ "Refresh" }}
-            </template>
-            <a-button
-              @click="fetchData()"
-              :loading="loading"
-              shape="circle"
-              icon="reload"
-            />
-          </a-tooltip>
-        </span>
-      </a-col>
-      <a-col :span="6">
-        <a-tooltip placement="bottom" v-if="dataView">
-          <template slot="title">
-            {{ "Refresh" }}
-          </template>
-          <a-button
-            style="float: right"
-            @click="fetchData()"
-            :loading="loading"
-            shape="circle"
-            icon="reload"
-          />
-        </a-tooltip>
-        <a-tooltip placement="bottom" v-if="dataView">
-          <template slot="title">
-            {{ "Auto-Refresh" }}
-          </template>
-          <a-switch
-            v-if="dataView"
-            style="float: right; margin: 5px;"
-            :loading="loading"
-            :checked="autoRefresh"
-            @change="toggleAutoRefresh"
-          />
-        </a-tooltip>
 
-        <a-input-search
+          <a-input-search
-          size="default"
+            style="width: 100%; padding-left: 5px"
-          placeholder="Search"
+            size="default"
-          v-model="searchQuery"
+            placeholder="Search"
-          v-if="!dataView"
+            v-model="searchQuery"
-          @search="onSearch"
+            v-if="!dataView"
-        >
+            @search="onSearch"
-        </a-input-search>
+          >
-      </a-col>
+          </a-input-search>
-    </a-row>
+        </a-col>
+        <a-col :span="24" v-if="false">
+          <span
+            v-for="(action, actionIndex) in actions"
+            :key="actionIndex">
+            <a-tooltip
+              placement="bottom"
+              v-if="action.api in $store.getters.apis &&
+                ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) ||
+                (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))">
+              <template slot="title">
+                {{ $t(action.label) }}
+              </template>
+              <a-button
+                :icon="action.icon"
+                :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
+                shape="circle"
+                style="margin-right: 5px"
+                @click="execAction(action)"
+              >
+              </a-button>
+            </a-tooltip>
+          </span>
+        </a-col>
+      </a-row>
+    </a-card>
 
     <div v-show="showAction">
       <keep-alive v-if="currentAction.component">
@@ -244,7 +218,6 @@ export default {
     return {
       apiName: '',
       loading: false,
-      autoRefresh: false,
       columns: [],
       items: [],
       itemCount: 0,
@@ -418,21 +391,6 @@ export default {
       this.searchQuery = value
       this.fetchData()
     },
-    toggleAutoRefresh () {
-      this.autoRefresh = !this.autoRefresh
-      this.doRefresh()
-    },
-    doRefresh () {
-      if (!this.autoRefresh) {
-        return
-      }
-      const doRefresh = this.doRefresh
-      const fetchData = this.fetchData
-      setTimeout(function () {
-        fetchData()
-        doRefresh()
-      }, 5000)
-    },
     closeAction () {
       this.currentAction.loading = false
       this.showAction = false
@@ -626,8 +584,8 @@ export default {
 <style scoped>
 
 .mobile-breadcrumb {
-  margin-left: -16px;
+  margin-left: -24px;
-  margin-right: -16px;
+  margin-right: -24px;
   margin-top: -16px;
   margin-bottom: 12px;
 }

ui/src/views/dashboard/CapacityDashboard.vue

@@ -37,37 +37,12 @@
               Fetch Latest
             </template>
             <a-button
-              type="primary"
               shape="circle"
               @click="listCapacity(zoneSelected, true)">
               <a-icon class="capacity-dashboard-button-icon" type="reload" />
             </a-button>
           </a-tooltip>
         </div>
-        <div class="capacity-dashboard-button">
-          <a-tooltip placement="bottom">
-            <template slot="title">
-              View Alerts
-            </template>
-            <a-button shape="circle">
-              <router-link :to="{ name: 'alert' }">
-                <a-icon class="capacity-dashboard-button-icon" type="flag" />
-              </router-link>
-            </a-button>
-          </a-tooltip>
-        </div>
-        <div class="capacity-dashboard-button">
-          <a-tooltip placement="bottom">
-            <template slot="title">
-              View Hosts in Alert State
-            </template>
-            <a-button type="danger" shape="circle">
-              <router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
-                <a-icon class="capacity-dashboard-button-icon" type="desktop" />
-              </router-link>
-            </a-button>
-          </a-tooltip>
-        </div>
       </div>
       <a-row :gutter="12">
         <a-col
@@ -96,7 +71,36 @@
     <a-col :xl="6">
       <chart-card>
         <div style="text-align: center">
-          <a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
+          <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper">
+            <template slot="title">
+              View Hosts in Alert State
+            </template>
+            <a-button type="danger" shape="circle">
+              <router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
+                <a-icon class="capacity-dashboard-button-icon" type="desktop" />
+              </router-link>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper">
+            <template slot="title">
+              View Alerts
+            </template>
+            <a-button shape="circle">
+              <router-link :to="{ name: 'alert' }">
+                <a-icon class="capacity-dashboard-button-icon" type="flag" />
+              </router-link>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper">
+            <template slot="title">
+              View Events
+            </template>
+            <a-button shape="circle">
+              <router-link :to="{ name: 'event' }">
+                <a-icon class="capacity-dashboard-button-icon" type="schedule" />
+              </router-link>
+            </a-button>
+          </a-tooltip>
         </div>
         <template slot="footer">
           <div class="capacity-dashboard-footer">
@@ -261,6 +265,10 @@ export default {
     }
   }
 
+  &-button-wrapper {
+    margin-left: 12px;
+  }
+
   &-button {
     width: auto;
     padding-left: 12px;