Merge pull request #1308 from syedbarimanjan/feature/1272-add-new-gro…

…up-by-option-in-cost-explorer Feature/1272 add new group by option in cost explorer
tailwarden · Jan 4, 2024 · 93330f3 · 93330f3
2 parents 2a57179 + 40b196e
commit 93330f3
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
@@ -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>

diff --git a/dashboard/components/dashboard/components/cost-explorer/hooks/useCostExplorer.tsx b/dashboard/components/dashboard/components/cost-explorer/hooks/useCostExplorer.tsx
@@ -21,7 +21,8 @@ export type CostExplorerQueryGroupProps =
   | 'service'
   | 'region'
   | 'account'
-  | 'view';
+  | 'view'
+  | 'Resource';
 export type CostExplorerQueryGranularityProps = 'monthly' | 'daily';
 export type CostExplorerQueryDateProps =
   | 'thisMonth'

diff --git a/dashboard/components/dashboard/components/cost-explorer/hooks/useCostExplorerChart.tsx b/dashboard/components/dashboard/components/cost-explorer/hooks/useCostExplorerChart.tsx
@@ -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'
     ]
   };
 

diff --git a/dashboard/components/dashboard/components/resources-manager/hooks/useResourcesManager.tsx b/dashboard/components/dashboard/components/resources-manager/hooks/useResourcesManager.tsx
@@ -11,7 +11,8 @@ export type ResourcesManagerQuery =
   | 'service'
   | 'region'
   | 'account'
-  | 'view';
+  | 'view'
+  | 'Resource';
 
 export type ResourcesManagerGroupBySelectProps = {
   values: ResourcesManagerQuery[];

diff --git a/dashboard/components/select/Select.tsx b/dashboard/components/select/Select.tsx
@@ -23,7 +23,6 @@ function Select({
   function toggle() {
     setIsOpen(!isOpen);
   }
-
   return (
     <div className="relative">
       <div