Flow UI: display graphs for module components

CHANGELOG.md

@@ -29,6 +29,8 @@ Main (unreleased)
 
 - Introduce the `remotecfg` service that enables loading configuration from a
   remote endpoint. (@tpaschalis) 
+
+- Flow UI: Display graph for components defined in module. (@hainenber)
 
 ### Enhancements
 

web/ui/src/Router.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Navbar from './features/layout/Navbar';
 import PageClusteringPeers from './pages/Clustering';
 import ComponentDetailPage from './pages/ComponentDetailPage';
-import Graph from './pages/Graph';
+import { Graph, ModuleGraph } from './pages/Graph';
 import PageComponentList from './pages/PageComponentList';
 
 interface Props {
@@ -20,6 +19,7 @@ const Router = ({ basePath }: Props) => {
           <Route path="/" element={<PageComponentList />} />
           <Route path="/component/*" element={<ComponentDetailPage />} />
           <Route path="/graph" element={<Graph />} />
+          <Route path="/graph/*" element={<ModuleGraph />} />
           <Route path="/clustering" element={<PageClusteringPeers />} />
         </Routes>
       </main>

web/ui/src/features/component/ComponentView.tsx

@@ -79,6 +79,13 @@ export const ComponentView: FC<ComponentViewProps> = (props) => {
               </Link>
             </li>
           )}
+          {props.component.localID.startsWith('module') && (
+            <li>
+              <Link to={`/graph/${props.component.localID}`} target="_top">
+                Graph
+              </Link>
+            </li>
+          )}
         </ul>
       </nav>
 

web/ui/src/hooks/componentInfo.tsx

@@ -33,3 +33,5 @@ export const useComponentInfo = (
 
   return [components, setComponents];
 };
+
+export default useComponentInfo;

web/ui/src/pages/ComponentDetailPage.tsx

@@ -34,9 +34,9 @@ const ComponentDetailPage: FC = () => {
             cache: 'no-cache',
             credentials: 'same-origin',
           });
-          const moduleCompoents = (await moduleComponentsResp.json()) as ComponentInfo[];
+          const moduleComponents = (await moduleComponentsResp.json()) as ComponentInfo[];
 
-          data.moduleInfo = (data.moduleInfo || []).concat(moduleCompoents);
+          data.moduleInfo = (data.moduleInfo || []).concat(moduleComponents);
         }
 
         setComponent(data);

web/ui/src/pages/Graph.tsx

@@ -1,10 +1,12 @@
+import { useParams } from 'react-router-dom';
 import { faDiagramProject } from '@fortawesome/free-solid-svg-icons';
 
 import { ComponentGraph } from '../features/graph/ComponentGraph';
 import Page from '../features/layout/Page';
 import { useComponentInfo } from '../hooks/componentInfo';
+import { parseID } from '../utils/id';
 
-function Graph() {
+export function Graph() {
   const [components] = useComponentInfo('');
 
   return (
@@ -14,4 +16,15 @@ function Graph() {
   );
 }
 
-export default Graph;
+export function ModuleGraph() {
+  const { '*': id } = useParams();
+
+  const { localID } = parseID(id || '');
+  const [components] = useComponentInfo(localID);
+
+  return (
+    <Page name="Graph" desc={`Relationships between defined components in ${localID}`} icon={faDiagramProject}>
+      {components.length > 0 && <ComponentGraph components={components} />}
+    </Page>
+  );
+}