{"_id":"@andythehood/plugin-apigee","_rev":"4-7d07111ceeea1855f529a19624a36316","name":"@andythehood/plugin-apigee","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.1":{"name":"@andythehood/plugin-apigee","version":"0.0.1","main":"src/index.ts","types":"src/index.ts","license":"Apache-2.0","private":false,"publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin"},"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","prepack":"backstage-cli package prepack","postpack":"backstage-cli package postpack"},"dependencies":{"@backstage/catalog-model":"^1.4.1","@backstage/core-components":"^0.13.3","@backstage/core-plugin-api":"^1.5.3","@backstage/plugin-catalog":"^1.12.0","@backstage/plugin-catalog-graph":"^0.2.32","@backstage/plugin-catalog-react":"^1.8.0","@backstage/theme":"^0.4.1","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.9.1","@material-ui/lab":"4.0.0-alpha.61","@react-hookz/web":"^23.1.0","classnames":"^2.3.2","luxon":"^3.3.0","react-use":"^17.2.4","recharts":"^2.7.2","react-router-dom":"^6.14.1"},"peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0"},"resolutions":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0"},"devDependencies":{"@backstage/cli":"^0.22.9","@backstage/core-app-api":"^1.9.0","@backstage/dev-utils":"^1.0.17","@backstage/test-utils":"^1.4.1","@types/luxon":"^3.3.0","@types/node":"*","@types/react-router-dom":"^5.3.3","msw":"^1.0.0"},"configSchema":"config.d.ts","description":"Welcome to the Apigee frontend plugin!","_id":"@andythehood/plugin-apigee@0.0.1","dist":{"shasum":"ce130cd11396b5ac5961ad3409178a2002ff129c","integrity":"sha512-oAKTP76S8Vtmj8GrEe7yOetBF2sAHJt8xF9q/BTdn6VxDngLZIrOk6hDQfX5A5CQpIaihpvGNzi8dVhO1M2kfg==","tarball":"https://registry.npmjs.org/@andythehood/plugin-apigee/-/plugin-apigee-0.0.1.tgz","fileCount":23,"unpackedSize":346992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDERFq1xzjIj2V8ytAFqZEVVcXlAWs6KtQ0D7S6dxXB0wIhAOYXxS4XaJPPbdRl1EcLqqYRFj1iDwN5PInxj2Ag/33O"}]},"_npmUser":{"name":"andythehood","email":"andythehood@gmail.com"},"directories":{},"maintainers":[{"name":"andythehood","email":"andythehood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plugin-apigee_0.0.1_1691109062463_0.5906387783752041"},"_hasShrinkwrap":false},"0.0.2":{"name":"@andythehood/plugin-apigee","version":"0.0.2","main":"src/index.ts","types":"src/index.ts","license":"Apache-2.0","private":false,"publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin"},"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","prepack":"backstage-cli package prepack","postpack":"backstage-cli package postpack"},"dependencies":{"@backstage/catalog-model":"^1.4.1","@backstage/core-components":"^0.13.3","@backstage/core-plugin-api":"^1.5.3","@backstage/plugin-catalog":"^1.12.0","@backstage/plugin-catalog-graph":"^0.2.32","@backstage/plugin-catalog-react":"^1.8.0","@backstage/theme":"^0.4.1","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.9.1","@material-ui/lab":"4.0.0-alpha.61","@react-hookz/web":"^23.1.0","classnames":"^2.3.2","luxon":"^3.3.0","react-use":"^17.2.4","recharts":"^2.7.2","react-router-dom":"^6.14.1"},"peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0"},"resolutions":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0"},"devDependencies":{"@backstage/cli":"^0.22.9","@backstage/core-app-api":"^1.9.0","@backstage/dev-utils":"^1.0.17","@backstage/test-utils":"^1.4.1","@types/luxon":"^3.3.0","@types/node":"*","@types/react-router-dom":"^5.3.3","msw":"^1.0.0"},"configSchema":"config.d.ts","description":"Welcome to the Apigee frontend plugin!","_id":"@andythehood/plugin-apigee@0.0.2","dist":{"shasum":"247526d79d1e9a6f9d0a81f5dfc3ae8d424a7df3","integrity":"sha512-vDvn8S7CaZQEPcEZo2qoHfSMgXqyKGZO2byZutxOPG8bRqfRsxwmRItFUiPTpXOLkJxNPPcIFzPzrdLa1iONUA==","tarball":"https://registry.npmjs.org/@andythehood/plugin-apigee/-/plugin-apigee-0.0.2.tgz","fileCount":23,"unpackedSize":346792,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBGls4aw52lx/TZfppr1AbTD84xMeOTRsbEli7SOZMeAiEAwMQM4fu7GqUuXTxj8ygsfb2Tpl3txVgGadKxaL3KYuM="}]},"_npmUser":{"name":"andythehood","email":"andythehood@gmail.com"},"directories":{},"maintainers":[{"name":"andythehood","email":"andythehood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plugin-apigee_0.0.2_1691149249838_0.16135753761739968"},"_hasShrinkwrap":false},"0.0.3":{"name":"@andythehood/plugin-apigee","version":"0.0.3","main":"src/index.ts","types":"src/index.ts","license":"Apache-2.0","private":false,"publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin"},"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","prepack":"backstage-cli package prepack","postpack":"backstage-cli package postpack"},"dependencies":{"@backstage/catalog-model":"^1.4.1","@backstage/core-components":"^0.13.3","@backstage/core-plugin-api":"^1.5.3","@backstage/plugin-catalog":"^1.12.0","@backstage/plugin-catalog-graph":"^0.2.32","@backstage/plugin-catalog-react":"^1.8.0","@backstage/theme":"^0.4.1","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.9.1","@material-ui/lab":"4.0.0-alpha.61","@react-hookz/web":"^23.1.0","classnames":"^2.3.2","luxon":"^3.3.0","react-router-dom":"^6.14.1","react-use":"^17.2.4","recharts":"^2.7.2"},"peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0"},"resolutions":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0"},"devDependencies":{"@backstage/cli":"^0.22.9","@backstage/core-app-api":"^1.9.0","@backstage/dev-utils":"^1.0.17","@backstage/test-utils":"^1.4.1","@types/luxon":"^3.3.0","@types/node":"*","@types/react-router-dom":"^5.3.3","msw":"^1.0.0"},"configSchema":"config.d.ts","description":"Welcome to the Apigee frontend plugin!","_id":"@andythehood/plugin-apigee@0.0.3","dist":{"shasum":"057106fcef540b380cf6b4ebac0fb2cba7af72d1","integrity":"sha512-7iGzIGs8En2nCku+ev+qxxFlLKIjcLNAWljOu66wp5+ZEgvCifGTLg5yWYUKLxjReqI9hznOu43YOBHyKDlZdQ==","tarball":"https://registry.npmjs.org/@andythehood/plugin-apigee/-/plugin-apigee-0.0.3.tgz","fileCount":23,"unpackedSize":346792,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlxOVBmFITZ/lUirSNRnAa88gJXYfkDZJRIMBnwtMaAAiAyObEyF6Jip1CkRc6vLNXcfWzwOZit8B6wpG0nCYt3gQ=="}]},"_npmUser":{"name":"andythehood","email":"andythehood@gmail.com"},"directories":{},"maintainers":[{"name":"andythehood","email":"andythehood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plugin-apigee_0.0.3_1691152519891_0.8763170087590539"},"_hasShrinkwrap":false},"0.0.4":{"name":"@andythehood/plugin-apigee","version":"0.0.4","main":"src/index.ts","types":"src/index.ts","license":"Apache-2.0","private":false,"publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin"},"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","prepack":"backstage-cli package prepack","postpack":"backstage-cli package postpack"},"dependencies":{"@backstage/catalog-model":"^1.4.1","@backstage/core-components":"^0.13.3","@backstage/core-plugin-api":"^1.5.3","@backstage/plugin-catalog":"^1.12.0","@backstage/plugin-catalog-graph":"^0.2.32","@backstage/plugin-catalog-react":"^1.8.0","@backstage/theme":"^0.4.1","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.9.1","@material-ui/lab":"4.0.0-alpha.61","@react-hookz/web":"^23.1.0","classnames":"^2.3.2","luxon":"^3.3.0","react-router-dom":"^6.14.1","react-use":"^17.2.4","recharts":"^2.7.2"},"peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0"},"resolutions":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0"},"devDependencies":{"@backstage/cli":"^0.22.9","@backstage/core-app-api":"^1.9.0","@backstage/dev-utils":"^1.0.17","@backstage/test-utils":"^1.4.1","@types/luxon":"^3.3.0","@types/node":"*","@types/react-router-dom":"^5.3.3","msw":"^1.0.0"},"configSchema":"config.d.ts","description":"Welcome to the Apigee frontend plugin!","_id":"@andythehood/plugin-apigee@0.0.4","dist":{"shasum":"3f57765b55bf6b654ee72961b0a5a5148acaf38c","integrity":"sha512-SSLLznhSdfuxPEgMBsdz/3W6n9lCusg/vUtBMwKQNyd3WIB81bMq2gR7YZHCncehZ21efzBQS9ep2vers9M+7w==","tarball":"https://registry.npmjs.org/@andythehood/plugin-apigee/-/plugin-apigee-0.0.4.tgz","fileCount":23,"unpackedSize":346737,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTaWXzgkFilFS0NBXSQpm7DgZhKZdml5m+44dCwV6ZLgIhAMJc9DSBE2gJL3e7i0qYpmn3lVzDVPIfz0GDNVfxwEao"}]},"_npmUser":{"name":"andythehood","email":"andythehood@gmail.com"},"directories":{},"maintainers":[{"name":"andythehood","email":"andythehood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plugin-apigee_0.0.4_1691154507485_0.3156541069468195"},"_hasShrinkwrap":false},"0.0.5":{"name":"@andythehood/plugin-apigee","version":"0.0.5","main":"src/index.ts","types":"src/index.ts","license":"Apache-2.0","private":false,"publishConfig":{"access":"public","main":"dist/index.esm.js","types":"dist/index.d.ts"},"backstage":{"role":"frontend-plugin"},"scripts":{"start":"backstage-cli package start","build":"backstage-cli package build","lint":"backstage-cli package lint","test":"backstage-cli package test","clean":"backstage-cli package clean","prepack":"backstage-cli package prepack","postpack":"backstage-cli package postpack"},"dependencies":{"@backstage/catalog-model":"^1.4.1","@backstage/core-components":"^0.13.4","@backstage/core-plugin-api":"^1.5.3","@backstage/plugin-catalog":"^1.12.4","@backstage/plugin-catalog-graph":"^0.2.35","@backstage/plugin-catalog-react":"^1.8.3","@backstage/theme":"^0.4.1","@material-ui/core":"^4.12.2","@material-ui/icons":"^4.9.1","@material-ui/lab":"4.0.0-alpha.61","@react-hookz/web":"^23.1.0","classnames":"^2.3.2","luxon":"^3.3.0","react-router-dom":"^6.14.1","react-use":"^17.2.4","recharts":"^2.7.2"},"peerDependencies":{"react":"^17.0.0","react-dom":"^17.0.0"},"resolutions":{"@types/react":"^17.0.0","@types/react-dom":"^17.0.0"},"devDependencies":{"@backstage/cli":"^0.22.12","@backstage/core-app-api":"^1.9.1","@backstage/dev-utils":"^1.0.20","@backstage/test-utils":"^1.4.2","@types/luxon":"^3.3.0","@types/node":"*","@types/react-router-dom":"^5.3.3","msw":"^1.0.0"},"configSchema":"config.d.ts","description":"Welcome to the Apigee frontend plugin!","_id":"@andythehood/plugin-apigee@0.0.5","dist":{"shasum":"9f1b9679e1002b3ed1b4fd36f865cc50714a1a04","integrity":"sha512-/LJ7pr51Zp86qneGeZrIRukP6Jw+yX+BnJlU7Yd/aO7WONuyRtfNmW9nqc0gP7/ineRhZ6WDcPCckup9RMkOdA==","tarball":"https://registry.npmjs.org/@andythehood/plugin-apigee/-/plugin-apigee-0.0.5.tgz","fileCount":25,"unpackedSize":731640,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDh8yFPFF59KzBS4Fha2VOpMQoRttIMFjOS6RAq6f1gAiEA22Wwm6iIxH62uzr8raRvSccR1WfWGkTPPjYxM58KCr8="}]},"_npmUser":{"name":"andythehood","email":"andythehood@gmail.com"},"directories":{},"maintainers":[{"name":"andythehood","email":"andythehood@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plugin-apigee_0.0.5_1693724432822_0.7235173037692602"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-04T00:31:02.394Z","0.0.1":"2023-08-04T00:31:02.671Z","modified":"2023-09-03T07:00:33.260Z","0.0.2":"2023-08-04T11:40:50.017Z","0.0.3":"2023-08-04T12:35:20.081Z","0.0.4":"2023-08-04T13:08:27.672Z","0.0.5":"2023-09-03T07:00:33.064Z"},"maintainers":[{"name":"andythehood","email":"andythehood@gmail.com"}],"description":"Welcome to the Apigee frontend plugin!","license":"Apache-2.0","readme":"# Apigee Plugin\n\nWelcome to the Apigee frontend plugin!\n\nThis plugin provides a set of component pages for viewing information about Apigee entities in the Backstage catalog.\n\n![Apigee Organization View](./apigee-org.png \"Apigee Organization View\")\n\nThe following Apigee object types are displayed along with the relationships between them:\n\n- API Proxies identified as `kind:Component, spec.type:apiproxy`\n- API Products identified as `kind:Component, spec.type:apiproduct`\n- Developer Applications identified as `kind:Component, spec.type:devapp`\n- Developers identified as `kind:Component, spec.type:developer`\n- Environments identified as `kind:Resource, spec.type:environment`\n- API Deployments identified as `kind:Component, spec.type:deployment`\n\n<br/>\n\n![Apigee Proxy View](./apigee-proxy.png \"Apigee Proxy View\")\n\n_To import Apigee entities into the Backstage catalog from your ApigeeX Organization, please see the [Apigee Entity Provider Module\n(`@andythehood/catalog-backend-module-apigee`)](https://github.com/andyhood/catalog-backend-module-apigee)_\n\n## Dependencies\n\nThis module depends on the following Backstage backend module:\n\n- the [Apigee Entity Provider Module](https://github.com/andyhood/catalog-backend-module-apigee) is recommended for importing entities from your Apigee Organization. Alternatively, you can use this [CLI](#) to export entities from Apigee into a set of YAML files that can be imported using the standard Catalog Import process.\n\n## Setup\n\n1. Install the plugin into your Backstage frontend app package:\n\n   ```bash\n   # From your Backstage root directory\n   yarn add --cwd packages/app @andythehood/plugin-apigee\n   ```\n\n2. Add a route where the Apigee page will live, typically `/apigee`.\n\n   ```tsx\n   // In packages/app/src/App.tsx\n   import {\n     ApigeePage\n   } from '@andythehood/plugin-apigee';';\n\n   // ...\n     <Route path=\"/apigee\" element={<ApigeePage />} />\n   // ...\n   ```\n\n3. Optionally, add a Sidebar Menu Item, e.g.\n\n   ```tsx\n   // In packages/app/src/components/Root/Root.tsx\n   import {ApigeeIcon} from \"@andythehood/plugin-apigee\";\n\n   // ...\n   <SidebarItem icon={ApigeeIcon} to=\"apigee\" text=\"Apigee\" />;\n   // ...\n   ```\n\n4. Modify the default `Entitypage.tsx` component to load the Apigee-specific Content pages based on the entity types listed above, e.g. apiproducts, apiproxy, developer, devapp, environment, etc.\n\n   a. Import the Apigee Entity content pages\n\n   ```tsx\n   // In packages/app/src/components/catalog/EntityPage.tsx\n   import {\n     ApigeeEntityAppContent,\n     ApigeeEntityDeveloperContent,\n     ApigeeEntityProductContent,\n     ApigeeEntityProxyContent,\n     ApigeeEntityDeploymentContent,\n     ApigeeEntityEnvironmentContent,\n   } from \"@andythehood/plugin-apigee\";\n   ```\n\n   b. In the same file, update the imports from `@backstage/plugin-catalog` to add the `isResourceType` function\n\n   ```tsx\n   // In packages/app/src/components/catalog/EntityPage.tsx\n   import {\n     ...,\n     isResourceType,\n   } from '@backstage/plugin-catalog';\n   ```\n\n   c. In the same file, update the existing `componentPage` function\n\n   ```diff\n   ...\n   const componentPage = (\n     <EntitySwitch>\n       <EntitySwitch.Case if={isComponentType('service')}>\n         {serviceEntityPage}\n       </EntitySwitch.Case>\n       <EntitySwitch.Case if={isComponentType('website')}>\n         {websiteEntityPage}\n       </EntitySwitch.Case>\n\n   +   <EntitySwitch.Case if={isComponentType('apiproxy')}>\n   +     {apigeeEntityProxyPage}\n   +    </EntitySwitch.Case>\n   +    <EntitySwitch.Case if={isComponentType('apiproduct')}>\n   +      {apigeeEntityProductPage}\n   +    </EntitySwitch.Case>\n   +    <EntitySwitch.Case if={isComponentType('developer')}>\n   +      {apigeeEntityDeveloperPage}\n   +    </EntitySwitch.Case>\n   +    <EntitySwitch.Case if={isComponentType('devapp')}>\n   +     {apigeeEntityAppPage}\n   +    </EntitySwitch.Case>\n   +    <EntitySwitch.Case if={isComponentType('deployment')}>\n   +      {apigeeEntityDeploymentPage}\n   +    </EntitySwitch.Case>\n\n       <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>\n     </EntitySwitch>\n   );\n   ...\n   ```\n\n   d. In the same file, update the existing `entityPage` function:\n\n   ```diff\n   ...\n   export const entityPage = (\n     <EntitySwitch>\n       <EntitySwitch.Case if={isKind('component')} children={componentPage} />\n       <EntitySwitch.Case if={isKind('api')} children={apiPage} />\n       <EntitySwitch.Case if={isKind('group')} children={groupPage} />\n       <EntitySwitch.Case if={isKind('user')} children={userPage} />\n       <EntitySwitch.Case if={isKind('system')} children={systemPage} />\n       <EntitySwitch.Case if={isKind('domain')} children={domainPage} />\n\n   +    <EntitySwitch.Case\n   +      if={isKind('resource') && isResourceType('environment')}\n   +      children={apigeeEntityEnvironmentPage}\n   +    />\n\n       <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>\n     </EntitySwitch>\n   );\n   ```\n\n   e. In the same `EntityPage.tsx` file, add the following functions:\n\n   ```tsx\n   const apigeeEntityEnvironmentPage = (\n     <EntityLayout>\n       <EntityLayout.Route path=\"/\" title=\"Overview\">\n         <ApigeeEntityEnvironmentContent />\n       </EntityLayout.Route>\n     </EntityLayout>\n   );\n\n   const apigeeEntityProxyPage = (\n     <EntityLayout>\n       <EntityLayout.Route path=\"/\" title=\"Overview\">\n         <ApigeeEntityProxyContent />\n       </EntityLayout.Route>\n     </EntityLayout>\n   );\n\n   const apigeeEntityProductPage = (\n     <EntityLayout>\n       <EntityLayout.Route path=\"/\" title=\"Overview\">\n         <ApigeeEntityProductContent />\n       </EntityLayout.Route>\n     </EntityLayout>\n   );\n\n   const apigeeEntityDeveloperPage = (\n     <EntityLayout>\n       <EntityLayout.Route path=\"/\" title=\"Overview\">\n         <ApigeeEntityDeveloperContent />\n       </EntityLayout.Route>\n     </EntityLayout>\n   );\n\n   const apigeeEntityAppPage = (\n     <EntityLayout>\n       <EntityLayout.Route path=\"/\" title=\"Overview\">\n         <ApigeeEntityAppContent />\n       </EntityLayout.Route>\n     </EntityLayout>\n   );\n\n   const apigeeEntityDeploymentPage = (\n     <EntityLayout>\n       <EntityLayout.Route path=\"/\" title=\"Overview\">\n         <ApigeeEntityDeploymentContent />\n       </EntityLayout.Route>\n     </EntityLayout>\n   );\n   ```\n\n## Configuration\n\nConfigure the list of available Apigee Organizations shown on the Apigee page by adding this config as a top level section in your `app-config.yaml`:\n\n```yaml\napigee:\n  organizations:\n    - <YOUR_APIGEE_ORGNAME_1>\n    - <YOUR_APIGEE_ORGNAME_2>\n    - ...\n```\n\n## Authentication\n\nThis plugin requires that the Backstage User to authenticate with Google Sign-In and for that user to have `Apigee Read-Only Admin` permissions on the Apigee Organizations listed in the `app-config.yaml`.\n\n## TODO\n\n- Set intial tags filter in Apigee catalog\n","readmeFilename":"README.md"}