Added plan rendering

Author: kevinwang5658

src/commands/plan/index.ts

@@ -40,7 +40,8 @@ export default class Plan extends Command {
 
     const resolvedPath = path.resolve(flags.path ?? '.');
 
-    await PlanOrchestrator.run(resolvedPath);
+    const { plan } = await PlanOrchestrator.run(resolvedPath);
+    reporter.displayPlan(plan);
 
     this.exit(0);
   }

src/ui/components/plan-component.tsx src/ui/components/default-component.tsxsrc/ui/components/plan-component.tsx renamed to src/ui/components/default-component.tsx

@@ -4,21 +4,32 @@ import { EventEmitter } from 'node:events';
 import React, { useEffect, useState } from 'react';
 
 import { ProcessState, ProcessStatus } from '../reporters/default-reporter.js';
+import { PlanResponseData } from 'codify-schemas';
+import { PlanComponent } from './plan/plan.js';
+
+export function DefaultComponent(props: {
+  emitter: EventEmitter
+}) {
+  const { emitter } = props;
 
-export function PlanComponent({ eventTarget }: { eventTarget: EventEmitter }) {
   const [staticOutput, setStaticOutput] = useState([] as Array<string>);
   const [processState, setProcessState] = useState({
     process: [],
   } as ProcessState);
+  const [planState, setPlanState] = useState(null as PlanResponseData[] | null);
 
   useEffect(() => {
-    eventTarget.on('static_output', (newValue: any) => {
+    emitter.on('static_output', (newValue: any) => {
       setStaticOutput([...newValue]);
     });
 
-    eventTarget.on('process', (state: ProcessState) => {
+    emitter.on('process', (state: ProcessState) => {
       setProcessState(structuredClone(state));
     });
+
+    emitter.on('plan', (plan: PlanResponseData[]) => {
+      setPlanState(plan);
+    });
   }, []);
 
   return <Box flexDirection="column">
@@ -47,5 +58,12 @@ export function PlanComponent({ eventTarget }: { eventTarget: EventEmitter }) {
         </Box>
       ) ?? []
     }
+    {
+      planState
+        ? <Static items={[planState]}>{
+          (plan, idx) => <PlanComponent key={idx} plan={plan}/>
+        }</Static>
+        : <></>
+    }
   </Box>
 }

src/ui/components/plan/operation-symbol.tsx

@@ -0,0 +1,53 @@
+import { ParameterOperation, ResourceOperation } from 'codify-schemas';
+import { Box, Text } from 'ink';
+import React from 'react';
+
+export function ResourceOperationSymbol(props: {
+  resourceOperation: ResourceOperation
+}) {
+  switch (props.resourceOperation) {
+    case ResourceOperation.NOOP: {
+      return <Text></Text>
+    }
+
+    case ResourceOperation.CREATE: {
+      return <Text color="green">+</Text>
+    }
+
+    case ResourceOperation.DESTROY: {
+      return <Text color="red">-</Text>
+    }
+
+    case ResourceOperation.RECREATE: {
+      return <Box>
+        <Text color="red">-</Text><Text color="green">+</Text>
+      </Box>
+    }
+
+    case ResourceOperation.MODIFY: {
+      return <Text color="yellow">~</Text>
+    }
+  }
+}
+
+export function ParameterOperationSymbol(props: {
+  parameterOperation: ParameterOperation
+}) {
+  switch (props.parameterOperation) {
+    case ParameterOperation.NOOP: {
+      return <Text></Text>
+    }
+
+    case ParameterOperation.ADD: {
+      return <Text color="green">+</Text>
+    }
+
+    case ParameterOperation.REMOVE: {
+      return <Text color="red">-</Text>
+    }
+
+    case ParameterOperation.MODIFY: {
+      return <Text color="yellow">~</Text>
+    }
+  }
+}

src/ui/components/plan/plan.tsx

@@ -0,0 +1,50 @@
+import { OrderedList } from '@inkjs/ui';
+import { PlanResponseData } from 'codify-schemas';
+import { Box, Text } from 'ink';
+import React from 'react';
+
+import { ResourceText } from './resource-text.js';
+
+export function PlanComponent(props: {
+  plan: PlanResponseData[]
+}) {
+  // console.log(JSON.stringify(props.plan, null, 2));
+
+  return <Box flexDirection="column">
+    <Box borderStyle="round" borderColor="green">
+      <Text>Codify Plan</Text>
+    </Box>
+    <Text>The following actions will be performed: </Text>
+    <Text> </Text>
+    <Box marginLeft={1}>
+      <OrderedList>{
+        props.plan.map((p, idx) =>
+          <OrderedList.Item key={idx}>
+            <Box flexDirection="column" marginBottom={1}>
+              <ResourceText plan={p}/>
+              <Text>
+                <Text>Parameters: </Text>
+                <Text>{JSON.stringify(p.parameters, null, 2)}</Text>
+                {/* <Box flexDirection='column' marginLeft={2}>{ */}
+                {/*   p.parameters.map((parameter, idx2) => */}
+                {/*     <Box key={idx2}> */}
+                {/*       /!* <ParameterOperationSymbol parameterOperation={parameter.operation}/> *!/ */}
+                {/*       /!* <Text>{parameter.name}</Text> *!/ */}
+                {/*       /!* <Spacer/> *!/ */}
+                {/*       /!* <Text> *!/ */}
+                {/*       /!*   <Text>{String(parameter.previousValue)}</Text> *!/ */}
+                {/*       /!*   <Text>{' -> '}</Text> *!/ */}
+                {/*       /!*   <Text>{String(parameter.newValue)}</Text> *!/ */}
+                {/*       /!* </Text> *!/ */}
+                {/*       <Text>{JSON.stringify(parameter, null, 2)}</Text> */}
+                {/*     </Box> */}
+                {/*   ) */}
+                {/* }</Box> */}
+              </Text>
+            </Box>
+          </OrderedList.Item>
+        )
+      }</OrderedList>
+    </Box>
+  </Box>
+}

src/ui/components/plan/resource-text.tsx

@@ -0,0 +1,57 @@
+import { PlanResponseData, ResourceOperation } from 'codify-schemas';
+import { Box, Text } from 'ink';
+import React from 'react';
+
+import { ResourceOperationSymbol } from './operation-symbol.js';
+
+export function ResourceText(props: {
+  plan: PlanResponseData
+}) {
+  const { plan } = props;
+  const { operation, resourceName, resourceType } = plan;
+
+  const fullyQualifiedName = resourceType + (resourceName ? `.${resourceName}` : '');
+  let backgroundColor = '';
+  let operationName = '';
+
+  switch (operation) {
+    case ResourceOperation.NOOP: {
+      backgroundColor = '#D3D3D3';
+      operationName = 'not be modified'
+      break;
+    }
+
+    case ResourceOperation.CREATE: {
+      backgroundColor = 'green'
+      operationName = 'be created'
+      break;
+    }
+
+    case ResourceOperation.DESTROY: {
+      backgroundColor = 'red'
+      operationName = 'be destroyed'
+      break;
+    }
+
+    case ResourceOperation.MODIFY: {
+      backgroundColor = 'yellow'
+      operationName = 'be modified'
+      break;
+    }
+
+    case ResourceOperation.RECREATE: {
+      backgroundColor = 'yellow'
+      operationName = 'be re-created'
+      break;
+    }
+  }
+
+  return <Box>
+    <Text backgroundColor={backgroundColor}>
+      <Text bold>{fullyQualifiedName}</Text>
+      <Text> resource will {operationName}</Text>
+    </Text>
+    <Text> </Text>
+    <ResourceOperationSymbol resourceOperation={operation}/>
+  </Box>
+}

src/ui/reporters/default-reporter.tsx

@@ -1,9 +1,10 @@
+import { PlanResponseData } from 'codify-schemas';
 import { render } from 'ink';
 import { EventEmitter } from 'node:events';
 import React from 'react';
 
 import { ctx, Event } from '../../events/context.js';
-import { PlanComponent } from '../components/plan-component.js';
+import { DefaultComponent } from '../components/default-component.js';
 import { Reporter } from './reporter.js';
 
 export enum ProcessStatus {
@@ -38,14 +39,19 @@ export class DefaultReporter implements Reporter {
     ctx.on(Event.SUB_PROCESS_START, (name, processName) => this.onSubprocessStartEvent(name, processName));
     ctx.on(Event.SUB_PROCESS_FINISH, (name, processName) => this.onSubprocessFinishEvent(name, processName))
 
-    render(<PlanComponent eventTarget={this.renderEmitter}/>)
+    render(<DefaultComponent emitter={this.renderEmitter}/>)
 
   }
 
   async promptConfirmation(): Promise<boolean> {
     return true;
   }
 
+  displayPlan(plan: PlanResponseData[]): void {
+    this.renderEmitter.emit('process', []);
+    this.renderEmitter.emit('plan', plan);
+  }
+
   private onOutputEvent(...args: unknown[]) {
     this.staticOutput.push(...args)
     this.renderEmitter.emit('static_output', this.staticOutput);
@@ -58,6 +64,7 @@ export class DefaultReporter implements Reporter {
       subprocess: [],
     })
 
+    this.onOutputEvent(`${name} started`)
     this.renderEmitter.emit('process', this.processState);
   }
 
@@ -70,6 +77,7 @@ export class DefaultReporter implements Reporter {
 
     process.status = ProcessStatus.FINISHED;
 
+    this.onOutputEvent(`${name} finished successfully`)
     this.renderEmitter.emit('process', this.processState.process);
 
   }
@@ -85,6 +93,7 @@ export class DefaultReporter implements Reporter {
       status: ProcessStatus.IN_PROGRESS,
     })
 
+    this.onOutputEvent(`${name} started`)
     this.renderEmitter.emit('process', this.processState);
   }
 
@@ -102,7 +111,7 @@ export class DefaultReporter implements Reporter {
 
     subprocess.status = ProcessStatus.FINISHED;
 
-    this.onOutputEvent(`${name} finished processing`)
+    this.onOutputEvent(`${name} finished successfully`)
     this.renderEmitter.emit('process', this.processState);
   }
 

src/ui/reporters/plain-reporter.ts

@@ -1,3 +1,5 @@
+import { PlanResponseData } from 'codify-schemas';
+
 import { ctx, Event } from '../../events/context.js';
 import { Reporter } from './reporter.js';
 
@@ -15,4 +17,8 @@ export class PlainReporter implements Reporter {
     return true;
   }
 
+  displayPlan(plan: PlanResponseData[]): void {
+    console.log(JSON.stringify(plan));
+  }
+
 }

src/ui/reporters/reporter.ts

@@ -1,3 +1,7 @@
+import { PlanResponseData } from 'codify-schemas';
+
 export interface Reporter {
   promptConfirmation(): Promise<boolean>
+
+  displayPlan(plan: PlanResponseData[]): void
 }