feat: Adding telemetry checks

package.json

@@ -66,6 +66,7 @@
  "@mui/lab": "^5.0.0-alpha.173",
  "@mui/material": "^5.16.7",
  "@mui/x-tree-view": "^7.14.0",
+ "acorn-walk": "^8.3.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.26.1"

src/panel/components/results.tsx

@@ -1,17 +1,13 @@
 import * as React from 'react';
+import PatternSearchResults from './searchResultComponents/patternSearchResults';
+import TelemetrySearchResults from './searchResultComponents/telemetrySearchResults';
 
 export default function Results(props: any) {
- const { results } = props;
- function getRandom() {
- return Math.random() * 100;
- }
- const resultPhrases = results.map((funcObj: any) => {
- return (
- <div key={getRandom()}>
- <strong>{funcObj.name}</strong> was found {funcObj.count} times.
- </div>
- );
- });
-
- return <div>{resultPhrases}</div>;
+ const { patternMatchPanelResults, telemetryMatchPanelResults } = props;
+ return (
+ <div>
+ <PatternSearchResults results={patternMatchPanelResults} />
+ <TelemetrySearchResults results={telemetryMatchPanelResults} />
+ </div>
+ );
 }

src/panel/components/searchResultComponents/patternSearchResults.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export default function PatternSearchResults(props: any) {
+ const { results } = props;
+ function getRandom() {
+ return Math.random() * 100;
+ }
+ const resultPhrases = results.map((funcObj: any) => {
+ return (
+ <div key={getRandom()}>
+ <strong>{funcObj.name}</strong> was found {funcObj.count} times.
+ </div>
+ );
+ });
+
+ return <div>{resultPhrases}</div>;
+}

src/panel/components/searchResultComponents/telemetrySearchResults.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+interface ClickableLinkProps {
+ file: string;
+ line: number;
+ column: number;
+ text: string;
+}
+
+const ClickableLink: React.FC<ClickableLinkProps> = ({ file, line, column, text }) => {
+ const href = encodeURI(`vscode://file/${file}:${line}:${column}`);
+ return <a href={href}>{text}</a>;
+};
+
+export default function TelemetrySearchResults(props: any) {
+ const { results } = props;
+ // function getRandom() {
+ // return Math.random() * 100;
+ // }
+
+ console.log('inside the tele tsx file!', results)
+ if (!results.length) {
+ return (
+ //'No potential network requests found.'
+ <div>
+ {results[0]}
+ </div>
+ )
+ }
+
+ return (
+ <div>
+ {results.map((result: any, index: any) => (
+ <div key={index} style={{ marginBottom: '20px' }}>
+ <div>File: {result.file}</div>
+ {result.originalFile && (
+ <div>
+ Original:{' '}
+ <ClickableLink
+ file={result.originalFile}
+ line={result.originalLine!}
+ column={result.originalColumn!}
+ text="Original Source"
+ />
+ </div>
+ )}
+ <div>
+ Minified:{' '}
+ <ClickableLink
+ file={result.file}
+ line={result.line}
+ column={result.column}
+ text="Minified Source"
+ />
+ </div>
+ <div>URL: {result.url}</div>
+ </div>
+ ))}
+ </div>
+ );
+}

src/panel/components/tabContext.tsx

@@ -12,7 +12,7 @@ import TabPanels from './tabPanels';
 
 export default function TabContextDiv(props: any) {
  const [value, setValue] = useState<number>(0);
- const { displayNames, panelState, readMe } = props;
+ const { displayNames, patternMatchPanelState, telemetryPanelState, readMe } = props;
 
  return (
  <TabContext value={value}>
@@ -28,7 +28,8 @@ export default function TabContextDiv(props: any) {
  </Box>
  <TabPanels
  displayNames={displayNames}
- panelState={panelState}
+ patternMatchPanelState={patternMatchPanelState}
+ telemetryPanelState={telemetryPanelState}
  readMe={readMe}
  />
  </TabContext>

src/panel/components/tabPanels.tsx

@@ -6,7 +6,7 @@ import Box from '@mui/material/Box';
 import ReadMeDiv from './readMeDiv';
 
 export default function TabPanels(props: any) {
- const { displayNames, panelState, readMe } = props;
+ const { displayNames, patternMatchPanelState, telemetryPanelState, readMe } = props;
 
  function getRandom() {
  return Math.random() * 100;
@@ -15,13 +15,16 @@ export default function TabPanels(props: any) {
  const tabPanels = displayNames.map((extensionName: string, i: number) => {
  let value = i.toString();
  let content = `panelFor${extensionName}`;
- const panel: scanResult = panelState[extensionName] || {
+ const patternMatchPanel: scanResult = patternMatchPanelState[extensionName] || {
  results: [{ funcName: 'no results yet', count: 0 }],
  };
+ const telemetryMatchPanel: scanResult = telemetryPanelState[extensionName] || {
+ results: ['No potential network requests found.'],
+ };
 
  return (
  <TabPanel value={value} key={getRandom()} id={content}>
- <Results results={panel.results} />
+ <Results patternMatchPanelResults={patternMatchPanel.results} telemetryMatchPanelResults={telemetryMatchPanel.results} />
  <ReadMeDiv readMe={readMe} extensionName={extensionName} />
  </TabPanel>
  );

src/panel/panelApp.tsx

@@ -10,7 +10,9 @@ function App() {
  // initialize state for the read me description
  const [readMe, setReadMe] = useState<object>({});
  const [displayNames, setDisplayNames] = useState<string[]>([]);
- const [panelState, setPanelState] = useState<panelCache>({});
+ // Adding unique state for each search that appears in a panel for an app
+ const [patternMatchPanelState, setPatternMatchPanelState] = useState<panelCache>({});
+ const [telemetryPanelState, setTelemetryPanelState] = useState<panelCache>({});
 
  let displayNamesArray: string[];
 
@@ -41,27 +43,24 @@ function App() {
  //grabbing html element with id: 'content'
  //assigning the data sent to the semantic variable message
  //providing multiple outcomes depending on the "type" of the message that was sent
- //if the message type is 'update' we add a p tag to display the text which is all the occurence of found patterns
- //if the message type is 'end' we add a line, a bolded declaration that the file is finished reading, and another line
+ //if the message type is 'patternMatchUpdate' we add a p tag to display the text which is all the occurence of found patterns
+ //if the message type is 'patternMatchEnd' we add a line, a bolded declaration that the file is finished reading, and another line
  //if the message type is 'error' we display a p tag of red text delcaring the file name and error message
- let extensionObj: panelCache | undefined = panelState;
+ let patternMatchExtensionObj: panelCache | undefined = patternMatchPanelState;
  window.addEventListener('message', (event) => {
  const message = event.data;
  let disName = message.displayName;
 
  switch (message.type) {
- case 'update': {
-
- // data handling for patterns results
+ // Does this skip the first result that comes in?
+ case 'patternMatchUpdate': {
  let funcName = message.text.name;
  let count = message.text.count;
 
- if (!extensionObj[disName]) {
- extensionObj[disName] = { filepath: [], results: [] };
+ if (!patternMatchExtensionObj[disName]) {
+ patternMatchExtensionObj[disName] = { filepath: [], results: [] };
  } else {
- const currentExResArray: resultsObj[] | undefined =
- extensionObj[disName].results;
-
+ const currentExResArray: resultsObj[] | undefined = patternMatchExtensionObj[disName].results;
  let objectValues = currentExResArray.map((obj) => {
  return obj.name;
  });
@@ -75,17 +74,62 @@ function App() {
  }
  }
  }
-
  break;
  }
- case 'end': {
- extensionObj[disName].filepath.push(message.fileName);
- setPanelState(extensionObj);
+
+ case 'patternMatchEnd': {
+ patternMatchExtensionObj[disName].filepath.push(message.fileName);
+ setPatternMatchPanelState(patternMatchExtensionObj);
  break;
  }
  case 'dependencyCheck': {
  console.log('depCheck', message);
- console.log('panelstate', panelState);
+ console.log('patternMatchPanelState', patternMatchPanelState);
+ break;
+ }
+ case 'error': {
+ //display error somehow, it is stored as message.text
+ break;
+ }
+ }
+ });
+
+ // Repeating this for ease of implementation
+ //==================== LISTENING FOR MESSAGES FROM analyzeFilesForNetworkRequests() WITHIN fileReader.ts =====================//
+ //grabbing html element with id: 'content'
+ //assigning the data sent to the semantic variable message
+ //providing multiple outcomes depending on the "type" of the message that was sent
+ //if the message type is 'telemetryMatchUpdate' we add a p tag to display the text which is just potential telemetry content
+ //if the message type is 'error' we display a p tag of red text delcaring the file name and error message
+
+ let telemetryExtensionObj: panelCache | undefined = telemetryPanelState;
+ window.addEventListener('message', (event) => {
+ console.log('content inside telemetryaddEventListener', event)
+ const message = event.data;
+ let disName = message.displayName;
+
+ switch (message.type) {
+
+ // This may be overwriting results as they come in
+ case 'telemetryMatchUpdate': {
+
+ // this is the data that comes in from networkRequestFinder
+ console.log('content inside telemetryMatchUpdate', message.resultObjArr)
+
+ // Here we're trying to build up what will be the state object that's associated with 
+ // holding the telemetry data
+ if (!telemetryExtensionObj[disName]) {
+ telemetryExtensionObj[disName] = { filepath: [], results: [] };
+ }
+
+
+ // At this point in time the results are coming in as an array of objects- I will
+ // keep it as such so that the state can rerender the array of values
+ telemetryExtensionObj[disName].filepath.push(message.fileName);
+ telemetryExtensionObj[disName].results.push(...message.resultObjArr);
+
+ console.log('setting the telepanel state', telemetryExtensionObj);
+ setTelemetryPanelState(telemetryExtensionObj);
  break;
  }
  case 'error': {
@@ -95,12 +139,16 @@ function App() {
  }
  });
 
+
+
+
  return (
  <Box sx={{ width: '100%', typography: 'body1' }}>
  <NavBar />
  <TabContextDiv
  displayNames={displayNames}
- panelState={panelState}
+ patternMatchPanelState={patternMatchPanelState}
+ telemetryPanelState={telemetryPanelState}
  readMe={readMe}
  />
  </Box>

src/workers/fileFinder.ts

@@ -2,6 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import streamFilesInDirectory from './fileReader';
 import { WebviewPanel } from 'vscode';
+import { analyzeFilesForNetworkRequests, AnalysisResult } from './networkRequestFinder';
 import packageChecker from './dependencyChecker';
 
 export function reader(
@@ -29,6 +30,11 @@ export function reader(
  for (let file of toBeTested) {
  pathFoundFiles.push(path.join(extenPath, file));
  }
+ // ***** remove console.log and add the test once we combine cleanup *****
+ // console.log('path found files', pathFoundFiles);
+
+ // streamFilesInDirectory(pathFoundFiles, panel);
+ analyzeFilesForNetworkRequests(pathFoundFiles, panel, name, true);
  streamFilesInDirectory(pathFoundFiles, panel, name);
  }
 

src/workers/fileReader.ts

@@ -41,7 +41,7 @@ export default function streamFilesInDirectory(
  let updatedTarget = counter(target);
 
  panel.webview.postMessage({
- type: 'update',
+ type: 'patternMatchUpdate',
  text: updatedTarget,
  fileName: file,
  displayName: name,
@@ -52,7 +52,7 @@ export default function streamFilesInDirectory(
 
  readStream.on('end', () => {
  panel.webview.postMessage({
- type: 'end',
+ type: 'patternMatchEnd',
  fileName: file,
  displayName: name,
  });