mdutoo
commented
7 years ago First, note that the core philosophy of OCCInterface is not to provide an advanced graphical view of OCCI Configuration, which is rather the idea behind the OCCIWare Studio, but a simple, barebone, lightweight, web developer-friendly way of seeing OCCI Resources in the web as they fundamentally are : JSON (or text, XML...). However, a form view such as requested here would allow its regular users (web cloud developers) to show OCCI resources to other people that aren't as familiar with JSON, such as their hierarchy or customers, or to do prettier demonstrations of OCCInterface (screenshot slides, webinars). In this light, a form view does not contrevene to OCCInterface's core philosophy, but answers another, complimentary need.
Nowadays, the OCCI JSON is displayed by OCCInterface not as a mere stringification of JSON, but by React components dedicated to displaying nicely JSON : reactifyJSON components. And this even though it is set as a regular JSON Object. These React components are assembled by iterateRec while introspecting said JSON, which is used through toolify() by CodeView's rendering : called at line 42 and included in the React view component tree at line 47.
Forms such as envisioned by Philippe can be added by building on this mechanism and on work already done in #14 (action param - generate JSON) :
- add a new global state variable "codeViewDisplayMode" that can be set to "form" rather than "json" through a dropdown or checkbox at the top of the UI similary to how backendURL can be set. This has to be done in redux, similarly to currentQueryPath, which for instance is [set in Navbar.js to the OCCI Query Interface] https://github.com/occiware/OCCInterface/blob/master/src/components/Navbar.js#L82) like this : navbar.props.dispatch(actions.setCurrentQueryPath('/-/')) . This means adding :
- to the actionIndex : a setCodeViewDisplayMode(mode)
- to the action reducers : a case 'SET_CODE_VIEW_DISPLAY_MODE'
- to the mapStateToProps in React components that use them, such as in CodeView.js line 70 : a codeViewDisplayMode string key.
- add an alternate method of rendering JSON in CodeView to the current one (generating reactifyJSON components), i.e. an if then else around CodeView.js' call to toolify line 42, that calls rather a new "formify" function when said codeViewDisplayMode variable is set to "form"
- write formifyJSON React components similar to reactifyJSON components, but for OCCI types (Resource, Link, Attributes...) rather than JSON types (Object, Array, Value...).
- assemble in a util function similar to said iterateRec() them by introspecting the JSON but also the OCCI metamodel BOTH at once
- use it in CodeView's rendering (in said formify()) to enrich similarly the React view component tree.
I don't know if this feature is already supported. When creating/retrieving/updating OCCI entities (resources and links), it could be cool to have forms with widgets for each attribute instead of writing/reading JSON data directly. As OCCI provides introspection capabilities (aka GET /-/), this should not be too difficult to automatically build these graphical forms.