Creating the UI
Anatomy of the UI
The Platform offers a UI framework called dashui, empowering developers to create custom, configurable visualizations and user experiences for their solutions on the platform.
When delving into user experience development, dashui offers developers two distinct (yet complementary) methods:
- A context-driven approach tailors the user experience for a specific persona, utilizing the platform’s cross-domain correlation capabilities to deliver insights and visualizations spanning various domains within a given context.
- A free-form, dashboard-style approach enables developers to amalgamate information from a single domain or multiple domains without a specific focus.
While the Cisco Observability Platform (COP) user experience was entirely constructed using the context-driven approach, with the expanding array of solutions on the Platform, developers are increasingly capitalizing on both approaches. Here we will focus on the context-driven approach that works within the parameters of the current COP dashui framework.
When creating the UI for your solution, working within the parameters of the current COP dashui framework, you have specific sections or panels within the screen real estate that you have control over and the ability to populate that section or panel with UI contents specific to your solution. This is also true if your solution is extending one or more existing solutions that adhere to the context-driven COP dashui framework (not covered in this guide).
Observe Solution Home
The first panel you can configure in the UI (seen in the image below) is the ecpHome (# 5) that shows the summary of the main entities in your solution on the observe landing page. We’ll dive into more detail soon on how the entityPresentation works alongside the ecpHome.
#5 UI json files reference:
dashui:ecpHome
- /fsoc_projects/my_tenant/ugottaride/objects/dashui/templatePropsExtensions/ecpHome.json
dashui:entityPresentation
- /fsoc_projects/my_tenant/ugottaride/objects/dashui/entityPresentations/entityPresentations.json
Entity List
Entity Details
Next Steps
We’ll create the UI template for the ecpHome - the solution view on the observability home page.