added get neighbours to base node context menu

client/public/submenu-indicator-default.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
\ No newline at end of file

client/src/api/granef-analysis-api.js

@@ -4,16 +4,18 @@ export const getCustomQuery = (query) => axios.post('/granef-analysis-api/custom
   query: query
 });
 
-export const getNodeAttributes = (uids) => axios.post(`/granef-analysis-api/graph/node_attributes`, { uids });
+export const getNodeAttributes = (uids) => axios.post('/granef-analysis-api/graph/node_attributes', { uids });
 
-export const getAttributeSearch = (attribute, value) => axios.post(`/granef-analysis-api/graph/attribute_search`, {
+export const getAttributeSearch = (attribute, value) => axios.post('/granef-analysis-api/graph/attribute_search', {
   attribute,
   value
 });
 
-export const getHostInfo = (address) => axios.post(`/granef-analysis-api/overview/hosts_info`, { address });
+export const getNeighbours = (uids, types) => axios.post('/granef-analysis-api/graph/neighbors', { uids, types }) // fixme: take as string arrays and join here
 
-export const getConnectionsFromSubnet = (address) => axios.post(`/granef-analysis-api/overview/connections_from_subnet`, { address });
+export const getHostInfo = (address) => axios.post('/granef-analysis-api/overview/hosts_info', { address });
+
+export const getConnectionsFromSubnet = (address) => axios.post('/granef-analysis-api/overview/connections_from_subnet', { address });
 
 /**
  * @deprecated for removal - development purposes only

client/src/context-menu/context-menu-handler.js

@@ -5,12 +5,11 @@ export const contextMenuHandler = (contextMenu) => function (event) {
     // clicked outside a node
     return;
 
-  const targetNotCy = cy !== target
-  const allSelected = targetNotCy && target.isNode() && target.neighbourhood().length === target.neighbourhood(':selected').length;
-  if (targetNotCy && allSelected && target.neighbourhood().size() > 0) {
+  const allSelected = target.isNode() && target.neighbourhood().length === target.neighbourhood(':selected').length;
+  if (allSelected && target.neighbourhood().size() > 0) {
     contextMenu.current.hideMenuItem('select-neighbourhood');
     contextMenu.current.showMenuItem('unselect-neighbourhood');
-  } else if (targetNotCy && target.neighbourhood().size() > 0) {
+  } else if (target.neighbourhood().size() > 0) {
     contextMenu.current.hideMenuItem('unselect-neighbourhood');
     contextMenu.current.showMenuItem('select-neighbourhood');
   } else {
@@ -18,9 +17,11 @@ export const contextMenuHandler = (contextMenu) => function (event) {
     contextMenu.current.hideMenuItem('select-neighbourhood');
   }
 
-  if (targetNotCy && target.isNode() && target.data('cluster') === true) {
+  if (target.isNode() && target.data('cluster') === true) {
     contextMenu.current.showMenuItem('open-cluster');
+    contextMenu.current.hideMenuItem('get-neighbours');
   } else {
     contextMenu.current.hideMenuItem('open-cluster');
+    contextMenu.current.showMenuItem('get-neighbours');
   }
 }
\ No newline at end of file

client/src/context-menu/context-menu-options.js

 import { clusteringService } from "../graph-manipulation/clustering/clustering-service";
+import { getNeighbours } from "../api/granef-analysis-api";
+import { parseGranefResponseToCyElements } from "../granef-adapters/response-adapters";
+import { GraphService } from "../graph-manipulation/graph-service";
+import { CyCustomEvents } from "../components/cytoscape/cy-custom-events";
+import { NodeType } from "../granef-adapters/node-type-enum";
+
+const getNeighbourhood = (nodeTypes) => (event) => {
+  const { target, cy } = event;
+
+  // TODO: handle errors
+  getNeighbours(target.data('id'), nodeTypes.join(','))
+    .then(response => {
+      const body = response.data
+      const cyElements = parseGranefResponseToCyElements(body);
+      cy.batch(function () { // todo: move to service
+        const { nodes, edges } = cyElements;
+        GraphService(cy).unionWithGraph(nodes, edges, false);
+        cy.emit(CyCustomEvents.FETCH);
+      })
+    })
+    .catch(function (error) {
+      if (error.response) {
+        console.log('error', error.response);
+      } else if (error.request) {
+        console.log('error request', error.request);
+      } else {
+        console.log('error message', error.message);
+      }
+      console.log('error config', error.config);
+      //TODO handleError
+    });
+}
+
+const getAllNeighbours = getNeighbourhood([NodeType.CONNECTION, NodeType.DNS, NodeType.FILE, NodeType.FILES, NodeType.HOST, NodeType.HOSTNAME, NodeType.HTTP, NodeType.NOTICE, NodeType.SIP, NodeType.SSL, NodeType.USER_AGENT, NodeType.X509]);
+const getConnectionNeighbours = getNeighbourhood([NodeType.CONNECTION]);
+const getHostNeighbours = getNeighbourhood([NodeType.HOST]);
+const getApplicationNeighbours = getNeighbourhood([NodeType.DNS, NodeType.FILE, NodeType.FILES, NodeType.HTTP, NodeType.NOTICE, NodeType.SIP, NodeType.SSL, NodeType.USER_AGENT, NodeType.X509]);
 
 export const contextMenuOptions = () => {
   return ({
@@ -15,7 +52,7 @@ export const contextMenuOptions = () => {
         coreAsWell: false,
         show: true,
         onClickFunction: function (event) {
-          const {target, ...restEvent} = event;
+          const { target, ...restEvent } = event;
           console.log('restEvent', restEvent);
           target.neighborhood().select()
         }
@@ -27,7 +64,7 @@ export const contextMenuOptions = () => {
         coreAsWell: false,
         show: false,
         onClickFunction: function (event) {
-          const {target, ...restEvent} = event;
+          const { target, ...restEvent } = event;
           console.log('restEvent', restEvent);
           target.neighborhood().unselect()
         },
@@ -39,12 +76,53 @@ export const contextMenuOptions = () => {
         coreAsWell: false,
         show: false,
         onClickFunction: function (event) {
-          const {target, cy, ...restEvent} = event;
+          const { target, cy, ...restEvent } = event;
           console.log('restEvent', restEvent);
           clusteringService(cy).openClusterById(target.data('id'))
           // cy.contextMenus('get').hideMenuItem('open-cluster');
         },
       },
+      {
+        id: 'get-neighbours',
+        content: 'get neighbours',
+        selector: 'node',
+        coreAsWell: false,
+        show: false,
+        submenu: [
+          {
+            id: 'get-neighbours-all',
+            content: 'all types',
+            selector: 'node',
+            coreAsWell: false,
+            show: false,
+            onClickFunction: getAllNeighbours,
+          },
+          {
+            id: 'get-neighbours-connection',
+            content: 'connections',
+            selector: 'node',
+            coreAsWell: false,
+            show: false,
+            onClickFunction: getConnectionNeighbours,
+          },
+          {
+            id: 'get-neighbours-host',
+            content: 'hosts',
+            selector: 'node',
+            coreAsWell: false,
+            show: false,
+            onClickFunction: getHostNeighbours,
+          },
+          {
+            id: 'get-neighbours-application',
+            content: 'application data',
+            selector: 'node',
+            coreAsWell: false,
+            show: false,
+            onClickFunction: getApplicationNeighbours,
+          },
+        ]
+      },
     ],
     // css classes that menu items will have
     menuItemClasses: [
@@ -55,6 +133,6 @@ export const contextMenuOptions = () => {
       // add class names to this list
     ],
     // Indicates that the menu item has a submenu. If not provided default one will be used
-    submenuIndicator: { src: 'assets/submenu-indicator-default.svg', width: 12, height: 12 }
+    submenuIndicator: { src: `${process.env.PUBLIC_URL}/submenu-indicator-default.svg`, width: 12, height: 12 }
   });
 }
\ No newline at end of file

client/src/granef-adapters/parse-utils.ts

@@ -4,14 +4,20 @@ import { EdgeDefinition } from 'cytoscape';
 
 export function getColorForType(nodeType: NodeType) {
   switch (nodeType) {
-    case "Host":
-      return "#82b366";
-    case "Connection":
+    case NodeType.CONNECTION:
       return "#d79b00";
-    case "File":
-    case "User_Agent":
-    case "Hostname":
-    case "X509":
+    case NodeType.HOST:
+      return "#82b366";
+    case NodeType.DNS:
+    case NodeType.FILE:
+    case NodeType.FILES:
+    case NodeType.HOSTNAME:
+    case NodeType.HTTP:
+    case NodeType.NOTICE:
+    case NodeType.SIP:
+    case NodeType.SSL:
+    case NodeType.USER_AGENT:
+    case NodeType.X509:
       return "#666666";
     default: {
       console.log(`Unknown node color for type ${nodeType}`);