diff --git a/plugins/opencost/README.md b/plugins/opencost/README.md index 4c9d721efb..d034f1b3dd 100644 --- a/plugins/opencost/README.md +++ b/plugins/opencost/README.md @@ -48,18 +48,32 @@ and ``` -## Configuration +## Plugin Configuration -## TODO +Since OpenCost doesn't have any authentication at this point, you just need to give API access to the plugin to access your data. + +If you haven't set up an ingress rule, you can port-forward the API with + +``` +kubectl -n opencost port-forward deployment/opencost 9003 +``` + +Add the following to your `app-config.yaml`: + +```yaml +opencost: + baseUrl: http://localhost:9003 +``` + +## Ideas/Next Steps - More testing - Use the OpenCost mascot for the sidebar logo -- Use the Backstage proxy to communicate with the OpenCost API +- Use the Backstage proxy to communicate with the OpenCost API if necessary for authentication - Convert AllocationReport.js to use the [Backstage Table](https://backstage.io/storybook/?path=/story/data-display-table--default-table) - Allow for user-provided default reports and/or disabling controls - Support multiple hard-coded reports -- Fork(?) to support Kubecost, which could provide Alerts and Recommendations, similar to the Cost Explorer plugin - clean up deprecation warnings and upgrade to all the latest React components -- upgrade sidebar icon to https://mui.com/material-ui/material-icons/?query=money&selected=Savings +- Fork(?) to support Kubecost, which could provide Alerts and Recommendations, similar to the Cost Explorer plugin ![Screenshot](screenshot.png) diff --git a/plugins/opencost/config.d.ts b/plugins/opencost/config.d.ts index 4af53bddce..0ff11bd1ed 100644 --- a/plugins/opencost/config.d.ts +++ b/plugins/opencost/config.d.ts @@ -15,10 +15,13 @@ */ export interface Config { - /** Configurations for the OpenCost plugin */ - openCost: { + /** Configurations for the OpenCost plugin + * opencost config + * @visibility frontend + */ + opencost?: { /** - * The base URL for the OpenCost installation. + * The ppbase URL for the OpenCost API * @visibility frontend */ baseUrl: string; diff --git a/plugins/opencost/package.json b/plugins/opencost/package.json index f14d85e28f..e5de3defa8 100644 --- a/plugins/opencost/package.json +++ b/plugins/opencost/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-opencost", - "version": "0.0.0", + "version": "0.1.0", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", @@ -53,6 +53,8 @@ "msw": "^1.0.0" }, "files": [ - "dist" - ] + "dist", + "config.d.ts" + ], + "configSchema": "config.d.ts" } diff --git a/plugins/opencost/screenshot.png b/plugins/opencost/screenshot.png index e8added76f..432b525cb1 100644 Binary files a/plugins/opencost/screenshot.png and b/plugins/opencost/screenshot.png differ diff --git a/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx b/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx index bf3ea200e2..1fb57d78db 100644 --- a/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx +++ b/plugins/opencost/src/components/OpenCostReport/OpenCostReport.tsx @@ -38,6 +38,7 @@ import { toVerboseTimeRange, } from '../../util'; import { currencyCodes } from '../../constants/currencyCodes'; +import { useApi, configApiRef } from '@backstage/core-plugin-api'; const windowOptions = [ { name: 'Today', value: 'today' }, @@ -177,13 +178,16 @@ export const OpenCostReport = () => { setInit(true); } + const configApi = useApi(configApiRef); + const baseUrl = configApi.getConfig('opencost').getString('baseUrl'); + /* eslint no-console: 0 */ + console.log(`baseUrl:${baseUrl}`); + async function fetchData() { setLoading(true); setErrors([]); try { - // TODO get the baseUrl from the Basecamp config - const baseUrl = 'http://localhost:9003'; const resp = await AllocationService.fetchAllocation( baseUrl, window, @@ -237,7 +241,6 @@ export const OpenCostReport = () => { )} - {init && (
diff --git a/plugins/opencost/src/images/pig.png b/plugins/opencost/src/images/pig.png index 14fe563941..5de5409e87 100644 Binary files a/plugins/opencost/src/images/pig.png and b/plugins/opencost/src/images/pig.png differ