Merge pull request #187 from GoogleChromeLabs/fix/dashboard

Fix: Cli dashboard
GoogleChromeLabs · Oct 17, 2023 · 9789007 · 9789007
2 parents ed36a66 + bfd3ed4
commit 9789007
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 44 deletions.
diff --git a/...es/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx b/...es/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx
@@ -18,7 +18,11 @@
  * External dependencies.
  */
 import React from 'react';
-import { CookiesLanding, CookiesMatrix } from '@ps-analysis-tool/design-system';
+import {
+  Button,
+  CookiesLanding,
+  CookiesMatrix,
+} from '@ps-analysis-tool/design-system';
 import {
   prepareCookiesCount,
   prepareCookieStatsComponents,
@@ -30,12 +34,14 @@ interface CookiesLandingContainerProps {
   tabFrames: TabFrames;
   tabCookies: TabCookies;
   affectedCookies: TabCookies;
+  downloadReport: (() => void) | undefined;
 }
 
 const CookiesLandingContainer = ({
   tabFrames,
   tabCookies,
   affectedCookies,
+  downloadReport,
 }: CookiesLandingContainerProps) => {
   return (
     <CookiesLanding
@@ -65,6 +71,15 @@ const CookiesLandingContainer = ({
             capitalizeTitle={true}
           />
         </div>
+        {downloadReport && (
+          <div className="pt-5 flex justify-center items-center">
+            <Button
+              extraClasses="w-fit text-sm flex justify-center items-center"
+              text="Download Report"
+              onClick={downloadReport}
+            />
+          </div>
+        )}
       </div>
     </CookiesLanding>
   );

diff --git a/...oard/src/components/siteReport/tabs/cookies/cookiesListing/cookieTableContainer/index.tsx b/...oard/src/components/siteReport/tabs/cookies/cookiesListing/cookieTableContainer/index.tsx
@@ -115,11 +115,11 @@ const CookieTableContainer = ({
         ),
       },
       {
-        header: 'Cookie Accepted',
+        header: 'Cookie Affected',
         accessorKey: 'isCookieSet',
         cell: (info: InfoType) => (
           <p className="flex justify-center items-center">
-            {info ? <span className="font-serif">✓</span> : ''}
+            {!info ? <span className="font-serif">✓</span> : ''}
           </p>
         ),
       },

diff --git a/packages/cli-dashboard/src/components/siteReport/tabs/cookies/index.tsx b/packages/cli-dashboard/src/components/siteReport/tabs/cookies/index.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import React, { useMemo, useCallback } from 'react';
-import { Button } from '@ps-analysis-tool/design-system';
 import { type TabFrames } from '@ps-analysis-tool/common';
 
 /**
@@ -74,15 +73,11 @@ const CookiesTab = ({ selectedFrameUrl, selectedSite }: CookiesTabProps) => {
         <CookiesListing selectedFrameUrl={selectedFrameUrl} />
       ) : (
         <div className="flex flex-col h-full w-full">
-          <Button
-            extraClasses="absolute top-0 right-0 mr-2 mt-2 text-sm"
-            text="Download Report"
-            onClick={downloadReport}
-          />
           <CookiesLandingContainer
             tabFrames={tabFrames}
             tabCookies={tabCookies}
             affectedCookies={affectedCookies}
+            downloadReport={downloadReport}
           />
         </div>
       )}

diff --git a/packages/cli-dashboard/src/components/siteReport/tabs/technologies/index.tsx b/packages/cli-dashboard/src/components/siteReport/tabs/technologies/index.tsx
@@ -54,7 +54,9 @@ const Technologies = () => {
       {
         header: 'Confidence',
         accessorKey: 'confidence',
-        cell: (info: InfoType) => info + '%',
+        cell: (info: InfoType) => (
+          <span className="w-full flex justify-center">{info + '%'}</span>
+        ),
       },
       {
         header: 'Website',

diff --git a/packages/cli-dashboard/src/components/utils/reportDownloader.ts b/packages/cli-dashboard/src/components/utils/reportDownloader.ts
@@ -61,27 +61,27 @@ export const reportDownloader = (
   };
 
   const cookieDataHeader = [
-    'name',
-    'value',
-    'domain',
-    'path',
-    'expires',
-    'httpOnly',
-    'scope',
-    'secure',
-    'sameSite',
-    'platform',
-    'category',
-    'isCookieSet',
-    'gdprPortal',
+    'Name',
+    'Value',
+    'Domain',
+    'Path',
+    'Expires',
+    'Http Only',
+    'Scope',
+    'Secure',
+    'Same Site',
+    'Platform',
+    'Category',
+    'Cookie Affected',
+    'GDPRPortal',
   ];
 
   const technologyDataHeader = [
-    'name',
-    'description',
-    'confidence',
-    'website',
-    'categories',
+    'Name',
+    'Description',
+    'Confidence',
+    'Website',
+    'Categories',
   ];
 
   const cookieDataToBeProcessed = report.cookieData;
@@ -248,7 +248,7 @@ export const reportDownloader = (
 
   const zip = new JSZip();
   zip.file('cookies.csv', cookieDataCSVContent);
-  zip.file('technology.csv', technologyDataCSVContent);
+  zip.file('technologies.csv', technologyDataCSVContent);
   zip.file('affected-cookies.csv', affectedCookieDataCSVContent);
   zip.file('report.csv', summaryDataCSVContent);
   zip.file('report.json', JSON.stringify(newReport));

diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
@@ -28,10 +28,10 @@ import { exec } from 'child_process';
  */
 import Utility from './utils/utility';
 import { fetchDictionary } from './utils/fetchCookieDictionary';
-import { delay } from './utils';
 import { analyzeCookiesUrls } from './procedures/analyzeCookieUrls';
 import { analyzeCookiesUrlsInBatches } from './procedures/analyzeCookieUrlsInBatches';
 import { analyzeTechnologiesUrlsInBatches } from './procedures/analyzeTechnologiesUrlsInBatches';
+import { delay } from './utils';
 
 events.EventEmitter.defaultMaxListeners = 15;
 
@@ -98,15 +98,27 @@ export const initialize = async () => {
     await ensureFile(directory + '/out.json');
     await writeFile(directory + '/out.json', JSON.stringify(output, null, 4));
 
-    exec('npm run cli-dashboard:dev');
+    let isTerminated = false;
 
-    await delay(3000);
+    exec('npm run cli-dashboard:dev', (error) => {
+      if (error) {
+        isTerminated = true;
+        return;
+      }
+    });
 
-    console.log(
-      `Report is being served at the URL: http://localhost:9000?path=${encodeURIComponent(
-        directory + '/out.json'
-      )}`
-    );
+    await delay(2000);
+
+    //if in 2 seconds dasboard server process is terminated show error
+    if (isTerminated) {
+      console.log('Error starting server');
+    } else {
+      console.log(
+        `Report is being served at the URL: http://localhost:9000?path=${encodeURIComponent(
+          directory + '/out.json'
+        )}`
+      );
+    }
   } else {
     const spinnies = new Spinnies();
 
@@ -165,15 +177,27 @@ export const initialize = async () => {
     await ensureFile(directory + '/out.json');
     await writeFile(directory + '/out.json', JSON.stringify(result, null, 4));
 
-    exec('npm run cli-dashboard:dev');
+    let isTerminated = false;
 
-    await delay(3000);
+    exec('npm run cli-dashboard:dev', (error) => {
+      if (error) {
+        isTerminated = true;
+        return;
+      }
+    });
 
-    console.log(
-      `Report is being served at the URL: http://localhost:9000?path=${encodeURIComponent(
-        directory + '/out.json'
-      )}&type=sitemap`
-    );
+    await delay(2000);
+
+    //if in 2 seconds dasboard server process is terminated show error
+    if (isTerminated) {
+      console.log('Error starting server');
+    } else {
+      console.log(
+        `Report is being served at the URL: http://localhost:9000?path=${encodeURIComponent(
+          directory + '/out.json'
+        )}&type=sitemap`
+      );
+    }
   }
 };