Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/1272 add new group by option in cost explorer #1308

Merged
merged 6 commits into from
Jan 4, 2024
Merged

Feature/1272 add new group by option in cost explorer #1308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
71f88b1
feat(ui): add new group-by option
syedbarimanjan Jan 1, 2024
33c25ed
feat(ui): add group-by-resource state to cost explorer widget
syedbarimanjan Jan 1, 2024
a8a8c1f
style: remove console logs
syedbarimanjan Jan 1, 2024
6eb8f2e
Merge branch 'develop' into feature/1272-add-new-group-by-option-in-c…
Azanul Jan 2, 2024
903bce3
Merge branch 'develop' into feature/1272-add-new-group-by-option-in-c…
Azanul Jan 3, 2024
40b196e
Merge branch 'develop' into feature/1272-add-new-group-by-option-in-c…
mlabouardy Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,39 @@ function DashboardCostExplorerCard({
<div className="mt-8"></div>
<div className="h-full min-h-[22rem]">
{chartData && <Bar data={chartData} options={options} />}
{!chartData && (
{/* ⤵ will be removed when cost is supported at Resource level */}
{queryGroup === 'Resource' && (
<div className="relative flex flex-col items-center bg-empty-cost-explorer h-[330px] w-full">
<div className="mt-10 text-lg text-black-900 border border-gray-200 px-8 py-6 flex bg-white">
<div>
<p className="text-lg">
Cost at resource level not yet supported
</p>
<p className="text-sm text-gray-400 mb-4">
We recommend our cloud version, Tailwarden, <br />
as it supports accurate costs at the resource level
</p>

<Button
size="sm"
gap="md"
asLink
href="https://tailwarden.com/?utm_source=komiser"
target="_blank"
>
<CloudIcon width="24" /> Discover Tailwarden
</Button>
</div>
<Image
src="/assets/img/purplin/rocket.svg"
alt="Purplin on a Rocket"
width="115"
height="124"
/>
</div>
</div>
)}
{!chartData && queryGroup !== 'Resource' && (
<div className="relative flex flex-col items-center bg-empty-cost-explorer h-[330px] w-full">
<div className="mt-10 text-lg text-black-900 border border-gray-200 px-8 py-6 flex bg-white">
<div>
Expand Down
3 changes: 2 additions & 1 deletion dashboard/components/dashboard/components/cost-explorer/hooks/useCostExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export type CostExplorerQueryGroupProps =
| 'service'
| 'region'
| 'account'
| 'view';
| 'view'
| 'Resource';
export type CostExplorerQueryGranularityProps = 'monthly' | 'daily';
export type CostExplorerQueryDateProps =
| 'thisMonth'
Expand Down
5 changes: 3 additions & 2 deletions dashboard/components/dashboard/components/cost-explorer/hooks/useCostExplorerChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,13 @@ function useCostExplorerChart({
}; */

const groupBySelect: GroupBySelectProps = {
values: ['provider', 'service', 'region', 'account'],
values: ['provider', 'service', 'region', 'account','Resource'],
displayValues: [
'Cloud provider',
'Cloud service',
'Cloud region',
'Cloud account'
'Cloud account',
'Resource'
]
};

Expand Down
3 changes: 2 additions & 1 deletion dashboard/components/dashboard/components/resources-manager/hooks/useResourcesManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ export type ResourcesManagerQuery =
| 'service'
| 'region'
| 'account'
| 'view';
| 'view'
| 'Resource';

export type ResourcesManagerGroupBySelectProps = {
values: ResourcesManagerQuery[];
Expand Down
1 change: 0 additions & 1 deletion dashboard/components/select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ function Select({
function toggle() {
setIsOpen(!isOpen);
}

return (
<div className="relative">
<div
Expand Down