Re-worked how the process to progress display translation works. Fixed bugs.

Author: kevinwang5658

src/events/context.ts

@@ -13,6 +13,19 @@ export enum Event {
   SUB_PROCESS_FINISH = 'sub_process_finish',
 }
 
+export enum ProcessName {
+  PLAN = 'plan',
+  APPLY = 'apply'
+}
+
+export enum SubProcessName {
+  PARSE = 'parse',
+  INITIALIZE_PLUGINS = 'initialize_plugins',
+  VALIDATE = 'validate',
+  GENERATE_PLAN = 'generate_plan',
+  APPLY_RESOURCE = 'apply_resource',
+}
+
 export const ctx = new class {
   emitter: EventEmitter;
 
@@ -55,12 +68,12 @@ export const ctx = new class {
     this.emitter.emit(Event.PROCESS_FINISH, name);
   }
 
-  subprocessStarted(name: string, processName: string) {
-    this.emitter.emit(Event.SUB_PROCESS_START, name, processName);
+  subprocessStarted(name: string) {
+    this.emitter.emit(Event.SUB_PROCESS_START, name);
   }
 
-  subprocessFinished(name: string, processName: string) {
-    this.emitter.emit(Event.SUB_PROCESS_FINISH, name, processName);
+  subprocessFinished(name: string) {
+    this.emitter.emit(Event.SUB_PROCESS_FINISH, name);
   }
 
   async subprocess<T>(name: string, run: () => Promise<T>): Promise<T> {

src/orchestrators/plan.ts

@@ -1,7 +1,7 @@
 import { PlanResponseData } from 'codify-schemas';
 
 import { Project } from '../entities/project.js';
-import { ctx } from '../events/context.js';
+import { ctx, ProcessName, SubProcessName } from '../events/context.js';
 import { Parser } from '../parser/index.js';
 import { PluginCollection } from '../plugins/plugin-collection.js';
 
@@ -11,47 +11,38 @@ interface PlanOchestratorResponse {
   project: Project;
 }
 
-export enum PlanStatus {
-  GENERATE_PLAN = 'generate_plan',
-  INITIALIZE_PLUGINS = 'initalize_plugins',
-  PARSE = 'parse',
-  PLAN = 'plan',
-  VALIDATE = 'validate',
-}
-
 export const PlanOrchestrator = {
   async run(path: string, destroyPlugins = true): Promise<PlanOchestratorResponse> {
-    ctx.processStarted(PlanStatus.PLAN)
+    ctx.processStarted(ProcessName.PLAN)
 
-    ctx.subprocessStarted(PlanStatus.PARSE, PlanStatus.PLAN);
+    ctx.subprocessStarted(SubProcessName.PARSE);
     const project = await Parser.parseProject(path);
-    ctx.subprocessFinished(PlanStatus.PARSE, PlanStatus.PLAN);
+    ctx.subprocessFinished(SubProcessName.PARSE);
 
-    ctx.subprocessStarted(PlanStatus.INITIALIZE_PLUGINS, PlanStatus.PLAN)
+    ctx.subprocessStarted(SubProcessName.INITIALIZE_PLUGINS)
     const pluginCollection = new PluginCollection();
     const dependencyMap = await pluginCollection.initialize(project);
-    ctx.subprocessFinished(PlanStatus.INITIALIZE_PLUGINS, PlanStatus.PLAN)
+    ctx.subprocessFinished(SubProcessName.INITIALIZE_PLUGINS)
 
-    ctx.subprocessStarted(PlanStatus.VALIDATE, PlanStatus.PLAN)
+    ctx.subprocessStarted(SubProcessName.VALIDATE)
     project.validateWithResourceMap(dependencyMap);
     project.resolveResourceDependencies(dependencyMap);
 
     const validationResults = await pluginCollection.validate(project);
     project.handlePluginResourceValidationResults(validationResults);
     project.calculateEvaluationOrder();
-    ctx.subprocessFinished(PlanStatus.VALIDATE, PlanStatus.PLAN)
+    ctx.subprocessFinished(SubProcessName.VALIDATE)
 
 
-    ctx.subprocessStarted(PlanStatus.GENERATE_PLAN, PlanStatus.PLAN)
+    ctx.subprocessStarted(SubProcessName.GENERATE_PLAN)
     const plan = await pluginCollection.getPlan(project);
-    ctx.subprocessFinished(PlanStatus.GENERATE_PLAN, PlanStatus.PLAN)
-
+    ctx.subprocessFinished(SubProcessName.GENERATE_PLAN)
 
     if (destroyPlugins) {
       await pluginCollection.destroy();
     }
 
-    ctx.processFinished(PlanStatus.PLAN)
+    ctx.processFinished(ProcessName.PLAN)
 
     return {
       plan,

src/ui/components/default-component.tsx

@@ -22,12 +22,6 @@ export function DefaultComponent(props: {
   useEffect(() => {
     emitter.on(RenderEvent.STATE_TRANSITION, (obj) => {
       switch (obj.nextState) {
-        case RenderState.GENERATING_PLAN: {
-          setProgressState(obj.progressState);
-          setState(obj.nextState);
-          break;
-        }
-
         case RenderState.DISPLAY_PLAN: {
           setPlan(obj.plan);
           setState(obj.nextState);
@@ -45,11 +39,11 @@ export function DefaultComponent(props: {
       }
     })
 
-    emitter.once(RenderEvent.LOG, (newValue: string) => {
+    emitter.on(RenderEvent.LOG, (newValue: string) => {
       setStaticOutput([...newValue]);
     });
 
-    emitter.on(RenderEvent.PROCESS_UPDATE, (state: ProgressState) => {
+    emitter.on(RenderEvent.PROGRESS_UPDATE, (state: ProgressState) => {
       setProgressState(structuredClone(state));
     });
   }, []);

src/ui/components/progress/progress-display.tsx

@@ -8,51 +8,47 @@ export enum ProgressStatus {
 }
 
 export interface ProgressState {
-  label: string,
+  name: string,
+  label: string;
   status: ProgressStatus;
-  subProgress: ProgressState[] | null,
+  subProgresses: Array<{
+    name: string,
+    label: string;
+    status: ProgressStatus;
+  }> | null;
 }
 
 export function ProgressDisplay(
   props: {
     progress: ProgressState,
   }
 ) {
-  const { label, status, subProgress } = props.progress;
+  const { label, status, subProgresses } = props.progress;
 
   return <Box flexDirection="column">
     {
       status === ProgressStatus.IN_PROGRESS
         ? <Spinner label={label}/>
         : <StatusMessage variant="success">{label}</StatusMessage>
     }
-    {
-      subProgress && <Box flexDirection="column" marginLeft={2}>
-        <SubProgressDisplay subProgresses={subProgress}/>
-      </Box>
-    }
+    <Box flexDirection="column" marginLeft={2}>
+      <SubProgressDisplay subProgresses={subProgresses}/>
+    </Box>
   </Box>
 }
 
 export function SubProgressDisplay(
   props: {
-    subProgresses: ProgressState[],
+    subProgresses: ProgressState['subProgresses'],
   }
 ) {
   const { subProgresses } = props;
 
   return <>{
-             subProgresses.map((s, idx) => <Box>
-               {
-                 s.status === ProgressStatus.IN_PROGRESS
-                   ? <Spinner key={idx} label={s.label}/>
-                   : <StatusMessage key={idx} variant="success">{s.label}</StatusMessage>
-               }
-               {
-                 s.subProgress && <Box flexDirection="column" marginLeft={2}>
-                   <SubProgressDisplay subProgresses={s.subProgress}/>
-                 </Box>
-               }
-             </Box>)
-           }</>
+    subProgresses && subProgresses.map((s, idx) =>
+      s.status === ProgressStatus.IN_PROGRESS
+        ? <Spinner key={idx} label={s.label}/>
+        : <StatusMessage key={idx} variant="success">{s.label}</StatusMessage>
+    )
+  }</>
 }

src/ui/reporters/default-reporter.tsx

@@ -3,24 +3,35 @@ import { render } from 'ink';
 import { EventEmitter } from 'node:events';
 import React from 'react';
 
-import { ctx, Event } from '../../events/context.js';
+import { ctx, Event, ProcessName, SubProcessName } from '../../events/context.js';
 import { DefaultComponent } from '../components/default-component.js';
+import { ProgressState, ProgressStatus } from '../components/progress/progress-display.js';
 import { DisplayPlanStateTransition, RenderEvent, RenderState, Reporter } from './reporter.js';
 
+const ProgressLabelMapping = {
+  [ProcessName.APPLY]: 'Applying plan...',
+  [ProcessName.PLAN]: 'Generating plan...',
+  [SubProcessName.APPLY_RESOURCE]: 'Applying resource',
+  [SubProcessName.GENERATE_PLAN]: 'Generating plan',
+  [SubProcessName.INITIALIZE_PLUGINS]: 'Initializing plugins',
+  [SubProcessName.PARSE]: 'Parsing configs',
+  [SubProcessName.VALIDATE]: 'Validating configs',
+}
+
 export class DefaultReporter implements Reporter {
 
   private renderEmitter = new EventEmitter();
-  private staticOutput = new Array<any>()
+  private staticOutput = new Array<string>()
+  private progressState: ProgressState | null = null
 
   constructor() {
     ctx.on(Event.OUTPUT, (...args) => this.renderLog(...args));
-    ctx.on(Event.PROCESS_START, (name) => this.onProcessEvent(name))
+    ctx.on(Event.PROCESS_START, (name) => this.onProcessStartEvent(name))
     ctx.on(Event.PROCESS_FINISH, (name) => this.onProcessFinishEvent(name))
-    ctx.on(Event.SUB_PROCESS_START, (name, processName) => this.onSubprocessStartEvent(name, processName));
-    ctx.on(Event.SUB_PROCESS_FINISH, (name, processName) => this.onSubprocessFinishEvent(name, processName))
+    ctx.on(Event.SUB_PROCESS_START, (name) => this.onSubprocessStartEvent(name));
+    ctx.on(Event.SUB_PROCESS_FINISH, (name) => this.onSubprocessFinishEvent(name))
 
     render(<DefaultComponent emitter={this.renderEmitter}/>)
-
   }
 
   async promptConfirmation(): Promise<boolean> {
@@ -44,67 +55,63 @@ export class DefaultReporter implements Reporter {
     } as DisplayPlanStateTransition);
   }
 
-  private renderLog(...args: unknown[]) {
+  private renderLog(...args: string[]) {
     this.staticOutput.push(...args);
     this.renderEmitter.emit(RenderEvent.LOG, this.staticOutput);
   }
 
-  private onProcessEvent(name: string): void {
-    this.processState.process.push({
+  private onProcessStartEvent(name: ProcessName): void {
+    const label = ProgressLabelMapping[name];
+
+    this.progressState = {
       name,
-      status: ProcessStatus.IN_PROGRESS,
-      subprocess: [],
-    })
+      label,
+      status: ProgressStatus.IN_PROGRESS,
+      subProgresses: [],
+    };
 
-    this.renderLog(`${name} started`)
-    this.renderEmitter.emit(RenderEvent.PROCESS_UPDATE, this.processState);
+    this.renderLog(`${label} started`)
+    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
-  private onProcessFinishEvent(name: string): void {
-    const process = this.processState.process
-      .find((process) => process.name === name);
-    if (!process) {
-      return;
-    }
+  private onProcessFinishEvent(name: ProcessName): void {
+    const label = ProgressLabelMapping[name];
 
-    process.status = ProcessStatus.FINISHED;
+    this.progressState!.status = ProgressStatus.FINISHED;
 
-    this.renderLog(`${name} finished successfully`)
-    this.renderEmitter.emit(RenderEvent.PROCESS_UPDATE, this.processState.process);
+    this.renderLog(`${label} finished successfully`)
+    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
 
   }
 
-  private onSubprocessStartEvent(name: string, processName: string): void {
-    const process = this.processState.process
-      .find((process) => process.name === processName);
-
-    if (!process) return;
+  private onSubprocessStartEvent(name: SubProcessName): void {
+    const label = ProgressLabelMapping[name];
 
-    process.subprocess.push({
+    this.progressState?.subProgresses?.push({
       name,
-      status: ProcessStatus.IN_PROGRESS,
-    })
+      label,
+      status: ProgressStatus.IN_PROGRESS,
+    });
 
-    this.renderLog(`${name} started`)
-    this.renderEmitter.emit(RenderEvent.PROCESS_UPDATE, this.processState);
+    this.renderLog(`${label} started`)
+    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
-  private onSubprocessFinishEvent(name: string, processName: string): void {
-    const process = this.processState.process
-      .find((process) => process.name === processName);
-    if (!process) {
-      return;
-    }
+  private onSubprocessFinishEvent(name: SubProcessName): void {
+    const label = ProgressLabelMapping[name];
+
+    const subProgress = this.progressState
+      ?.subProgresses
+      ?.find((p) => p.name === name);
 
-    const subprocess = process.subprocess.find((subprocess) => subprocess.name === name)
-    if (!subprocess) {
+    if (!subProgress) {
       return;
     }
 
-    subprocess.status = ProcessStatus.FINISHED;
+    subProgress.status = ProgressStatus.FINISHED;
 
-    this.renderLog(`${name} finished successfully`)
-    this.renderEmitter.emit(RenderEvent.PROCESS_UPDATE, this.processState);
+    this.renderLog(`${label} finished successfully`)
+    this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
 }

src/ui/reporters/reporter.ts

@@ -3,7 +3,7 @@ import { PlanResponseData } from 'codify-schemas';
 export enum RenderEvent {
   STATE_TRANSITION = 'stateTransition',
   LOG = 'log',
-  PROCESS_UPDATE = 'processUpdate',
+  PROGRESS_UPDATE = 'progressUpdate',
   PROMPT_RESULT = 'promptResult'
 }