LFX Mentorship Task : Add Assets Page using Carbon Design System #211
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Implemented the Assets page to display asset data. - Created a new service for fetching assets from the OpenCost API with mock data fallback. - Added constants and configuration for asset types and window options. - Developed CSS styles for the Assets page, including layout, notifications, and table design. - Integrated summary tiles and filter functionality for asset types. Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
… and styling Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
- Updated assets.css for a cleaner billing-dashboard design, including new header controls and cost tiles. - Implemented auto-refresh functionality in Assets.js, allowing assets to refresh every 60 seconds. - Added AssetCostChart component to visualize costs over time. - Improved UI elements such as dropdowns and buttons for better user experience. - Introduced last updated timestamp with auto-refresh indication. - Updated routing to include asset detail view. Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…ement - Implemented a view toggle for switching between table and dashboard visualizations in the Assets page. - Created a new AssetsDashboard component to display asset data in a dashboard format. - Enhanced CSS styles for the dashboard and view toggle buttons for improved UI/UX. - Updated mock asset data generation to include daily cost snapshots for better visualization in the dashboard. Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…real data fallback Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…sistency Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
- Enhanced SidebarNav component to support mobile view with a toggle button. - Added ThemeToggle component for switching between light and dark themes. - Updated AssetCostChart to reflect theme changes dynamically. - Modified AssetsSummaryTiles to improve color consistency. - Refactored CSS styles to utilize CSS variables for theming. - Introduced theme-variables.css for centralized theme management. - Improved chart theming with getChartTheme utility. - Adjusted assets.css for better responsiveness and dark mode support. Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…dling feat: add loading skeleton component for assets page feat: implement currency exchange rate service with live and fallback rates feat: integrate currency selector and CSV export functionality in assets page style: update assets CSS for improved styling and responsiveness Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…data handling Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
- Added `sass` dependency for styling. - Updated `SidebarNav` to use Carbon's `SideNav` and `SideNavLink` components, replacing Material-UI components. - Refactored `Page` and `Assets` components to utilize Carbon's `Loading` and `Dropdown` components. - Replaced Material-UI's `Modal` and `CircularProgress` with Carbon's equivalents in `CloudCostDetails` and `ExternalCostDetails`. - Enhanced `externalCostsControls` and `cloudCostEditControls` to use Carbon's `Dropdown` for selection inputs. - Introduced new window option for "Entire window" in various components. - Updated CSS to override Carbon Design System styles for better integration. - Adjusted routing to include Carbon's `Theme` for consistent theming across the application. Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…de experience Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
- Implemented AllocationService to wrap the /allocation/compute API. - Added window to date helpers for date range calculations. - Created realistic mock data for Kubernetes allocation metrics. - Included methods for generating daily allocation data and handling various aggregation types. - Enhanced error handling to fallback to mock data when the API is unavailable. Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
✅ Deploy Preview for opencost-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…Assets and Allocations pages Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…on components; integrate them into Assets page Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Abhishek-Punhani
force-pushed
the
main
branch
3 times, most recently
from
327282a to
c36290d
Compare
…in Assets and Allocations pages Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
…il components for improved robustness Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR change?
Does this PR relate to any other PRs?
None noted.
How will this PR impact users?
Does this PR address any GitHub or Zendesk issues?
LFX Task Issue #28 #155
How was this PR tested?
Does this PR require changes to documentation?
No doc changes noted.
Have you labeled this PR and its corresponding Issue as "next release" if it should be part of the next OpenCost release? If not, why not?
Yes, this addresses issue #28, which is part of the LFX mentorship coding challenge, and, if the proposal is accepted, should be included in the next release.
2026-02-10.02-56-36.mp4