Integrate Kibana Dashboard With DSS Module

Overview

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.

Steps

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 the uiConstants master, and pageName refers to the iframe routes route information.

Render 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 utilise the IFrameInterface component. This component receives the following props passed from KibanaCard.

const IFrameInterface = (props) => {
    const { stateCode, moduleName, pageName, filters } = props;
    ....
}

We can define the Kibana dashboard URL in the common-masters in uiCommonConstants.json config. Below are examples of the structure:

{
  "tenantId": "mz",
  "moduleName": "common-masters",
  "uiCommonConstants": [
    {
       "smc": {
        "iframe-routes": {
          "hcm": {
            "routePath": "/kibana/app/dashboards?auth_provider_hint=anonymous1#/view/b1ce8523-30cd-4966-aa8d-c3ac9561ebb2?embed=true&hide-filter-bar=true&_g=(time:(from:now-15m,to:now))&_a=()",
            "isOrigin": true,
            "title": "DASHBOARD_HCM",
            "overwriteTimeFilter": true,
            "Authorization":true,
            "base-kibana-path":"/kibana/"
          }
        }
      }
    }
  ]
}

This component calls MDMS-V2 common-masters to fetch the URL of the Kibana dashboard and render it using an iframe.

<IFrameInterface
        wrapperClassName="dss-kibana-iframe-wrapper"
        className="dss-kibana-iframe"
        moduleName={moduleName}
        pageName={pageName}
        stateCode={stateCode}
        filters={filters}
      />

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:

const contextPath = pageObject?.["routePath"] 
  ? (pageObject?.["overwriteTimeFilter"] && filters?.range?.startDate && filters?.range?.endDate 
    ? pageObject["routePath"].replace("from:now-15m", `from:'${new Date(filters?.range?.startDate).toISOString()}'`).replace("to:now", `to:'${new Date(filters?.range?.endDate).toISOString()}'`)
    : pageObject["routePath"]) 
  : "";

File Path

KibanaCard

IFrameInterface

MDMS

uiCommonConstant.json

Configuration

MasterDashboardConfig.json

API to fetch common constants

URL: https://health-demo.digit.org/mdms-v2/v1/_search?tenantId=mz

Payload:

{
    "MdmsCriteria": {
        "tenantId": "mz",
        "moduleDetails": [
            {
                "moduleName": "common-masters",
                "masterDetails": [
                    {
                        "name": "uiCommonConstants"
                    }
                ]
            }
        ]
    },
    "RequestInfo": {
        "apiId": "",
        "authToken": "",
        "msgId": ""
    }
}

Response:

{
    "common-masters": {
        "uiCommonConstants": [
            {
                "id": "common-masters.uiCommonConstants.elastic.iframe-routes",
                "smc": {
                    "iframe-routes": {
                        "district": {
                            "title": "DISTRICT_DASHBOARD",
                            "isOrigin": true,
                            "routePath": "/kibana/app/dashboards?auth_provider_hint=anonymous1#/view/d90add16-5c45-4479-871b-e76c1a862f6f?embed=true&hide-filter-bar=true&_g=(time:(from:'2023-11-21T00:00:00.000Z',to:'2024-07-26T18:29:59.999Z'))&_a=(filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:'5ac095ba-7c5e-4114-ac2b-efebb55901b0',key:Data.boundaryHierarchy.province.keyword,negate:!f,params:(query:Fintabo),type:phrase),query:(match_phrase:(Data.boundaryHierarchy.province.keyword:Fintabo)))))",
                            "Authorization": true,
                            "base-kibana-path": "/kibana/",
                            "overwriteTimeFilter": true
                        },
                        "national": {
                            "title": "NATIONAL_DASHBOARD",
                            "isOrigin": true,
                            "routePath": "/kibana/app/dashboards?auth_provider_hint=anonymous1#/view/719c74b6-3d4e-461c-8dff-6010a8494164?embed=true&hide-filter-bar=true&_g=(refreshInterval:(pause:!t,value:60000),time:(from:'2023-11-21T00:00:00.000Z',to:'2024-07-26T18:29:59.999Z'))&_a=()",
                            "Authorization": true,
                            "base-kibana-path": "/kibana/",
                            "overwriteTimeFilter": true
                        },
                        "province": {
                            "title": "PROVINCE_DASHBOARD",
                            "isOrigin": true,
                            "routePath": "/kibana/app/dashboards#/view/fcccd77a-df16-4e06-aa97-024b53393928?embed=true&hide-filter-bar=true&_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:now-15m,to:now))",
                            "Authorization": true,
                            "base-kibana-path": "/kibana/",
                            "overwriteTimeFilter": true
                        }
                    }
                },
                "elastic": {
                    "iframe-routes": {
                        "hf": {
                            "title": "LOCALITY_DASHBOARD",
                            "isOrigin": true,
                            "routePath": "/kibana/app/dashboards#/view/50edb03b-6235-49e1-9083-7afca204763c?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:now-15m,to:now))"
                        },
                        "home": {
                            "isOrigin": true,
                            "routePath": "/kibana/login"
                        },
                        "district": {
                            "title": "DISTRICT_DASHBOARD",
                            "isOrigin": true,
                            "routePath": "/kibana/app/dashboards#/view/a37931ea-d3ae-4155-9f0a-eca95339c5bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:now-15m,to:now))"
                        },
                        "national": {
                            "title": "NATIONAL_DASHBOARD",
                            "isOrigin": true,
                            "routePath": "/kibana/app/dashboards#/view/b1ce8523-30cd-4966-aa8d-c3ac9561ebb2?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:now-15m,to:now))"
                        },
                        "province": {
                            "title": "PROVINCE_DASHBOARD",
                            "isOrigin": true,
                            "routePath": "/kibana/app/dashboards#/view/fcccd77a-df16-4e06-aa97-024b53393928?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:now-15m,to:now))"
                        }
                    }
                }
            }
        ]
    }
}