Merge pull request #1158 from tailwarden/develop

Deploy latest fixes to prod

.github/workflows/hacktoberfest-comment.yml

@@ -0,0 +1,20 @@
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Comment on PR
+        if: ${{ github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'hacktoberfest-accepted') }}
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          token: ${{ secrets.GH_ACTIONS }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            A heartfelt thank you, @${{ github.event.pull_request.user.login }}, for your enthusiastic involvement in Hacktoberfest! To express our gratitude, we've crafted a special virtual badge just for you. Don't hesitate to showcase it on your social media profiles and share the love by mentioning Komiser in your posts. Your contribution means the world to us!
+            ![Image](/images/hacktoberfest-badge.svg)

.goreleaser.yaml

@@ -1,8 +1,8 @@
 before:
   hooks:
-    #- go mod tidy
-    #- go-bindata-assetfs -o internal/api/v1/template.go out/...
-    #- sed -i -e 's/package main/package v1/g' internal/api/v1/template.go
+    - go mod tidy
+    - go-bindata-assetfs -o internal/api/v1/template.go out/...
+    - sed -i -e 's/package main/package v1/g' internal/api/v1/template.go
 builds:
   - env:
       - CGO_ENABLED=0

README.md

@@ -1,7 +1,3 @@
-**Komiser is back 🎉 and we're looking for maintainers to work on the new [roadmap](https://roadmap.tailwarden.com/), if you're interested, join us on our <a href="https://discord.tailwarden.com">Discord</a> community**
-
----
-
 <h1 align="center"><a href="https://www.producthunt.com/posts/komiser-2" target="_blank"><img src="https://cdn.komiser.io/images/Readme-min.png" alt="Amp Logo"></a></h1>
 
 Komiser is an open-source cloud-agnostic resource manager designed to analyze and manage cloud cost, usage, security, and governance all in one place. It integrates seamlessly with multiple cloud providers, including AWS, Azure, Civo, Digital Ocean, OCI, Linode, Tencent, Scaleway and [more](#supported-cloud-providers). Interested? read more about Komiser on our [website](https://komiser.io?utm_source=github&utm_medium=social).
@@ -68,7 +64,7 @@ Komiser is an open source project created to **analyse** and **manage cloud cost
 * Get a deep understanding of **how you spend** on the AWS, Azure, GCP, Civo, DigitalOcean and OCI.
 * Uncover idle and untagged resources, ensuring that no resource goes unnoticed.
 
-<h1 align="center"><img src=".github/images/dashboard.png" alt="Komiser dashboard"></h1>
+<h1 align="center"><img src=".github/images/komiser-dashboard-new.png" alt="Komiser dashboard"></h1>
 
 ## Who is using it?
 Komiser was built with every Cloud Engineer, Developer, DevOps engineer and SRE in mind. We understand that tackling cost savings, security improvements and resource usage analyse efforts can be hard, sometimes just knowing where to start, can be the most challenging part at times. Komiser is here to help those cloud practitioners see their cloud resources and accounts much more clearly. Only with clear insight can timely and efficient actions take place.

dashboard/components/avatar/Avatar.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { allProviders, IntegrationProvider } from '@utils/providerHelper';
+import Avatar from './Avatar';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Avatar> = {
+  title: 'Komiser/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  args: {
+    size: 48
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const AmazonWebServices: Story = {
+  args: {
+    avatarName: allProviders.AWS
+  }
+};
+
+export const GoogleCloudPlatform: Story = {
+  args: {
+    avatarName: allProviders.GCP
+  }
+};
+
+export const DigitalOcean: Story = {
+  args: {
+    avatarName: allProviders.DIGITAL_OCEAN
+  }
+};
+
+export const Azure: Story = {
+  args: {
+    avatarName: allProviders.AZURE
+  }
+};
+
+export const Civo: Story = {
+  args: {
+    avatarName: allProviders.CIVO
+  }
+};
+
+export const Kubernetes: Story = {
+  args: {
+    avatarName: allProviders.KUBERNETES
+  }
+};
+
+export const Linode: Story = {
+  args: {
+    avatarName: allProviders.LINODE
+  }
+};
+
+export const Tencent: Story = {
+  args: {
+    avatarName: allProviders.TENCENT
+  }
+};
+
+export const OCI: Story = {
+  args: {
+    avatarName: allProviders.OCI
+  }
+};
+
+export const Scaleway: Story = {
+  args: {
+    avatarName: allProviders.SCALE_WAY
+  }
+};
+
+export const MongoDBAtlas: Story = {
+  name: 'MongoDB Atlas',
+  args: {
+    avatarName: allProviders.MONGODB_ATLAS
+  }
+};
+
+export const Terraform: Story = {
+  args: {
+    avatarName: allProviders.TERRAFORM
+  }
+};
+
+export const Pulumi: Story = {
+  args: {
+    avatarName: allProviders.PULUMI
+  }
+};
+
+export const Slack: Story = {
+  args: {
+    avatarName: IntegrationProvider.SLACK
+  }
+};
+
+export const Webhook: Story = {
+  args: {
+    avatarName: IntegrationProvider.WEBHOOK
+  }
+};

dashboard/components/avatar/Avatar.tsx

@@ -0,0 +1,22 @@
+import platform, { IntegrationProvider, Provider } from '@utils/providerHelper';
+import Image from 'next/image';
+
+export type AvatarProps = {
+  avatarName: Provider | IntegrationProvider;
+  size?: number;
+};
+
+function Avatar({ avatarName, size = 24 }: AvatarProps) {
+  const src = platform.getImgSrc(avatarName) || 'unknown platform';
+  return (
+    <Image
+      src={src}
+      alt={`${avatarName} logo`}
+      width={size}
+      height={size}
+      className="rounded-full border border-gray-100"
+    />
+  );
+}
+
+export default Avatar;

dashboard/components/cloud-account/components/CloudAccountItem.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
-import providers from '@utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import platform from '@utils/providerHelper';
 import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';
 import CloudAccountStatus from './CloudAccountStatus';
 import More2Icon from '../../icons/More2Icon';
@@ -21,7 +21,7 @@ export default function CloudAccountItem({
   setCloudAccountItem: (cloudAccountItem: CloudAccount) => void;
 }) {
   const optionsRef = useRef<HTMLDivElement | null>(null);
-  const { id, provider, name, status } = account;
+  const { id, provider: cloudProvider, name, status } = account;
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
@@ -47,17 +47,10 @@ export default function CloudAccountItem({
       onClick={() => openModal(account)}
       className="relative my-5 flex w-full items-center gap-4 rounded-lg border-2 border-black-170 bg-white p-6 text-black-900 transition-colors"
     >
-      <Image
-        src={providers.providerImg(provider) as string}
-        alt={`${name} image`}
-        width={150}
-        height={150}
-        className="h-12 w-12 rounded-full"
-      />
-
+      <Avatar avatarName={cloudProvider} size={48} />
       <div className="mr-auto">
         <p className="font-bold">{name}</p>
-        <p className="text-black-300">{providers.providerLabel(provider)}</p>
+        <p className="text-black-300">{platform.getLabel(cloudProvider)}</p>
       </div>
 
       <CloudAccountStatus status={status} />

dashboard/components/cloud-account/components/CloudAccountsLayout.tsx

@@ -1,8 +1,8 @@
 import { NextRouter } from 'next/router';
 import { ReactNode, useContext } from 'react';
 
+import platform, { allProviders } from '@utils/providerHelper';
 import GlobalAppContext from '../../layout/context/GlobalAppContext';
-import Providers, { allProviders } from '../../../utils/providerHelper';
 import { CloudAccount } from '../hooks/useCloudAccounts/useCloudAccount';
 
 type CloudAccountsLayoutProps = {
@@ -73,7 +73,7 @@ function CloudAccountsLayout({
                   >
                     <div className={isActive ? 'ml-[-2px]' : ''}>
                       <p className="w-[188px] truncate">
-                        {Providers.providerLabel(provider)}
+                        {platform.getLabel(provider)}
                       </p>
                     </div>
                   </button>

dashboard/components/cloud-account/components/CloudAccountsSidePanel.tsx

@@ -11,10 +11,8 @@ import OciAccountDetails from '@components/account-details/OciAccountDetails';
 import ScalewayAccountDetails from '@components/account-details/ScalewayAccountDetails';
 import { getPayloadFromForm } from '@utils/cloudAccountHelpers';
 import { ToastProps } from '@components/toast/Toast';
-import providers, {
-  allProviders,
-  Provider
-} from '../../../utils/providerHelper';
+import Avatar from '@components/avatar/Avatar';
+import { allProviders, Provider } from '../../../utils/providerHelper';
 import AwsAccountDetails from '../../account-details/AwsAccountDetails';
 import Button from '../../button/Button';
 import Sidepanel from '../../sidepanel/Sidepanel';
@@ -132,14 +130,7 @@ function CloudAccountsSidePanel({
           <div className="flex flex-wrap-reverse items-center justify-between gap-6 sm:flex-nowrap">
             {cloudAccount && (
               <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
-                <picture className="flex-shrink-0">
-                  <img
-                    src={providers.providerImg(cloudAccount.provider)}
-                    className="h-10 w-10 rounded-full"
-                    alt={cloudAccount.provider}
-                  />
-                </picture>
-
+                <Avatar avatarName={cloudAccount.provider} size={40} />
                 <div className="flex flex-col gap-1">
                   <div className="flex max-w-[14rem] items-center gap-1">
                     <p className="truncate font-medium text-black-900">