mperf metrics in progress

Author: C-STYR

package.json

@@ -99,6 +99,7 @@
     "jest-diff": "^26.1.0",
     "jest-puppeteer": "^4.4.0",
     "jest-runner-eslint": "^0.7.7",
+    "jscharting-react": "^1.2.1",
     "puppeteer": "^5.1.0",
     "sass": "^1.26.10",
     "sass-loader": "^7.3.1",
@@ -145,6 +146,7 @@
     "d3-zoom": "^1.8.3",
     "immer": "^3.3.0",
     "jest-runner": "^26.1.0",
+    "jscharting": "^3.0.2",
     "jsondiffpatch": "^0.3.11",
     "mixpanel": "^0.11.0",
     "mixpanel-browser": "^2.39.0",

src/app/components/StateRoute.tsx

@@ -20,7 +20,7 @@ import { useStoreContext } from '../store';
 import PerformanceVisx from './PerformanceVisx';
 import Legend from './AtomsRelationshipLegend';
 import AtomsRelationship from './AtomsRelationship';
-import Vitals from './Vitals';
+import WebMetrics from './WebMetrics';
 
 const History = require('./History').default;
 const ErrorHandler = require('./ErrorHandler').default;
@@ -43,11 +43,11 @@ export interface StateRouteProps {
   hierarchy: any;
   snapshots: [];
   viewIndex: number;
-  FCP: any;
+  webMetrics: object;
 }
 
 const StateRoute = (props: StateRouteProps) => {
-  const { snapshot, hierarchy, snapshots, viewIndex, FCP } = props;
+  const { snapshot, hierarchy, snapshots, viewIndex, webMetrics } = props;
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   const isRecoil = snapshot.atomsComponents ? true : false;
@@ -116,8 +116,8 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className="noState">{NO_STATE_MSG}</div>;
 
   };
-  const renderVitals = () => {
-    return <Vitals FCP={FCP}/>;
+  const renderWebMetrics = () => {
+    return <WebMetrics webMetrics={webMetrics}/>;
   };
 
   const renderPerfView = () => {
@@ -165,9 +165,9 @@ const StateRoute = (props: StateRouteProps) => {
         <NavLink
           className="router-link"
           activeClassName="is-active"
-          to="/vitals"
+          to="/webMetrics"
         >
-          Vitals
+          Web Metrics
         </NavLink>
         <NavLink
           className="router-link"
@@ -190,7 +190,7 @@ const StateRoute = (props: StateRouteProps) => {
         <Route path="/performance" render={renderPerfView} />
         <Route path="/history" render={renderHistory} />
         <Route path="/relationship" render={renderAtomsRelationship} />
-        <Route path="/vitals" render={renderVitals} />
+        <Route path="/webMetrics" render={renderWebMetrics} />
         <Route path="/tree" render={renderTree} />
         <Route path="/" render={renderComponentMap} />
       </Switch>

src/app/components/Vitals.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { JSCharting } from 'jscharting-react';
+
+const config = {
+    type: 'horizontal column',
+    series: [
+        {
+            points: [
+                { x: 'A', y: 50 },
+                { x: 'B', y: 30 },
+                { x: 'C', y: 50 }
+            ]
+        }
+    ]
+};
+
+const divStyle = {
+	maxWidth: '700px',
+	height: '400px',
+	margin: '0px auto'
+};
+
+// const WebMetrics = ({webMetrics}) => {
+//   const [data, setData] = React.useState({});
+//   const METRICS = ["TTFB", "LCP", "FID", "FCP", "CLS"];
+
+//   React.useEffect(() => {
+//     chrome.runtime.sendMessage({
+//       type: "performance:metric:request",
+//     }, (d) => {
+//       setData(d);
+//     })
+//   }, [])
+
+//   const output = [];
+//   const perfMetrics = Object.keys(webMetrics)
+//     .map((metric) => output.push(<div><div>{metric}</div><div>{Math.round(webMetrics[metric])}</div></div>));
+   
+
+
+
+  return (
+    <div id="chartDiv" style="width: 100%; height: 400px;"></div>
+  )
+}
+
+export default WebMetrics;

src/app/components/WebMetrics.tsx

@@ -155,9 +155,9 @@ function MainContainer(): any {
       </div>
     );
   }
-  const { viewIndex, sliderIndex, snapshots, hierarchy, FCP } = tabs[currentTab];
+  const { viewIndex, sliderIndex, snapshots, hierarchy, webMetrics } = tabs[currentTab];
   // if viewIndex is -1, then use the sliderIndex instead
-  console.log('FCP in MainContainer >>>', FCP);
+  console.log('webMetrics in MainContainer >>>', webMetrics);
 
 
   const snapshotView =
@@ -208,7 +208,7 @@ function MainContainer(): any {
         {snapshots.length ? (
           <StateContainer
             toggleActionContainer={toggleActionContainer}
-            FCP={FCP}
+            webMetrics={webMetrics}
             viewIndex={viewIndex}
             snapshot={snapshotDisplay}
             hierarchy={hierarchyDisplay}

src/app/containers/MainContainer.tsx

@@ -24,7 +24,7 @@ interface StateContainerProps {
     }
   >;
   toggleActionContainer?: any;
-  FCP: any;
+  webMetrics: object;
   AtomsRelationship?: any[];
   hierarchy: Record<string, unknown>;
   snapshots: [];
@@ -34,7 +34,7 @@ interface StateContainerProps {
 
 // eslint-disable-next-line react/prop-types
 const StateContainer = (props: StateContainerProps): JSX.Element => {
-  const { snapshot, hierarchy, snapshots, viewIndex, toggleActionContainer, FCP } = props;
+  const { snapshot, hierarchy, snapshots, viewIndex, toggleActionContainer, webMetrics } = props;
   const [Text, setText] = useState('State');
 
   return (
@@ -75,7 +75,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
               setText('State');
               return (
                 <StateRoute
-                  FCP={FCP}
+                  webMetrics={webMetrics}
                   viewIndex={viewIndex}
                   snapshot={snapshot}
                   hierarchy={hierarchy}

src/app/containers/StateContainer.tsx

@@ -6,7 +6,8 @@ const reloaded = {};
 const firstSnapshotReceived = {};
 // there will be the same number of objects in here as there are reactime tabs open for each user application being worked on
 const tabsObj = {};
-let data = {}; //for Performance Metrics 8.0
+
+let metrics = {}; //for Performance Metrics 8.0
 
 function createTabObj(title) {
 	// update tabsObj
@@ -33,8 +34,8 @@ function createTabObj(title) {
 			paused: false,
 			empty: false,
 		},
-		// Holds FCP metric
-		FCP: null,
+		
+		webMetrics: {},
 	};
 }
 
@@ -189,15 +190,15 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 	console.log('Sender in Listener >>>', sender)
 	const tabTitle = sender.tab.title;
 	const tabId = sender.tab.id;
-	const { action, index, name, value } = request;
+	const { action, index, name, value  } = request;
 	let isReactTimeTravel = false;
 
-	if (request.value) {
-		data = {
-		name, value
+	if (name) {
+		metrics[name] = value;
 	};
-	console.log("data >>>", data)
-}
+	
+	console.log('metrics outside', metrics);
+
 	// Filter out tabs that don't have reactime, tabs that dont use react?
 	if (
 		action === 'tabReload' ||
@@ -217,27 +218,6 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
 	//Performance Metrics 8.0 
 
-	// if (request.type === "performance:metric") {
-	// 	console.log('performance:metric received');
-
-    // const tab = sender.tab.url.toString();
-    // data[tab] = data[tab] || {};
-    // const name = request.name;
-    // data[tab][name] = data[tab][name] || {
-    //   values: [],
-    //   average: 0,
-    // };
-    // data[tab][name].values.push(request.value);
-    // data[tab][name].average = 
-    //   data[tab][name].values.reduce((a, v) => a + v, 0) / data[tab][name].values.length;
-  // }
-  // if (request.type === "performance:metric:request") {
-	// 	console.log('performance:metric:request received')
-	// 	console.log('p:m:r', data)
-  //   sendResponse(data);
-	// }
-	
-
 	const { persist, empty } = tabsObj[tabId].mode;
 
 	switch (action) {
@@ -311,15 +291,23 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 		case 'recordSnap': {
 			const sourceTab = tabId;
 			// first snapshot received from tab
+			console.log('metrics in recordSnap case', metrics);
+			tabsObj[tabId].webMetrics = metrics;
+			
+			// metrics check
+			console.log('tabsObj >>>', tabsObj);
+
+
 			if (!firstSnapshotReceived[tabId]) {
 				firstSnapshotReceived[tabId] = true;
 				reloaded[tabId] = false;
 
-				if (data.value) tabsObj[tabId].FCP = data.value;
+				console.log('metrics in recordSnap case', metrics);
+				tabsObj[tabId].webMetrics = metrics;
 
 				tabsObj[tabId].snapshots.push(request.payload);
 
-				// FCP check
+				// metrics check
 				console.log('tabsObj >>>', tabsObj);
 
 				sendToHierarchy(

src/extension/background.js

@@ -1,7 +1,6 @@
 import { getTTFB, getLCP, getFID, getFCP, getCLS } from "web-vitals";
 
 
-
 let firstMessage = true;
 
 // listening for window messages (from the injected script.../DOM)
@@ -42,24 +41,25 @@ chrome.runtime.onMessage.addListener(request => {
 
 const metrics = {};
 const gatherMetrics = ({ name, value }) => {
-
-  console.log('inside Content Script gather metrics', name, value)
   metrics[name] = value;
+  
 
   chrome.runtime.sendMessage({
     type: "performance:metric",
     name,
-    value,
+    value
   });
+  
+
 
-  const metricsHTML = Object.keys(metrics)
 }
 
-// getTTFB(gatherMetrics);
-// getLCP(gatherMetrics);
-// getFID(gatherMetrics);
+getTTFB(gatherMetrics);
+getLCP(gatherMetrics);
+getFID(gatherMetrics);
 getFCP(gatherMetrics);
-// getCLS(gatherMetrics);
+getCLS(gatherMetrics);
+
 
 
 chrome.runtime.sendMessage({ action: 'injectScript' });