Composer service (HMS-5455)

src/AppCockpit.tsx

@@ -8,10 +8,18 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { HashRouter } from 'react-router-dom';
 
+import { NotReady } from './Components/Cockpit/NotReady';
 import { Router } from './Router';
 import { onPremStore as store } from './store';
+import { useGetComposerSocketStatus } from './Utilities/useComposerStatus';
 
 const Application = () => {
+  const { enabled, started } = useGetComposerSocketStatus();
+
+  if (!started || !enabled) {
+    return <NotReady enabled={enabled} />;
+  }
+
   return (
     <React.Fragment>
       <NotificationsPortal />

src/Components/Cockpit/NotReady.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Title,
+} from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+import cockpit from 'cockpit';
+
+export const NotReady = ({ enabled }: { enabled: boolean }) => {
+  return (
+    <EmptyState variant={EmptyStateVariant.xl}>
+      <EmptyStateIcon icon={CubesIcon} />
+      <Title headingLevel="h4" size="lg">
+        OSBuild Composer is not {enabled ? 'started' : 'enabled'}
+      </Title>
+      <EmptyStateBody />
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="primary"
+            onClick={(event) => {
+              event.preventDefault();
+              cockpit
+                .spawn(
+                  ['systemctl', 'enable', '--now', 'osbuild-composer.socket'],
+                  {
+                    superuser: 'require',
+                    err: 'message',
+                  }
+                )
+                .then(() => window.location.reload());
+            }}
+          >
+            Start socket
+          </Button>
+        </EmptyStateActions>
+        <EmptyStateActions>
+          <Button
+            variant="link"
+            onClick={(event) => {
+              event.preventDefault();
+              cockpit.jump(
+                '/system/services#/osbuild-composer.socket',
+                cockpit.transport.host
+              );
+            }}
+          >
+            More Info
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};

src/Utilities/useComposerStatus.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+import cockpit from 'cockpit';
+
+export const useGetComposerSocketStatus = () => {
+  const [enabled, setEnabled] = useState(false);
+  const [started, setStarted] = useState(false);
+
+  useEffect(() => {
+    const isEnabled = async () => {
+      try {
+        const result = await cockpit.spawn(
+          ['systemctl', 'is-enabled', 'osbuild-composer.socket'],
+          { superuser: 'try' }
+        );
+        setEnabled((result as string).trim() === 'enabled');
+      } catch {
+        // error code 1 means disabled
+        setEnabled(false);
+      }
+    };
+
+    const isStarted = async () => {
+      try {
+        const result = await cockpit.spawn(
+          ['systemctl', 'is-active', 'osbuild-composer.socket'],
+          { superuser: 'try' }
+        );
+        setStarted((result as string).trim() === 'active');
+      } catch {
+        // exit code 3 means not active
+        setStarted(false);
+      }
+    };
+
+    isEnabled();
+    isStarted();
+  }, []);
+
+  return {
+    enabled,
+    started,
+  };
+};