open-index/open-npm huggingface dataset:
npm package: @oamdev/backstage-plugin-velaux
Description: Welcome to the velaux plugin!
Latest version: 0.1.0

# velaux

Welcome to the velaux plugin!

This plugin adds a sidebar page to allow you to quickly access VelaUX.

Edit `packages/app/src/components/Root/Root.tsx` to add the sidebar

```tsx
// packages/app/src/components/Root/Root.tsx
import { VelaLogo } from 'backstage-plugin-velaux';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
        {/* ... */}
        <SidebarDivider />
        <SidebarScrollWrapper>
          {/* BEGIN */}
          <SidebarItem icon={VelaLogo} to="velaux" text="VelaUX" />
          {/* END */}
        </SidebarScrollWrapper>
      {/* ... */}
  </SidebarPage>
);
```

Edit `packages/app/src/App.tsx` to add routers

```tsx
// packages/app/src/App.tsx
import { VelauxPage } from 'backstage-plugin-velaux';

const routes = (
  <FlatRoutes>
    {/* ... */}
    <Route path="/velaux" element={<VelauxPage />} />
    {/* ... */}
  </FlatRoutes>
);
```

Lastly, you need to make sure you can access the VelaUX webpage. For example, by forwarding the VelaUX addon during development:

```
vela port-forward -n vela-system addon-velaux 9082:80
```
npm package: @oamdev/plugin-kubevela-backend
Description: Welcome to the kubevela-backend backend plugin!
Latest version: 0.1.0

# kubevela-backend

Welcome to the kubevela-backend backend plugin!

This plugin provides an `Entity Provider` called `VelaProvider` to read KubeVela Applications.

You will need to configure the providers in your backstage backend:

```typescript
// packages/backend/src/plugins/catalog.ts
import { VelaProvider } from '@internal/plugin-kubevela-backend'; // This name will be changed once npm reg is published

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  const builder = await CatalogBuilder.create(env);

  // -- Start --
  const vela = new VelaProvider('production', env.reader, env.config);
  builder.addEntityProvider(vela);
  const frequency: number = env.config.getOptionalNumber('vela.frequency') || 60;
  const timeout: number = env.config.getOptionalNumber('vela.timeout') || 600;
  // -- End --

  builder.addProcessor(new ScaffolderEntitiesProcessor());
  const { processingEngine, router } = await builder.build();
  await processingEngine.start();

  // -- Start --
  await env.scheduler.scheduleTask({
    id: 'run_vela_refresh',
    fn: async () => { await vela.run(); },
    frequency: { seconds: frequency },
    timeout: { seconds: timeout },
  });
  // -- End --

  return router;
}
```

You also need to run [backstage-plugin-kubevela](https://github.com/kubevela-contrib/backstage-plugin-kubevela) first before running the backstage app, to actually read KubeVela Applications.


Configure `vela.host` and `backend.reading.allow` in your backstage config, pointing to the kubevela plugin endpoint.

```yaml
vela:
  host: "http://47.254.33.41:32505"
  # frequency is the refresh rate for the Vela API, default to 60 seconds, the unit is seconds
  frequency: 30
  # timeout is the timeout limit for the Vela API, default to 600 seconds, the unit is seconds
  timeout: 60

backend:
  reading:
    allow:
      - host: 47.254.33.41:32505
```