Release version 1.2.0 (#82)

Dockerfile

@@ -4,18 +4,25 @@ RUN curl -sL https://deb.nodesource.com/setup_16.x | bash -
 RUN apt-get install -y nodejs
 RUN npm install -g yarn
 WORKDIR /host
-ARG jfrogCliVersion=2.24.2
+ARG jfrogCliVersion=2.25.1
 ARG TARGETARCH
-RUN curl -XGET "https://releases.jfrog.io/artifactory/jfrog-cli/v2-jf/$jfrogCliVersion/jfrog-cli-mac-386/jf" -L -k -g > jf-darwin
+RUN if [ "$TARGETARCH" = "arm64" ]; then \
+    curl -XGET "https://releases.jfrog.io/artifactory/jfrog-cli/v2-jf/$jfrogCliVersion/jfrog-cli-mac-arm64/jf" -L -k -g > jf-darwin; \
+  else \
+    curl -XGET "https://releases.jfrog.io/artifactory/jfrog-cli/v2-jf/$jfrogCliVersion/jfrog-cli-mac-386/jf" -L -k -g > jf-darwin; \
+  fi
 RUN chmod +x jf-darwin
+
 RUN curl -XGET "https://releases.jfrog.io/artifactory/jfrog-cli/v2-jf/$jfrogCliVersion/jfrog-cli-windows-amd64/jf.exe" -L -k -g > jf-windows.exe
 RUN chmod +x jf-windows.exe
+
 RUN if [ "$TARGETARCH" = "arm64" ]; then \
     curl -XGET "https://releases.jfrog.io/artifactory/jfrog-cli/v2-jf/$jfrogCliVersion/jfrog-cli-linux-arm64/jf" -L -k -g > jf-linux; \
   else \
     curl -XGET "https://releases.jfrog.io/artifactory/jfrog-cli/v2-jf/$jfrogCliVersion/jfrog-cli-linux-amd64/jf" -L -k -g > jf-linux; \
   fi
 RUN chmod +x jf-linux
+
 WORKDIR /app/client
 # cache packages in layer
 COPY client/package.json /app/client/package.json
@@ -27,7 +34,7 @@ RUN --mount=type=cache,target=/usr/local/share/.cache/yarn-${TARGETARCH} yarn
 COPY client /app/client
 RUN --mount=type=cache,target=/usr/local/share/.cache/yarn-${TARGETARCH} yarn build
 
-FROM alpine:3.15
+FROM alpine:latest
 
 LABEL org.opencontainers.image.title="JFrog" \
     org.opencontainers.image.description="Scan your Docker images for vulnerabilities with JFrog Xray." \
@@ -38,7 +45,7 @@ LABEL org.opencontainers.image.title="JFrog" \
     com.docker.extension.detailed-description="<p>The JFrog Docker Desktop Extension scans any of your local Docker images for security vulnerabilities. The scanning process is based on JFrog Xray's vast vulnerabilities database, which is continuously updated with the latest vulnerabilities. In addition, a dedicated Security Research Team within JFrog, continuously improves the JFrog Xray's detection methods, ensuring that Xray continues to be a leading security solution in the market.</p><h3>Deep recursive scanning</h3><p>When an image is scanned with the JFrog Extension, Xray recursively scans every package included in the Docker Image. Drilling down to analyze even the smallest binary component that affects your software. For example, when analyzing a Docker image, if Xray finds that it contains a Java application it will also analyze all the .jar files used in this application.</p><h3>Fixed versions</h3><p>The JFrog Extension not only allows the detection of vulnerable packages, but also displays the software versions that include the fixes, allowing you to upgrade the vulnerable packages and resolve the issue.</p><h3>Easy and intuitive interface</h3><p>When clicking on a specific vulnerability, the view is expanded, to also include the issue description, online references about the issue, and a graph showing the location of the vulnerability within the image.</p><h3>It is all available for free</h3><p>Using the JFrog Extension doesn't require a paid JFrog subscription. You can use your own existing JFrog environment, or set up a new one in just two steps.</p><video src=\"https://user-images.githubusercontent.com/29822394/167414572-df6b2d4f-9c77-4d93-9c82-500057e2ffda.mov\" controls=\"controls\" muted=\"muted\" style=\"max-width:100%;\"></video>" \
     com.docker.extension.publisher-url="https://jfrog.com" \
     com.docker.extension.additional-urls="[{\"title\":\"Documentation\",\"url\":\"https://github.com/jfrog/jfrog-docker-desktop-extension#readme\"},{\"title\":\"Source code\",\"url\":\"https://github.com/jfrog/jfrog-docker-desktop-extension\"},{\"title\":\"JFrog Xray documentation\",\"url\":\"https://www.jfrog.com/confluence/display/JFROG/JFrog+Xray\"}]" \
-    com.docker.extension.changelog="<p>Exciting New Features🎉</p><ul><li>Download CSV button</li><li>Test connection button</li><li>Useful links and infortmation tooltips</li></ul><p>Improvements🌱</p><ul><li>Improved settings page</li><li>Update JFrog CLI version to 2.24.2</li></ul>"
+    com.docker.extension.changelog="<p>Exciting New Features🎉</p><ul><li>New image scan animation</li><li>JFrog CLI version 2.25.1</li><li>Improve error and warning messages</li><li>Improve Scan page UI</li><li>Improve Setting page UI</li><li>Adjust App for small/large screens</li><li>Added Mac ARM64 CLI Support</li>/ul><p>Bug Fixes 🛠</p><ul><li>Fix scanning policy watches/project issue</li></ul><p>Bug Fixes 🛠</p><ul><li>Fix scanning policy watches/project issue</li></ul>"
 COPY --from=client-builder /app/client/dist ui
 COPY resources/icon.svg .
 COPY metadata.json .
@@ -49,3 +56,9 @@ COPY --from=client-builder host/jf-windows.exe host/windows/jf.exe
 COPY --from=client-builder host/jf-linux host/linux/jf
 
 CMD [ "sleep", "infinity" ]
+
+
+
+
+
+

client/package.json

@@ -33,7 +33,7 @@
     "react-csv": "^2.2.2",
     "react-dom": "^17.0.0",
     "react-minimal-pie-chart": "^8.3.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.0",
     "typescript": "^4.4.0"
   },

client/public/index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <base href="%PUBLIC_URL%/" />
     <title>Jfrog Docker extension</title>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
     <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="manifest" href="manifest.json" />
   </head>
 
   <body>

client/public/manifest.json

@@ -8,8 +8,7 @@
       "type": "image/x-icon"
     }
   ],
-  "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#E5E5E5"
-}
+}

client/src/App.tsx

@@ -1,16 +1,18 @@
 import { CssBaseline, ThemeProvider } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { DockerMuiThemeProvider } from '@docker/docker-mui-theme';
-import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { AppContext } from './contexts';
 import { AppClient } from './clients';
-import { routes } from './config';
-import { Route as AppRoute } from './types';
 import { createTheme } from '@mui/material/styles';
 import { DefaultTheme } from '@mui/system';
 import deepmerge from 'deepmerge';
+import { LoginPage } from './pages/Login';
+import { ScanPage } from './pages/Scan';
+import { SetupEnvPage } from './pages/SetupEnv';
+import { SettingsPage } from './pages/Setting';
 
-function App() {
+export default function App() {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const appClient = new AppClient();
 
@@ -97,17 +99,16 @@ function App() {
         <ThemeProvider theme={(dockerTheme) => mergeDockerTheme(dockerTheme)}>
           <CssBaseline />
           <BrowserRouter>
-            <Switch>
-              {routes.map((route: AppRoute) => (
-                <Route key={route.key} path={route.path} component={route.component} exact />
-              ))}
-              <Redirect to="/login" />
-            </Switch>
+            <Routes>
+              <Route key={'scan'} path={'/scan'} element={<ScanPage />} />
+              <Route key={'login'} path={'/login'} element={<LoginPage />} />
+              <Route key={'setupenv'} path={'/setupenv'} element={<SetupEnvPage />} />
+              <Route key={'settings'} path={'/settings'} element={<SettingsPage />} />
+              <Route path="*" element={<LoginPage />} />
+            </Routes>
           </BrowserRouter>
         </ThemeProvider>
       </DockerMuiThemeProvider>
     </AppContext.Provider>
   );
 }
-
-export default App;

client/src/api/config.ts

@@ -272,7 +272,6 @@ export async function testJFrogPlatformConnection(cliConfig: ExtensionConfig | u
         cmd.push(`--access-token=${cliConfig.accessToken}`);
       }
     }
-    console.log('Running jfrog cli ping command', cmd);
     const pingResponse = await execOnHost('runcli.sh', 'runcli.bat', cmd);
     return pingResponse.stdout;
   } catch (e) {

client/src/api/image-scan.ts

@@ -17,7 +17,7 @@ export async function scanImage(imageTag: string): Promise<any> {
     scanResults = JSON.parse(scanResultsStr);
   } catch (e: any) {
     try {
-      scanResults = JSON.parse(e.stdout);
+      scanResults = JSON.parse(e);
       if (!scanResults.errors || scanResults.errors.length === 0) {
         throwErrorAsString(e);
       }
@@ -29,7 +29,7 @@ export async function scanImage(imageTag: string): Promise<any> {
   if (scanResults.errors && scanResults.errors.length > 0) {
     const errorMessage: string = scanResults.errors[0].errorMessage;
     // The error will always start with an uppercase letter.
-    throw errorMessage[0].toUpperCase() + errorMessage.substring(1);
+    throw 'Image scan failed. ' + errorMessage[0].toUpperCase() + errorMessage.substring(1);
   }
   return scanResults;
 }
@@ -38,9 +38,9 @@ async function getScanResultsStr(imageTag: string): Promise<string> {
   const config = await getConfig();
   const cmdArgs: string[] = ['docker', 'scan', imageTag, '--format', 'simple-json'];
   if (config.jfrogExtensionConfig.project != undefined) {
-    cmdArgs.push('--project', '"' + config.jfrogExtensionConfig.project + '"', '--fail=false');
+    cmdArgs.push('--project=' + config.jfrogExtensionConfig.project, '--fail=false');
   } else if (config.jfrogExtensionConfig.watches != undefined) {
-    cmdArgs.push('--watches', '"' + config.jfrogExtensionConfig.watches.join(',') + '"', '--fail=false');
+    cmdArgs.push('--watches=' + config.jfrogExtensionConfig.watches.join(','), '--fail=false');
   }
   let scanResultsStr = '';
   await new Promise<void>((resolve, reject) => {
@@ -62,8 +62,10 @@ async function getScanResultsStr(imageTag: string): Promise<string> {
           console.log('Image scan finished with exit code ' + exitCode);
           if (exitCode === 0) {
             resolve();
+          } else if (scanResultsStr != '') {
+            reject(scanResultsStr);
           } else {
-            reject('Image scan failed');
+            reject('Image Scan Failed.');
           }
         },
       },

client/src/api/utils.ts

@@ -29,15 +29,14 @@ export function getDockerDesktopClient() {
 }
 
 export function throwErrorAsString(e: any) {
-  console.error(e);
-  let stringErr: string;
-  if (e.stderr !== undefined) {
-    stringErr =
-      'An error occurred. You can find the logs in your home directory under ".jfrog-docker-desktop-extension/logs".';
-  } else {
-    stringErr = e.toString();
+  ddToast.warning('You can find the logs in your home directory under ".jfrog-docker-desktop-extension/logs".');
+  if (typeof e === 'string') {
+    throw e;
+  } else if (!e || e.stderr !== undefined) {
+    throw 'An error occurred';
   }
-  throw stringErr;
+
+  throw e.toString();
 }
 
 /**
@@ -88,10 +87,10 @@ export class Versions {
  * Gets the versions of JFrog CLI (that's used by the extension) and JFrog Xray.
  */
 export async function getVersions(): Promise<Versions> {
-  const xrayVersionPromise = execOnHost('runcli.sh', 'runcli.bat', ['xr', 'curl', 'api/v1/system/version']);
-  const jfrogCliVersionPromise = execOnHost('runcli.sh', 'runcli.bat', ['-v']);
   const versions: Versions = new Versions();
   try {
+    const xrayVersionPromise = execOnHost('runcli.sh', 'runcli.bat', ['xr', 'curl', 'api/v1/system/version']);
+    const jfrogCliVersionPromise = execOnHost('runcli.sh', 'runcli.bat', ['-v']);
     const results = await Promise.all([xrayVersionPromise, jfrogCliVersionPromise]);
     const xrayResult = JSON.parse(results[0].stdout);
     const jfrogCliResult = results[1].stdout.trim().split(' ');