Enable group_by and filter_by tag. (#1838)

asmasarw · web-flow · commit 861098ca6681 · 2025-11-25T14:40:21.000+02:00
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-backend/src/service/router.test.ts b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-backend/src/service/router.test.ts
@@ -36,6 +36,8 @@ describe('createRouter', () => {
         searchOpenShiftProjects: jest.fn(),
         searchOpenShiftClusters: jest.fn(),
         searchOpenShiftNodes: jest.fn(),
+        getOpenShiftTags: jest.fn(),
+        getOpenShiftTagValues: jest.fn(),
       },
     });
     app = express().use(router);
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/report-clients.api.md b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/report-clients.api.md
@@ -241,6 +241,27 @@ export type OptimizationsApi = Omit<
       links?: any;
     }>
   >;
+  getOpenShiftTags(timeScopeValue?: number): Promise<
+    TypedResponse<{
+      data: string[];
+      meta?: any;
+      links?: any;
+    }>
+  >;
+  getOpenShiftTagValues(
+    tagKey: string,
+    timeScopeValue?: number,
+  ): Promise<
+    TypedResponse<{
+      data: Array<{
+        key: string;
+        values: string[];
+        enabled: boolean;
+      }>;
+      meta?: any;
+      links?: any;
+    }>
+  >;
 };
 
 // @public
@@ -250,6 +271,27 @@ export class OptimizationsClient implements OptimizationsApi {
   getCostManagementReport(
     request: GetCostManagementRequest,
   ): Promise<TypedResponse<CostManagementReport>>;
+  getOpenShiftTags(timeScopeValue?: number): Promise<
+    TypedResponse<{
+      data: string[];
+      meta?: any;
+      links?: any;
+    }>
+  >;
+  getOpenShiftTagValues(
+    tagKey: string,
+    timeScopeValue?: number,
+  ): Promise<
+    TypedResponse<{
+      data: Array<{
+        key: string;
+        values: string[];
+        enabled: boolean;
+      }>;
+      meta?: any;
+      links?: any;
+    }>
+  >;
   // Warning: (ae-forgotten-export) The symbol "RecommendationBoxPlots" needs to be exported by the entry point index.d.ts
   //
   // (undocumented)
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/report.api.md b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/report.api.md
@@ -571,6 +571,27 @@ export type OptimizationsApi = Omit<
       links?: any;
     }>
   >;
+  getOpenShiftTags(timeScopeValue?: number): Promise<
+    TypedResponse<{
+      data: string[];
+      meta?: any;
+      links?: any;
+    }>
+  >;
+  getOpenShiftTagValues(
+    tagKey: string,
+    timeScopeValue?: number,
+  ): Promise<
+    TypedResponse<{
+      data: Array<{
+        key: string;
+        values: string[];
+        enabled: boolean;
+      }>;
+      meta?: any;
+      links?: any;
+    }>
+  >;
 };
 
 // @public
@@ -580,6 +601,27 @@ export class OptimizationsClient implements OptimizationsApi {
   getCostManagementReport(
     request: GetCostManagementRequest,
   ): Promise<TypedResponse<CostManagementReport>>;
+  getOpenShiftTags(timeScopeValue?: number): Promise<
+    TypedResponse<{
+      data: string[];
+      meta?: any;
+      links?: any;
+    }>
+  >;
+  getOpenShiftTagValues(
+    tagKey: string,
+    timeScopeValue?: number,
+  ): Promise<
+    TypedResponse<{
+      data: Array<{
+        key: string;
+        values: string[];
+        enabled: boolean;
+      }>;
+      meta?: any;
+      links?: any;
+    }>
+  >;
   // (undocumented)
   getRecommendationById(
     request: GetRecommendationByIdRequest,
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/src/clients/optimizations/OptimizationsClient.ts b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/src/clients/optimizations/OptimizationsClient.ts
@@ -336,6 +336,78 @@ export class OptimizationsClient implements OptimizationsApi {
     return await this.fetchResourceType(url);
   }
 
+  /**
+   * Get OpenShift tags
+   * @param timeScopeValue - Time scope value (-1 for month-to-date, -2 for previous-month). Defaults to -1.
+   * @returns TypedResponse with array of tag strings
+   */
+  public async getOpenShiftTags(
+    timeScopeValue: number = -1,
+  ): Promise<TypedResponse<{ data: string[]; meta?: any; links?: any }>> {
+    const baseUrl = await this.discoveryApi.getBaseUrl('proxy');
+    const url = `${baseUrl}/cost-management/v1/tags/openshift/?filter[time_scope_value]=${timeScopeValue}&key_only=true&limit=1000`;
+
+    // Get access permission
+    const accessAPIResponse = await this.getAccess();
+
+    if (accessAPIResponse.decision === AuthorizeResult.DENY) {
+      throw new UnauthorizedError();
+    }
+
+    // Get or refresh token
+    if (!this.token) {
+      const { accessToken } = await this.getNewToken();
+      this.token = accessToken;
+    }
+
+    return await this.fetchWithTokenAndRetry<{
+      data: string[];
+      meta?: any;
+      links?: any;
+    }>(url);
+  }
+
+  /**
+   * Get OpenShift tag values for a specific tag key
+   * @param tagKey - The tag key to get values for
+   * @param timeScopeValue - Time scope value (-1 for month-to-date, -2 for previous-month). Defaults to -1.
+   * @returns TypedResponse with array of tag value objects
+   */
+  public async getOpenShiftTagValues(
+    tagKey: string,
+    timeScopeValue: number = -1,
+  ): Promise<
+    TypedResponse<{
+      data: Array<{ key: string; values: string[]; enabled: boolean }>;
+      meta?: any;
+      links?: any;
+    }>
+  > {
+    const baseUrl = await this.discoveryApi.getBaseUrl('proxy');
+    const url = `${baseUrl}/cost-management/v1/tags/openshift/?filter[key]=${encodeURIComponent(
+      tagKey,
+    )}&filter[time_scope_value]=${timeScopeValue}`;
+
+    // Get access permission
+    const accessAPIResponse = await this.getAccess();
+
+    if (accessAPIResponse.decision === AuthorizeResult.DENY) {
+      throw new UnauthorizedError();
+    }
+
+    // Get or refresh token
+    if (!this.token) {
+      const { accessToken } = await this.getNewToken();
+      this.token = accessToken;
+    }
+
+    return await this.fetchWithTokenAndRetry<{
+      data: Array<{ key: string; values: string[]; enabled: boolean }>;
+      meta?: any;
+      links?: any;
+    }>(url);
+  }
+
   private async fetchResourceType(
     url: string,
   ): Promise<
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/src/clients/optimizations/types.ts b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization-common/src/clients/optimizations/types.ts
@@ -66,6 +66,19 @@ export type OptimizationsApi = Omit<
   ): Promise<
     TypedResponse<{ data: Array<{ value: string }>; meta?: any; links?: any }>
   >;
+  getOpenShiftTags(
+    timeScopeValue?: number,
+  ): Promise<TypedResponse<{ data: string[]; meta?: any; links?: any }>>;
+  getOpenShiftTagValues(
+    tagKey: string,
+    timeScopeValue?: number,
+  ): Promise<
+    TypedResponse<{
+      data: Array<{ key: string; values: string[]; enabled: boolean }>;
+      meta?: any;
+      links?: any;
+    }>
+  >;
 };
 
 /**
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/OpenShiftPage.tsx b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/OpenShiftPage.tsx
@@ -70,14 +70,41 @@ export function OpenShiftPage() {
   const [pageSize, setPageSize] = useState(5);
   const [sortField, setSortField] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [tags, setTags] = useState<string[]>([]);
+  const [selectedTag, setSelectedTag] = useState<string>('');
+  const [selectedTagKey, setSelectedTagKey] = useState<string>('');
+  const [selectedTagValue, setSelectedTagValue] = useState<string>('');
+
+  // Fetch tags on first load
+  useAsync(async () => {
+    try {
+      const timeScopeValue = timeRange === 'month-to-date' ? -1 : -2;
+      const response = await api.getOpenShiftTags(timeScopeValue);
+      const tagsData = await response.json();
+      setTags(tagsData.data || []);
+    } catch {
+      // Silently fail if tags can't be loaded
+      setTags([]);
+    }
+  }, [api, timeRange]);
 
   const {
     value: costData,
     loading,
     error,
   } = useAsync(async () => {
+    // Don't make API call if groupBy is 'tag' but no tag is selected
+    if (groupBy === 'tag' && !selectedTag) {
+      return null;
+    }
+
     try {
-      const groupByParam = `group_by[${groupBy}]`;
+      let groupByParam: string;
+      if (groupBy === 'tag') {
+        groupByParam = `group_by[tag:${selectedTag}]`;
+      } else {
+        groupByParam = `group_by[${groupBy}]`;
+      }
 
       let deltaParam = 'cost';
       if (groupBy === 'project' && overheadDistribution === 'distribute') {
@@ -100,7 +127,10 @@ export function OpenShiftPage() {
 
       queryParams[groupByParam] = '*';
 
-      if (filterValue) {
+      // Handle tag filtering differently
+      if (filterBy === 'tag' && selectedTagKey && selectedTagValue) {
+        queryParams[`filter[tag:${selectedTagKey}]`] = selectedTagValue;
+      } else if (filterValue) {
         queryParams[`filter[${filterBy}]`] = filterValue;
       }
 
@@ -139,10 +169,39 @@ export function OpenShiftPage() {
     pageSize,
     sortField,
     sortDirection,
+    selectedTag,
+    filterBy,
+    selectedTagKey,
+    selectedTagValue,
   ]);
 
   const displayData = useMemo(() => {
-    if (!costData) return null;
+    // If costData is null, return empty structure to keep table visible during loading
+    if (!costData) {
+      const today = new Date();
+      const month =
+        timeRange === 'previous-month'
+          ? new Date(
+              today.getFullYear(),
+              today.getMonth() - 1,
+              1,
+            ).toLocaleString('en-US', { month: 'long' })
+          : today.toLocaleString('en-US', { month: 'long' });
+      const endDate =
+        timeRange === 'previous-month'
+          ? new Date(today.getFullYear(), today.getMonth(), 0)
+              .getDate()
+              .toString()
+          : today.getDate().toString();
+
+      return {
+        totalCost: 0,
+        month,
+        endDate,
+        currencyCode: currency,
+        projects: [],
+      };
+    }
 
     const arrayKey = `${groupBy}s` as keyof (typeof costData.data)[0];
     const groupedArray = costData.data?.[0]?.[arrayKey] as
@@ -437,14 +496,6 @@ export function OpenShiftPage() {
     return <ResponseErrorPanel error={error} />;
   }
 
-  if (!displayData) {
-    return (
-      <BasePage pageTitle="" withContentPadding>
-        <div>Loading...</div>
-      </BasePage>
-    );
-  }
-
   return (
     <BasePage pageTitle="" withContentPadding>
       <PageHeader
@@ -474,9 +525,18 @@ export function OpenShiftPage() {
             filterBy={filterBy}
             filterOperation={filterOperation}
             filterValue={filterValue}
+            tags={tags}
             onGroupByChange={value => {
               setGroupBy(value);
               setCurrentPage(0);
+              if (value !== 'tag') {
+                setSelectedTag('');
+              }
+            }}
+            selectedTag={selectedTag}
+            onSelectedTagChange={value => {
+              setSelectedTag(value);
+              setCurrentPage(0);
             }}
             onOverheadDistributionChange={value => {
               setOverheadDistribution(value);
@@ -493,6 +553,11 @@ export function OpenShiftPage() {
             onFilterByChange={value => {
               setFilterBy(value);
               setCurrentPage(0);
+              // Clear tag-related selections when filterBy changes away from 'tag'
+              if (value !== 'tag') {
+                setSelectedTagKey('');
+                setSelectedTagValue('');
+              }
             }}
             onFilterOperationChange={value => {
               setFilterOperation(value);
@@ -502,6 +567,17 @@ export function OpenShiftPage() {
               setFilterValue(value);
               setCurrentPage(0);
             }}
+            selectedTagKey={selectedTagKey}
+            selectedTagValue={selectedTagValue}
+            onSelectedTagKeyChange={value => {
+              setSelectedTagKey(value);
+              setSelectedTagValue('');
+              setCurrentPage(0);
+            }}
+            onSelectedTagValueChange={value => {
+              setSelectedTagValue(value);
+              setCurrentPage(0);
+            }}
           />
         </PageLayout.Filters>
         <PageLayout.Table>
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/AutocompleteComponent.tsx b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/AutocompleteComponent.tsx
@@ -80,7 +80,12 @@ export function AutocompleteComponent(props: AutocompleteComponentProps) {
 
   return (
     <Box className={className ?? classes.root} pb={1} pt={1}>
-      <Typography className={classes.label} variant="button" component="label">
+      <Typography
+        className={classes.label}
+        variant="button"
+        component="label"
+        style={{ textTransform: 'none' }}
+      >
         {label}
       </Typography>
       <Autocomplete
diff --git a/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/Filters.tsx b/workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/Filters.tsx
