A new component called KibanaCard.js has been introduced to render Kibana DSS based on the configuration provided in dashboardConfig. This document outlines the steps to integrate the Kibana Dashboard with the DSS module.
Configuration
In the dashboardConfig, a new configuration has been added to render Kibana DSS. The configuration includes details that specify which Kibana dashboards to render.
{
"row": 1,
"name": "DSS_KIBANA_MAPS", // name of the config
"vizArray": [
{
"id": 401,
"name": "DSS_HEALTH_KIBANA_SCREEN",
"label": "DSS_HEALTH_KIBANA_SCREEN",
"vizType": "chart", // vizType set to chart
"noUnit": true,
"isCollapsible": false,
"charts": [
{
"id": "checklistCompletionRateOfDistrictSupervisor",
"name": "DSS_HEALTH_SUPERVISION_DISTRICT_SUPERVISORS_CHECKLISTS_COMPLETION_RATE",
"code": "",
"moduleName": "smc", // moduleName is needed to fetch Kibana url
"pageName": "national", // moduleName is needed to fetch Kibana url
"chartType": "kibanaComponent", // chart type set to kibanaComponent to render Kibana DSS
"filter": "",
"headers": []
}
]
}
]
}
So here moduleName refers to the module name in uiConstants master and pageName refers to the iframe routes route information.
Rendering KibanaCard
Based on the configuration, we render the KibanaCard component, passing moduleName and pageName as props.
```
case "kibanaComponent":
return <KibanaCard moduleName={chart?.moduleName} pageName={chart?.pageName} filters={value}></KibanaCard>;
```
Internal Implementation
Within KibanaCard, we utilize the IFrameInterface component. This component receives the following props passed from KibanaCard.
Additionally, if a date range filter is set by the user, we update the Kibana URL to reflect this. The following logic is applied to construct the contextPath: