Merge branch 'ali-feature' of https://github.com/C-STYR/reactime into cole_feature

Author: DennisLpz

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",
@@ -138,25 +139,29 @@
     "@visx/zoom": "^1.0.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
+    "apexcharts": "^3.23.1",
     "cookie": "^0.4.1",
     "d3": "^5.16.0",
     "d3-scale-chromatic": "^2.0.0",
     "d3-shape": "^2.0.0",
     "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",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.7.1",
     "rc-tooltip": "^3.7.3",
     "react": "^16.13.1",
+    "react-apexcharts": "^1.3.7",
     "react-dom": "^16.13.1",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
-    "recoil": "0.0.10"
+    "recoil": "0.0.10",
+    "web-vitals": "^1.1.0"
   }
 }

src/app/components/StateRoute.tsx

@@ -20,6 +20,8 @@ import { useStoreContext } from '../store';
 import PerformanceVisx from './PerformanceVisx';
 import Legend from './AtomsRelationshipLegend';
 import AtomsRelationship from './AtomsRelationship';
+import WebMetrics from './WebMetrics';
+
 
 const History = require('./History').default;
 const ErrorHandler = require('./ErrorHandler').default;
@@ -37,14 +39,16 @@ export interface StateRouteProps {
     children?: any[];
     atomsComponents?: any;
     atomSelectors?: any;
+   
   };
   hierarchy: any;
   snapshots: [];
   viewIndex: number;
+  webMetrics: object;
 }
 
 const StateRoute = (props: StateRouteProps) => {
-  const { snapshot, hierarchy, snapshots, viewIndex } = 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;
@@ -111,6 +115,16 @@ const StateRoute = (props: StateRouteProps) => {
       return <Tree snapshot={snapshot} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
+
+  };
+  const renderWebMetrics = () => {
+    return (
+      <div>
+        <WebMetrics webMetrics={webMetrics}/>
+        <WebMetrics webMetrics={webMetrics}/>
+        <WebMetrics webMetrics={webMetrics}/>
+      </div>
+    )
   };
 
   const renderPerfView = () => {
@@ -155,6 +169,13 @@ const StateRoute = (props: StateRouteProps) => {
         >
           History
         </NavLink>
+        <NavLink
+          className="router-link"
+          activeClassName="is-active"
+          to="/webMetrics"
+        >
+          Web Metrics
+        </NavLink>
         <NavLink
           className="router-link"
           activeClassName="is-active"
@@ -176,6 +197,7 @@ const StateRoute = (props: StateRouteProps) => {
         <Route path="/performance" render={renderPerfView} />
         <Route path="/history" render={renderHistory} />
         <Route path="/relationship" render={renderAtomsRelationship} />
+        <Route path="/webMetrics" render={renderWebMetrics} />
         <Route path="/tree" render={renderTree} />
         <Route path="/" render={renderComponentMap} />
       </Switch>

src/app/components/WebMetrics.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import Charts from 'react-apexcharts'
+
+const radialGraph = ({webMetrics}) => {
+		const state = {
+		
+			series: [(webMetrics.FCP / 1000) * 100],
+			options: {
+				chart: {
+					height: 350,
+					type: 'radialBar',
+					toolbar: {
+						show: true
+					}
+				},
+				plotOptions: {
+					radialBar: {
+						startAngle: -135,
+						endAngle: 225,
+						 hollow: {
+							margin: 0,
+							size: '90%',
+							background: '#242529',
+							image: undefined,
+							imageOffsetX: 0,
+							imageOffsetY: 0,
+							position: 'front',
+							dropShadow: {
+								enabled: true,
+								top: 3,
+								left: 0,
+								blur: 4,
+								opacity: 0.24
+							}
+						},
+						track: {
+							background: '#fff',
+							strokeWidth: '10%',
+							margin: 0, // margin is in pixels
+							dropShadow: {
+								enabled: true,
+								top: -3,
+								left: 0,
+								blur: 4,
+								opacity: 0.35
+							}
+						},
+				
+						dataLabels: {
+							show: true,
+							name: {
+								offsetY: -10,
+								show: true,
+								color: '#fff',
+								fontSize: '17px'
+							},
+							value: {
+								formatter: function(val) {
+									return parseInt(webMetrics.FCP);
+								},
+								color: '#fff',
+								fontSize: '25px',
+								show: true,
+							}
+						}
+					}
+				},
+				fill: {
+					type: 'gradient',
+					gradient: {
+						shade: 'dark',
+						type: 'horizontal',
+						shadeIntensity: 0.5,
+						gradientToColors: ['#ABE5A1'],
+						inverseColors: true,
+						opacityFrom: 1,
+						opacityTo: 1,
+						stops: [0, 100]
+					}
+				},
+				stroke: {
+					lineCap: 'round'
+				},
+				labels: ['FCP'],
+			},
+		
+		
+    };
+   
+
+		return (
+			
+
+<div id="card">
+	<div id="chart">
+		<Charts options={state.options} series={state.series} type="radialBar" height={350} />
+	</div>
+</div>
+
+		)
+}
+
+export default radialGraph;

src/app/containers/ActionContainer.tsx

@@ -115,15 +115,13 @@ function ActionContainer(props) {
   );
 
   if (!timeTravel) {
-    console.log("should be false:", timeTravel)
     return (
       //returns an empty div when timeTravel is false
 
       <div></div>
     ) 
   }
   else {
-    console.log("Should be true:", timeTravel);
     // this is not logging; the prop is not being udpdated or the component is not being re-rendered.
     return (
       <div className="action-container">

src/app/containers/MainContainer.tsx

@@ -151,8 +151,11 @@ function MainContainer(): any {
       </div>
     );
   }
-  const { viewIndex, sliderIndex, snapshots, hierarchy } = tabs[currentTab];
+  const { viewIndex, sliderIndex, snapshots, hierarchy, webMetrics } = tabs[currentTab];
   // if viewIndex is -1, then use the sliderIndex instead
+  console.log('webMetrics in MainContainer >>>', webMetrics);
+
+
   const snapshotView =
     viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // cleaning hierarchy and snapshotView from stateless data
@@ -222,6 +225,7 @@ function MainContainer(): any {
         {snapshots.length ? (
           <StateContainer
             toggleActionContainer={toggleActionContainer}
+            webMetrics={webMetrics}
             viewIndex={viewIndex}
             snapshot={snapshotDisplay}
             hierarchy={hierarchyDisplay}

src/app/containers/StateContainer.tsx

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

src/extension/background.js

@@ -7,6 +7,8 @@ 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 metrics = {}; //for Performance Metrics 8.0
+
 function createTabObj(title) {
 	// update tabsObj
 	return {
@@ -32,6 +34,8 @@ function createTabObj(title) {
 			paused: false,
 			empty: false,
 		},
+		
+		webMetrics: {},
 	};
 }
 
@@ -175,16 +179,25 @@ chrome.runtime.onConnect.addListener((port) => {
 });
 
 // background.js listening for a  message from contentScript.js
-chrome.runtime.onMessage.addListener((request, sender) => {
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 	// IGNORE THE AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED
 	if (request.type === 'SIGN_CONNECT') {
 		return true;
 	}
+	
+	
+	console.log('Request in Listener >>>', request)
+	console.log('Sender in Listener >>>', sender)
 	const tabTitle = sender.tab.title;
 	const tabId = sender.tab.id;
-	const { action, index, name } = request;
+	const { action, index, name, value  } = request;
 	let isReactTimeTravel = false;
 
+	if (name) {
+		metrics[name] = value;
+	};
+	
+	console.log('metrics outside', metrics);
 
 	// Filter out tabs that don't have reactime, tabs that dont use react?
 	if (
@@ -203,6 +216,8 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 		tabsObj[tabId] = createTabObj(tabTitle);
 	}
 
+	//Performance Metrics 8.0 
+
 	const { persist, empty } = tabsObj[tabId].mode;
 
 	switch (action) {
@@ -236,7 +251,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 					tabsObj[tabId].snapshots = tabsObj[tabId].initialSnapshot;
 					// resets hierarchy to page initial state recorded when emptied
 					tabsObj[tabId].hierarchy = tabsObj[tabId].initialHierarchy;
+
+
 				} else {
+		
 					// triggered with new tab opened
 					// resets snapshots to page initial state
 					tabsObj[tabId].snapshots.splice(1);
@@ -273,11 +291,24 @@ chrome.runtime.onMessage.addListener((request, sender) => {
 		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;
+				
+				console.log('metrics in recordSnap case', metrics);
+				tabsObj[tabId].webMetrics = metrics;
 
 				tabsObj[tabId].snapshots.push(request.payload);
+				
+				// metrics check
+				console.log('tabsObj >>>', tabsObj);
 
 				sendToHierarchy(
 					tabsObj[tabId],

src/extension/contentScript.ts

@@ -1,3 +1,5 @@
+import { getTTFB, getLCP, getFID, getFCP, getCLS } from "web-vitals";
+
 
 let firstMessage = true;
 
@@ -35,4 +37,29 @@ chrome.runtime.onMessage.addListener(request => {
   return true; // attempt to fix port closing console error
 });
 
+//Performance Metrics 8.0
+
+const metrics = {};
+const gatherMetrics = ({ name, value }) => {
+  metrics[name] = value;
+  
+
+  chrome.runtime.sendMessage({
+    type: "performance:metric",
+    name,
+    value
+  });
+  
+
+
+}
+
+getTTFB(gatherMetrics);
+getLCP(gatherMetrics);
+getFID(gatherMetrics);
+getFCP(gatherMetrics);
+getCLS(gatherMetrics);
+
+
+
 chrome.runtime.sendMessage({ action: 'injectScript' });