feat(astrapia): add layer UI

fix website page navigation bug & refactor
fix multiple calls
renew graph on layout change
order of calls
add dropdown & AggregationConditionBox skeleton
fix styling
remove bold from layer description
add VMTag & Tag Condition
fix filterlayer building
replace Tooltip component with :title
add Naming Condition, StylingCondition & cleanup
naming changes & emit on change array
remove unused fields in status & cleanup LayerManagement
add StylingCondition skeleton structure & remove bold from description
add full edgeStyling, nodeStyling
add Node Styling
fix layer editing
fix filter layer mapping
remove horizontal scrolling in form

NETANOL-168

Author: TELBC

Astrapia/components/Graph.vue

@@ -221,6 +221,9 @@ export default {
       return !this.isEqual(this.previousData, newData);
     },
     isEqual(obj1, obj2) {
+      if (obj1 === null || obj2 === null) {
+        return obj1 === obj2;
+      }
       if (typeof obj1 !== 'object' || typeof obj2 !== 'object')
         return obj1 === obj2;
 

Astrapia/components/GraphFilterMenu.vue

@@ -4,7 +4,7 @@
       <font-awesome-icon icon="fa-solid fa-chevron-left" class="collapse-expand-icon" v-bind:class="{ 'collapse-expand-layer-rotate': graphFilterMenuState.isExpanded }" />
     </div>
     <div class="graph-filter-menu-container" :class="{ 'expanded': graphFilterMenuState.isExpanded }">
-      <LayerManagement v-bind:layout="graphFilterMenuState.selectedLayout.name" v-bind:layers="graphFilterMenuState.selectedLayout.layers" />
+      <LayerManagement v-bind:layout="graphFilterMenuState.selectedLayout.name" v-bind:layers="graphFilterMenuState.selectedLayout.layers"/>
     </div>
   </div>
 </template>
@@ -20,8 +20,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits<{
+  layersFetched: [],
   menuOpened: [boolean]
-}>()
+}>();
 
 const graphFilterMenuState = ref({
   isExpanded: false,
@@ -34,6 +35,7 @@ const graphFilterMenuState = ref({
 async function getLayersOfLayout() {
   const layoutData = await layoutService.getLayoutByName(graphFilterMenuState.value.selectedLayout.name);
   graphFilterMenuState.value.selectedLayout.layers = layoutData.layers;
+  emit('layersFetched');
 }
 
 // on layout change fetch layers of the layout

Astrapia/components/IntervalMenu.vue

@@ -4,9 +4,7 @@
       <h3 class="title">{{ title }}</h3>
       <span class="description-box">
         <label class="description">{{description}}</label>
-        <Tooltip :title="inputValue">
-          <label class="value">{{inputValue}}</label>
-        </Tooltip>
+        <label class="value" :title="inputValue">{{inputValue}}</label>
         <label class="unit">{{selectedUnit}}</label>
       </span>
       <div class="input-container">
@@ -23,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from 'vue';
+import { ref } from 'vue';
 
 const props = defineProps<{
   isOpen: Boolean;

Astrapia/components/IntervalToggle.vue

@@ -1,7 +1,5 @@
 <template>
-  <Tooltip :title="isChecked ? 'Custom Interval' : 'Fixed Interval'">
-    <input type="checkbox" class="theme-checkbox" :checked="isChecked" @change="emitValue">
-  </Tooltip>
+  <input type="checkbox" class="theme-checkbox" :checked="isChecked" @change="emitValue" :title="isChecked ? 'Custom Interval' : 'Fixed Interval'">
 </template>
 
 <script setup lang="ts">

Astrapia/components/LayerManagement.vue

@@ -21,22 +21,52 @@
         </div>
         <div class="infos">
           <p>description: </p>
-          <div>{{ removeBoldTagsFromDescription(layer.description) }}</div>
+          <div>{{ layer.description }}</div>
         </div>
       </div>
     </div>
   </div>
   <div class="create-form" v-bind:class="{ 'create-layer-open': layerListState.createLayerOpen }">
     <input class="create-inputs" type="text" placeholder="Layer Name" v-model="createLayerData.name" />
-    <input class="create-inputs" type="text" placeholder="Layer Type" v-model="createLayerData.type" />
-    <div class="enable-new-layer">
-      <p>Enable?</p>
+    <select class="create-dropdown-inputs" required v-model="createLayerData.type">
+      <option value="" disabled selected hidden>Select Layer Type</option>
+      <option value="filter">Filter</option>
+      <option value="aggregation">Grouping</option>
+      <option value="tag-filter">Tag Filter</option>
+      <option value="vmware-tagging">Tag VMware</option>
+      <option value="naming">Naming</option>
+      <option value="styling">Styling</option>
+    </select>
+    <div class="enable-new-layer" v-if="createLayerData.type !==''">
+      <p>Enable on creation</p>
       <input type="checkbox" class="theme-checkbox" v-model="createLayerData.enabled" />
     </div>
-    <FilterConditionBox :emit-filter-conditions="layerListState.emitFilterConditions" :edit-layer-filter-conditions="createLayerData.filterList.conditions" @update-filter-conditions="handleFilterConditionsEmit" />
-    <div class="enable-new-layer">
-      <p>Implicit Include?</p>
-      <input type="checkbox" class="theme-checkbox" v-model="createLayerData.filterList.implicitInclude" />
+    <div class="filter-condition" v-if="createLayerData.type === 'filter'">
+      <FilterConditionBox :edit-layer-filter-conditions="createLayerData.filterList.conditions" @update-filter-conditions="handleFilterConditionsEmit" />
+      <div class="enable-new-layer" >
+        <p>Implicit Inclusion</p>
+        <input type="checkbox" class="theme-checkbox" v-model="createLayerData.filterList.implicitInclude" />
+      </div>
+    </div>
+    <div class="filter-condition" v-if="createLayerData.type === 'aggregation'">
+      <AggregationConditionBox :edit-layer-aggregation-matchers="createLayerData.matchers" @update-aggregation-matchers="handleFilterConditionsEmit"  />
+    </div>
+    <div class="filter-condition" v-if="createLayerData.type === 'tag-filter'">
+      <TagConditionBox :edit-layer-tag-conditions="createLayerData.conditions" @update-tag-conditions="handleFilterConditionsEmit" />
+      <div class="enable-new-layer" >
+        <p>Implicit Inclusion</p>
+        <input type="checkbox" class="theme-checkbox" v-model="createLayerData.implicitInclude" />
+      </div>
+    </div>
+    <div class="filter-condition" v-if="createLayerData.type === 'naming'">
+      <NamingConditionBox :edit-layer-naming-conditions="createLayerData.matchers" @update-naming-conditions="handleFilterConditionsEmit" />
+      <div class="enable-new-layer" >
+        <p>Overwrite with DNS</p>
+        <input type="checkbox" class="theme-checkbox" v-model="createLayerData.overwriteWithDns" />
+      </div>
+    </div>
+    <div class="filter-condition" v-if="createLayerData.type === 'styling'">
+      <StyleConditionBox :edit-layer-edge-conditions="createLayerData.edgeStyler" :edit-layer-node-conditions="createLayerData.nodeStyler" @update-styling-conditions="handleFilterConditionsEmit" />
     </div>
   </div>
   <div class="create-layer" @click="toggleCreateLayerOpen">
@@ -48,8 +78,12 @@
 <script setup lang="ts">
 import {ref, watch, inject} from "vue";
 import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
-import FilterConditionBox from "~/components/FilterConditionBox.vue";
 import layerService from "~/services/layerService";
+import FilterConditionBox from "~/components/conditions/FilterConditionBox.vue";
+import AggregationConditionBox from "~/components/conditions/AggregationConditionBox.vue";
+import TagConditionBox from "~/components/conditions/TagConditionBox.vue";
+import NamingConditionBox from "~/components/conditions/NamingConditionBox.vue";
+import StyleConditionBox from "~/components/conditions/StyleConditionBox.vue";
 
 export interface FilterConditions {
   sourceAddress: string,
@@ -66,6 +100,7 @@ export interface Layer {
   name: string,
   type: string,
   enabled: boolean,
+  overwriteWithDns: boolean,
   filterList: {
     conditions: FilterConditions[],
     implicitInclude: boolean
@@ -89,10 +124,16 @@ const createLayerData = ref({
   name: '',
   type: '',
   enabled: false,
+  overwriteWithDns: true,
   filterList: {
     conditions: [] as Array<FilterConditions>,
     implicitInclude: true
-  }
+  },
+  implicitInclude: true,
+  conditions: [],
+  matchers:[],
+  edgeStyler:{},
+  nodeStyler:{}
 })
 
 const layerListState = ref({
@@ -103,7 +144,6 @@ const layerListState = ref({
   },
   layerOpen: -1,
   createLayerOpen: false,
-  emitFilterConditions: false,
   isEditExistingLayer: -1,
   doneEmittingFilterConditions: false,
 });
@@ -115,10 +155,6 @@ const rerenderer = ref({
 
 const getLayersOfLayout = inject<() => void>('getLayersOfLayout');
 
-function removeBoldTagsFromDescription(description: string) {
-  return description.replace(/<b>|<\/b>/g, '');
-}
-
 async function getExistingLayer(index: number) {
   const layerToEdit = await layerService.getLayer(layerListState.value.selectedLayout.name, index);
   Object.assign(createLayerData.value, layerToEdit);
@@ -153,18 +189,35 @@ function setLayerEnabled(index: number, value: boolean) {
       name: '',
       type: '',
       enabled: false,
+      overwriteWithDns: true,
       filterList: {
         conditions: [] as Array<FilterConditions>,
-        implicitInclude: false
-      }
+        implicitInclude: true
+      },
+      implicitInclude: true,
+      conditions: [],
+      matchers:[],
+      edgeStyler:{},
+      nodeStyler:{}
     })
-    getLayersOfLayout!();
   }, 250);
 }
 
 // handle emitted filter conditions from FilterConditionBox
-function handleFilterConditionsEmit(newConditions: Array<FilterConditions>, doneEmitting: boolean) {
-  createLayerData.value.filterList.conditions = newConditions;
+function handleFilterConditionsEmit(newConditions: any, doneEmitting: boolean) {
+  if(createLayerData.value.type === 'filter'){
+    createLayerData.value.filterList.conditions = newConditions;
+  }else if(createLayerData.value.type === 'aggregation'){
+    createLayerData.value.matchers = newConditions;
+  }else if(createLayerData.value.type === 'tag-filter'){
+    createLayerData.value.conditions = newConditions;
+  }else if(createLayerData.value.type === 'naming'){
+    createLayerData.value.matchers = newConditions;
+  }else if(createLayerData.value.type === 'styling'){
+    delete (createLayerData.value as { matchers?: any }).matchers;
+    createLayerData.value.edgeStyler = newConditions.edgeStyler;
+    createLayerData.value.nodeStyler = newConditions.nodeStyler;
+  }
   layerListState.value.doneEmittingFilterConditions = doneEmitting;
 }
 
@@ -181,10 +234,22 @@ function toggleCreateLayerOpen() {
   }
   else {
     layerListState.value.createLayerOpen = true;
-    if (layerListState.value.isEditExistingLayer > -1) {
-      layerListState.value.emitFilterConditions = true;
-    }
   }
+  Object.assign(createLayerData.value, {
+    name: '',
+    type: '',
+    enabled: false,
+    overwriteWithDns: true,
+    filterList: {
+      conditions: [] as Array<FilterConditions>,
+      implicitInclude: true
+    },
+    implicitInclude: true,
+    conditions: [],
+    matchers:[],
+    edgeStyler:{},
+    nodeStyler:{}
+  })
 }
 
 function toggleEditExistingLayer(index: number) {
@@ -196,15 +261,20 @@ function toggleEditExistingLayer(index: number) {
 function editExistingLayerAndReset() {
   editExistingLayer(layerListState.value.isEditExistingLayer);
   layerListState.value.isEditExistingLayer = -1;
-  layerListState.value.emitFilterConditions = false;
   Object.assign(createLayerData.value, {
     name: '',
     type: '',
     enabled: false,
+    overwriteWithDns: true,
     filterList: {
       conditions: [] as Array<FilterConditions>,
-      implicitInclude: false
-    }
+      implicitInclude: true
+    },
+    implicitInclude: true,
+    conditions: [],
+    matchers:[],
+    edgeStyler:{},
+    nodeStyler:{}
   });
 }
 
@@ -215,10 +285,16 @@ function createNewLayerAndReset() {
     name: '',
     type: '',
     enabled: false,
+    overwriteWithDns: true,
     filterList: {
       conditions: [] as Array<FilterConditions>,
-      implicitInclude: false
-    }
+      implicitInclude: true
+    },
+    implicitInclude: true,
+    conditions: [],
+    matchers:[],
+    edgeStyler:{},
+    nodeStyler:{}
   });
 }
 
@@ -341,6 +417,8 @@ watch(() => props.layers!, (newLayers, oldLayers) => {
   flex-direction: column;
   align-items: center;
   height: 94.5%;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .create-inputs {
@@ -356,6 +434,28 @@ watch(() => props.layers!, (newLayers, oldLayers) => {
   outline: none;
 }
 
+.create-dropdown-inputs {
+  width: 91%;
+  border: 1px solid #424242;
+  background: white;
+  border-radius: 4px;
+  font-size: 2vh;
+  margin-bottom: 1.5vh;
+  padding: 2%;
+  outline: none;
+  color: #424242;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.create-dropdown-inputs:focus {
+  outline: none;
+}
+
+.filter-condition{
+  margin-left: 10%;
+  width: 100%;
+}
+
 .enable-new-layer {
   display: flex;
   flex-direction: row;

Astrapia/components/SlideMenu.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="slide-menu" :class="{ 'slide-up': isOpen }">
     <div class="slider-container">
-      <Tooltip title="Change link distance">
-        <input type="range" min="50" max="800" v-model="distance" @input="updateDistance" class="slider">
-      </Tooltip>
-      <Tooltip title="Change Simulation force">
-        <input type="range" min="200" max="3000" v-model="force" @input="updateSim" class="slider">
-      </Tooltip>
+      <input type="range" min="50" max="800" v-model="distance" @input="updateDistance" class="slider" title="Change link distance">
+      <input type="range" min="200" max="3000" v-model="force" @input="updateSim" class="slider" title="Change Simulation force">
     </div>
   </div>
 </template>