added UI for the first page of resource optimization plugin & fixed e…

…ndpoint in config (#2)
jkilzi · Jul 21, 2024 · e22325d · e22325d
1 parent a34eb8a
commit e22325d
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 29 deletions.
diff --git a/workspaces/resource-optimization/app-config.yaml b/workspaces/resource-optimization/app-config.yaml
@@ -45,7 +45,7 @@ integrations:
 
 proxy:
   endpoints:
-    '/resource-optimization/v1':
+    '/cost-management/v1':
       target: https://console.redhat.com/api/cost-management/v1
       changeOrigin: true
       headers:

diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/api/refs.ts b/workspaces/resource-optimization/plugins/resource-optimization/src/api/refs.ts
@@ -0,0 +1,7 @@
+import { Apis } from "@backstage-community/plugin-resource-optimization-common";
+import { createApiRef } from "@backstage/core-plugin-api";
+
+
+export const optimizationsApiRef = createApiRef<Apis.OptimizationsApi>({
+  id: 'plugin.resource-optimization.api',
+});     
diff --git a/...zation/plugins/resource-optimization/src/components/ExampleComponent/ExampleComponent.tsx b/...zation/plugins/resource-optimization/src/components/ExampleComponent/ExampleComponent.tsx
@@ -1,38 +1,213 @@
 import React from 'react';
-import { Typography, Grid } from '@material-ui/core';
+import { Typography, Grid, Chip, Box } from '@material-ui/core';
 import {
   InfoCard,
   Header,
+  HeaderLabel,
+  HeaderTabs,
   Page,
   Content,
   ContentHeader,
-  HeaderLabel,
-  SupportButton,
+  Link, TrendLine,
+  TableColumn, Table,
+  SupportButton, StatusOK, GaugeCard,
+  Select,Progress, ResponseErrorPanel
 } from '@backstage/core-components';
-import { ExampleFetchComponent } from '../ExampleFetchComponent';
+import useAsync from 'react-use/lib/useAsync';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { optimizationsApiRef } from '../../api/refs';
+import { Apis } from "@backstage-community/plugin-resource-optimization-common";
+import { JsonUtils } from "@backstage-community/plugin-resource-optimization-common";
+import { toCamelCaseObjectKeys } from '@backstage-community/plugin-resource-optimization-common/src/utils/json';
+import { RecommendationList, Recommendations } from '@backstage-community/plugin-resource-optimization-common/src/generated/models';
+
+export default {
+  title: 'Plugins/Examples',
+  component: Page,
+};
+
+interface TableData {
+  container: string;
+  project: string;
+  workload: string;
+  workload_type: string;
+  cluster: string;
+  last_reported: string;
+}
+
+export const ExampleComponent = () => {
+
+  const config = useApi(configApiRef);
+  const api = useApi(optimizationsApiRef);
+
+  const { value, loading, error } = useAsync(async () => {
+    return (await api.getRecommendationList({ query: {} })).text();
+  }, []);
+
+  const generateTestData = () => {
+    const data: Array<TableData> = [];
+
+    if(value){
+      const responseData = toCamelCaseObjectKeys<RecommendationList>(JSON.parse(value));
+
+      responseData?.data?.map( (item: Recommendations) => {
+          data.push({
+            container: item.container ? item.container : '',
+            project: item.project ? item.project : '',
+            workload: item.workload ? item.workload : '',
+            workload_type: item.workloadType ? item.workloadType : '',
+            cluster:  item.clusterAlias ? item.clusterAlias : item.clusterUuid ? item.clusterUuid : '',
+            last_reported: '6 hours ago'
+        });
+      })
+    }
 
-export const ExampleComponent = () => (
-  <Page themeId="tool">
-    <Header title="Welcome to resource-optimization!" subtitle="Optional subtitle">
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
+    return data;
+  };
+
+  const columns: TableColumn[] = [
+    {
+      title: 'Container names',
+      highlight: true,
+      render: (row: Partial<TableData>) => (
+        <>
+          <Link to="#message-source">{row.container}</Link>
+        </>
+      ),
+    },
+    {
+      title: 'Project names',
+      render: (row: Partial<TableData>) => (
+        <>
+        <Typography variant="body2">{row.project}</Typography>
+        </>
+      ),
+    },
+    {
+      title: 'Workload names',
+      render: (row: Partial<TableData>) => (
+        <>
+        <Typography variant="body2">{row.workload}</Typography>
+        </>
+      ),
+    },
+    {
+      title: 'Workload types',
+      render: (row: Partial<TableData>) => (
+        <>
+        <Typography variant="body2">{row.workload_type}</Typography>
+        </>
+      ),
+    },
+    {
+      title: 'Cluster names',
+      render: (row: Partial<TableData>) => (
+        <>
+          <Typography variant="body2">{row.cluster}</Typography>
+        </>
+      ),
+    },
+    {
+      title: 'Last reported',
+      render: (row: Partial<TableData>) => (
+        <>
+        <Typography variant="body2">{row.last_reported}</Typography>
+        </>
+      ),
+    }
+  ];
+
+
+  const ExampleHeader = () => (
+    <Header title="Resource Optimization">
     </Header>
-    <Content>
-      <ContentHeader title="Plugin title">
-        <SupportButton>A description of your plugin goes here.</SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <InfoCard title="Information card">
-            <Typography variant="body1">
-              All content should be wrapped in a card like this.
-            </Typography>
-          </InfoCard>
-        </Grid>
-        <Grid item>
-          <ExampleFetchComponent />
-        </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);
+  );
+
+  const SELECT_ITEMS = [
+    {
+      label: 'Cluster 1',
+      value: 'cluster_1',
+    },
+    {
+      label: 'Cluster 2',
+      value: 'cluster_2',
+    },
+    {
+      label: 'Cluster 3',
+      value: 'cluster_3',
+    },
+  ];
+
+  const ClusterFilter = () => (
+    <Select
+      placeholder="All results"
+      label="CLUSTER"
+      items={SELECT_ITEMS}
+      multiple
+      onChange={() => {}}
+    />
+  );
+
+  const ProjectFilter = () => (
+    <Select
+      placeholder="All results"
+      label="PROJECT"
+      items={SELECT_ITEMS}
+      multiple
+      onChange={() => {}}
+    />
+  );
+
+  const WorkloadFilter = () => (
+    <Select
+      placeholder="All results"
+      label="WORKLOAD"
+      items={SELECT_ITEMS}
+      multiple
+      onChange={() => {}}
+    />
+  );
+
+  const TypeFilter = () => (
+    <Select
+      placeholder="All results"
+      label="TYPE"
+      items={SELECT_ITEMS}
+      multiple
+      onChange={() => {}}
+    />
+  );
+
+  return (
+      loading ? 
+      <Progress /> :
+      <div style={{ border: '1px solid #ddd' }}>
+        <Page themeId="tool">
+        <Content >
+            <ExampleHeader />
+            <h2>Filters</h2>
+            <br/>
+            <Grid container direction="row">
+              <Grid item xs={3}>
+
+                  <ClusterFilter />
+                  <ProjectFilter />
+                  <WorkloadFilter />
+                  <TypeFilter />
+
+              </Grid>
+
+              <Grid item xs={9}>
+                <Table
+                  options={{ paging: true, padding: 'dense' }}
+                  data={generateTestData()}
+                  columns={columns}
+                  title="Optimizable containers"
+                />
+              </Grid>
+            </Grid> 
+            </Content>
+        </Page>
+      </div>
+  );
+};
diff --git a/workspaces/resource-optimization/plugins/resource-optimization/src/plugin.ts b/workspaces/resource-optimization/plugins/resource-optimization/src/plugin.ts
@@ -1,12 +1,37 @@
 import {
+  createApiFactory,
   createPlugin,
   createRoutableExtension,
+  discoveryApiRef,
+  fetchApiRef,
 } from '@backstage/core-plugin-api';
+import { Apis } from "@backstage-community/plugin-resource-optimization-common";
 
 import { rootRouteRef } from './routes';
+import { optimizationsApiRef } from './api/refs'
 
 export const resourceOptimizationPlugin = createPlugin({
   id: 'resource-optimization',
+  apis: [
+    createApiFactory({
+      api: optimizationsApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef,
+      },
+      factory({ discoveryApi, fetchApi }) {
+        return new Apis.OptimizationsApiClient({
+          discoveryApi: {
+            async getBaseUrl() {
+              const baseUrl = await discoveryApi.getBaseUrl('proxy');
+              return `${baseUrl}/cost-management/v1`;
+            },
+          },
+          fetchApi,
+        });
+      },
+    }),
+  ],
   routes: {
     root: rootRouteRef,
   },