Customize the Dashboard

How to customize the Kubeflow Central Dashboard?

The Kubeflow Central Dashboard provides a way to customize the menu items and integrate third-party apps.

For example, the below image shows the Kubeflow Central Dashboard with a custom “My App” menu item:

Central Dashboard ConfigMap

The Kubeflow Central Dashboard is configured using a Kubernetes ConfigMap.

The CD_CONFIGMAP_NAME environment variable on the central-dashboard Deployment specifies the name of the ConfigMap. By default, the ConfigMap is named centraldashboard-config. You can find the default ConfigMap in the /apps/centraldashboard/upstream/base/configmap.yaml file of the kubeflow/manifests repository.

External Links

The externalLinks section of the ConfigMap adds links to the sidebar for external sites (not hosted on the Kubernetes cluster).

Each element of externalLinks is a JSON object with the following fields:

• type: must be set to "item"
• iframe: must be set to false
• text: the text to display for the link
• url: the URL to open when the link is clicked
• icon: an iron-icon name to display for the link.
  • Note, you must exclude the icons: prefix
  • For example, to use icons:launch you would set "launch"
  • For example, to use social:mood you would set "social:mood"

For example, the below ConfigMap adds a link to the Kubeflow website:

apiVersion: v1
kind: ConfigMap
metadata:
  name: centraldashboard-config
  namespace: kubeflow
data:
  settings: |-
    ...    
  links: |-
    {
      "menuLinks": [
        ...
      ],
      "externalLinks": [
        {
          "type": "item",
          "iframe": false,
          "text": "Kubeflow Website",
          "url": "https://www.kubeflow.org/",
          "icon": "launch"
        }
      ],
      "quickLinks": [
        ...
      ],
      "documentationItems": [
        ...
      ]
    }    

Documentation Links

The documentationItems section of the ConfigMap adds links to the “Documentation” section of the Home page.

Each element of documentationItems is a JSON object with the following fields:

• text: the text to display for the link
• desc: the description to display below the link
• link: the URL to open when the link is clicked

For example, the below ConfigMap adds a link to the Kubeflow website documentation:

apiVersion: v1
kind: ConfigMap
metadata:
  name: centraldashboard-config
  namespace: kubeflow
data:
  settings: |-
    ...    
  links: |-
    {
      "menuLinks": [
        ...
      ],
      "externalLinks": [
        ...
      ],
      "quickLinks": [
        ...
      ],
      "documentationItems": [
        {
          "text": "Kubeflow Website",
          "desc": "Kubeflow website documentation",
          "link": "https://www.kubeflow.org/docs/"
        }
      ]
    }    

In-Cluster Links

Create VirtualService

If you have a non-Kubeflow application running on the cluster, you may expose it through the Kubeflow Central Dashboard by creating a VirtualService on the Kubeflow Istio Gateway. To do this, your app must have an injected Istio sidecar and be exposed as a Kubernetes Service.

For example, the below VirtualService exposes Service/my-app from the my-namespace namespace on the Kubeflow Istio Gateway under the path /my-app/:

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
  name: my-custom-app
  namespace: <MY_APP_NAMESPACE>
spec:
  gateways:
    ## the istio gateway which is serving kubeflow
    ## TEMPLATE: <KUBEFLOW_GATEWAY_NAMESPACE>/<KUBEFLOW_GATEWAY_NAME>
    - kubeflow/kubeflow-gateway
  hosts:
    - '*'
  http:
    - headers:
        request:
          add:
            x-forwarded-prefix: /my-app
      match:
        - uri:
            prefix: /my-app/
      rewrite:
        uri: /
      route:
        - destination:
            host: <MY_APP_SERVICE_NAME>.<MY_APP_NAMESPACE>.svc.cluster.local
            port:
              number: 80

Creating this VirtualService should make the application available at the /_/my-app/ path on the Kubeflow Istio Gateway.

http(s)://<KUBEFLOW_ISTIO_GATEWAY>/_/my-app/

Add In-Cluster Link

The menuLinks section of the ConfigMap adds links to the sidebar for in-cluster applications.

Each element of menuLinks is a JSON object with the following fields:

• type: must be set to "item"
• link: the path to open when the link is clicked
• text: the text to display for the link
• icon: an iron-icon name to display for the link.
  • Note, you must exclude the icons: prefix
  • For example, to use icons:launch you would set "launch"
  • For example, to use social:mood you would set "social:mood"

For example, the below ConfigMap adds the “my-app” application from above:

apiVersion: v1
kind: ConfigMap
metadata:
  name: centraldashboard-config
  namespace: kubeflow
data:
  settings: |-
    ...    
  links: |-
    {
      "menuLinks": [
        ...
        {
          "type": "item",
          "link": "/my-app/",
          "text": "My App",
          "icon": "social:mood"
        },
        ...
      ],
      "externalLinks": [
        ...
      ],
      "quickLinks": [
        ...
      ],
      "documentationItems": [
        ...
      ]
    }    

http(s)://<KUBEFLOW_ISTIO_GATEWAY>/_/my-app/profile1/
http(s)://<KUBEFLOW_ISTIO_GATEWAY>/_/my-app/profile2/

{
  "type": "item",
  "link": "/my-app/{ns}/",
  "text": "My App",
  "icon": "social:mood"
}