Merge pull request #66 from wttech/spa-settings

SPA settings

Author: krystian-panek-vmltech

core/src/main/java/com/wttech/aem/acm/core/gui/SpaSettings.java

@@ -0,0 +1,47 @@
+package com.wttech.aem.acm.core.gui;
+
+import java.io.Serializable;
+import org.osgi.service.component.annotations.Activate;
+import org.osgi.service.component.annotations.Component;
+import org.osgi.service.component.annotations.Modified;
+import org.osgi.service.metatype.annotations.AttributeDefinition;
+import org.osgi.service.metatype.annotations.Designate;
+import org.osgi.service.metatype.annotations.ObjectClassDefinition;
+
+@Component(service = SpaSettings.class, immediate = true)
+@Designate(ocd = SpaSettings.Config.class)
+public class SpaSettings implements Serializable {
+
+    private long appStateInterval;
+
+    private long executionPollInterval;
+
+    @Activate
+    @Modified
+    protected void activate(Config config) {
+        this.appStateInterval = config.appStateInterval();
+        this.executionPollInterval = config.executionPollInterval();
+    }
+
+    public long getAppStateInterval() {
+        return appStateInterval;
+    }
+
+    public long getExecutionPollInterval() {
+        return executionPollInterval;
+    }
+
+    @ObjectClassDefinition(name = "AEM Content Manager - SPA Settings")
+    public @interface Config {
+
+        @AttributeDefinition(
+                name = "Application State Interval",
+                description = "Interval in milliseconds to check application state.")
+        long appStateInterval() default 3000;
+
+        @AttributeDefinition(
+                name = "Execution Poll Interval",
+                description = "Interval in milliseconds to poll execution status.")
+        long executionPollInterval() default 1000;
+    }
+}

core/src/main/java/com/wttech/aem/acm/core/servlet/StateServlet.java

@@ -6,6 +6,7 @@
 
 import com.wttech.aem.acm.core.code.ExecutionQueue;
 import com.wttech.aem.acm.core.code.ExecutionSummary;
+import com.wttech.aem.acm.core.gui.SpaSettings;
 import com.wttech.aem.acm.core.instance.HealthChecker;
 import com.wttech.aem.acm.core.instance.HealthStatus;
 import com.wttech.aem.acm.core.osgi.InstanceInfo;
@@ -45,13 +46,16 @@ public class StateServlet extends SlingAllMethodsServlet {
     @Reference
     private HealthChecker healthChecker;
 
+    @Reference
+    private SpaSettings spaSettings;
+
     @Override
     protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
         try {
             HealthStatus healthStatus = healthChecker.checkStatus();
             List<ExecutionSummary> queuedExecutions =
                     executionQueue.findAllSummaries().collect(Collectors.toList());
-            State state = new State(healthStatus, instanceInfo.getInstanceSettings(), queuedExecutions);
+            State state = new State(spaSettings, healthStatus, instanceInfo.getInstanceSettings(), queuedExecutions);
 
             respondJson(response, ok("State read successfully", state));
         } catch (Exception e) {

core/src/main/java/com/wttech/aem/acm/core/state/State.java

@@ -1,6 +1,7 @@
 package com.wttech.aem.acm.core.state;
 
 import com.wttech.aem.acm.core.code.ExecutionSummary;
+import com.wttech.aem.acm.core.gui.SpaSettings;
 import com.wttech.aem.acm.core.instance.HealthStatus;
 import com.wttech.aem.acm.core.instance.InstanceSettings;
 import java.io.Serializable;
@@ -14,8 +15,14 @@ public class State implements Serializable {
 
     private final List<ExecutionSummary> queuedExecutions;
 
+    private final SpaSettings spaSettings;
+
     public State(
-            HealthStatus healthStatus, InstanceSettings instanceSettings, List<ExecutionSummary> queuedExecutions) {
+            SpaSettings spaSettings,
+            HealthStatus healthStatus,
+            InstanceSettings instanceSettings,
+            List<ExecutionSummary> queuedExecutions) {
+        this.spaSettings = spaSettings;
         this.healthStatus = healthStatus;
         this.instanceSettings = instanceSettings;
         this.queuedExecutions = queuedExecutions;
@@ -32,4 +39,8 @@ public InstanceSettings getInstanceSettings() {
     public List<ExecutionSummary> getQueuedExecutions() {
         return queuedExecutions;
     }
+
+    public SpaSettings getSpaSettings() {
+        return spaSettings;
+    }
 }

ui.frontend/src/App.tsx

@@ -9,12 +9,14 @@ import Header from './components/Header';
 import router from './router';
 import { apiRequest } from './utils/api';
 import { InstanceRole, InstanceType, State } from './utils/api.types';
-
-const AppStateFetchTimeout = 2500;
-const AppStateFetchInterval = 3000;
+import { intervalToTimeout } from './utils/spectrum.ts';
 
 function App() {
   const [state, setState] = useState<State>({
+    spaSettings: {
+      appStateInterval: 3000,
+      executionPollInterval: 1000,
+    },
     healthStatus: {
       healthy: true,
       issues: [],
@@ -42,7 +44,7 @@ function App() {
           operation: 'Fetch application state',
           url: '/apps/acm/api/state.json',
           method: 'get',
-          timeout: AppStateFetchTimeout,
+          timeout: intervalToTimeout(state.spaSettings.appStateInterval),
           quiet: true,
         });
         setState(response.data.data);
@@ -54,9 +56,9 @@ function App() {
     };
 
     fetchState();
-    const intervalId = setInterval(fetchState, AppStateFetchInterval);
+    const intervalId = setInterval(fetchState, state.spaSettings.appStateInterval);
     return () => clearInterval(intervalId);
-  }, []);
+  }, [state.spaSettings.appStateInterval]);
 
   return (
     <Provider

ui.frontend/src/components/ExecutionAbortButton.tsx

@@ -6,13 +6,15 @@ import { pollExecutionPending } from '../hooks/execution';
 import { apiRequest } from '../utils/api';
 import { Execution, ExecutionStatus, isExecutionPending, QueueOutput } from '../utils/api.types';
 import { ToastTimeoutQuick } from '../utils/spectrum.ts';
+import {useAppState} from "../hooks/app.ts";
 
 interface ExecutionAbortButtonProps {
   execution: Execution | null;
   onComplete: (execution: Execution | null) => void;
 }
 
 const ExecutionAbortButton: React.FC<ExecutionAbortButtonProps> = ({ execution, onComplete }) => {
+  const appState = useAppState();
   const [isAborting, setIsAborting] = useState(false);
 
   const onAbort = async () => {
@@ -28,7 +30,7 @@ const ExecutionAbortButton: React.FC<ExecutionAbortButtonProps> = ({ execution,
         method: 'delete',
       });
 
-      const queuedExecution = await pollExecutionPending(execution.id);
+      const queuedExecution = await pollExecutionPending(execution.id, appState.spaSettings.executionPollInterval);
       if (queuedExecution?.status === ExecutionStatus.ABORTED) {
         ToastQueue.positive('Code execution aborted successfully!', {
           timeout: ToastTimeoutQuick,

ui.frontend/src/components/HealthChecker.tsx

@@ -5,14 +5,13 @@ import Close from '@spectrum-icons/workflow/Close';
 import Help from '@spectrum-icons/workflow/Help';
 import Replay from '@spectrum-icons/workflow/Replay';
 import Settings from '@spectrum-icons/workflow/Settings';
-import { useContext } from 'react';
-import { AppContext } from '../AppContext';
+import { useAppState } from '../hooks/app.ts';
 import { HealthIssueSeverity, InstanceType } from '../utils/api.types';
 import { isProduction } from '../utils/node.ts';
 
 const HealthChecker = () => {
-  const context = useContext(AppContext);
-  const healthIssues = context?.healthStatus.issues || [];
+  const appState = useAppState();
+  const healthIssues = appState.healthStatus.issues;
   const prefix = isProduction() ? '' : 'http://localhost:4502';
 
   const getSeverityVariant = (severity: HealthIssueSeverity): 'negative' | 'yellow' | 'neutral' => {
@@ -38,11 +37,7 @@ const HealthChecker = () => {
       <View>
         <Flex direction="row" justifyContent="space-between" alignItems="center">
           <Flex flex="1" alignItems="center">
-            <Button
-              variant="negative"
-              isDisabled={!context || context.instanceSettings.type === InstanceType.CLOUD_CONTAINER}
-              onPress={() => window.open(`${prefix}/system/console/configMgr/com.wttech.aem.acm.core.instance.HealthChecker`, '_blank')}
-            >
+            <Button variant="negative" isDisabled={appState.instanceSettings.type === InstanceType.CLOUD_CONTAINER} onPress={() => window.open(`${prefix}/system/console/configMgr/com.wttech.aem.acm.core.instance.HealthChecker`, '_blank')}>
               <Settings />
               <Text>Configure</Text>
             </Button>

ui.frontend/src/components/ScriptExecutor.tsx

@@ -10,9 +10,9 @@ import Code from '@spectrum-icons/workflow/Code';
 import Help from '@spectrum-icons/workflow/Help';
 import Replay from '@spectrum-icons/workflow/Replay';
 import Settings from '@spectrum-icons/workflow/Settings';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AppContext } from '../AppContext';
+import { useAppState } from '../hooks/app.ts';
 import { InstanceType } from '../utils/api.types.ts';
 import { isProduction } from '../utils/node';
 import DateExplained from './DateExplained';
@@ -24,8 +24,8 @@ const ScriptExecutor = () => {
   const prefix = isProduction() ? '' : 'http://localhost:4502';
   const navigate = useNavigate();
 
-  const context = useContext(AppContext);
-  const executions = context?.queuedExecutions || [];
+  const appState = useAppState();
+  const executions = appState.queuedExecutions;
 
   const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set<Key>());
   const selectedIds = (selectedKeys: Selection): string[] => {
@@ -51,7 +51,7 @@ const ScriptExecutor = () => {
             <ButtonGroup>
               <ExecutionsAbortButton selectedKeys={selectedIds(selectedKeys)} />
               <MenuTrigger>
-                <Button variant="negative" isDisabled={!context || context.instanceSettings.type === InstanceType.CLOUD_CONTAINER}>
+                <Button variant="negative" isDisabled={appState.instanceSettings.type === InstanceType.CLOUD_CONTAINER}>
                   <Settings />
                   <Text>Configure</Text>
                 </Button>

ui.frontend/src/components/ScriptList.tsx

@@ -2,9 +2,9 @@ import { Button, ButtonGroup, Cell, Column, Content, ContextualHelp, Flex, Headi
 import { Key, Selection } from '@react-types/shared';
 import NotFound from '@spectrum-icons/illustrations/NotFound';
 import Magnify from '@spectrum-icons/workflow/Magnify';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AppContext } from '../AppContext.tsx';
+import { useAppState } from '../hooks/app.ts';
 import { toastRequest } from '../utils/api';
 import { InstanceRole, isExecutionNegative, ScriptOutput, ScriptType } from '../utils/api.types';
 import DateExplained from './DateExplained.tsx';
@@ -20,7 +20,7 @@ type ScriptListProps = {
 };
 
 const ScriptList: React.FC<ScriptListProps> = ({ type }) => {
-  const appContext = useContext(AppContext);
+  const appState = useAppState();
   const navigate = useNavigate();
 
   const [scripts, setScripts] = useState<ScriptOutput | null>(null);
@@ -76,27 +76,25 @@ const ScriptList: React.FC<ScriptListProps> = ({ type }) => {
               {type === ScriptType.ENABLED || type === ScriptType.DISABLED ? (
                 <>
                   <ScriptToggleButton type={type} selectedKeys={selectedIds(selectedKeys)} onToggle={loadScripts} />
-                  {appContext && appContext.instanceSettings.role == InstanceRole.AUTHOR && <ScriptSynchronizeButton selectedKeys={selectedIds(selectedKeys)} onSync={loadScripts} />}
+                  {appState.instanceSettings.role == InstanceRole.AUTHOR && <ScriptSynchronizeButton selectedKeys={selectedIds(selectedKeys)} onSync={loadScripts} />}
                 </>
               ) : null}
             </ButtonGroup>
           </Flex>
           <Flex flex="1" justifyContent="center" alignItems="center">
-            {appContext && (
-              <StatusLight variant={appContext.healthStatus.healthy ? 'positive' : 'negative'}>
-                {appContext.healthStatus.healthy ? (
-                  <Text>Executor active</Text>
-                ) : (
-                  <>
-                    <Text>Executor paused</Text>
-                    <Text>&nbsp;&mdash;&nbsp;</Text>
-                    <Link isQuiet onPress={() => navigate('/maintenance?tab=health-checker')}>
-                      See health issues
-                    </Link>
-                  </>
-                )}
-              </StatusLight>
-            )}
+            <StatusLight variant={appState.healthStatus.healthy ? 'positive' : 'negative'}>
+              {appState.healthStatus.healthy ? (
+                <Text>Executor active</Text>
+              ) : (
+                <>
+                  <Text>Executor paused</Text>
+                  <Text>&nbsp;&mdash;&nbsp;</Text>
+                  <Link isQuiet onPress={() => navigate('/maintenance?tab=health-checker')}>
+                    See health issues
+                  </Link>
+                </>
+              )}
+            </StatusLight>
           </Flex>
           <Flex flex="1" justifyContent="end" alignItems="center">
             {type === ScriptType.MANUAL ? <ScriptsManualHelpButton /> : type === ScriptType.EXTENSION ? <ScriptsExtensionHelpButton /> : <ScriptsAutomaticHelpButton />}

ui.frontend/src/hooks/app.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { AppContext } from '../AppContext';
+import { State } from '../utils/api.types.ts';
+
+export function useAppState(): State {
+  const state = useContext(AppContext);
+  if (!state) {
+    throw new Error('Application state is not available!');
+  }
+  return state;
+}

ui.frontend/src/hooks/execution.ts

@@ -3,13 +3,12 @@ import { useState } from 'react';
 import { useInterval } from 'react-use';
 import { apiRequest } from '../utils/api';
 import { Execution, ExecutionStatus, isExecutionPending, QueueOutput } from '../utils/api.types';
-import { ToastTimeoutQuick } from '../utils/spectrum.ts';
+import { intervalToTimeout, ToastTimeoutQuick } from '../utils/spectrum';
+import { useAppState } from './app';
 import { useFormatter } from './formatter';
 
-const ExecutionPollInterval = 1000;
-const ExecutionPollTimeout = 900;
-
-export const useExecutionPolling = (executionId: string | undefined | null) => {
+export const useExecutionPolling = (executionId: string | undefined | null, pollInterval: number) => {
+  const appState = useAppState();
   const [execution, setExecution] = useState<Execution | null>(null);
   const [executing, setExecuting] = useState<boolean>(!!executionId);
   const [loading, setLoading] = useState<boolean>(true);
@@ -22,7 +21,7 @@ export const useExecutionPolling = (executionId: string | undefined | null) => {
         operation: 'Code execution state',
         url: `/apps/acm/api/queue-code.json?executionId=${executionId}`,
         method: 'get',
-        timeout: ExecutionPollTimeout,
+        timeout: intervalToTimeout(pollInterval),
       });
       const queuedExecution = response.data.data.executions.find((e: Execution) => e.id === executionId)!;
       setExecution(queuedExecution);
@@ -34,7 +33,7 @@ export const useExecutionPolling = (executionId: string | undefined | null) => {
         setExecuting(false);
         setWasPending(false);
 
-        const recentlyCompleted = formatter.isRecent(queuedExecution.endDate, 2 * ExecutionPollInterval);
+        const recentlyCompleted = formatter.isRecent(queuedExecution.endDate, 2 * pollInterval);
         if (recentlyCompleted || wasPending) {
           if (queuedExecution.status === ExecutionStatus.FAILED) {
             ToastQueue.negative('Code execution failed!', { timeout: ToastTimeoutQuick });
@@ -57,24 +56,24 @@ export const useExecutionPolling = (executionId: string | undefined | null) => {
         pollExecutionState(executionId);
       }
     },
-    executing && executionId ? ExecutionPollInterval : null,
+    executing && executionId ? appState.spaSettings.executionPollInterval : null,
   );
 
   return { execution, setExecution, executing, setExecuting, loading };
 };
 
-export const pollExecutionPending = async (executionId: string): Promise<Execution> => {
+export const pollExecutionPending = async (executionId: string, pollInterval: number): Promise<Execution> => {
   let queuedExecution: Execution | null = null;
 
   while (queuedExecution === null || isExecutionPending(queuedExecution.status)) {
     const response = await apiRequest<QueueOutput>({
       operation: 'Code execution state',
       url: `/apps/acm/api/queue-code.json?executionId=${executionId}`,
       method: 'get',
-      timeout: ExecutionPollTimeout,
+      timeout: intervalToTimeout(pollInterval),
     });
     queuedExecution = response.data.data.executions[0]!;
-    await new Promise((resolve) => setTimeout(resolve, ExecutionPollInterval));
+    await new Promise((resolve) => setTimeout(resolve, pollInterval));
   }
 
   return queuedExecution;