community-plugins/workspaces/kiali
Backstage Service Account 1cc1431434
Version Packages (#4923)
2025-08-12 18:19:15 +02:00
..
.changeset Version Packages (#4923) 2025-08-12 18:19:15 +02:00
examples [Kiali] Component library (#3987) 2025-05-21 17:02:28 +02:00
images plugin(kiali): add kiali-frontend (#2223) 2025-01-03 13:07:33 +00:00
packages Update backstage to 1.39.1 (#4864) 2025-08-07 19:06:20 +02:00
plugins Version Packages (#4923) 2025-08-12 18:19:15 +02:00
.dockerignore feat(kiali): add kiali-backend (#1755) 2024-11-06 08:52:42 -05:00
.eslintignore feat(kiali): add kiali-backend (#1755) 2024-11-06 08:52:42 -05:00
.eslintrc.js update yarn to v4 (#2519) 2025-02-13 00:25:26 +01:00
.gitignore feat(kiali): add kiali-backend (#1755) 2024-11-06 08:52:42 -05:00
.prettierignore feat(kiali): add kiali-backend (#1755) 2024-11-06 08:52:42 -05:00
DEVELOPMENT.md Fix provider selector (#3835) 2025-04-28 11:18:07 +02:00
README.md Fix Authentication methods table formatation (#4271) 2025-07-02 12:29:39 -03:00
app-config.yaml Update backstage to 1.39.1 (#4864) 2025-08-07 19:06:20 +02:00
backstage.json Update backstage to 1.39.1 (#4864) 2025-08-07 19:06:20 +02:00
catalog-info.yaml feat(kiali): add kiali-backend (#1755) 2024-11-06 08:52:42 -05:00
package.json Update backstage to 1.39.1 (#4864) 2025-08-07 19:06:20 +02:00
tsconfig.json Fix provider selector (#3835) 2025-04-28 11:18:07 +02:00
yarn.lock chore(deps): update dependency start-server-and-test to v2.0.13 (#4895) 2025-08-12 11:30:40 -04:00

README.md

Kiali plugin for Backstage

The Kiali Plugin This plugin exposes information about your entity-specific ServiceMesh objects.

Capabilities

The Kiali plugin has the following capabilities:

  • Overview
    • Metrics by namespace
    • Health by namespace
    • Canary info
    • Istio Config warnings
  • Worklist

For administrators

Setting up the Kiali plugin

Prerequisites

  • The following annotation is added to the entity's catalog-info.yaml file to identify whether an entity contains the Kubernetes resources:

    annotations:
      ...
      kiali.io/provider: default
      kiali.io/namespace: <RESOURCE_NS>
    

kiali.io/provider This value must match with the name provider in app-config.yaml

Setting up the Kiali frontend package

  1. Install the Kiali plugin using the following commands:

    yarn workspace app add @backstage-community/plugin-kiali
    
  2. Select the components that you want to use, such as:

    • KialiPage: This is a standalone page or dashboard displaying all namespaces in the mesh. You can add KialiPage to packages/app/src/App.tsx file as follows:

      /* highlight-add-next-line */
      import { KialiPage } from '@backstage-community/plugin-kiali';
      
      const routes = (
        <FlatRoutes>
          {/* ... */}
          {/* highlight-add-next-line */}
          <Route path="/kiali" element={<KialiPage />} />
        </FlatRoutes>
      );
      

      You can also update navigation in packages/app/src/components/Root/Root.tsx as follows:

      /* highlight-add-next-line */
      import { KialiIcon } from '@backstage-community/plugin-kiali';
      
      export const Root = ({ children }: PropsWithChildren<{}>) => (
        <SidebarPage>
          <Sidebar>
            <SidebarGroup label="Menu" icon={<MenuIcon />}>
              {/* ... */}
              {/* highlight-add-next-line */}
              <SidebarItem icon={KialiIcon} to="kiali" text="Kiali" />
            </SidebarGroup>
            {/* ... */}
          </Sidebar>
          {children}
        </SidebarPage>
      );
      
    • EntityKialiContent: This component is a React context provided for Kiali data, which is related to the current entity. The EntityKialiContent component is used to display any data on the React components mentioned in packages/app/src/components/catalog/EntityPage.tsx:

    /* highlight-add-next-line */
    import { EntityKialiContent } from '@backstage-community/plugin-kiali';
    
    const serviceEntityPage = (
      <EntityLayout>
        {/* ... */}
        {/* highlight-add-start */}
        <EntityLayout.Route path="/kiali" title="kiali">
          <EntityKialiContent />
        </EntityLayout.Route>
        {/* highlight-add-end */}
      </EntityLayout>
    );
    
  3. Configure you app-config.yaml with kiali configuration

kiali:
  providers:
    # highlight-add-start
    # Required. Name of provider taht match the entity annotation
    - name: 'default'
      # Required. Kiali endpoint
      url: ${KIALI_ENDPOINT}
      # Optional. Required by token authentication
      serviceAccountToken: ${KIALI_SERVICE_ACCOUNT_TOKEN}
      # Optional. defaults false
      skipTLSVerify: true
      # Optional
      caData: ${KIALI_CONFIG_CA_DATA}
      # Optional. Local path to CA file
      caFile: ''
      # Optional. Time in seconds that session is enabled, defaults to 1 minute.
      sessionTime: 60
      # highlight-add-end

Authentication methods:

The following table describes the parameters that you can configure to enable the plugin under catalog.providers.keycloakOrg.<ENVIRONMENT_NAME> object in the app-config.yaml file:

Name Description Default Value Required
name Name of the kiali provider, such as default "default" Yes and unique
url Location of the Kiali server, such as https://localhost:4000 "" Yes
serviceAccountToken Service Account Token which is used for querying data from Kiali "" Yes if using token based authentication
skipTLSVerify Skip TLS certificate verification presented by the API server false No
caData Base64-encoded certificate authority bundle in PEM format "" No
caFile Filesystem path (on the host where the Backstage process is running) to a certificate authority bundle in PEM format "" No
sessionTime Time in seconds that session is enabled 60 No

For users

We have 2 ways to consume the Kiali plugin, entity view or full view.

  1. Open your Backstage application and select a component from the Catalog page.

catalog-list

  1. We can see the GraphCard in the overview section

GraphCard

  1. Go to the Kiali tab.

    The Kiali tab displays the Overview view associated to a Servicemesh.

    overview-tab

    An If we scroll down we can see the full picture

    overview-tab

To see the full view we can select the kiali option sidebar.

kialiPage

Development

To develop/contribute in kiali plugin follow these instructions