backstage-plugin-litmus
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

backstage-plugin

npm version

Features

EntityLitmusCard

EntityLitmusCard

EntityLitmusContent

EntityLitmusContent

Before you begin

Getting started

  1. In the ./packages/app project add the plugin.

    yarn add backstage-plugin-litmus
  2. Get Litmus API Token through the Litmus UI

    1. Click "SETTINGS" in the sidebar.
    2. Click "+ New Token" Button in the 'API Tokens' section. settings_tab
    3. Enter your information and click "Confirm". create_dialog
    4. Get the token in the "VALUE" column.
  3. In the app-config.yaml file root directory, add litmus proxy and info like below

    proxy:
      '/litmus':
        target: 'your-own-litmus-ui-url'
        changeOrigin: true
        headers:
          Authorization: 'Bearer ${LITMUS_AUTH_TOKEN}'
    litmus:
      baseUrl: 'your-own-litmus-ui-url'
      apiToken: ${LITMUS_AUTH_TOKEN}
  4. Add your auth key to the environmental variables

    export LITMUS_AUTH_TOKEN="your-own-token"
  5. Adding annotations and values to your component file.

    apiVersion: backstage.io/v1alpha1
    kind: Component
    metadata:
      name: component-name
      description: 'description'
      annotations:
        litmuschaos.io/project-id: 'your-own-project-id'
  6. Enabling frontend

    // packages/app/src/components/catalog/EntityPage.tsx
    import {
      isLitmusAvailable,
      EntityLitmusCard,
      EntityLitmusContent,
    } from 'backstage-plugin-litmus';
    // ...
    const overviewContent = (
      <Grid container spacing={6} alignItems="stretch">
        // ...
        <EntitySwitch>
          <EntitySwitch.Case if={isLitmusAvailable}>
            <Grid item md={4} xs={12}>
              <EntityLitmusCard />
            </Grid>
          </EntitySwitch.Case>
        </EntitySwitch>
        // ...
      </Grid>
    );
    // ...
    const serviceEntityPage = (
      <EntityLayout>
        // ...
        <EntityLayout.Route path="/litmus" title="Litmus">
          <EntityLitmusContent />
        </EntityLayout.Route>
        // ...
      </EntityLayout>
    );

This plugin is based on proposal documentation

Package Sidebar

Install

npm i backstage-plugin-litmus

Weekly Downloads

10

Version

1.0.2

License

Apache-2.0

Unpacked Size

161 kB

Total Files

13

Last publish

Collaborators

  • namkyu1999