resolved merge conflicts

FRINXio · Sep 26, 2024 · a45bd6d · a45bd6d
2 parents 6046632 + ff5472d
commit a45bd6d
Show file tree

Hide file tree

Showing 33 changed files with 1,298 additions and 257 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frinx-api/package.json b/packages/frinx-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@frinx/api",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/index.d.ts",

diff --git a/packages/frinx-dashboard/bin/common.mjs b/packages/frinx-dashboard/bin/common.mjs
@@ -13,11 +13,6 @@ export async function prepareFiles() {
   await mkdir(fullPath(BUILD_CLIENT_PATH, 'static'), { recursive: true });
   await copyFile(fullPath('../../public/index.html'), fullPath(BUILD_CLIENT_PATH, 'index.html'));
   await copyFile(fullPath('../../public/favicon.ico'), fullPath(BUILD_CLIENT_PATH, 'static/favicon.ico'));
-  await copyFile(fullPath('../../public/l3vpn-options.js'), fullPath(BUILD_CLIENT_PATH, 'static/l3vpn-options.js'));
-  await copyFile(
-    fullPath('../../node_modules/@frinxio/gamma/dist/l3vpn-options.js'),
-    fullPath(BUILD_CLIENT_PATH, 'static/l3vpn-options.js'),
-  );
 }
 
 export function makeConfig(isProd) {

diff --git a/packages/frinx-dashboard/package.json b/packages/frinx-dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@frinx/dashboard",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "private": false,
   "dependencies": {
     "@chakra-ui/react": "2.8.1",
@@ -9,14 +9,14 @@
     "@emotion/styled": "11.11.0",
     "@fontsource/roboto": "^5.0.8",
     "@formspree/react": "^2.4.0",
-    "@frinx/api": "^0.0.22",
+    "@frinx/api": "^0.0.23",
     "@frinx/device-topology": "^2.0.0",
     "@frinx/inventory-client": "^2.0.0",
     "@frinx/resource-manager": "^2.0.0",
     "@frinx/shared": "^2.0.0",
     "@frinx/workflow-builder": "^2.0.0",
     "@frinx/workflow-ui": "^2.0.0",
-    "@frinxio/gamma": "6.0.3",
+    "@frinxio/gamma": "7.0.0",
     "@types/react": "17.0.65",
     "@types/react-dom": "18.2.7",
     "eventemitter3": "5.0.1",

diff --git a/packages/frinx-dashboard/src/app.tsx b/packages/frinx-dashboard/src/app.tsx
@@ -5,7 +5,6 @@ import Dashboard from './components/dashboard/dashboard';
 import FeedbackWidget from './components/feedback-widget/feedback-widget';
 import Header from './components/header/header';
 import DeviceTopologyApp from './device-topology-app';
-import GammaApp from './gamma-app';
 import InventoryApp from './inventory-app';
 import ResourceManagerApp from './resource-manager-app';
 import UniflowApp from './uniflow-app';
@@ -22,7 +21,6 @@ const App: FC<Props> = ({ basename, isAuthEnabled }) => {
       <Box paddingY={10} overflow="hidden">
         <Routes>
           <Route path="/workflow-manager/*" element={<UniflowApp />} />
-          <Route path="/gamma/*" element={<GammaApp />} />
           <Route path="/inventory/*" element={<InventoryApp />} />
           <Route path="/resource-manager/*" element={<ResourceManagerApp />} />
           <Route path="/device-topology/*" element={<DeviceTopologyApp />} />

diff --git a/packages/frinx-dashboard/src/components/app-menu/app-menu.tsx b/packages/frinx-dashboard/src/components/app-menu/app-menu.tsx
@@ -55,7 +55,7 @@ const AppMenu: VoidFunctionComponent = () => {
               <AppMenuItem to="/inventory/blueprints">Blueprints</AppMenuItem>
               <AppMenuItem to="/inventory/transactions">Transactions</AppMenuItem>
               <AppMenuItem to="/inventory/locations">Locations</AppMenuItem>
-              <AppMenuItem to="/inventory/shell">UniConfig Shell</AppMenuItem>
+              {/* <AppMenuItem to="/inventory/shell">UniConfig Shell</AppMenuItem> */}
             </>
           }
         />

diff --git a/packages/frinx-dashboard/src/components/header/header.tsx b/packages/frinx-dashboard/src/components/header/header.tsx
@@ -66,10 +66,6 @@ const Header: VoidFunctionComponent<Props> = ({ isAuthEnabled }) => {
                 <Icon size={20} as={FeatherIcon} icon="hard-drive" color="blue.700" marginRight={2} />
                 <Text fontWeight="bold">Resource manager</Text>
               </MenuItem>
-              <MenuItem as={Link} to="/gamma">
-                <Icon size={20} as={FeatherIcon} icon="hard-drive" color="blue.700" marginRight={2} />
-                <Text fontWeight="bold">L3VPN Automation</Text>
-              </MenuItem>
               <MenuItem as={Link} to="/device-topology">
                 <Icon size={20} as={FeatherIcon} icon="hard-drive" color="blue.700" marginRight={2} />
                 <Text fontWeight="bold">Device Topology</Text>

diff --git a/packages/frinx-device-topology/src/helpers/map-marker-helper.ts b/packages/frinx-device-topology/src/helpers/map-marker-helper.ts
@@ -3,6 +3,15 @@ import L from 'leaflet';
 export const DEFAULT_ICON = new L.Icon({
   iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
   shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png',
-  iconAnchor: [13, 41],
+  iconAnchor: [12, 41],
   popupAnchor: [0, -30],
 });
+
+export const RED_DEFAULT_ICON = new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
diff --git a/packages/frinx-device-topology/src/helpers/topology-helpers.ts b/packages/frinx-device-topology/src/helpers/topology-helpers.ts
@@ -9,6 +9,7 @@ import {
   SynceGraphNode,
   PtpGraphNode,
   MplsGraphNode,
+  Position,
 } from '../pages/topology/graph.helpers';
 import { NetNode, PtpDeviceDetails, SynceDeviceDetails } from '../__generated__/graphql';
 
@@ -490,3 +491,26 @@ export function getGmPathHopsCount(gmPathIds: string[], devicePrefix: 'PtpDevice
 export function getPtpProfile(ptpNodes: PtpGraphNode[]): string | null {
   return ptpNodes.at(0)?.details.ptpProfile ?? null;
 }
+
+// returns pointer X constrained to SVG vieport
+// if SVG viewport is null, constrained only to 0
+export function getConstrainedPointerX(newX: number, viewPort: SVGElement | null): number {
+  const viewPortWidth = viewPort?.clientWidth;
+  const rightConstrainedX = viewPortWidth && newX > viewPortWidth ? viewPortWidth : newX;
+  return newX < 0 ? 0 : rightConstrainedX;
+}
+
+// returns pointer Y constrained to SVG vieport
+// if SVG viewport is null, constrained only to 0
+export function getConstrainedPointerY(newY: number, viewPort: SVGElement | null): number {
+  const viewPortHeight = viewPort?.clientHeight;
+  const rightConstrainedY = viewPortHeight && newY > viewPortHeight ? viewPortHeight : newY;
+  return newY < 0 ? 0 : rightConstrainedY;
+}
+// returns Position constrained to SVG vieport
+// if SVG viewport is null, constrained only to 0
+export function getConstrainedPosition(newPosition: Position, viewPort: SVGElement | null): Position {
+  const x = getConstrainedPointerX(newPosition.x, viewPort);
+  const y = getConstrainedPointerY(newPosition.y, viewPort);
+  return { x, y };
+}
diff --git a/packages/frinx-device-topology/src/pages/topology/lldp/nodes.tsx b/packages/frinx-device-topology/src/pages/topology/lldp/nodes.tsx
@@ -2,7 +2,7 @@ import { unwrap, usePerformanceMonitoring } from '@frinx/shared';
 import React, { useCallback, useEffect, useState, VoidFunctionComponent } from 'react';
 import { gql, useSubscription } from 'urql';
 import NodeIcon from '../../../components/node-icons/node-icon';
-import { GraphNodeWithDiff } from '../../../helpers/topology-helpers';
+import { getConstrainedPosition, GraphNodeWithDiff } from '../../../helpers/topology-helpers';
 import {
   setSelectedNode,
   setSelectedNodeLoad,
@@ -112,9 +112,16 @@ const Nodes: VoidFunctionComponent<Props> = ({ nodesWithDiff, onNodePositionUpda
         const x = event.clientX - bbox.left;
         const y = event.clientY - bbox.top;
         const nodeId = unwrap(position.nodeId);
-        const newX = nodePositions[nodeId].x - (position.offset.x - x);
-        const newY = nodePositions[nodeId].y - (position.offset.y - y);
-        onNodePositionUpdate(nodeId, { x: newX, y: newY });
+
+        const newPosition = getConstrainedPosition(
+          {
+            x: nodePositions[nodeId].x - (position.offset.x - x),
+            y: nodePositions[nodeId].y - (position.offset.y - y),
+          },
+          event.currentTarget.viewportElement,
+        );
+
+        onNodePositionUpdate(nodeId, newPosition);
       }
     },
     [

diff --git a/packages/frinx-device-topology/src/pages/topology/map/map-topology.container.tsx b/packages/frinx-device-topology/src/pages/topology/map/map-topology.container.tsx
@@ -2,10 +2,10 @@ import React, { useEffect, useRef, VoidFunctionComponent, useState } from 'react
 import { MapContainer, Marker, Popup, TileLayer, useMap, Polyline } from 'react-leaflet';
 import { useClient } from 'urql';
 import MarkerClusterGroup from 'react-leaflet-cluster';
-import { Box, Button, Heading } from '@chakra-ui/react';
+import { Box, Button, Card, CardBody, CloseButton, Heading } from '@chakra-ui/react';
 import L, { LatLngBoundsLiteral, LatLngTuple } from 'leaflet';
 import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM_LEVEL } from '../../../helpers/topology-helpers';
-import { DEFAULT_ICON } from '../../../helpers/map-marker-helper';
+import { RED_DEFAULT_ICON } from '../../../helpers/map-marker-helper';
 import { useStateContext } from '../../../state.provider';
 import {
   getDeviceMetadata,
@@ -206,7 +206,7 @@ const MapTopologyContainerDescendant: VoidFunctionComponent = () => {
                 <Marker
                   position={[node.geolocation.latitude, node.geolocation.longitude]}
                   key={node?.id}
-                  icon={DEFAULT_ICON}
+                  icon={RED_DEFAULT_ICON}
                   eventHandlers={{
                     click: handleMarkerClick(node.deviceName || ''),
                     popupclose: handlePopupClose(),
@@ -273,14 +273,51 @@ const MapTopologyContainerDescendant: VoidFunctionComponent = () => {
           })}
         </MarkerClusterGroup>
       )}
+      {selectedDeviceData && selectedDeviceData.geolocation?.latitude && selectedDeviceData.geolocation?.longitude && (
+        <Marker
+          position={[selectedDeviceData.geolocation.latitude, selectedDeviceData.geolocation.longitude]}
+          key={selectedDeviceData.id}
+          icon={RED_DEFAULT_ICON}
+        />
+      )}
+      {selectedDeviceData && (
+        <Card zIndex={500} minWidth={150} position="absolute" right={2} bottom={6}>
+          <CloseButton size="md" onClick={handlePopupClose} />
+          <CardBody paddingTop={0} paddingBottom={30}>
+            <Box mt={2}>
+              <Heading as="h3" fontSize="xs" color="blue.700">
+                {selectedDeviceData.deviceName ?? '-'}
+              </Heading>
+            </Box>
+            <Box mt={2}>
+              <Heading as="h4" fontSize="xs">
+                Location name
+              </Heading>
+              {selectedDeviceData.locationName ?? '-'}
+            </Box>
+            <Box mt={2}>
+              <Heading as="h4" fontSize="xs">
+                Latitude
+              </Heading>
+              {selectedDeviceData.geolocation?.latitude}
+            </Box>
+            <Box mt={2}>
+              <Heading as="h4" fontSize="xs">
+                Longitude
+              </Heading>
+              {selectedDeviceData.geolocation?.longitude}
+            </Box>
+          </CardBody>
+        </Card>
+      )}
     </>
   );
 };
 
 const MapTopologyContainer: VoidFunctionComponent = () => {
   return (
     <MapContainer
-      style={{ height: `calc(100vh - 320px)`, zIndex: 0 }}
+      style={{ height: `calc(100vh - 320px)`, zIndex: 0, minHeight: 300 }}
       center={DEFAULT_MAP_CENTER}
       zoom={DEFAULT_MAP_ZOOM_LEVEL}
       scrollWheelZoom

diff --git a/packages/frinx-device-topology/src/pages/topology/mpls/mpls-nodes.tsx b/packages/frinx-device-topology/src/pages/topology/mpls/mpls-nodes.tsx
@@ -1,7 +1,7 @@
 import { unwrap } from '@frinx/shared';
 import React, { useState, VoidFunctionComponent } from 'react';
 import MplsNodeIcon from '../../../components/node-icons/mpls-node-icon';
-import { MplsGraphNodeWithDiff } from '../../../helpers/topology-helpers';
+import { getConstrainedPosition, MplsGraphNodeWithDiff } from '../../../helpers/topology-helpers';
 import { setSelectedMplsNode, setUnconfimedNodeIdForLspPathSearch } from '../../../state.actions';
 import { useStateContext } from '../../../state.provider';
 import { Position, MplsGraphNode } from '../graph.helpers';
@@ -68,9 +68,16 @@ const MplsNodes: VoidFunctionComponent<Props> = ({ nodes, onNodePositionUpdate,
       const x = event.clientX - bbox.left;
       const y = event.clientY - bbox.top;
       const nodeId = unwrap(position.nodeId);
-      const newX = mplsNodePositions[nodeId].x - (position.offset.x - x);
-      const newY = mplsNodePositions[nodeId].y - (position.offset.y - y);
-      onNodePositionUpdate(nodeId, { x: newX, y: newY });
+
+      const newPosition = getConstrainedPosition(
+        {
+          x: mplsNodePositions[nodeId].x - (position.offset.x - x),
+          y: mplsNodePositions[nodeId].y - (position.offset.y - y),
+        },
+        event.currentTarget.viewportElement,
+      );
+
+      onNodePositionUpdate(nodeId, newPosition);
     }
   };
   const handlePointerUp = (node: MplsGraphNode) => {

diff --git a/packages/frinx-device-topology/src/pages/topology/mpls/mpls-table.tsx b/packages/frinx-device-topology/src/pages/topology/mpls/mpls-table.tsx
@@ -12,7 +12,7 @@ const MplsTable: VoidFunctionComponent<Props> = ({ data }) => {
     ['inputLabel', 'Input Label'],
     ['inputInterface', 'Input Interface'],
     ['outputLabel', 'Output Label'],
-    ['outputInterface', 'Output Ingerface'],
+    ['outputInterface', 'Output Interface'],
     ['operState', 'Oper State'],
     ['mplsOperation', 'MPLS Operation'],
     ['ldpPrefix', 'Ldp Prefix'],
@@ -32,7 +32,7 @@ const MplsTable: VoidFunctionComponent<Props> = ({ data }) => {
         <Tbody>
           {data.map((row) => {
             return (
-              <Tr key={`mpls-data-row-${row.lspId}`}>
+              <Tr key={`mpls-data-row-${row.lspId}-${row.inputLabel}`}>
                 {[...tableColumns.keys()].map((column) => (
                   <Td key={`mpls-data-row-${row.lspId}-column-${column}`}>{row[column] ?? '-'}</Td>
                 ))}