From 0c87b8924f11e26e71d76075d5e18ea9539d7565 Mon Sep 17 00:00:00 2001 From: Annika Hannig Date: Wed, 20 Jul 2022 17:11:37 +0200 Subject: [PATCH] initial details modal --- ui/src/app/components/modal/Modal.js | 55 +++++++++ .../components/routes/RouteDetailsModal.js | 105 ++++++++++++++++++ ui/src/app/components/routes/Routes.js | 6 +- ui/src/app/components/routes/RoutesTable.js | 7 +- ui/src/app/context/routes.js | 23 +++- ui/src/app/pages/RoutesPage.js | 39 +------ 6 files changed, 193 insertions(+), 42 deletions(-) create mode 100644 ui/src/app/components/modal/Modal.js create mode 100644 ui/src/app/components/routes/RouteDetailsModal.js diff --git a/ui/src/app/components/modal/Modal.js b/ui/src/app/components/modal/Modal.js new file mode 100644 index 0000000..bc1b264 --- /dev/null +++ b/ui/src/app/components/modal/Modal.js @@ -0,0 +1,55 @@ + + +export const ModalHeader = ({children, onDismiss}) => { + return ( +
+ + {children} +
+ ); +} + + +export const ModalBody = ({children}) => { + return ( +
+ {children} +
+ ); +} + + +export const ModalFooter = ({children}) => { + return( +
+ {children} +
+ ); +} + + +export const Modal = ({ + children, + onDismiss, + className="", +}) => { + return ( +
+
+
+
+ {children} +
+
+
+
+
+ ); +} + +export default Modal; diff --git a/ui/src/app/components/routes/RouteDetailsModal.js b/ui/src/app/components/routes/RouteDetailsModal.js new file mode 100644 index 0000000..543cdee --- /dev/null +++ b/ui/src/app/components/routes/RouteDetailsModal.js @@ -0,0 +1,105 @@ + +import { useCallback } + from 'react'; + +import { useRouteDetails } + from 'app/context/routes'; + +import { Modal + , ModalHeader + , ModalBody + , ModalFooter + } + from 'app/components/modal/Modal'; + + +const BgpCommunitiyLabel = ({community}) => { + console.log("BGP COM LABEL:", community); + return (<>Label); +} + +const RouteDetailsModal = () => { + const [ route, setRoute ] = useRouteDetails(); + + const onDismiss = useCallback(() => setRoute(null), [setRoute]); + + const attrs = route?.bgp; + if (!attrs) { + return null; + } + + const communities = attrs.communities; + const extCommunities = attrs.ext_communities; + const largeCommunities = attrs.large_communities; + + // As communities can be repeated, we can not use them + // directly as keys, but may have to prepend a suffix. + const communityKeyCnt = {}; + const communityKey = (community) => { + const k = community.join(":"); + communityKeyCnt[k] = (communityKeyCnt[k]||0) + 1; + return `${k}+${communityKeyCnt[k]}`; + }; + + return ( + + +

BGP Attributes for Network:

+

{route.network}

+ + + + + + + + + + + + + + + + + + {attrs.as_path && + + + } + {communities.length > 0 && + + + + } + {extCommunities.length > 0 && + + + + } + {largeCommunities.length > 0 && + + + + } + +
Origin:{attrs.origin}
Local Pref:{attrs.local_pref}
Next Hop:{attrs.next_hop}
MED{attrs.med}
AS Path:{attrs.as_path.join(' ')}
Communities: + {communities.map((c) => )} +
Ext. Communities: + {extCommunities.map((c) => )} +
Large Communities: + {largeCommunities.map((c) => )} +
+ + + + + + + ); +} + +export default RouteDetailsModal; diff --git a/ui/src/app/components/routes/Routes.js b/ui/src/app/components/routes/Routes.js index 62aef20..1e07af0 100644 --- a/ui/src/app/components/routes/Routes.js +++ b/ui/src/app/components/routes/Routes.js @@ -33,6 +33,8 @@ import EmptyResults from 'app/components/routes/EmptyResults'; import RoutesTable from 'app/components/routes/RoutesTable'; +import RouteDetailsModal + from 'app/components/routes/RouteDetailsModal'; import Paginator from 'app/components/pagination/Paginator'; import PaginationInfo @@ -42,7 +44,6 @@ import LoadingIndicator import WaitingText from 'app/components/spinners/WaitingText'; - const RoutesHeader = ({type}) => { const rtype = { [ROUTES_RECEIVED]: "accepted", @@ -188,13 +189,14 @@ const Routes = () => { "#routes-not-exported": refNotExported, }); - return (
+ +
diff --git a/ui/src/app/components/routes/RoutesTable.js b/ui/src/app/components/routes/RoutesTable.js index b1f51d6..9170192 100644 --- a/ui/src/app/components/routes/RoutesTable.js +++ b/ui/src/app/components/routes/RoutesTable.js @@ -5,6 +5,8 @@ import { useCallback } import { useConfig } from 'app/context/config'; +import { useSetRouteDetails } + from 'app/context/routes'; import FilterReason from 'app/components/routes/FilterReason'; @@ -102,6 +104,7 @@ const RouteColumn = ({onClick, column, route}) => { const RoutesTable = ({results}) => { const config = useConfig(); + const setRouteDetails = useSetRouteDetails(); const columns = config.routes_columns; const columnsOrder = config.routes_columns_order; @@ -109,8 +112,8 @@ const RoutesTable = ({results}) => { const { routes } = results; const showAttributesModal = useCallback((route) => { - console.log("show attributes:", route); - }, []); + setRouteDetails(route); + }, [setRouteDetails]); if(!routes.length === 0) { return null; diff --git a/ui/src/app/context/routes.js b/ui/src/app/context/routes.js index 0cac7eb..7fb3450 100644 --- a/ui/src/app/context/routes.js +++ b/ui/src/app/context/routes.js @@ -137,8 +137,6 @@ const useFetchReceivedState = createFetchRoutesState(ROUTES_RECEIVED); const useFetchFilteredState = createFetchRoutesState(ROUTES_FILTERED); const useFetchNotExportedState = createFetchRoutesState(ROUTES_NOT_EXPORTED); - - /** * Create routes provider makes a new routes provider * for a given context. @@ -194,3 +192,24 @@ export const RoutesNotExportedProvider = createRoutesProvider( useFetchNotExportedState, ); +/** + * RouteDetails Context + */ +const RouteDetailsContext = createContext(); + +export const useRouteDetails = () => useContext(RouteDetailsContext); + +export const useSetRouteDetails = () => useRouteDetails()[1]; + +export const RouteDetailsProvider = ({children}) => { + const state = useState(); + return ( + + {children} + + ); +} + + + + diff --git a/ui/src/app/pages/RoutesPage.js b/ui/src/app/pages/RoutesPage.js index 6f652ec..093bc34 100644 --- a/ui/src/app/pages/RoutesPage.js +++ b/ui/src/app/pages/RoutesPage.js @@ -30,6 +30,7 @@ import { NeighborProvider import { RoutesReceivedProvider , RoutesFilteredProvider , RoutesNotExportedProvider + , RouteDetailsProvider } from 'app/context/routes'; @@ -147,6 +148,7 @@ const RoutesPage = () => { return ( + { + ); } -/* - - -
-
- - - - - - - {this.props.receivedLoading && } - - - - {this.props.notExportedLoading && } - - - - -
-
-
-*/ - export default RoutesPage;