{"id":28431161,"url":"https://github.com/cyclops-ui/backstage-plugins","last_synced_at":"2025-07-04T17:31:33.598Z","repository":{"id":268911689,"uuid":"905784442","full_name":"cyclops-ui/backstage-plugins","owner":"cyclops-ui","description":"Cyclops backstage plugins","archived":false,"fork":false,"pushed_at":"2025-03-09T20:56:25.000Z","size":1711,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-05T14:43:34.371Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cyclops-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-19T14:13:20.000Z","updated_at":"2025-05-20T21:41:49.000Z","dependencies_parsed_at":"2024-12-19T17:32:29.520Z","dependency_job_id":"6c39c1c6-a1e1-41a6-b98c-d9d4366e2b27","html_url":"https://github.com/cyclops-ui/backstage-plugins","commit_stats":null,"previous_names":["cyclops-ui/backstage-plugins"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cyclops-ui/backstage-plugins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclops-ui%2Fbackstage-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclops-ui%2Fbackstage-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclops-ui%2Fbackstage-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclops-ui%2Fbackstage-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyclops-ui","download_url":"https://codeload.github.com/cyclops-ui/backstage-plugins/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyclops-ui%2Fbackstage-plugins/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263588081,"owners_count":23484860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T14:36:31.806Z","updated_at":"2025-07-04T17:31:33.592Z","avatar_url":"https://github.com/cyclops-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cyclops Backstage plugins\n\nThis repository holds Cyclops backstage plugins. These plugins serve for an easier integration with Backstage for a more full developer platform experience.\n\nOfficial Cyclops Backstage plugins stored in this repository are:\n\n- Cyclops plugin - allows to manage all Cyclops modules from a single page\n- Module plugin - integrates into the Backstage catalog so you can view and edit your Kubernetes application through Backstage\n\nAll the plugins and how to configure them are documented in more detail below.\n\n## Cyclops plugin (`plugins/cyclops`)\n\nLists all Cyclops modules on `/cyclops` so all of the modules can be viewed in a single page. Each module can then be selected and managed separately.\n\n\u003cimg width=\"1512\" alt=\"Screenshot 2025-01-20 at 20 09 23\" src=\"https://github.com/user-attachments/assets/cd6a2645-0fb0-49f1-b73a-3dcda9f927ee\" /\u003e\n\nYou can create a new Module by clicking the `Add module` button in the top right corner, which will allow you to select a template and enter the configuration through the UI. Once a module is created, you can check its resources and see it on the list above.\n\nEach module can be selected by clicking on its name to list Kubernetes resources deployed for a particular module or to further edit the module.\n\n\u003cimg width=\"1512\" alt=\"Screenshot 2025-01-20 at 20 11 56\" src=\"https://github.com/user-attachments/assets/d3143bc3-454a-4bf7-b553-5826b346b71c\" /\u003e\n\nThrough this page, you can view or edit your Kubernetes resources and the module.\n\n### Install\n\nSteps for setting up the plugin on your Backstage app:\n\n1. Have a running Cyclops instance:\n   - If you don't have a running instance, you can install one by following [this two-command tutorial](https://cyclops-ui.com/docs/installation/install/manifest/)\n   - Make sure that Cyclops backend (`cyclops-ctrl` pod) is running and is reachable. If you installed with the commands above, your Cyclops instance would be reachable from within the same Kubernetes cluster on `http://cyclops-ctrl.cyclops:8080`\n2. Add the plugin to your Backstage instance; you need to add to `packages/app`:\n\n    ```bash\n    yarn --cwd packages/app add @cyclopsui/backstage-plugin-cyclops\n    ```\n\n3. Add proxy configuration to your Backstage configuration in `app-config.yaml`\n\n    ```yaml\n    proxy:\n      endpoints:\n        '/cyclops':\n          target: 'http://cyclops-ctrl.cyclops:8080'\n          changeOrigin: true\n    ```\n\n4. Register routes in `packages/app/src/App.tsx`\n\n    ```tsx\n    import {CyclopsModulePage, CyclopsPage} from '@cyclopsui/backstage-plugin-cyclops';\n    \n    const routes = (\n      \u003cFlatRoutes\u003e\n        ...\n        \u003cRoute path=\"/cyclops\" element={\u003cCyclopsPage /\u003e} /\u003e\n        \u003cRoute path=\"/cyclops/:moduleName\" element={\u003cCyclopsModulePage /\u003e} /\u003e\n        ...\n      \u003c/FlatRoutes\u003e\n    );\n    ```\n\n5. Add the plugin button to the sidebar. In file `packages/app/src/components/Root/Root.tsx`\n\n    ```tsx\n    export const Root = ({ children }: PropsWithChildren\u003c{}\u003e) =\u003e (\n      \u003cSidebarPage\u003e\n        ...\n            \u003cSidebarItem icon={HomeIcon} to=\"catalog\" text=\"Home\" /\u003e\n            \u003cSidebarItem icon={LibraryBooks} to=\"cyclops\" text=\"Modules\" /\u003e\n        ...\n      \u003c/SidebarPage\u003e\n    );\n    ```\n\nYou should now be able to see the sidebar button leading you to the list of modules, as shown in the image above.\n\n## Module plugin (`plugins/cyclops-modules`)\n\nShows Cyclops module data as part of the Backstage catalog. This plugin allows you to add the page for Module details and edit your Modules through a new tab in your Component details page.\n\n\u003cimg width=\"1496\" alt=\"Screenshot 2024-12-23 at 13 59 50\" src=\"https://github.com/user-attachments/assets/0a2eb735-fad2-4e60-a59a-4824ec16f219\" /\u003e\n\nYou can view Kubernetes resources deployed for a Module (check status, list logs) as well as perform actions like reconciling Modules or restarting workloads.\n\nIf you click the `Edit` button, you will be able to see the UI for editing that specific Module.\n\n\u003cimg width=\"1494\" alt=\"Screenshot 2024-12-23 at 14 01 51\" src=\"https://github.com/user-attachments/assets/b6954b94-5520-4d1b-a793-c8c74227a8bc\" /\u003e\n\nModule plugin communicates with an existing Cyclops backend instance running in your cluster. All requests going from your Backstage app to the Cyclops backend are proxied through the Backstage backend, so all of the requests are authenticated.\n\nThe Module plugin will fetch the Module called the same as the component. In this case, the component is called `example-website`, and the Cyclops plugin will fetch a Module called `example-website`. With future improvements, we plan to enable mapping between Component names and Cyclops Modules via annotations so that the names of the components and Modules don't have to be the same, allowing for more flexibility.\n\nSteps for setting up the plugin on your Backstage app:\n\n1. Have a running Cyclops instance:\n    - If you don't have a running instance, you can install one by following [this two-command tutorial](https://cyclops-ui.com/docs/installation/install/manifest/)\n    - Make sure that Cyclops backend (`cyclops-ctrl` pod) is running and is reachable. If you installed with the commands above, your Cyclops instance would be reachable from within the same Kubernetes cluster on `http://cyclops-ctrl.cyclops:8080`\n2. Add the plugin to your Backstage instance, you need to add to `packages/app`:\n\n    ```bash\n    yarn --cwd packages/app add @cyclopsui/backstage-plugin-cyclops-modules\n    ```\n\n3. Add proxy configuration to your Backstage configuration in `app-config.yaml`\n\n    ```yaml\n    proxy:\n      endpoints:\n        '/cyclops':\n          target: 'http://cyclops-ctrl.cyclops:8080'\n          changeOrigin: true\n    ```\n\n4. Add Module plugin component to your catalog. Go to file `packages/app/src/components/catalog/EntityPage.tsx` and import Cyclops component:\n\n    ```tsx\n    import {ModuleDetailsComponent} from \"@cyclopsui/backstage-plugin-cyclops-modules\";\n    ```\n\n   Now you just need to add the Cyclops component to the entity. For example, if you want to add Cyclops tab for a Website component, find `websiteEntityPage` and the Cyclops tab by pasting the code below:\n\n    ```tsx\n    \u003cEntityLayout.Route path={\"/cyclops\"} title={\"Cyclops\"}\u003e\n    \t\u003cModuleDetailsComponent/\u003e\n    \u003c/EntityLayout.Route\u003e\n    ```\n\n\nYour Backstage catalog can now view and edit deployed Modules in your cluster.\n\nThis plugin can't deploy new Modules and can only give you an overview of existing ones.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyclops-ui%2Fbackstage-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyclops-ui%2Fbackstage-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyclops-ui%2Fbackstage-plugins/lists"}