network: nsp stub

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

ui/src/components/view/ActionButton.vue

@@ -17,6 +17,7 @@
 
 <template>
   <span class="row-action-button">
+    <console :resource="resource" size="default" v-if="resource && resource.id && dataView" />
     <a-tooltip
       v-for="(action, actionIndex) in actions"
       :key="actionIndex"
@@ -56,9 +57,13 @@
 
 <script>
 import { api } from '@/api'
+import Console from '@/components/widgets/Console'
 
 export default {
   name: 'ActionButton',
+  components: {
+    Console
+  },
   data () {
     return {
       actionBadge: []

ui/src/components/view/InfoCard.vue

@@ -71,7 +71,6 @@
           <div class="resource-detail-item__details">
             <status class="status" :text="resource.state || resource.status"/>
             <span>{{ resource.state || resource.status }}</span>
-            <console style="margin-left: 5px" :resource="resource" size="default" v-if="resource.id" />
           </div>
         </div>
         <div class="resource-detail-item" v-if="resource.id">

ui/src/config/section/infra/phynetworks.js

@@ -27,8 +27,11 @@ export default {
     name: 'details',
     component: () => import('@/components/view/DetailsTab.vue')
   }, {
-    name: 'Network',
-    component: () => import('@/views/infra/network/NetworkTab.vue')
+    name: 'Traffic Types',
+    component: () => import('@/views/infra/network/TrafficTypesTab.vue')
+  }, {
+    name: 'Service Providers',
+    component: () => import('@/views/infra/network/ServiceProvidersTab.vue')
   }, {
     name: 'Dedicated VLAN/VNI Ranges',
     component: () => import('@/views/infra/network/DedicatedVLANTab.vue')

ui/src/views/infra/network/ServiceProvidersTab.vue

@@ -0,0 +1,91 @@
+// 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>
+  <a-spin :spinning="fetchLoading">
+    TODO: implement support for config drive, vpc router, ilbvm, virtual router
+    <a-tabs :tabPosition="device === 'mobile' ? 'top' : 'left'" :animated="false">
+      <a-tab-pane v-for="(nsp, index) in nsps" :key="index">
+        <span slot="tab">
+          {{ nsp.name}}
+          <status :text="nsp.state" style="margin-bottom: 6px" />
+        </span>
+        <router-link :to="{ path: '/nsp/' + nsp.id + '?name=' + nsp.name + '&physicalnetworkid=' + resource.id }">{{ nsp.name }} </router-link>
+        {{ nsp }}
+      </a-tab-pane>
+    </a-tabs>
+  </a-spin>
+</template>
+
+<script>
+import { api } from '@/api'
+import { mixinDevice } from '@/utils/mixin.js'
+import Status from '@/components/widgets/Status'
+
+export default {
+  name: 'ServiceProvidersTab',
+  components: {
+    Status
+  },
+  mixins: [mixinDevice],
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      nsps: [],
+      fetchLoading: false
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    loading (newData, oldData) {
+      if (!newData && this.resource.id) {
+        this.fetchData()
+      }
+    }
+  },
+  methods: {
+    fetchData () {
+      this.fetchLoading = true
+      api('listNetworkServiceProviders', { physicalnetworkid: this.resource.id }).then(json => {
+        this.nsps = json.listnetworkserviceprovidersresponse.networkserviceprovider || []
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description']
+        })
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

ui/src/views/infra/network/TrafficTypesTab.vue

@@ -47,14 +47,6 @@
           <IpRangesTabStorage :resource="resource" />
         </div>
       </a-tab-pane>
-      <a-tab-pane tab="Service Providers" key="nsp">
-        <a-list size="small">
-          <a-list-item v-for="(nsp, index) in nsps" :key="index">
-            <status :text="nsp.state" />
-            <router-link :to="{ path: '/nsp/' + nsp.id + '?name=' + nsp.name + '&physicalnetworkid=' + resource.id }">{{ nsp.name }} </router-link>
-          </a-list-item>
-        </a-list>
-      </a-tab-pane>
     </a-tabs>
   </a-spin>
 </template>
@@ -62,18 +54,16 @@
 <script>
 import { api } from '@/api'
 import { mixinDevice } from '@/utils/mixin.js'
-import Status from '@/components/widgets/Status'
 import IpRangesTabPublic from './IpRangesTabPublic'
 import IpRangesTabManagement from './IpRangesTabManagement'
 import IpRangesTabStorage from './IpRangesTabStorage'
 
 export default {
-  name: 'NetworkTab',
+  name: 'TrafficTypesTab',
   components: {
     IpRangesTabPublic,
     IpRangesTabManagement,
-    IpRangesTabStorage,
-    Status
+    IpRangesTabStorage
   },
   mixins: [mixinDevice],
   props: {
@@ -89,7 +79,6 @@ export default {
   data () {
     return {
       traffictypes: [],
-      nsps: [],
       publicNetwork: {},
       fetchLoading: false
     }
@@ -134,18 +123,6 @@ export default {
       }).finally(() => {
         this.fetchLoading = false
       })
-
-      this.fetchLoading = true
-      api('listNetworkServiceProviders', { physicalnetworkid: this.resource.id }).then(json => {
-        this.nsps = json.listnetworkserviceprovidersresponse.networkserviceprovider
-      }).catch(error => {
-        this.$notification.error({
-          message: 'Request Failed',
-          description: error.response.headers['x-description']
-        })
-      }).finally(() => {
-        this.fetchLoading = false
-      })
     }
   }
 }