Show state in correct format in the UI (#764)

* Show state in correct format in the UI
AzBuilder · Mar 5, 2024 · 3ddc4dd · 3ddc4dd
1 parent cf9889b
commit 3ddc4dd
Showing 1 changed file with 27 additions and 1 deletion.
diff --git a/ui/src/domain/Workspaces/States.jsx b/ui/src/domain/Workspaces/States.jsx
@@ -22,6 +22,7 @@ export const States = ({
 }) => {
   const [currentState, setCurrentState] = useState({});
   const [stateContent, setStateContent] = useState("");
+  const [rawStateContent, setRawStateContent] = useState("");
   const [activeTab, setactivetab] = useState("diagram");
   const [nodes, setNodes] = useState([]);
   const [edges, setEdges] = useState([]);
@@ -43,6 +44,7 @@ export const States = ({
   function handleEditorDidMount(editor, monaco) {
     editorRef.current = editor;
   }
+
   const showDrawer = (record) => {
     setOpen(true);
     setResource(record);
@@ -166,6 +168,15 @@ export const States = ({
         .then((resp) => {
           setStateContent(JSON.stringify(resp.data, null, "\t"));
           loadData(resp);
+
+          //GET RAW STATE BASICALLY JUST ADDING .raw.json
+          axiosInstance.get(state.output.replace(".json",".raw.json"))
+              .then((response) => {
+                console.log("Downloading raw state successful...")
+                setRawStateContent(JSON.stringify(response.data, null, "\t"));
+              }).catch((err) =>{
+            setStateContent(`{"error":"Failed to load raw state${err}"}`)
+          })
         })
         .catch((err) =>
           setStateContent(`{"error":"Failed to load state ${err}"}`)
@@ -190,6 +201,10 @@ export const States = ({
       key: "code",
       tab: "code",
     },
+    {
+      key: "raw",
+      tab: "raw",
+    },
   ];
 
   const onTabChange = (key) => {
@@ -264,6 +279,7 @@ export const States = ({
                 tabList={tabs}
                 activeTabKey={activeTab}
                 onTabChange={(key) => {
+                  console.log(key)
                   onTabChange(key);
                 }}
               >
@@ -283,6 +299,14 @@ export const States = ({
                       <Background />
                     </ReactFlow>
                   </div>
+                ) : activeTab === "raw" ? (
+                    <Editor
+                        height="60vh"
+                        options={{ readOnly: "true" }}
+                        onMount={handleEditorDidMount}
+                        defaultLanguage="json"
+                        defaultValue={rawStateContent}
+                    />
                 ) : (
                   <Editor
                     height="60vh"
@@ -291,7 +315,9 @@ export const States = ({
                     defaultLanguage="json"
                     defaultValue={stateContent}
                   />
-                )}
+                )
+
+                }
               </Card>
             </Col>
           </Row>