feat: add docker requirement and parser option

Author: MarcScheib

src/app/features/requirements.ts

@@ -7,23 +7,43 @@ import {
 import { createGlobalState } from './base-feature-facade';
 
 const requirements = [
-  'node -v',
-  'npm -v',
-  'mvn --version',
-  'java -version',
-  'git --version',
+  { cmd: 'node -v' },
+  { cmd: 'npm -v' },
+  { cmd: 'mvn --version' },
+  { cmd: 'java -version' },
+  {
+    cmd: 'git --version',
+    parser: (output: string) => output.trim().split(' ').reverse()[0],
+  },
+  {
+    cmd: 'docker --version',
+  },
+  {
+    cmd: 'docker compose version',
+  },
 ];
 const execPromise = promisify(exec);
 
+function transformMessage(
+  stdout: string,
+  stderr: string,
+  parser?: (output: string) => string
+) {
+  if (stdout) {
+    return parser ? parser(stdout) : stdout;
+  }
+  return stderr;
+}
+
 export default class RequirementsFacade implements RequirementsResource {
   async getRequirements(): Promise<Requirement[]> {
     return Promise.all(
-      requirements.map(requirement =>
-        execPromise(requirement).then(({ stdout, stderr }) => ({
-          name: requirement,
-          cmd: requirement,
+      requirements.map(({ cmd, parser }) =>
+        execPromise(cmd).then(({ stdout, stderr }) => ({
+          name: cmd,
+          cmd: cmd,
           state: stdout ? ('ok' as const) : ('error' as const),
-          message: stdout || stderr,
+          message: transformMessage(stdout, stderr, parser),
         }))
       )
     );

src/ui/modules/requirements/requirements.tsx

@@ -2,15 +2,16 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import React, { useState } from 'react';
+import { Requirement } from '../../../shared/types/requirements';
 import { RequirementsResourceImpl } from './requirements-service';
 
 export default function Requirements() {
   const getRequirements = async () => {
     const requirements = await new RequirementsResourceImpl().getRequirements();
-    setRequirements(requirements.map(requirement => requirement.message));
+    setRequirements(requirements);
   };
 
-  const [requirements, setRequirements] = useState<string[]>([]);
+  const [requirements, setRequirements] = useState<Requirement[]>([]);
 
   return (
     <React.Fragment>
@@ -29,8 +30,10 @@ export default function Requirements() {
         </Button>
       </Box>
       <ul>
-        {requirements.map((requirement, index) => (
-          <li key={index}>{requirement}</li>
+        {requirements.map(({ message, name }, index) => (
+          <li key={index}>
+            {name}: {message}
+          </li>
         ))}
       </ul>
     </React.Fragment>