Merge branch 'develop' into dependabot/npm_and_yarn/dashboard/sentry/…

…react-7.77.0
tailwarden · Nov 14, 2023 · 521c58d · 521c58d
2 parents 61e597e + a35c1d0
commit 521c58d
Show file tree

Hide file tree

Showing 29 changed files with 2,076 additions and 1,900 deletions.
diff --git a/dashboard/components/button/Button.mocks.tsx b/dashboard/components/button/Button.mocks.tsx
@@ -8,7 +8,9 @@ const base: ButtonProps = {
   size: 'lg',
   disabled: false,
   loading: false,
-  onClick: () => {}
+  onClick: () => {},
+  href: '',
+  target: ''
 };
 
 const secondary: ButtonProps = {
@@ -63,13 +65,34 @@ const deleteButton: ButtonProps = {
   onClick: () => {}
 };
 
+const linkButton: ButtonProps = {
+  children: 'Link button',
+  asLink: true,
+  style: 'primary',
+  size: 'lg',
+  loading: false,
+  href: 'https://komiser.io'
+};
+
+const newTabLinkButton: ButtonProps = {
+  children: 'New Tab Link button',
+  asLink: true,
+  style: 'secondary',
+  size: 'lg',
+  loading: false,
+  href: 'https://komiser.io',
+  target: '_blank'
+};
+
 const mockButtonProps = {
   base,
   secondary,
   ghost,
   text,
   dropdown,
-  deleteButton
+  deleteButton,
+  linkButton,
+  newTabLinkButton
 };
 
 export default mockButtonProps;
diff --git a/dashboard/components/button/Button.stories.tsx b/dashboard/components/button/Button.stories.tsx
@@ -65,3 +65,15 @@ export const Delete: Story = {
     ...mockButtonProps.deleteButton
   }
 };
+
+export const Link: Story = {
+  args: {
+    ...mockButtonProps.linkButton
+  }
+};
+
+export const NewTabLink: Story = {
+  args: {
+    ...mockButtonProps.newTabLinkButton
+  }
+};
diff --git a/dashboard/components/button/Button.tsx b/dashboard/components/button/Button.tsx
@@ -12,10 +12,14 @@ export type ButtonProps = {
   gap?: 'md';
   transition?: boolean;
   onClick?: (e?: any) => void;
+  asLink?: boolean;
+  href?: string;
+  target?: string;
 };
 
 function Button({
   children,
+  asLink = false,
   type = 'button',
   style = 'primary',
   size = 'md',
@@ -24,7 +28,9 @@ function Button({
   align,
   gap,
   transition = true,
-  onClick
+  onClick,
+  href,
+  target
 }: ButtonProps) {
   const xxs = 'p-1';
   const xs = 'py-2 px-4';
@@ -73,21 +79,37 @@ function Button({
     if (style === 'text') buttonStyle = text;
     if (style === 'dropdown') buttonStyle = dropdown;
     if (style === 'delete') buttonStyle = deleteStyle;
+    if (asLink) buttonStyle = `${buttonStyle} inline-block sm:w-fit-content`;
 
     return buttonStyle;
   }
 
   return (
-    <button
-      type={type}
-      onClick={onClick}
-      className={handleStyle()}
-      disabled={disabled || loading}
-      data-testid={style}
-    >
-      {loading && <LoadingSpinner />}
-      {children}
-    </button>
+    <>
+      {asLink ? (
+        <a
+          onClick={onClick}
+          className={handleStyle()}
+          data-testid={style}
+          href={href}
+          target={target}
+        >
+          {loading && <LoadingSpinner />}
+          {children}
+        </a>
+      ) : (
+        <button
+          type={type}
+          onClick={onClick}
+          className={handleStyle()}
+          disabled={disabled || loading}
+          data-testid={style}
+        >
+          {loading && <LoadingSpinner />}
+          {children}
+        </button>
+      )}
+    </>
   );
 }
 

diff --git a/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx b/dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerCard.tsx
@@ -10,8 +10,11 @@ import {
 import Image from 'next/image';
 import { Dispatch, SetStateAction } from 'react';
 import { Bar } from 'react-chartjs-2';
-import SelectCheckbox from '../../../select-checkbox/SelectCheckbox';
-import Select from '../../../select/Select';
+
+import Button from '@components/button/Button';
+import SelectCheckbox from '@components/select-checkbox/SelectCheckbox';
+import Select from '@components/select/Select';
+import { CloudIcon } from '@components/icons';
 import {
   CostExplorerQueryDateProps,
   CostExplorerQueryGranularityProps,
@@ -115,17 +118,31 @@ function DashboardCostExplorerCard({
       <div className="h-full min-h-[22rem]">
         {chartData && <Bar data={chartData} options={options} />}
         {!chartData && (
-          <div className="relative flex flex-col items-center">
-            <p className="mt-10 text-lg text-black-900">
-              No data for this time period
-            </p>
-            <Image
-              src="/assets/img/others/empty-state-cost-explorer.png"
-              width={940}
-              height={330}
-              alt="No data to display image"
-              className="absolute top-0"
-            />
+          <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">No data for this time period</p>
+                <p className="text-sm text-gray-400 mb-4">
+                  Our cloud version, Tailwarden, supports <br />
+                  historical costs from certain cloud providers
+                </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>
         )}
       </div>

diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
@@ -277,13 +277,14 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
       )}
       <div className="absolute bottom-0 w-full">
         <div className="flex w-full flex-col items-center gap-2 sm:flex-row sm:justify-between">
-          <div className="flex gap-2 overflow-visible bg-black-100 text-black-400">
-            {data?.nodes?.length} Resources
+          <div className="flex items-center gap-2 bg-black-100 text-black-400">
+            <span>{data?.nodes?.length} Resources</span>
             {!dataIsEmpty && (
-              <div className="relative">
+              <div className="relative mt-[2px]">
                 <WarningIcon className="peer" height="16" width="16" />
                 <Tooltip bottom="xs" align="left" width="lg">
-                  Only AWS resources are currently supported on the explorer.
+                  Only AWS and CIVO resources are currently supported on the
+                  explorer.
                 </Tooltip>
               </div>
             )}

diff --git a/dashboard/components/explorer/hooks/useDependencyGraph.tsx b/dashboard/components/explorer/hooks/useDependencyGraph.tsx
@@ -23,7 +23,7 @@ function GetData(res: any) {
         data: {
           label: ele.name,
           service: ele.service,
-          provider: 'AWS',
+          provider: ele.provider,
           id: ele.resourceId,
           isRoot: true
         }
@@ -40,7 +40,7 @@ function GetData(res: any) {
             label: rel.name,
             service: ele.service,
             type: rel.type,
-            provider: 'AWS', // when supporting new provider this could be made dynamic
+            provider: ele.provider,
             isRoot: false
           }
         };