As part of a previous job, I had to redesign the infrastructure monitoring dashboards, but shenanigans did not allow me to install different software on the dashboard server. So I wrote a React app that uses a custom renderer, which, instead of writing to DOM or to a HTML string, renders into the configuration format of the application.
We used a more traditional enterprise "serverful" architecture, so information about services and hosts was important for availability purposes.
I do not recall which was the application, but I could then export that compilation output via API to update the dashboard with new services.
I used a few layout components wrapping Facebook's Yoga layout library (a library to solve flexbox layouts), and put them into high-level components, such that the infrastructure guy could edit a plaintext file and run the compilation to update the dashboard.
And it would generate a chart grouped by host, with arrows connecting any depends-marked elements. It would also validate the resulting graphs, so you'd get feedback if you missed declaring a service you depended on, and so on.
Conclusion: was a fun "paid side project", but it's way too much effort. In retrospect using a proper XML (or even simpler markup) engine might have been a bit quicker and did the job just as well. Plus, the dependency on JS tooling at "runtime side" is very annoying.
As part of a previous job, I had to redesign the infrastructure monitoring dashboards, but shenanigans did not allow me to install different software on the dashboard server. So I wrote a React app that uses a custom renderer, which, instead of writing to DOM or to a HTML string, renders into the configuration format of the application.
We used a more traditional enterprise "serverful" architecture, so information about services and hosts was important for availability purposes.
I do not recall which was the application, but I could then export that compilation output via API to update the dashboard with new services.
I used a few layout components wrapping Facebook's Yoga layout library (a library to solve flexbox layouts), and put them into high-level components, such that the infrastructure guy could edit a plaintext file and run the compilation to update the dashboard.
It was basically glorified XML, of course:
And it would generate a chart grouped by host, with arrows connecting any depends-marked elements. It would also validate the resulting graphs, so you'd get feedback if you missed declaring a service you depended on, and so on.
Conclusion: was a fun "paid side project", but it's way too much effort. In retrospect using a proper XML (or even simpler markup) engine might have been a bit quicker and did the job just as well. Plus, the dependency on JS tooling at "runtime side" is very annoying.