[backend/frontend] Add UI installation steppers

openbas-api/src/main/java/io/openbas/rest/executor/ExecutorApi.java

@@ -285,7 +285,7 @@ public Executor registerExecutor(
   @Operation(
       summary = "Retrieve OpenBAS Agent Installer Command",
       description =
-          "Generates the installation command for the OpenBAS agent for the specified platform and token.")
+          "Generates the installation command for the OpenBAS agent for the specified platform, installation mode and token.")
   @ApiResponses(
       value = {
         @ApiResponse(
@@ -294,7 +294,7 @@ public Executor registerExecutor(
         @ApiResponse(responseCode = "400", description = "Invalid platform specified."),
         @ApiResponse(responseCode = "404", description = "Token not found."),
       })
-  @GetMapping(value = "/api/agent/installer/openbas/{platform}/{token}")
+  @GetMapping(value = "/api/agent/installer/openbas/{platform}/{installation-mode}/{token}")
   public @ResponseBody ResponseEntity<String> getOpenBasAgentInstaller(
       @Parameter(
               description =
@@ -306,7 +306,9 @@ public Executor registerExecutor(
               description = "Unique token associated with the agent installation.",
               required = true)
           @PathVariable
-          String token)
+          String token,
+      @Parameter(description = "Installation Mode.", required = true) @PathVariable
+          String installationMode)
       throws IOException {
     platform = Optional.ofNullable(platform).map(String::toLowerCase).orElse("");
 
@@ -317,7 +319,8 @@ public Executor registerExecutor(
     if (resolvedToken.isEmpty()) {
       throw new UnsupportedOperationException("Invalid token");
     }
-    String installCommand = this.endpointService.generateInstallCommand(platform, token);
+    String installCommand =
+        this.endpointService.generateInstallCommand(platform, token, installationMode);
     return ResponseEntity.ok().contentType(MediaType.TEXT_PLAIN).body(installCommand);
   }
 }

openbas-api/src/main/java/io/openbas/service/EndpointService.java

@@ -315,8 +315,10 @@ public String getFileOrDownloadFromJfrog(String platform, String file, String ad
         .replace("${OPENBAS_WITH_PROXY}", String.valueOf(openBASConfig.isWithProxy()));
   }
 
-  public String generateInstallCommand(String platform, String token) throws IOException {
-    return getFileOrDownloadFromJfrog(platform, "openbas-agent-installer", token);
+  public String generateInstallCommand(String platform, String token, String installationMode)
+      throws IOException {
+    return getFileOrDownloadFromJfrog(
+        platform, "openbas-agent-installer-".concat(installationMode), token);
   }
 
   public String generateUpgradeCommand(String platform) throws IOException {

openbas-front/src/components/ExecutorBanner.tsx

@@ -0,0 +1,68 @@
+import { type FunctionComponent } from 'react';
+
+import calderaLogo from '../static/images/executors/logo_caldera.png';
+import crowdstrikeLogo from '../static/images/executors/logo_crowdstrike.png';
+import openBasLogo from '../static/images/executors/logo_openbas.png';
+import taniumLogo from '../static/images/executors/logo_tanium.png';
+import unknownDark from '../static/images/platforms/unknown-dark.png';
+
+interface ExecutorBannerProps {
+  executor: string;
+  label: string;
+  height?: number;
+}
+
+const executorBanners: Record<string, {
+  img: string;
+  backgroundColor: string;
+}> = {
+  openbas_agent: {
+    img: openBasLogo,
+    backgroundColor: '#001BDB',
+  },
+  openbas_crowdstrike: {
+    img: crowdstrikeLogo,
+    backgroundColor: '#E12E37',
+  },
+  openbas_tanium: {
+    img: taniumLogo,
+    backgroundColor: '#E03E41',
+  },
+  openbas_caldera: {
+    img: calderaLogo,
+    backgroundColor: '#8B1316',
+  },
+  Unknown: {
+    img: unknownDark,
+    backgroundColor: '#b6b7b7',
+  },
+};
+
+const renderExecutorBanner = (executor: string, label: string, height: number | undefined = 150) => {
+  const executorData = executorBanners[executor] || executorBanners.Unknown;
+  return (
+    <div
+      style={{
+        backgroundColor: executorData.backgroundColor,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: height,
+        overflow: 'hidden',
+        position: 'relative',
+        padding: 0,
+      }}
+    >
+      <img
+        src={executorData.img}
+        alt={label}
+        style={{ objectFit: 'cover' }}
+      />
+    </div>
+  );
+};
+const ExecutorBanner: FunctionComponent<ExecutorBannerProps> = ({ executor, label, height }) => {
+  return renderExecutorBanner(executor, label, height);
+};
+
+export default ExecutorBanner;