FR-330 add switch to topology layers (#1646)

* Merge main to story-geomap (#1592)

* FR-240 bulk stream operations (#1583)

* bulk streams delete implementation

* bulk streams activation/deactivation

* use stream bulk install/uninstall mutations

* formatter fix

* add duration to stream list (#1590)

---------

Co-authored-by: Martin Sottnik <[email protected]>

* Fr 323 react1820 geomap devices inventory (#1598)

* FR-240 bulk stream operations (#1583)

* bulk streams delete implementation

* bulk streams activation/deactivation

* use stream bulk install/uninstall mutations

* formatter fix

* add duration to stream list (#1590)

* map into device table as action

* formating update

---------

Co-authored-by: Martin Sottnik <[email protected]>

* FR-203 (react 18.2.0) topology map layer (#1599)

* FR-240 bulk stream operations (#1583)

* bulk streams delete implementation

* bulk streams activation/deactivation

* use stream bulk install/uninstall mutations

* formatter fix

* add duration to stream list (#1590)

* topology map layer implementation

* pr check fix

* Fr 306 mpls topology (#1596)

* mpls topology added

* update mpls node position

* add info panel

* graphql update

* merge error fix

---------

Co-authored-by: Martin Sottnik <[email protected]>

* Fr 201 add device location (#1600)

* FR-240 bulk stream operations (#1583)

* bulk streams delete implementation

* bulk streams activation/deactivation

* use stream bulk install/uninstall mutations

* formatter fix

* add duration to stream list (#1590)

* added location selectbox with modal to create location

* formatting

* formatting

* added functionality to choose location by clicking on the map

* adjusted map css and popup message

* formatting

---------

Co-authored-by: Martin Sottnik <[email protected]>

* Fd 684 change location on edit device page (#1601)

* added possibility to change location on edit device

* refactored to Autocomplete component

* refactored creade-device-form to use autoselect

* codegen

* added button to remove location and created location is automaticaly selected

* dep array fix

* FR-311 mpls device details (#1602)

* add device details to mpls topology

* revert topology layer default state to LLDP

* Fr 325 list of locations (#1603)

* location list implementation - first commit

* location list - Location map implementation

* making the map modal generic

* locations Add and Pagination

* delete location modal (only) added

* AddLocation mutation added

* location deletion added

* location update impl.

* pagination update

* location edit update

* pr check update

* Fd 685 leaflet icon crash (#1604)

* Default leaflet marker set explicitly because of a crash

* pr check - unnecessary import removal

* Fr 329 integration into topology layers - PART-1 (#1606)

* added map icons to devices to jump to geomap

* removed unused types

* removed state propss

* removed unused import

* codegen

* lint fix

* formatting

* codegen

* removed unused code

* FR-310 lsp count (#1605)

* lsp count implementation

* add mpls count labels

* add title to lsp count

* Fd 690 edit location refactor (#1608)

* Location edition refactoring - separate modal

* formatter update - pr check

* pr check update

* FR 329 integration into topology layers part2 (#1611)

* refactored to glbalContext, added net-info-panel component, devices without location are not clickable

* adjusted net-info-panel to link to correct map layer with correct device name

* load deviceMetadata on panel-info open

* FR-317 mpls topology version (#1609)

* lsp count implementation

* add mpls count labels

* add title to lsp count

* mpls topology version

* pr fixes

* FR-328 topology map layer filter by name (#1607)

* topology map layer filter by name

* minor format update

* Map zindex issue fixed

* Fr 327 show overlay topology (#1613)

* FR-240 bulk stream operations (#1583)

* bulk streams delete implementation

* bulk streams activation/deactivation

* use stream bulk install/uninstall mutations

* formatter fix

* add duration to stream list (#1590)

* added links to neighbor devices when device is selected

* remove unnecessary as statetemnt

* pr check fix

---------

Co-authored-by: Martin Sottnik <[email protected]>

* Fr 312 lsp path (#1614)

* lsp path search added

* connect to backend; lsp metadata panel added

* encode key=value pairs in uniconfig urls (#1616)

* finished map topology and adjusted last issues (#1617)

* setup for switching to different topologies

* setup

* finished switch to layer functionality

* css adjustments

* resolved conflicts

* fixed conflicts

---------

Co-authored-by: oskovran <[email protected]>
Co-authored-by: Martin Sottnik <[email protected]>

packages/frinx-device-topology/src/components/topology-type-select/topology-type-select.tsx

@@ -1,40 +1,61 @@
-import { FormControl, FormLabel, Select } from '@chakra-ui/react';
+import { Button, Flex, FormControl, FormLabel, Select } from '@chakra-ui/react';
 import React, { VoidFunctionComponent } from 'react';
-import { MapTopologyType, setMapTopologyType } from '../../state.actions';
+import { MapTopologyType, setMapTopologyType, setTopologyLayer } from '../../state.actions';
 import { useStateContext } from '../../state.provider';
+import { TopologyLayer } from '../../state.reducer';
+
+type Layer = {
+  name: string;
+  value: 'PHYSICAL_TOPOLOGY' | 'PTP_TOPOLOGY' | 'ETH_TOPOLOGY' | 'NETWORK_TOPOLOGY' | 'MPLS_TOPOLOGY';
+  layer: TopologyLayer;
+};
+
+export const topologyLayers: Layer[] = [
+  { name: 'Physical Topology', value: 'PHYSICAL_TOPOLOGY', layer: 'LLDP' },
+  { name: 'Ptp Topology', value: 'PTP_TOPOLOGY', layer: 'PTP' },
+  { name: 'Eth Topology', value: 'ETH_TOPOLOGY', layer: 'Synchronous Ethernet' },
+  { name: 'Mpls Topology', value: 'MPLS_TOPOLOGY', layer: 'MPLS' },
+];
 
 const TopologyTypeSelect: VoidFunctionComponent = () => {
   const { state, dispatch } = useStateContext();
   const { mapTopologyType } = state;
 
-  const topologyLayers = [
-    { name: 'Physical Topology', value: 'PHYSICAL_TOPOLOGY' },
-    { name: 'Ptp Topology', value: 'PTP_TOPOLOGY' },
-    { name: 'Eth Topology', value: 'ETH_TOPOLOGY' },
-    { name: 'Mpls Topology', value: 'MPLS_TOPOLOGY' },
-  ];
-
   const handleTopologyTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value as MapTopologyType;
     dispatch(setMapTopologyType(value));
   };
 
+  const handleSwitchLayer = () => {
+    const layer = topologyLayers.find((l) => l.value === mapTopologyType);
+    if (mapTopologyType && layer) {
+      dispatch(setTopologyLayer(layer.layer));
+      dispatch(setMapTopologyType(null));
+    }
+  };
+
   return (
-    <FormControl width="sm" paddingBottom="24px">
+    <FormControl paddingBottom="24px">
       <FormLabel marginBottom={4}>Select topology type:</FormLabel>
-      <Select
-        data-cy="select-topology-type"
-        placeholder="Select topology type"
-        background="white"
-        onChange={handleTopologyTypeChange}
-        value={mapTopologyType || ''}
-      >
-        {topologyLayers.map((layer) => (
-          <option key={layer.value} value={layer.value}>
-            {layer.name}
-          </option>
-        ))}
-      </Select>
+      <Flex gap={2}>
+        <Select
+          width="300px"
+          data-cy="select-topology-type"
+          placeholder="Select topology type"
+          background="white"
+          onChange={handleTopologyTypeChange}
+          value={mapTopologyType || ''}
+        >
+          {topologyLayers.map((layer) => (
+            <option key={layer.value} value={layer.value}>
+              {layer.name}
+            </option>
+          ))}
+        </Select>
+        <Button isDisabled={!mapTopologyType} onClick={handleSwitchLayer} colorScheme="blue">
+          Switch layer
+        </Button>
+      </Flex>
     </FormControl>
   );
 };