prettified JSON in instance details

scale-tone · Feb 6, 2020 · 5a938c3 · 5a938c3
1 parent 5b9874d
commit 5a938c3
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 25 deletions.
diff --git a/durablefunctionsmonitor.dotnetbackend/wwwroot/index.html b/durablefunctionsmonitor.dotnetbackend/wwwroot/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="manifest" href="/api/monitor/manifest.json"><link rel="shortcut icon" href="/api/monitor/favicon.png"><title>Durable Functions Monitor</title><link href="/api/monitor/static/css/2.c6250e3a.chunk.css" rel="stylesheet"><link href="/api/monitor/static/css/main.8d90dfff.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><script>var OrchestrationIdFromVsCode=""</script><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],i=0,a=[];i<n.length;i++)t=n[i],Object.prototype.hasOwnProperty.call(c,t)&&c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),f()}function f(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==c[u]&&(n=!1)}n&&(p.splice(r--,1),e=i(i.s=t[0]))}return e}var t={},c={1:0},p=[];function i(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=l,i.c=t,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(r,e){if(1&e&&(r=i(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)i.d(t,n,function(e){return r[e]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/api/monitor/";var r=this["webpackJsonpdurablefunctionsmonitor.react"]=this["webpackJsonpdurablefunctionsmonitor.react"]||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;f()}([])</script><script src="/api/monitor/static/js/2.022eef16.chunk.js"></script><script src="/api/monitor/static/js/main.a0ea1d29.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="manifest" href="/api/monitor/manifest.json"><link rel="shortcut icon" href="/api/monitor/favicon.png"><title>Durable Functions Monitor</title><link href="/api/monitor/static/css/2.c6250e3a.chunk.css" rel="stylesheet"><link href="/api/monitor/static/css/main.8d90dfff.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><script>var OrchestrationIdFromVsCode=""</script><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],i=0,a=[];i<n.length;i++)t=n[i],Object.prototype.hasOwnProperty.call(c,t)&&c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),f()}function f(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==c[u]&&(n=!1)}n&&(p.splice(r--,1),e=i(i.s=t[0]))}return e}var t={},c={1:0},p=[];function i(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=l,i.c=t,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(r,e){if(1&e&&(r=i(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)i.d(t,n,function(e){return r[e]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/api/monitor/";var r=this["webpackJsonpdurablefunctionsmonitor.react"]=this["webpackJsonpdurablefunctionsmonitor.react"]||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;f()}([])</script><script src="/api/monitor/static/js/2.022eef16.chunk.js"></script><script src="/api/monitor/static/js/main.344f11ea.chunk.js"></script></body></html>
diff --git a/durablefunctionsmonitor.dotnetbackend/wwwroot/service-worker.js b/durablefunctionsmonitor.dotnetbackend/wwwroot/service-worker.js
@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/api/monitor/precache-manifest.6d3c04e65869ef9f242f8ee3b831204e.js"
+  "/api/monitor/precache-manifest.f4bb24759cb1e86c9674e7b21f91349d.js"
 );
 
 self.addEventListener('message', (event) => {

diff --git a/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.344f11ea.chunk.js b/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.344f11ea.chunk.js
diff --git a/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.344f11ea.chunk.js.map b/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.344f11ea.chunk.js.map
diff --git a/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.a0ea1d29.chunk.js b/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.a0ea1d29.chunk.js
diff --git a/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.a0ea1d29.chunk.js.map b/durablefunctionsmonitor.dotnetbackend/wwwroot/static/js/main.a0ea1d29.chunk.js.map
diff --git a/durablefunctionsmonitor.react/src/components/DurableEntityFields.tsx b/durablefunctionsmonitor.react/src/components/DurableEntityFields.tsx
@@ -78,27 +78,27 @@ export class DurableEntityFields extends React.Component<{ details: DurableOrche
                 <Grid item xs={12} zeroMinWidth className="grid-item">
                     <TextField
                         label="input"
-                        value={JSON.stringify(details.input)}
+                        value={JSON.stringify(details.input, null, 3)}
                         margin="normal"
                         InputProps={{ readOnly: true }}
                         InputLabelProps={{ shrink: true }}
                         variant="outlined"
                         fullWidth
                         multiline
-                        rowsMax={5}
+                        rowsMax={10}
                     />
                 </Grid>
                 <Grid item xs={12} zeroMinWidth className="grid-item">
                     <TextField
                         label="customStatus"
-                        value={JSON.stringify(details.customStatus)}
+                        value={JSON.stringify(details.customStatus, null, 3)}
                         margin="normal"
                         InputProps={{ readOnly: true }}
                         InputLabelProps={{ shrink: true }}
                         variant="outlined"
                         fullWidth
                         multiline
-                        rowsMax={5}
+                        rowsMax={10}
                     />
                 </Grid>
             </Grid>

diff --git a/durablefunctionsmonitor.react/src/components/MainMenu.tsx b/durablefunctionsmonitor.react/src/components/MainMenu.tsx
@@ -64,7 +64,9 @@ export class MainMenu extends React.Component<{ state: MainMenuState }> {
                             margin="dense"
                             label="Hub Name"
                             fullWidth
-                            disabled={state.inProgress || state.isReadonly}
+                            disabled={state.inProgress }
+                            InputProps={{ readOnly: state.isReadonly }}
+                            InputLabelProps={{ shrink: true }}
                             value={state.hubName}
                             onChange={(evt) => state.hubName = evt.target.value as string}
                         />
@@ -74,8 +76,9 @@ export class MainMenu extends React.Component<{ state: MainMenuState }> {
                             margin="dense"
                             label="Azure Storage Connection String"
                             fullWidth
+                            disabled={state.inProgress }
+                            InputProps={{ readOnly: state.isReadonly }}
                             InputLabelProps={{ shrink: true }}
-                            disabled={state.inProgress || state.isReadonly}
                             value={state.connectionString}
                             onChange={(evt) => state.connectionString = evt.target.value as string}
                         />
@@ -87,13 +90,17 @@ export class MainMenu extends React.Component<{ state: MainMenuState }> {
                         <Button onClick={() => state.connectionParamsDialogOpen = false} color="primary">
                             Cancel
                         </Button>
-                        <Button
-                            onClick={() => state.saveConnectionParams()}
-                            disabled={!state.isDirty || state.isReadonly || !state.hubName || !state.connectionString || state.inProgress}
-                            color="secondary"
-                        >
-                            Save
-                        </Button>
+
+                        {(!state.isReadonly) && (
+                            <Button
+                                onClick={() => state.saveConnectionParams()}
+                                disabled={!state.isDirty || !state.hubName || !state.connectionString || state.inProgress}
+                                color="secondary"
+                            >
+                                Save
+                            </Button>
+                        )}
+
                     </DialogActions>
                 </Dialog>
             </div>

diff --git a/durablefunctionsmonitor.react/src/components/OrchestrationFields.tsx b/durablefunctionsmonitor.react/src/components/OrchestrationFields.tsx
@@ -75,27 +75,27 @@ export class OrchestrationFields extends React.Component<{ details: DurableOrche
                 <Grid item xs={12} zeroMinWidth className="grid-item">
                     <TextField
                         label="input"
-                        value={JSON.stringify(details.input)}
+                        value={JSON.stringify(details.input, null, 3)}
                         margin="normal"
                         InputProps={{ readOnly: true }}
                         InputLabelProps={{ shrink: true }}
                         variant="outlined"
                         fullWidth
                         multiline
-                        rowsMax={5}
+                        rowsMax={8}
                     />
                 </Grid>
                 <Grid item xs={12} zeroMinWidth className="grid-item">
                     <TextField
                         label="output"
-                        value={JSON.stringify(details.output)}
+                        value={JSON.stringify(details.output, null, 3)}
                         margin="normal"
                         InputProps={{ readOnly: true }}
                         InputLabelProps={{ shrink: true }}
                         variant="outlined"
                         fullWidth
                         multiline
-                        rowsMax={5}
+                        rowsMax={8}
                     />
                 </Grid>
             </Grid>
@@ -128,9 +128,7 @@ export class OrchestrationFields extends React.Component<{ details: DurableOrche
                 <TableHead>
                     <TableRow>
                         {HistoryEventFields.map(col => {
-                            return (
-                                <TableCell key={col}>{col}</TableCell>
-                            );
+                            return <TableCell key={col}>{col}</TableCell>;
                         })}
                     </TableRow>
                 </TableHead>