UI - Display the steps of resource operations (#3060)

* display the steps to the operation object in the UI

* update UI version

* update UI version

* add numbers to operation steps

* fix formatting

ui/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tre-ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": true,
   "dependencies": {
     "@azure/msal-browser": "^2.32.1",

ui/app/src/components/shared/ResourceOperationStepsList.tsx

@@ -0,0 +1,39 @@
+import { DefaultPalette, IStackItemStyles, Stack } from "@fluentui/react";
+import { OperationStep } from "../../models/operation";
+
+interface ResourceOperationStepsListProps {
+  header: String,
+  val?: OperationStep[]
+}
+
+export const ResourceOperationStepsList: React.FunctionComponent<ResourceOperationStepsListProps> = (props: ResourceOperationStepsListProps) => {
+
+  const stackItemStyles: IStackItemStyles = {
+    root: {
+      padding: '5px 0',
+      color: DefaultPalette.neutralSecondary
+    }
+  }
+
+  return (
+    <Stack wrap horizontal>
+      <Stack.Item styles={stackItemStyles} style={{ width: '20%' }}>
+        {props.header}
+      </Stack.Item>
+      <div style={{ width: '80%' }}>
+        {props.val?.map((step: OperationStep, i: number) => {
+          return (
+            <Stack.Item styles={stackItemStyles} key={i}>
+              <div >
+                {i + 1}{')'} {step.stepTitle}
+              </div>
+              <div style={{ color: DefaultPalette.neutralTertiary }}>
+                {step.message}
+              </div>
+            </Stack.Item>
+          )
+        })}
+      </div>
+    </Stack>
+  );
+}

ui/app/src/components/shared/ResourceOperationsList.tsx

@@ -12,7 +12,7 @@ import moment from "moment";
 import { APIError } from "../../models/exceptions";
 import { LoadingState } from "../../models/loadingState";
 import { ExceptionLayout } from "./ExceptionLayout";
-
+import { ResourceOperationStepsList } from "./ResourceOperationStepsList";
 
 interface ResourceOperationsListProps {
   resource: Resource
@@ -58,7 +58,7 @@ export const ResourceOperationsList: React.FunctionComponent<ResourceOperationsL
           {
             resourceOperations && resourceOperations.map((op: Operation, i: number) => {
               return (
-                <Stack wrap horizontal style={{borderBottom: '1px #999 solid', padding: '10px 0'}} key={i}>
+                <Stack wrap horizontal style={{ borderBottom: '1px #999 solid', padding: '10px 0' }} key={i}>
                   <Stack grow styles={stackStyles}>
                     <ResourceOperationListItem header={'Resource Id'} val={op.resourceId} />
                     <ResourceOperationListItem header={'Resource Path'} val={op.resourcePath} />
@@ -69,6 +69,7 @@ export const ResourceOperationsList: React.FunctionComponent<ResourceOperationsL
                     <ResourceOperationListItem header={'Created'} val={`${moment.unix(op.createdWhen).toLocaleString()} (${moment.unix(op.createdWhen).fromNow()})`} />
                     <ResourceOperationListItem header={'Updated'} val={`${moment.unix(op.updatedWhen).toLocaleString()} (${moment.unix(op.updatedWhen).fromNow()})`} />
                     <ResourceOperationListItem header={'User'} val={op.user.name} />
+                    <ResourceOperationStepsList header={'Steps'} val={op.steps} />
                   </Stack>
                 </Stack>
               )