npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@janus-idp/backstage-plugin-topology

v1.21.12

Published

The Topology plugin enables you to visualize the workloads such as Deployment, Job, Daemonset, Statefulset, CronJob, and Pods powering any service on the Kubernetes cluster.

Downloads

3,168

Readme

Topology plugin for Backstage

The Topology plugin enables you to visualize the workloads such as Deployment, Job, Daemonset, Statefulset, CronJob, and Pods powering any service on the Kubernetes cluster.

For administrators

Installation

Prerequisites

  • The Kubernetes plugins including @backstage/plugin-kubernetes and @backstage/plugin-kubernetes-backend are installed and configured by following the installation and configuration guides.
  • The Kubernetes plugin is configured and connects to the cluster using a ServiceAccount.
  • The ClusterRole must be granted to ServiceAccount accessing the cluster. If you have the Backstage Kubernetes plugin configured, then the ClusterRole is already granted.

Tip: You can use the prepared manifest for a read-only ClusterRole, providing access for both Kubernetes plugin and Topology plugin.

Other configurations

To view the OpenShift routes
  • Ensure that read access is granted to the routes resource in the ClusterRole. You can use the following code to do so:

      apiVersion: rbac.authorization.k8s.io/v1
      kind: ClusterRole
      metadata:
        name: backstage-read-only
      rules:
        ...
        - apiGroups:
            - route.openshift.io
          resources:
            - routes
          verbs:
            - get
            - list
    
  • The following must be added in kubernetes.customResources property in the app-config.yaml file to view the OpenShift route as well:

      kubernetes:
        ...
        customResources:
          - group: 'route.openshift.io'
            apiVersion: 'v1'
            plural: 'routes'
To view the pods/pods log

The following permission must be granted to the ClusterRole to be able to view the pod logs:

  apiVersion: rbac.authorization.k8s.io/v1
  kind: ClusterRole
  metadata:
    name: backstage-read-only
  rules:
    ...
    - apiGroups:
        - ''
      resources:
        - pods
        - pods/log
      verbs:
        - get
        - list
        - watch
To view the Tekton PipelineRuns
  • Ensure that read access is granted to the Pipelines, PipelineRuns, and TaskRuns resource in the ClusterRole. You can use the following code to do so:

      ...
      apiVersion: rbac.authorization.k8s.io/v1
      kind: ClusterRole
      metadata:
        name: backstage-read-only
      rules:
        ...
        - apiGroups:
            - tekton.dev
          resources:
            - pipelines
            - pipelineruns
            - taskruns
          verbs:
            - get
            - list
  • The following code must be added to the kubernets.customResources property in the app-config.yaml file to view the Tekton PipelineRuns list in the side panel and to view the latest PipelineRun status in the Topology node decorator:

      kubernetes:
        ...
        customResources:
          - group: 'tekton.dev'
            apiVersion: 'v1'
            plural: 'pipelines'
          - group: 'tekton.dev'
            apiVersion: 'v1'
            plural: 'pipelineruns'
          - group: 'tekton.dev'
            apiVersion: 'v1'
            plural: 'taskruns'
To enable the Source Code Editor
  • Ensure that read access is granted to the CheClusters resource in the ClusterRole as shown in the following example code:

      ...
      apiVersion: rbac.authorization.k8s.io/v1
      kind: ClusterRole
      metadata:
        name: backstage-read-only
      rules:
        ...
        - apiGroups:
            - org.eclipse.che
          resources:
            - checlusters
          verbs:
            - get
            - list
  • The following configuration must be added in the kubernetes.customResources property in the app-config.yaml file to use the Source Code Editor:

      kubernetes:
        ...
        customResources:
          - group: 'org.eclipse.che'
            apiVersion: 'v2'
            plural: 'checlusters'

Labels and annotations

Link to the source code editor or the source

The following annotations are added to workload resources, such as Deployments to navigate to the Git repository of the associated application using the source code editor:

annotations:
  app.openshift.io/vcs-uri: <GIT_REPO_URL>

You can also add the following annotation to navigate to a specific branch:

annotations:
  app.openshift.io/vcs-ref: <GIT_REPO_BRANCH>

Note: If Red Hat OpenShift Dev Spaces is installed and configured and git URL annotations are also added to the workload YAML file, then clicking on the edit code decorator redirects you to the Red Hat OpenShift Dev Spaces instance.

Note: When you deploy your application using the OCP Git import flows, then you do not need to add the labels as import flows do that. Otherwise, you need to add the labels manually to the workload YAML file.

The labels are not similar to backstage.io/edit-url annotations as it points to the catalog entity metadata source file and is applied to Backstage catalog entity metadata YAML file, but not Kubernetes resources.

Tip: You can also add the app.openshift.io/edit-url annotation with the edit URL that you want to access using the decorator.

Entity annotation/label
  • In order for Backstage to detect that an entity has Kubernetes components, the following annotation should be added to the entity's catalog-info.yaml:

    annotations:
      backstage.io/kubernetes-id: <BACKSTAGE_ENTITY_NAME>
  • The following label is added to the resources so that the Kubernetes plugin gets the Kubernetes resources from the requested entity:

    labels:
      backstage.io/kubernetes-id: <BACKSTAGE_ENTITY_NAME>`

    NOTE
    When using the label selector, the mentioned labels must be present on the resource.


Namespace annotation

You can also add the backstage.io/kubernetes-namespace annotation to identify the Kubernetes resources using the defined namespace.

annotations:
  backstage.io/kubernetes-namespace: <RESOURCE_NS>

The Red Hat OpenShift Dev Spaces instance is not accessible using the source code editor if the backstage.io/kubernetes-namespace annotation is added to the catalog-info.yaml file.

To retrieve the instance URL, CheCluster Custom Resource (CR) is required. The instance URL is not retrieved if the namespace annotation value is different from openshift-devspaces as CheCluster CR is created in openshift-devspaces namespace.

Label selector query annotation

You can write your own custom label, which Backstage uses to find the Kubernetes resources. The label selector takes precedence over the ID annotations.

annotations:
  backstage.io/kubernetes-label-selector: 'app=my-app,component=front-end'

If you have multiple entities while Red Hat Dev Spaces is configured and want multiple entities to support the edit code decorator that redirects to the Red Hat Dev Spaces instance, you can add the backstage.io/kubernetes-label-selector annotation to the catalog-info.yaml file for each entity.

annotations:
  backstage.io/kubernetes-label-selector: 'component in (<BACKSTAGE_ENTITY_NAME>,che)'

If you are using the above label selector, ensure that you add the below labels to your resources so that the Kubernetes plugin gets the Kubernetes resources from the requested entity:

labels:
  component: che # add this label to your che cluster instance
labels:
  component: <BACKSTAGE_ENTITY_NAME> # add this label to the other resources associated with your entity

You can also write your own custom query for the label selector with unique labels to differentiate your entities. However, you need to ensure that you add those labels to the resources associated with your entities including your CheCluster instance.

Icon displayed in the node
  • The following label is added to workload resources, such as Deployments to display runtime icon in the topology nodes:

    labels:
      app.openshift.io/runtime: <RUNTIME_NAME>
  • As another option, you can include the following label to display the runtime icon:

    labels:
      app.kubernetes.io/name: <RUNTIME_NAME>

    Supported values of <RUNTIME_NAME> include:

    • django
    • dotnet
    • drupal
    • go-gopher
    • golang
    • grails
    • jboss
    • jruby
    • js
    • nginx
    • nodejs
    • openjdk
    • perl
    • phalcon
    • php
    • python
    • quarkus
    • rails
    • redis
    • rh-spring-boot
    • rust
    • java
    • rh-openjdk
    • ruby
    • spring
    • spring-boot

    NOTE Other values result in icons not being rendered for the node.

App grouping

The following label is added to display the workload resources such as Deployments and Pods in a visual group:

labels:
  app.kubernetes.io/part-of: <GROUP_NAME>
Node connector

The following annotation is added to display the workload resources such as Deployments and Pods with a visual connector:

annotations:
  app.openshift.io/connects-to: '[{"apiVersion": <RESOURCE_APIVERSION>,"kind": <RESOURCE_KIND>,"name": <RESOURCE_NAME>}]'

For more information about the labels and annotations, see Guidelines for labels and annotations for OpenShift applications.

Procedure

  1. Install the Topology plugin using the following command:

    yarn workspace app add @janus-idp/backstage-plugin-topology
  2. Enable TOPOLOGY tab in packages/app/src/components/catalog/EntityPage.tsx:

    /* highlight-add-next-line */
    import { TopologyPage } from '@janus-idp/backstage-plugin-topology';
    
    const serviceEntityPage = (
      <EntityLayout>
        {/* ... */}
        {/* highlight-add-start */}
        <EntityLayout.Route path="/topology" title="Topology">
          <TopologyPage />
        </EntityLayout.Route>
        {/* highlight-add-end */}
      </EntityLayout>
    );

For users

Using the Topology plugin in Backstage

Topology is a front-end plugin that enables you to view the workloads as nodes that power any service on the Kubernetes cluster.

Prerequisites

  • Your Backstage application is installed and running.
  • You have installed the Topology plugin. For the installation process, see Installation.
  • If RBAC permission framework is enabled, ensure to add the following permission policies in an external permission policies configuration file named rbac-policy.csv to allow the rbac admins or your desired user(s)/group(s) to access the topology plugin:
g, user:default/<YOUR_USERNAME>, role:default/topology-viewer
p, role:default/topology-viewer, topology.view.read, read, allow
p, role:default/topology-viewer, kubernetes.proxy, use, allow
p, role:default/topology-viewer, catalog-entity, read, allow

p, role:default/topology-viewer, topology.view.read, read, allow grants the user the ability to see the Topology panel. p, role:default/topology-viewer, kubernetes.proxy, use, allow grants the user the ability to view the pod logs. p, role:default/topology-viewer, catalog-entity, read, allow grants the user the ability to see the catalog item.

Procedure

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

  2. Go to the TOPOLOGY tab and you can view the workloads such as Deployments, Pods as nodes.

    topology-tab

  3. Select a node and a pop-up appears on the right side, which contains two tabs: Details and Resources.

    The Details and Resources tab contain the associated information and resources of the node.

    topology-tab-details

  4. Click on the Open URL button on the top of a node.

    topology-tab-open-url

    When you click on the open URL button, it allows you to access the associated Ingresses and runs your application in a new tab.