search

joyent / conch-ui

Web UI for Conch (https://github.com/joyent/conch-api)
2 stars 5 forks source link

nicer JSON viewer/editor #264

Open karenetheridge opened 3 years ago

karenetheridge commented 3 years ago

There are a few places today in the system where we view and/or edit JSON documents (device reports, the 'specification' field of hardware products), and there will be more to come with the move to using JSON Schemas for validations. Pretty-printing the document in the UI (whitespace formatting) helps readability, but it's still quite cumbersome to view large documents. Also, editing a snippet of a JSON document is awkward (e.g. no syntax checking or automatic indenting) without copying the entire thing out to a JSON-aware editor and then copying it back.

Firefox has a nice JSON viewer built right in -- see screenshot:

Screen Shot 2020-09-28 at 1 51 07 PM

..it allows expanding/collapsing nodes at each level for easy navigation to a position deep in the document, as well as a "raw" mode for showing the document as-in. I wonder if there is a drop-in component available to do this that we can make use of, as well as something to enhance the editing of documents in-place?

It would also be really nice if there was a way to tie into JSON Schema validation, as all of our JSON structures in conch have schemas to validate them, and there are APIs for fetching these schemas. (see https://json-schema.org/implementations.html for options - there are several in javascript. We will be moving to the draft 2019-09 specification very soon which limits things a bit, but I know there are still multiple options available across several languages.)

karenetheridge commented 3 years ago

Note: we'll need this for the validation rewrite, where all validations will be expressed as JSON Schemas and there should be a GUI for DCOps to view JSON Schemas on the fly and also jump from the paths provided in failing validation results to the schema being referenced by the error.

karenetheridge commented 3 years ago

related to https://github.com/joyent/conch-ui/issues/293 -- the hardware_product specification field is one of the main places where JSON editing will be needed in the UI (the other being the JSON Schemas themselves to be used for hardware validations).