Bare minimum mvp working

clicking the example card now renders the communication data
directly.

Author: mdtagg

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -13,8 +13,9 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
 const ApplicationsCard = (props) => {
 
   const { application, i, setModal, classes } = props
-  const { deleteApp } = useContext(DashboardContext)
-  const { setAppIndex, setApp, setServicesData, app } = useContext(ApplicationContext)
+  const { deleteApp,user,applications } = useContext(DashboardContext)
+  const { setAppIndex, setApp, setServicesData, app,example,connectToDB,setChart } = useContext(ApplicationContext)
+  const [ cardName,dbType,dbURI,description,serviceType ] = applications[i]
 
   //dynamic refs
   const delRef = useRef<any>([]);
@@ -41,7 +42,16 @@ const ApplicationsCard = (props) => {
         setAppIndex(i);
         setApp(selectedApp);
         navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
-      } else {
+      } 
+      else if(example) {
+        setAppIndex(i);
+        setApp(selectedApp);
+        setServicesData([]);
+        setChart('communications')
+
+        connectToDB(user, i, app, dbURI, dbType)
+      }
+      else {
         setAppIndex(i);
         setApp(selectedApp);
         setServicesData([]);

app/components/Occupied/Occupied.tsx

@@ -34,10 +34,11 @@ import DashboardIcons from '../DashboardIcons/DashboardIcons';
 import ApplicationsCard from '../ApplicationsCard/ApplicationsCard';
 
 import { useStylesLight, useStylesDark } from './helpers/muiHelper'
+import { Link } from 'react-router-dom';
 
 //v10: Memoized function, without any props. Should theoretically be called only once.
 const Occupied = React.memo(() => {
-  const { setServicesData, app } = useContext(ApplicationContext);
+  const { setServicesData, app,example } = useContext(ApplicationContext);
   const { user, applications, getApplications, mode } = useContext(DashboardContext);
   const [ modal,setModal ] = useState({isOpen:false,type:''})
   const { appIndex } = useContext(ApplicationContext);
@@ -90,15 +91,23 @@ const Occupied = React.memo(() => {
 
         {applications
           .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
-          .map((application: string[], i: any) => (
-            <ApplicationsCard
-              key={crypto.randomUUID()}
-              application={application}
-              i={i}
-              setModal={setModal}
-              classes={classes}
-            />
-        ))}
+          .map((application: string[], i: any) => {
+            const services = ['auth','client','event-bus','items','inventory','orders']
+            console.log({app,services})
+            return (
+              <Link 
+                to={services.length > 0 ? `/applications/example/${services.join(' ')}` : '#'}
+              >
+                <ApplicationsCard
+                  key={crypto.randomUUID()}
+                  application={application}
+                  i={i}
+                  setModal={setModal}
+                  classes={classes}
+                />
+            </Link>
+            )
+          })}
 
         <Modal 
           open={modal.isOpen} 

app/containers/GraphsContainer/GraphsContainer.tsx

@@ -34,15 +34,15 @@ const GraphsContainer: React.FC = React.memo(() => {
 
   const { app, service } = useParams<keyof Params>() as Params;
   const [ live, setLive ] = useState<boolean>(false);
-  const { intervalID, setIntervalID } = useContext(ApplicationContext);
+  const { intervalID, setIntervalID,example,chart,setChart } = useContext(ApplicationContext);
   const { getSavedMetrics } = useContext(ApplicationContext);
   const { fetchHealthData, setHealthData } = useContext(HealthContext);
   const { setDockerData, dockerData } = useContext(DockerContext);
   const { fetchEventData, setEventData } = useContext(EventContext);
   // const { fetchKafkaEventData, setKafkaEventData } = useContext(EventContext);
   // const { fetchKubernetesEventData, setKubernetesEventData } = useContext(EventContext);
   const { fetchCommsData } = useContext(CommsContext);
-  const [chart, setChart] = useState<string>('all');
+  // const [chart, setChart] = useState<string>('all');
   const { mode } = useContext(DashboardContext.DashboardContext);
   let [inspect, setInspect] = useState<boolean>(false);
 

app/containers/SidebarContainer.tsx

@@ -14,7 +14,7 @@ import { DashboardContext } from '../context/DashboardContext';
 const SidebarContainer = React.memo(() => {
 
   // Extract invervalID from ApplicationContext. Initival value: intervalID = null
-  const { intervalID } = useContext(ApplicationContext);
+  const { intervalID,setExample } = useContext(ApplicationContext);
   // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true
   const { isLoading, setLoadingState } = useContext(AwsContext);
   // clear interval and set loading state to true when leaving graph containers
@@ -29,6 +29,9 @@ const SidebarContainer = React.memo(() => {
   };
 
   const handleExample = () => {
+    
+    setExample(true)
+
     const fields = {
       typeOfService: 'Microservices',
       database: 'MongoDB',

app/context/ApplicationContext.tsx

@@ -20,6 +20,9 @@ export const ApplicationContext = React.createContext<any>(null);
 
 const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props => {
   const children = props.children;
+  const [ example,setExample ] = useState(false)
+  const [chart, setChart] = useState<string>('all');
+
   const [servicesData, setServicesData] = useState([]);
   const [app, setApp] = useState<string>('');
   const [savedMetrics, setSavedMetrics] = useState({});
@@ -84,7 +87,7 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
       data.forEach(el => {
         store[el.metric] = el;
       });
-      console.log({store})
+      // console.log({store})
       // console.log('result from getSavedMetrics is: ', store);
       setSavedMetrics(store);
     });
@@ -106,6 +109,10 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
         setAppIndex,
         intervalID,
         setIntervalID,
+        example,
+        setExample,
+        chart,
+        setChart
       }}
     >
       {children}