feat(kiali) add kiali-frontend

Signed-off-by: Alberto Gutierrez <aljesusg@gmail.com>

workspaces/kiali/.changeset/warm-humans-juggle.md

@@ -0,0 +1,6 @@
+---
+'@backstage-community/plugin-kiali-backend': patch
+'@backstage-community/plugin-kiali': patch
+---
+
+The `kiali` and `kiali-backend` plugins from the [janus-idp/backstage-plugins](https://github.com/janus-idp/backstage-plugins) repository were migrated to the community plugins, based on commit [92a16c5](https://github.com/janus-idp/backstage-plugins/commit/92a16c5). The migration was performed by following the manual migration steps outlined in the [Community Plugins CONTRIBUTING guide](https://github.com/backstage/community-plugins/blob/main/CONTRIBUTING.md#migrating-a-plugin)

workspaces/kiali/DEVELOPMENT.md

@@ -0,0 +1,64 @@
+# Development environment
+
+## Full Setup
+
+1. Configure you `app-config.local.yaml` with kiali configuration
+
+   ```yaml
+   catalog:
+     providers:
+       # highlight-add-start
+       kiali:
+         # 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
+   ```
+
+2. Run
+
+```bash
+    export KIALI_BASE_URL=https://kiali-istio-system.apps-crc.testing;`
+    yarn start:backstage
+```
+
+## Configure auth
+
+### Token authentication
+
+1. Set the parameters in app-config.local.yaml
+
+   ```yaml
+   catalog:
+     providers:
+       # highlight-add-start
+       kiali:
+         # Required. Kiali endpoint
+         url: ${KIALI_ENDPOINT}
+         # Optional. Required by token authentication
+         serviceAccountToken: ${KIALI_SERVICE_ACCOUNT_TOKEN}
+         # Optional. defaults false
+         skipTLSVerify: true
+         # Optional
+   ```
+
+2. To get `KIALI_SERVICE_ACCOUNT_TOKEN` create your service account and create the token
+
+   ```bash
+   kubectl create token $KIALI_SERVICE_ACCOUNT
+   ```
+
+   or if you installed kiali with the operator then execute
+
+   ```bash
+   export KIALI_SERVICE_ACCOUNT_TOKEN=$(kubectl describe secret $(kubectl get secret -n istio-system | grep kiali-service-account-token | cut -d" " -f1) -n istio-system | grep token: | cut -d ":" -f2 | sed 's/^ *//')
+   ```

workspaces/kiali/README.md

@@ -1,16 +1,162 @@
-# [Backstage](https://backstage.io)
+# Kiali plugin for Backstage
 
-This is your newly scaffolded Backstage App, Good Luck!
+The Kiali Plugin
+This plugin exposes information about your entity-specific ServiceMesh objects.
 
-To start the app, run:
+## Capabilities
 
-```sh
-yarn install
-yarn dev
-```
+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:
+
+  ```yaml
+  annotations:
+    ...
+
+    kiali.io/namespace: <RESOURCE_NS>
+  ```
+
+#### Setting up the Kiali frontend package
+
+1. Install the Kiali plugin using the following commands:
+
+   ```console
+   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:
+
+     ```tsx title="packages/app/src/App.tsx"
+     /* 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:
+
+     ```tsx title="packages/app/src/components/Root/Root.tsx"
+     /* 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`:
+
+   ```tsx title="packages/app/src/components/catalog/EntityPage.tsx"
+   /* highlight-add-next-line */
+   import { EntityKialiContent } from '@backstage-community/plugin-kiali';
 
-To generate knip reports for this app, run:
+   const serviceEntityPage = (
+     <EntityLayout>
+       {/* ... */}
+       {/* highlight-add-start */}
+       <EntityLayout.Route path="/kiali" title="kiali">
+         <EntityKialiContent />
+       </EntityLayout.Route>
+       {/* highlight-add-end */}
+     </EntityLayout>
+   );
+   ```
 
-```sh
-yarn backstage-repo-tools knip-reports
+3. Configure you `app-config.yaml` with kiali configuration
+
+```yaml
+catalog:
+  providers:
+    # highlight-add-start
+    kiali:
+      # 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:
+
+- anonymous [Read docs about this authentication in kiali.io](https://kiali.io/docs/configuration/authentication/anonymous/)
+- token [Read docs about this authentication in kiali.io](https://kiali.io/docs/configuration/authentication/token/)
+
+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                                |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------- |
+| `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](./images/docs/EntityStep.png)
+
+2. We can see the GraphCard in the overview section
+
+![GraphCard](./images/docs/GraphCard.png)
+
+3. Go to the **Kiali** tab.
+
+   The **Kiali** tab displays the Overview view associated to a Servicemesh.
+
+   ![overview-tab](./images/docs/EntityView.png)
+
+   An If we scroll down we can see the full picture
+
+   ![overview-tab](./images/docs/EntityFullView.png)
+
+To see the full view we can select the kiali option sidebar.
+
+![kialiPage](./images/docs/KialiPage.png)
+
+## Development
+
+To develop/contribute in kiali plugin follow [these instructions](./DEVELOPMENT.md)

workspaces/kiali/app-config.yaml

@@ -0,0 +1,107 @@
+app:
+  title: Kiali - The Console for Istio Service Mesh
+  baseUrl: http://localhost:3000
+
+organization:
+  name: Kiali Community
+
+backend:
+  # Used for enabling authentication, secret is shared by all backend plugins
+  # See https://backstage.io/docs/auth/service-to-service-auth for
+  # information on the format
+  # auth:
+  #   keys:
+  #     - secret: ${BACKEND_SECRET}
+  baseUrl: http://localhost:7007
+  listen:
+    port: 7007
+    # Uncomment the following host directive to bind to specific interfaces
+    # host: 127.0.0.1
+  csp:
+    connect-src: ["'self'", 'http:', 'https:']
+    # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference
+    # Default Helmet Content-Security-Policy values can be removed by setting the key to false
+  cors:
+    origin: http://localhost:3000
+    methods: [GET, HEAD, PATCH, POST, PUT, DELETE]
+    credentials: true
+  # This is for local development only, it is not recommended to use this in production
+  # The production database configuration is stored in app-config.production.yaml
+  database:
+    client: better-sqlite3
+    connection: ':memory:'
+  # workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir
+
+integrations:
+  github:
+    - host: github.com
+      # This is a Personal Access Token or PAT from GitHub. You can find out how to generate this token, and more information
+      # about setting up the GitHub integration here: https://backstage.io/docs/integrations/github/locations#configuration
+      token: ${GITHUB_TOKEN}
+    ### Example for how to add your GitHub Enterprise instance using the API:
+    # - host: ghe.example.net
+    #   apiBaseUrl: https://ghe.example.net/api/v3
+    #   token: ${GHE_TOKEN}
+
+proxy:
+  ### Example for how to add a proxy endpoint for the frontend.
+  ### A typical reason to do this is to handle HTTPS and CORS for internal services.
+  # endpoints:
+  #   '/test':
+  #     target: 'https://example.com'
+  #     changeOrigin: true
+
+# Reference documentation http://backstage.io/docs/features/techdocs/configuration
+# Note: After experimenting with basic setup, use CI/CD to generate docs
+# and an external cloud storage when deploying TechDocs for production use-case.
+# https://backstage.io/docs/features/techdocs/how-to-guides#how-to-migrate-from-techdocs-basic-to-recommended-deployment-approach
+techdocs:
+  builder: 'local' # Alternatives - 'external'
+  generator:
+    runIn: 'docker' # Alternatives - 'local'
+  publisher:
+    type: 'local' # Alternatives - 'googleGcs' or 'awsS3'. Read documentation for using alternatives.
+
+auth:
+  # see https://backstage.io/docs/auth/ to learn about auth providers
+  providers:
+    # See https://backstage.io/docs/auth/guest/provider
+    guest: {}
+
+scaffolder:
+  # see https://backstage.io/docs/features/software-templates/configuration for software template options
+
+catalog:
+  import:
+    entityFilename: catalog-info.yaml
+    pullRequestBranchName: backstage-integration
+  rules:
+    - allow: [Component, System, API, Resource, Location]
+  locations:
+    # Local example data, file locations are relative to the backend process, typically `packages/backend`
+    - type: file
+      target: ../../examples/kialiEntities.yaml
+
+kubernetes:
+  # see https://backstage.io/docs/features/kubernetes/configuration for kubernetes configuration options
+
+kiali:
+  # See the README file for configuration
+  url: ${KIALI_BASE_URL}
+  # Optional. Kiali public URL to redirect to standalone Kiali. When not specified, url will be used.
+  # urlExternal: ''
+  # 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
+
+# see https://backstage.io/docs/permissions/getting-started for more on the permission framework
+permission:
+  # setting this to `false` will disable permissions
+  enabled: true

workspaces/kiali/backstage.json

@@ -1 +1 @@
-{ "version": "1.32.0" }
+{ "version": "1.32.2" }

workspaces/kiali/examples/kialiEntities.yaml

@@ -0,0 +1,34 @@
+---
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: istio-system
+  description: Namespace istio-system.
+  tags:
+    - istio
+    - kiali
+    - core
+    - servicemesh
+  annotations:
+    'kiali.io/namespace': istio-system
+spec:
+  type: service
+  lifecycle: production
+  owner: user:guest
+---
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: bookinfo
+  description: Bookinfo Application
+  tags:
+    - bookinfo
+    - kiali
+    - core
+    - servicemesh
+  annotations:
+    'kiali.io/namespace': bookinfo
+spec:
+  type: service
+  lifecycle: production
+  owner: user:guest