Added config file support and updated images

Signed-off-by: Matt Ray <github@mattray.dev>

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)

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;

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"
 }

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 = () => {
           <Warnings warnings={errors} />
         </div>
       )}
-
       {init && (
         <Paper id="report">
           <div className={classes.reportHeader}>