NMS-16103: Node structure UI updates, selectable columns

ui/src/components/Device/DCBGroupFilters.vue

@@ -60,9 +60,9 @@ import { FeatherButton } from '@featherds/button'
 import { FeatherIcon } from '@featherds/icon'
 import ArrowDown from '@featherds/icon/navigation/ArrowDropDown'
 import { useStore } from 'vuex'
+import { DeviceConfigQueryParams } from '@/types/deviceConfig'
 
 const store = useStore()
-import { DeviceConfigQueryParams } from '@/types/deviceConfig'
 
 const vendorOptions = computed<string[]>(() => store.state.deviceModule.vendorOptions)
 const backupStatusOptions = computed<string[]>(() => store.state.deviceModule.backupStatusOptions)

ui/src/components/Nodes/ColumnSelectDropdown.vue

@@ -0,0 +1,78 @@
+<template>
+  <FeatherDropdown>
+    <template v-slot:trigger="{ attrs, on }">
+      <FeatherButton
+        icon="Select Columns"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <FeatherIcon :icon="settingsIcon" class="node-actions-icon" />
+      </FeatherButton>
+    </template>
+    <div class="node-actions-reset">
+      <FeatherButton secondary @click="resetToDefault">Default</FeatherButton>
+    </div>
+    <FeatherDropdownItem
+      v-for="col in columns"
+      :key="col.id"
+      >
+        <div class="column-select-item-wrapper">
+          <FeatherCheckbox
+            class="checkbox"
+            @update:modelValue="selectColumn(col)"
+            :modelValue="col.selected"
+          >{{ col.label }}</FeatherCheckbox>
+        </div>
+    </FeatherDropdownItem>
+  </FeatherDropdown>
+</template>
+
+<script setup lang="ts">
+import { FeatherButton } from '@featherds/button'
+import { FeatherCheckbox } from '@featherds/checkbox'
+import { FeatherDropdown, FeatherDropdownItem } from '@featherds/dropdown'
+import { FeatherIcon } from '@featherds/icon'
+import Settings from '@featherds/icon/action/Settings'
+import { markRaw } from 'vue'
+import { useStore } from 'vuex'
+import { NodeColumnSelectionItem } from '@/types'
+
+const store = useStore()
+const settingsIcon = markRaw(Settings)
+
+const columns = computed<NodeColumnSelectionItem[]>(() => store.state.nodeStructureModule.columns)
+
+const selectColumn = (col: NodeColumnSelectionItem) => {
+  const newItem = {
+    ...col,
+    selected: !col.selected
+  }
+
+  store.dispatch('nodeStructureModule/updateNodeColumnSelection', newItem)
+  return false
+}
+
+const resetToDefault = () => {
+  store.dispatch('nodeStructureModule/resetColumnSelectionToDefault')
+  return false
+}
+</script>
+
+<style lang="scss" scoped>
+.focus-icon {
+  cursor: pointer;
+}
+
+button.btn.btn-icon .node-actions-icon {
+  font-size: 1.1rem;
+}
+
+.column-select-item-wrapper {
+  padding-left: 0.5em;
+}
+
+.node-actions-reset {
+  padding-left: 0.5em;
+  margin-bottom: 1em;
+}
+</style>

ui/src/components/Nodes/FlowTooltipCell.vue

@@ -0,0 +1,43 @@
+<template>
+  <FeatherTooltip
+    :title="flowTooltipTitle(node)"
+    :alignment="PointerAlignment.center"
+    :placement="PopoverPlacement.top"
+    v-slot="{ attrs, on }">
+    <div v-if="hasIngressFlow(node) || hasEgressFlow(node)" v-bind="attrs" v-on="on">
+      <font-awesome-icon v-if="hasIngressFlow(node)" :icon="'fa-solid fa-long-arrow-left'"></font-awesome-icon>
+      <br v-if="hasIngressFlow(node) && hasEgressFlow(node)" style="height: 40px" />
+      <font-awesome-icon v-if="hasEgressFlow(node)" :icon="'fa-solid fa-long-arrow-right'"></font-awesome-icon>
+    </div>
+  </FeatherTooltip>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { FeatherTooltip, PointerAlignment, PopoverPlacement } from '@featherds/tooltip'
+import { hasIngressFlow, hasEgressFlow } from './utils'
+import { Node } from '@/types'
+
+defineProps({
+  node: {
+    required: true,
+    type: Object as PropType<Node>
+  }
+})
+
+const flowTooltipTitle = (node: Node) => {
+  if (hasIngressFlow(node) && hasEgressFlow(node)) {
+    return 'Has Ingress/Egress Flows'
+  } else if (hasIngressFlow(node)) {
+    return 'Has Ingress Flows'
+  } else if (hasEgressFlow(node)) {
+    return 'Has Egress Flows'
+  }
+
+  return ''
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

ui/src/components/Nodes/NodeActionsDropdown.vue

@@ -0,0 +1,116 @@
+<template>
+  <FeatherDropdown>
+    <template v-slot:trigger="{ attrs, on }">
+      <FeatherButton
+        icon="Node Actions"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <FeatherIcon :icon="menu" class="node-actions-icon" />
+      </FeatherButton>
+    </template>
+    <FeatherDropdownItem @click="triggerNodeInfo(node)">
+      <span class="node-menu-item">Info...</span>
+    </FeatherDropdownItem>
+    <FeatherDropdownItem
+      v-for="linkItem in linkItems"
+      :key="linkItem.name"
+      @click="onNodeLink(linkItem.name, node)">
+      <span class="node-menu-item">{{ linkItem.label }}</span>
+    </FeatherDropdownItem>
+  </FeatherDropdown>
+</template>
+
+<script setup lang="ts">
+import { FeatherButton } from '@featherds/button'
+import { FeatherDropdown, FeatherDropdownItem } from '@featherds/dropdown'
+import { FeatherIcon } from '@featherds/icon'
+import MoreVert from '@featherds/icon/navigation/MoreVert'
+import { markRaw, PropType } from 'vue'
+import { Node } from '@/types'
+
+const props = defineProps({
+  baseHref: {
+    required: true,
+    type: String
+  },
+  node: {
+    required: true,
+    type: Object as PropType<Node>
+  },
+  triggerNodeInfo: {
+    required: true,
+    type: Function as PropType<(node: Node) => void>
+  }
+})
+
+const menu = markRaw(MoreVert)
+
+const linkItems = [
+  { name: 'events', label: 'Events' },
+  { name: 'alarms', label: 'Alarms' },
+  { name: 'view-outages', label: 'Outages' },
+  { name: 'assets', label: 'Assets' },
+  { name: 'metadata', label: 'Metadata' },
+  { name: 'hardware', label: 'Hardware Info' },
+  { name: 'availability', label: 'Availability' },
+  { name: 'graphs', label: 'Resource Graphs' },
+  { name: 'rescan', label: 'Rescan' },
+  { name: 'admin', label: 'Admin' },
+  { name: 'updateSnmp', label: 'Update SNMP' },
+  { name: 'schedule-outage', label: 'Schedule an Outage' },
+  { name: 'topology', label: 'View in Topology' }
+]
+
+const onNodeLink = (name: string, node: Node) => {
+  const link = mapLink(name, node)
+  window.location.assign(`${props.baseHref}${link}`)
+}
+
+const mapLink = (name: string, node: Node) => {
+  switch (name) {
+    case 'events':
+      return `event/list?filter=node%3D${node.id}`
+    case 'alarms':
+      return `alarm/list.htm?filter=node%3D${node.id}`
+    case 'view-outages':
+      return `outage/list.htm?filter=node%3D${node.id}`
+    case 'assets':
+      return `asset/modify.jsp?node=${node.id}`
+    case 'metadata':
+      return `element/node-metadata.jsp?node=${node.id}`
+    case 'hardware':
+      return `hardware/list.jsp?node=${node.id}`
+    case 'availability':
+      return `element/availability.jsp?node=${node.id}`
+    case 'graphs':
+      return `graph/chooseresource.jsp?node=${node.id}&reports=all`
+    case 'rescan':
+      return `element/rescan.jsp?node=${node.id}`
+    case 'admin':
+      return `admin/nodemanagement/index.jsp?node=${node.id}`
+    case 'updateSnmp':
+      // TODO: Get IP Address
+      return `admin/updateSnmp.jsp?node=${node.id}&ipaddr=0.0.0.0`
+    case 'schedule-outage':
+      return `admin/sched-outages/editoutage.jsp?newName=${node.label}&addNew=true&nodeID=${node.id}`
+    case 'topology':
+      return `topology?provider=Enhanced+Linkd&szl=1&focus-vertices=${node.id}`
+    default: return ''
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.focus-icon {
+  cursor: pointer;
+}
+
+.node-menu-item {
+  padding: 1em;
+}
+
+button.btn.btn-icon .node-actions-icon {
+  font-size: 1.1rem;
+}
+</style>

ui/src/components/Nodes/NodeDetailsDialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <FeatherDialog :modelValue="visible" relative :labels="labels" @update:modelValue="$emit('close')">
+    <div class="content">
+      <div class="feather-row" v-for="item in nodeItems" :key="item.label">
+        <div class="feather-col-4">
+          <span class="label">{{ item.label }}</span>
+        </div>
+        <div class="feather-col-8">
+          {{ item.text }}
+        </div>
+      </div>
+    </div>
+  </FeatherDialog>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { FeatherDialog } from '@featherds/dialog'
+import { Node } from '@/types'
+
+const props = defineProps({
+  visible: {
+    required: true,
+    type: Boolean
+  },
+  node: {
+    required: false,
+    type: Object as PropType<Node>
+  }
+})
+
+const labels = reactive({
+  title: 'Node Details',
+  close: 'Close'
+})
+
+const nodeItems = computed(() => {
+  return [
+    { label: 'Node ID', text: props.node?.id },
+    { label: 'Node Label', text: props.node?.label },
+    { label: 'FS:FID', text: `${props.node?.foreignSource}:${props.node?.foreignId}` }
+  ]
+})
+</script>
+
+<style scoped lang="scss">
+.content {
+  min-height: 300px;
+  min-width: 550px;
+  position: relative;
+}
+
+.label {
+  font-weight: bold;
+}
+</style>