ADD: Netdoc beginnings

frontend/src/api-services/netdoc.service.js

+import TransactionService from './transaction.service'
+
+export default {
+  getVLANs(config) {
+    const ta = [
+      { name: 'nd.bcd.list', old: { is_own: true, sorting_params_list: ['name'] } },
+      { name: 'nd.vlan.list', join: { 0: 'default' } }
+    ]
+    return TransactionService.execute(config, ta)
+  },
+  getLports(config, vlan) {
+    const ta = [
+      { name: 'nd.vlan.list', old: { global_pk: vlan.global_pk, fetch_limit: 1 } },
+      { name: 'nd.vlan_egress.list', join: { 0: 'default' } },
+      { name: 'nd.l_port.list', join: { 1: 'default' } },
+      { name: 'nd.l2p_port.list', join: { 2: 'default' } },
+      { name: 'nd.p_port.list', join: { 3: 'default' } }
+    ]
+    return TransactionService.execute(config, ta)
+  }
+}

frontend/src/views/nd/Netdoc.vue

 <template>
-  <div>NETDOC WHOOO</div>
+  <div class="netdoc">
+    <b-row>
+      <b-col>
+        <b-card class="shadow-sm p-3" no-body>
+          <h3 class="m-0">BCDs & VLANs</h3>
+          <Loading :data="bcds">
+            <PaginatorList :items="bcds" initial-items-per-page="25" :sort-function="sort_bcds" block>
+              <template v-slot:item="data">
+                <b-card class="mb-3 shadow-sm" no-body :key="'bcd-card-'+ data.item.name">
+                  <b-card-header v-b-toggle="'bcd-'+data.item.name+'-collapse'" class="collapse-header">
+                    <h5 class="d-inline">{{ data.item.name }}</h5>
+                    <p v-if="data.item.vlan_count === 0"
+                       class="d-inline float-right font-italic mb-0">Keine VLANs</p>
+                    <font-awesome-icon v-else class="collapse-icon" :icon="['fas','chevron-down']"/>
+                  </b-card-header>
+                  <b-card-body body-class="p-0" v-if="data.item.vlan_count > 0">
+                    <b-collapse :id="'bcd-'+data.item.name+'-collapse'" v-model="bcd_collapse_states[data.index]">
+                      <ul class="mt-3">
+                        <li v-for="vlan in bcd2vlans[data.item.name]" :key="'vlan' + vlan.pk">
+                          <b>VLAN</b> {{ vlan.id }} - {{ vlan.name }} ({{ vlan.global_pk }}) [{{ vlan.net_instnc }}]
+                          <b-button @click="get_l_ports(vlan)">Get L Ports</b-button>
+                          <ul>
+                            <li v-for="l_port in vlan2lports[vlan.global_pk]" :key="'l_port-' + l_port.global_pk">
+                              <b>LPort</b> {{ l_port.name }} ({{ l_port.global_pk }}) | {{ l_port.description || '-' }}
+                              | {{ l_port.dev_fqdn }}
+                              <ul>
+                                <li v-for="l2p_port in vlan2l2pports[vlan.global_pk][l_port.pk]"
+                                    :key="'l2p_port-' + vlan.global_pk + '-' + l_port.pk + '-' + l2p_port.p_port_pk">
+                                  <b>PPORT</b> {{ vlan2pports[vlan.global_pk][l2p_port.p_port_pk][0].name }}
+                                  ({{ vlan2pports[vlan.global_pk][l2p_port.p_port_pk][0].global_pk }}) |
+                                  {{ vlan2pports[vlan.global_pk][l2p_port.p_port_pk][0].speed }}
+                                </li>
+                              </ul>
+                            </li>
+                          </ul>
+                        </li>
+                      </ul>
+                    </b-collapse>
+                  </b-card-body>
+                </b-card>
+              </template>
+            </PaginatorList>
+          </Loading>
+        </b-card>
+      </b-col>
+      <b-col>
+      </b-col>
+    </b-row>
+  </div>
 </template>
 
 <script>
+import NetdocService from '@/api-services/netdoc.service'
+import apiutil from '@/util/apiutil'
+import Loading from '@/components/Loading'
+import PaginatorList from '@/components/PaginatorList'
+
 export default {
-  name: 'Netdoc'
+  name: 'Netdoc',
+  components: { PaginatorList, Loading },
+  data() {
+    return {
+      bcds: null,
+      bcd2vlans: null,
+      vlan2lports: {},
+      vlan2l2pports: {},
+      vlan2pports: {},
+      bcd_collapse_states: []
+    }
+  },
+  async created() {
+    const response = await NetdocService.getVLANs(this.$store.state.netdb_axios_config)
+    this.bcds = response.data[0]
+    this.bcd2vlans = apiutil.dict_of_lists_by_value_of_array(response.data[1], 'bcd')
+  },
+  methods: {
+    async get_l_ports(vlan) {
+      const response = await NetdocService.getLports(this.$store.state.netdb_axios_config, vlan)
+      this.$set(this.vlan2lports, vlan.global_pk, response.data[2])
+      this.$set(this.vlan2l2pports, vlan.global_pk, apiutil.dict_of_lists_by_value_of_array(response.data[3], 'l_port_pk'))
+      this.$set(this.vlan2pports, vlan.global_pk, apiutil.dict_of_lists_by_value_of_array(response.data[4], 'pk'))
+    },
+    sort_bcds(a, b) {
+      return (a.vlan_count === b.vlan_count) ? 0 : a.vlan_count ? -1 : 1
+    }
+  }
 }
 </script>
 
 <style scoped>
+.collapse-icon {
+  display: inline;
+  vertical-align: center;
+  float: right;
+
+  transition: transform;
+  transition-duration: 250ms;
+}
 
+.not-collapsed > .collapse-icon {
+  transform: rotate(-180deg);
+}
+
+.collapse-header {
+  z-index: 69;
+}
 </style>