Code Monkey home page Code Monkey logo

kpt-backstage-plugins's Introduction

Kpt Backstage Plugins

Welcome! This repository contains the Kpt Backstage Plugins. The plugins can be installed into an existing Backstage Application following the READMEs for each plugin. For development and testing, the plugins can also be executed with the example Backstage Application in this repository.

Configuration as Data is the primary plugin which powers the WYSIWYG Configuration GUI over GitOps using kpt and its new Package Orchestrator, Porch.

CaD Landing Page

New to kpt?

kpt is a package-centric toolchain that enables a WYSIWYG configuration authoring, automation, and delivery experience, which simplifies managing Kubernetes platforms and KRM-driven infrastructure at scale by manipulating declarative Configuration as Data, separated from the code that transforms it. Read kpt.dev to learn more.

New to Backstage?

Backstage is an open platform for building developer portals. Watch What is Backstage? (Explainer Video) on YouTube and read backstage.io to learn more.

Quick Start

Prerequisites

To use the Backstage Application in this repository, you will need:

Clone Repository

The first step is to check out the code to your local development environment. We recommend you create your own fork, but we will keep things simple here.

git clone https://github.com/GoogleContainerTools/kpt-backstage-plugins.git
cd kpt-backstage-plugins

Install Dependencies

You'll need to install dependencies before you can run the UI locally.

yarn install

Running the UI

To run the UI, you'll need to use this command will start Backstage frontend and backend instances. The frontend instance is hosted on port 3000 and, the backend instance is on port 7007. Once started, you'll be able to access the UI by browsing to the URL http://localhost:3000.

yarn dev

Executing Tests

Run tests:

yarn test

Executing Linter

Run the linter:

yarn lint

Executing Code Formatting

Run the code formatter:

yarn prettier:check # Checks for any code formatting errors
yarn prettier:write # Formats code

Contributing

If you are interested in contributing, please start with the contribution guidelines.

kpt-backstage-plugins's People

Contributors

4molybdenum2 avatar christopherfry avatar justinsb avatar mortent avatar release-please[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kpt-backstage-plugins's Issues

Settings page throws an error

Expected Behavior

User should be able to navigate to the Settings page successfully.

Current Behavior

A error shows when the user navigates to the Settings page.

Steps to Reproduce

  1. Run the UI locally using the latest code from the main branch, currently [7de057e]
  2. Navigate to http://localhost:3000/settings
  3. Error occurs

image

4. Settings page can be viewed once the error is closed

image

Possible Solution

Context

This doesn't impact the functionality of the Config as Data Plugin but we should still resolve this.

Add apply-replacements function automatically

When I add an ApplyReplacements object to a blueprint, half the time I forget to also add the apply-replacements function to the Kptfile. It would be nice to add the function automatically in the UI when adding the object, until kpt itself has support for mapping types to functions.

Generic resource form editor

This isn't urgent, but it seems possible to create a generic form editor driven from OpenAPI.

Here's an example: https://jeremykross.github.io/konstellate/

That one requires a painful number of clicks to navigate and is implemented in clojure, but illustrates the idea.

There was also https://github.com/CATechnologiesTest/yipee.

Our current forms aren't much fancier than these, though I'm hoping we can move the hand-crafted forms to a more guided step-by-step approach.

Remove Config Sync requirement

Allow the Config as Data UI to manage deployment and blueprint packages without needing to have Config Sync installed on the cluster.

Security Policy violation SECURITY.md

This issue was automatically created by Allstar.

Security Policy Violation
Security policy not enabled.
A SECURITY.md file can give users information about what constitutes a vulnerability and how to report one securely so that information about a bug is not publicly visible. Examples of secure reporting methods include using an issue tracker with private issue support, or encrypted email with a published key.

To fix this, add a SECURITY.md file that explains how to handle vulnerabilities found in your repository. Go to https://github.com/GoogleContainerTools/kpt-backstage-plugins/security/policy to enable.

For more information, see https://docs.github.com/en/code-security/getting-started/adding-a-security-policy-to-your-repository.


This issue will auto resolve when the policy is in compliance.

Issue created by Allstar. See https://github.com/ossf/allstar/ for more information. For questions specific to the repository, please contact the owner or maintainer.

Add Priority Class resource editor

Feature Suggestion

Add a first-class Priority Class resource editor.

Context

Currently, the Config as Data UI has first-class resource editors for many resources, including for Deployments, Stateful Sets, Services, Service Accounts, Ingress, Roles, and Role Bindings, however, a first-class resource editor has yet to be created for Network Policies. Adding first-class resource editors allow users to add and update Kubernetes resources with a UI versus using YAML.

Allow packages to be compared to sibling packages

Feature Suggestion

Allow packages to be compared with sibling packages (packages that share the same upstream package). Today, shown in the screenshot below, packages can only be compared to earlier revisions and their upstream revision.

Image

Possible Implementation

A possible implementation is to list sibling revisions in the Compare Revision dropdown as 'Sibling ([package-name] [package-revision])'. These should show after the upstream revision in the dropdown. If there are multiple siblings with the same package name (possible if they are cloned to separate repositories), the package name can be prefixed with the repository name. Only the latest published package revision for each sibling needs to be shown in the dropdown.

Context

Comparing siblings allows differences to be quickly and easily viewed between variants. Today this isn't possible with the UI.

Add a visual indicator to the repositories table to indicate any repositories that are not ready

Feature Suggestion

Add a visual indicator to the repositories table to allow users to identify any repositories that are not ready.

image

Possible Implementation

A possible implementation is to add a new status column as the first column to the repositories table. When the repository is not ready, the PriorityHigh icon shows in the column with the tooltip 'Repository not ready'. Clicking the icon should take you to the repository page, where the user can view why the repository is not ready on the advanced tab (existing functionality).

Context

The user needs to discover if any repositories not ready when looking at the repositories table so the user can take the appropriate actions to make a repository ready. A repository may not be ready for several reasons, including an expired access token, an invalid url, or a private repository registered without an access token.

Add the Network Policy resource editor

Feature Suggestion

Add a first-class Network Policy resource editor.

Possible Implementation

The Network Policy resource editor does not need to implement every field present on the resource. The editor should allow updates to the metadata (name, namespace, labels, annotations), the policy type to be updated to deny all ingress and egress traffic, and use match labels on the pod selector to limit the group of pods to which the network policy will apply.

Context

Currently, the Config as Data UI has first-class resource editors for many resources, including for Deployments, Stateful Sets, Services, Service Accounts, Ingress, Roles, and Role Bindings, however, a first-class resource editor has yet to be created for Network Policies. First-class resource editors allow users to add and update Kubernetes resources with a UI versus using YAML.

Pull images using PAT for the Github repository

Currently Github authentication requires us to create a Personal Access Token (PAT). This same token can be used to pull images from ghcr. Another alternative is configuring a default secret at the service account level: https://kubernetes.io/docs/tasks/configure-pod-container/configure-service-account/#add-imagepullsecrets-to-a-service-account which will help us in fetching the image on a private registry

PS: Is it possible to remove the requirement for PAT altogether and use something like Github Authentication Provider for Backstage? https://backstage.io/docs/auth/github/provider#docsNav

Viewing yaml for a resource logs two warnings to the developer console

Expected Behavior

Viewing a resource's yaml should not log any warnings to the developer console.

Current Behavior

Currently, two warnings are logged to the developer console when a resource yaml is viewed:

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/microsoft/monaco-editor#faq

You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker

Steps to Reproduce

The easiest way to reproduce this is by viewing a package resource's yaml:

  1. Open the simplens team blueprint created by Namespace Provisioning Guide
  2. Click on any resource within in the team blueprint to bring up the resource viewer dialog
  3. With the developer console open, click on the 'Show YAML View' button in the dialog, and the two warnings are written to the console

Possible Solution

A possible solution is to implement the web worker being requested by the editor.

Context

The Monaco Editor is used in the Resource Editors and Viewers in the Config as Data UI to give us a rich editor experience with syntax highlighting. These warnings do not seem to impact the user experience however we should see these warnings can be resolved.

Add abandon draft option

Feature Suggestion

Allow users to abandon draft package revisions. Today, draft package revisions can only be edited or proposed (see screenshot).

Image

Possible Implementation

Add a 'Abandon' button next to the Edit button when a draft package revision is being viewed. When this button is clicked, the draft revision is deleted from Porch and the UI automatically redirects the user to the latest published revision of the package. If the package doesn't have any new published revisions, the UI redirects the user back to the packages list.

Context

Today there's no easy way for a user to abandon a draft revision in the UI if one was accidentally created or a draft revision is no longer needed.

Organize the code to make resource types more easily pluggable

Most of the UI plugin is general-purpose, except for resource-type-specific code.

That code is currently spread across multiple files and directories:
https://github.com/GoogleContainerTools/kpt-backstage-plugins/tree/main/plugins/cad/src/types
https://github.com/GoogleContainerTools/kpt-backstage-plugins/blob/main/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditorSelector.tsx
https://github.com/GoogleContainerTools/kpt-backstage-plugins/tree/main/plugins/cad/src/components/ResourceEditorDialog/components/FirstClassEditors
https://github.com/GoogleContainerTools/kpt-backstage-plugins/blob/main/plugins/cad/src/components/ResourceViewerDialog/components/FirstClassViewerSelector.tsx
https://github.com/GoogleContainerTools/kpt-backstage-plugins/tree/main/plugins/cad/src/components/ResourceViewerDialog/components/FirstClassViewers/StructuredMetadata/resources

and possibly other places.

It would be useful for resource-type-specific implementations to be self-contained, so that they could be easily added, eventually without a fork of the plugin. That would enable other projects to add types relevant to them: Kubernetes types, Config Connector types, ArgoCD types, Gatekeeper types, Istio types, etc.

At least until we're able to autogenerate UI forms from resource definitions. :-)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.