refactor: Add getSpanStatusText method to SpanUtil for retrieving span status text

Dashboard/src/Components/Monitor/MonitorSteps/MonitorStep.tsx

@@ -33,6 +33,7 @@ import OneUptimeDate from "Common/Types/Date";
 import TelemetryServicesElement from "../../TelemetryService/TelemetryServiceElements";
 import { SpanStatus } from "Common/Models/AnalyticsModels/Span";
 import ObjectID from "Common/Types/ObjectID";
+import SpanUtil from "../../../Utils/SpanUtil";
 
 export interface ComponentProps {
   monitorStatusOptions: Array<MonitorStatus>;
@@ -408,7 +409,16 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
         key: "spanStatuses",
         title: "Span Status",
         description: "Status of the spans to monitor.",
-        fieldType: FieldType.ArrayOfText,
+        fieldType: FieldType.Element,
+        getElement: (item: TraceMonitorStepView): ReactElement => {
+          return (
+            <p>
+              {item.spanStatuses?.map((status: SpanStatus) => {
+                return SpanUtil.getSpanStatusText(status);
+              }).join(", ")}
+            </p>
+          );
+        },
         placeholder: "No span status entered. All statuses will be monitored.",
       });
     }

Dashboard/src/Utils/SpanUtil.ts

@@ -18,6 +18,18 @@ export interface DivisibilityFactor {
 }
 
 export default class SpanUtil {
+
+  public static getSpanStatusText(status: SpanStatus): string {
+    switch (status) {
+      case SpanStatus.Ok:
+        return "Ok";
+      case SpanStatus.Error:
+        return "Error";
+      default:
+        return "Unset";
+    }
+  }
+
   public static getSpanStatusDropdownOptions(): Array<DropdownOption> {
     const options: Array<DropdownOption> =
       DropdownUtil.getDropdownOptionsFromEnum(SpanStatus, true);