Add Dark-Mode Support for Cost management (#1885)

Author: asmasarw

workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/hooks/useThemeBackgroundColor.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTheme } from '@material-ui/core/styles';
+
+/**
+ * Hook that returns the appropriate background color based on the current theme mode.
+ * @returns Object with backgroundColor and filterTableBackgroundColor strings
+ */
+export const useThemeBackgroundColor = (): {
+  backgroundColor: string;
+  filterTableBackgroundColor: string;
+} => {
+  const theme = useTheme();
+  const isDarkMode = (theme.palette as any).mode === 'dark';
+
+  return {
+    backgroundColor: isDarkMode ? '#292929' : '#FFFFFF',
+    filterTableBackgroundColor: isDarkMode ? '#262626' : '#F2F2F2',
+  };
+};

workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/OpenShiftPage.tsx

@@ -25,7 +25,7 @@ import Typography from '@material-ui/core/Typography';
 import { BasePage } from '../../components/BasePage';
 import { PageLayout } from '../../components/PageLayout';
 import { Filters } from './components/Filters';
-import { Divider } from '@material-ui/core';
+import { Divider, useTheme } from '@material-ui/core';
 import { PageHeader } from './components/PageHeader';
 import { TableToolbar } from './components/TableToolbar';
 import { useApi } from '@backstage/core-plugin-api';
@@ -57,6 +57,31 @@ interface ProjectCost {
   supplementaryCostPercentage: number;
 }
 
+/**
+ * Generates date range text based on time range selection
+ * @param timeRange - 'month-to-date' or 'previous-month'
+ * @returns Formatted string like "December 1-3" or "November 1-30"
+ */
+function getDateRangeText(timeRange: string): string {
+  const now = new Date();
+  const currentMonth = now.getMonth();
+  const currentYear = now.getFullYear();
+  const currentDay = now.getDate();
+
+  if (timeRange === 'month-to-date') {
+    // Current month: MONTH 1-<CURRENT_DAY>
+    const monthName = now.toLocaleString('en-US', { month: 'long' });
+    return `${monthName} 1-${currentDay}`;
+  }
+  // Previous month: PREVIOUS_MONTH 1-<LAST_DAY>
+  const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+  const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+  const prevMonthDate = new Date(prevYear, prevMonth + 1, 0); // Last day of previous month
+  const lastDay = prevMonthDate.getDate();
+  const monthName = prevMonthDate.toLocaleString('en-US', { month: 'long' });
+  return `${monthName} 1-${lastDay}`;
+}
+
 /** @public */
 export function OpenShiftPage() {
   const api = useApi(optimizationsApiRef);
@@ -82,6 +107,8 @@ export function OpenShiftPage() {
     useState(true);
   const [showInfrastructureCost, setShowInfrastructureCost] = useState(false);
   const [showSupplementaryCost, setShowSupplementaryCost] = useState(false);
+  const theme = useTheme();
+  const isDarkMode = (theme.palette as any).mode === 'dark';
 
   // Fetch tags on first load
   useAsync(async () => {
@@ -391,6 +418,12 @@ export function OpenShiftPage() {
     selectedRows.size < displayData.projects.length;
 
   const columns = useMemo<TableColumn<ProjectCost>[]>(() => {
+    const getChangeColor = (change: number) => {
+      if (change > 0) return '#d32f2f';
+      if (isDarkMode) return '#4BB543';
+      return '#2e7d32';
+    };
+
     const cols: TableColumn<ProjectCost>[] = [
       {
         title: (
@@ -482,7 +515,7 @@ export function OpenShiftPage() {
           <div>
             <div
               style={{
-                color: data.monthOverMonthChange > 0 ? '#d32f2f' : '#2e7d32',
+                color: getChangeColor(data.monthOverMonthChange),
               }}
             >
               {Math.abs(data.monthOverMonthChange).toFixed(2)}%
@@ -493,7 +526,7 @@ export function OpenShiftPage() {
                 data.monthOverMonthValue,
                 displayData?.currencyCode || '',
               )}{' '}
-              for January 1-11
+              for {getDateRangeText(timeRange)}
             </div>
           </div>
         ),
@@ -561,8 +594,14 @@ export function OpenShiftPage() {
       sorting: false,
       render: () => (
         <div style={{ display: 'flex', gap: '8px' }}>
-          <DownloadIconButton label="CSV" variant="black" />
-          <DownloadIconButton label="JSON" variant="black" />
+          <DownloadIconButton
+            label="CSV"
+            variant={isDarkMode ? 'white' : 'black'}
+          />
+          <DownloadIconButton
+            label="JSON"
+            variant={isDarkMode ? 'white' : 'black'}
+          />
         </div>
       ),
     });
@@ -579,6 +618,8 @@ export function OpenShiftPage() {
     showMonthOverMonthChange,
     showInfrastructureCost,
     showSupplementaryCost,
+    timeRange,
+    isDarkMode,
   ]);
 
   const handleOrderChange = useCallback(

workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/AutocompleteComponent.tsx

@@ -25,12 +25,13 @@ import {
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
 } from '@material-ui/lab';
+import { useThemeBackgroundColor } from '../../../hooks/useThemeBackgroundColor';
 
 const useAutocompleteStyles = makeStyles(
   {
     root: {},
     label: {},
-    input: { backgroundColor: '#ffffff' },
+    input: { backgroundColor: 'transparent' },
     fullWidth: { width: '100%' },
   },
   { name: 'AutocompleteComponent' },
@@ -77,6 +78,7 @@ type AutocompleteComponentProps = SingleProps | MultipleProps;
 export function AutocompleteComponent(props: AutocompleteComponentProps) {
   const classes = useAutocompleteStyles();
   const { label, options, placeholder, className } = props;
+  const { backgroundColor } = useThemeBackgroundColor();
 
   return (
     <Box className={className ?? classes.root} pb={1} pt={1}>
@@ -111,9 +113,9 @@ export function AutocompleteComponent(props: AutocompleteComponentProps) {
         renderInput={params => (
           <TextField
             {...params}
-            className={classes.input}
             variant="outlined"
             placeholder={placeholder}
+            style={{ backgroundColor }}
           />
         )}
         size="medium"

workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/DownloadIconButton.tsx

@@ -19,11 +19,18 @@ import React from 'react';
 
 type DownloadIconButtonProps = {
   label: string;
-  variant: 'gray' | 'black';
+  variant: 'gray' | 'black' | 'white';
+};
+
+const getColor = (variant: 'gray' | 'black' | 'white') => {
+  if (variant === 'gray') return '#C7C7C7';
+  if (variant === 'black') return '#000000';
+  if (variant === 'white') return '#FFFFFF';
+  return '#C7C7C7';
 };
 
 export function DownloadIconButton(props: Readonly<DownloadIconButtonProps>) {
-  const color = props.variant === 'gray' ? '#C7C7C7' : '#000000';
+  const color = getColor(props.variant);
 
   return (
     <div

workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/Filters.tsx

@@ -25,6 +25,7 @@ import { useApi } from '@backstage/core-plugin-api';
 import { optimizationsApiRef } from '../../../apis';
 import useAsync from 'react-use/lib/useAsync';
 import debounce from 'lodash/debounce';
+import { useThemeBackgroundColor } from '../../../hooks/useThemeBackgroundColor';
 
 const useFiltersStyles = makeStyles(
   theme => ({
@@ -102,6 +103,7 @@ export function Filters(props: FiltersProps) {
   const classes = useFiltersStyles();
   const api = useApi(optimizationsApiRef);
 
+  const { filterTableBackgroundColor } = useThemeBackgroundColor();
   // State for search input and debounced search
   const [searchInput, setSearchInput] = useState<string>('');
   const [debouncedSearch, setDebouncedSearch] = useState<string>('');
@@ -351,7 +353,11 @@ export function Filters(props: FiltersProps) {
         {/* Filter table by */}
         <div className={classes.filterSection}>
           <div
-            style={{ backgroundColor: '#F2F2F2', padding: 16, borderRadius: 8 }}
+            style={{
+              backgroundColor: filterTableBackgroundColor,
+              padding: 16,
+              borderRadius: 8,
+            }}
           >
             <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>
               Filter table by

workspaces/redhat-resource-optimization/plugins/redhat-resource-optimization/src/pages/openshift/components/SelectComponent.tsx

@@ -22,6 +22,7 @@ import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { useThemeBackgroundColor } from '../../../hooks/useThemeBackgroundColor';
 
 const useSelectStyles = makeStyles(
   {
@@ -30,7 +31,7 @@ const useSelectStyles = makeStyles(
     formControl: {
       width: '100%',
       marginTop: 5,
-      backgroundColor: '#ffffff',
+      backgroundColor: 'transparent',
     },
   },
   {
@@ -55,6 +56,7 @@ type SelectProps = {
 /** @public */
 export function SelectComponent(props: SelectProps) {
   const classes = useSelectStyles();
+  const { backgroundColor } = useThemeBackgroundColor();
   const {
     label,
     options,
@@ -73,6 +75,7 @@ export function SelectComponent(props: SelectProps) {
         className={classes.formControl}
         variant="outlined"
         hiddenLabel
+        style={{ backgroundColor }}
       >
         <Select
           displayEmpty