Merge pull request #906 from tailwarden/develop

v3.1.0 release 🚀

.github/workflows/build_test_pr.yml

@@ -33,6 +33,8 @@ jobs:
       - name: Set up Go
         uses: actions/setup-go@v4
         with:
+          cache: true
+          cache-dependency-path: go.sum
           go-version: 1.20.2
 
       # FIXME: https://github.com/golangci/golangci-lint-action/issues/677

README.md

@@ -6,23 +6,29 @@
 
 <h4 align="center">
     <a href="https://discord.tailwarden.com">Discord</a> |
-    <a href="https://github.com/tailwarden/komiser/discussions">Discussions</a> |
-    <a href="https://komiser.io?utm_source=github&utm_medium=social/">Site</a><br/><br/>
+    <a href="https://cloud.tailwarden.com?utm_source=github&utm_medium=social">Tailwarden Cloud</a> |
+    <a href="https://komiser.io?utm_source=github&utm_medium=social/">Website</a><br/><br/>
     <a href="https://docs.komiser.io/docs/introduction/getting-started?utm_source=github&utm_medium=social/">Guide</a> |
     <a href="https://docs.komiser.io/docs/guides/overview?utm_source=github&utm_medium=social">How to Komiser</a> |
-    <a href="https://docs.komiser.io/docs/intro">Docs</a><br/><br/>
+    <a href="https://docs.komiser.io/docs/events">Community Events</a><br/><br/>
     <a href="https://docs.komiser.io/docs/contributing/contribute?utm_source=github&utm_medium=social">Contribute</a> | 
     <a href="https://roadmap.tailwarden.com">Roadmap</a><br/><br/>
 </h4>
 
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=Hmerp_HMEf8">
+    <img src=".github/images/deploy-to-aws.png" width="137" />
+  </a>
+</p>
+
 [![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/tailwarden/komiser/blob/master/LICENSE) [![Docker Stars](https://img.shields.io/docker/pulls/mlabouardy/komiser.svg)](https://hub.docker.com/r/mlabouardy/komiser) 
 [![ELv2 License](https://img.shields.io/badge/license-ELv2-green)](LICENSE) [![Docker Stars](https://img.shields.io/github/issues/tailwarden/komiser.svg)](https://github.com/tailwarden/komiser/issues) [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.tailwarden.com/)
 
 Komiser is an open-source cloud-agnostic resource manager. It integrates with multiple cloud providers (including AWS, Azure, Civo, Digital Ocean, OCI, Linode, Tencent and Scaleway), builds a cloud asset inventory, and helps you break down your cost at the resource level 💰
 
 <h1 align="center"><img src="https://cdn.komiser.io/gifs/readme-komiser-repo.gif?version=latest" alt="Komiser gif"></h1>
 
-*Cloud version is available in private beta, sign in for free at [https://cloud.tailwarden.com](https://cloud.tailwarden.com?utm_source=github&utm_medium=social)*
+The fastest and most reliable way to get started with Komiser is signing up for free to [Tailwarden Cloud](https://cloud.tailwarden.com?utm_source=github&utm_medium=social)
 
 [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/fold_left.svg?style=social&label=Follow%20%40Komiser)](https://twitter.com/komiserdotio) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Optimize%20Cost%20and%20Security%20on%20AWS&url=https://github.com/tailwarden/komiser&via=mlabouardy&hashtags=komiser,aws,gcp,cloud,serverless,devops) 
 
@@ -48,6 +54,7 @@ brew install komiser
     - [Deploy Komiser to single account access EKS cluster (Helm chart)](#deploy-komiser-to-single-account-access-eks-cluster-helm-chart)
     - [Deploy Komiser to a multi account access EKS cluster (Helm chart)](#deploy-komiser-to-a-multi-account-access-eks-cluster-helm-chart)
   - [Installation on Azure](#installation-on-azure)
+  - [Installation on GCP](#installation-on-gcp)
   - [Installation on Civo](#installation-on-civo)
   - [Installation on OCI](#installation-on-oci)
   - [Installation on Digital Ocean](#installation-on-digital-ocean)
@@ -58,7 +65,6 @@ brew install komiser
   - [Jump right in:](#jump-right-in)
 - [Bugs and feature requests 🐞](#bugs-and-feature-requests-)
 - [Roadmap and Contributing 🛣️](#roadmap-and-contributing-️)
-    - [Watch! :](#watch-)
 - [Users 🧑‍🤝‍🧑](#users-)
 - [Versioning 🧮](#versioning-)
 - [Contributors](#contributors)
@@ -67,11 +73,13 @@ brew install komiser
 
 # What is Komiser? 🤷
 Komiser is an open source project created to **analyse** and **manage cloud cost**, **usage**, **security** and **governance** all in one place. With komiser you can also: 
+* Build an inventory of your cloud infrastructure assets.
 * Control your **resource usage** and gain visibility across all used services to achieve maximum cost-effectiveness.
 * Detect **potential vulnerabilities** that could put your cloud environment at risk.
-* Get a deep understanding of **how you spend** on the AWS, Civo, OVH, DigitalOcean and OCI.
+* Get a deep understanding of **how you spend** on the AWS, Azure, GCP, Civo, OVH, DigitalOcean and OCI.
+* Uncover idle and untagged resources, ensuring that no resource goes unnoticed.
 
-<h1 align="center"><img src="https://cdn.komiser.io/images/komiser-readme-wireframe.png?version=latest" alt="Amp Logo"></h1>
+<h1 align="center"><img src=".github/images/dashboard.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.
@@ -100,6 +108,10 @@ Watch the installation [video here](https://www.youtube.com/watch?v=4veDmJpui44&
 
 Connect a local deployment of Komiser CLI to you [**Azure**](https://docs.komiser.io/docs/cloud-providers/azure?utm_source=github&utm_medium=social) account.
 
+## Installation on GCP
+
+Connect a local deployment of Komiser CLI to you [**GCP**](https://docs.komiser.io/docs/cloud-providers/google-cloud-platform?utm_source=github&utm_medium=social) account.
+
 ## Installation on Civo
 
 Connect a local deployment of Komiser CLI to your [**Civo**](https://docs.komiser.io/docs/cloud-providers/civo?utm_source=github&utm_medium=social) account.
@@ -128,7 +140,7 @@ Connect a local deployment of Komiser CLI to you [**Scaleway**](https://docs.kom
 
 # Documentation 📖
 
-Head over to the official `Komiser` documentation at [docs.komiser.io](https://docs.komiser.io?utm_source=github&utm_medium=social). The source repository for the documentation website is [tailwarden/docs](https://github.com/tailwarden/docs). 
+Head over to the official `Komiser` documentation at [docs.komiser.io](https://docs.komiser.io?utm_source=github&utm_medium=social). The source repository for the documentation website is [tailwarden/docs.komiser.io](https://github.com/tailwarden/docs.komiser.io). 
 
 We know that writing docs isn't usually at the top of too many peoples "What I like to do for fun" list, but if you feel so inclined, by all means, consider [contributing](https://docs.komiser.io/docs/contributing/contribute?utm_source=github&utm_medium=social) to our documentation repository, we will be very grateful. It's built using [Docusaurus](https://docusaurus.io/). 
 
@@ -146,12 +158,14 @@ Have a bug or a feature request? Please first read the issue guidelines and sear
 
 # Roadmap and Contributing 🛣️
 
-We are very excited about what is in store in the coming weeks and months, take a look at the [public roadmap](https://tailwarden.canny.io/) to stay on top of what's coming down the pipeline. 
+We are very excited about what is in store in the coming weeks and months, take a look at the [public roadmap](https://roadmap.tailwarden.com/) to stay on top of what's coming down the pipeline. 
 
 Komiser is written in `Golang` and is `Elv2 licensed` - contributions are always welcome whether that means providing feedback, be it through GitHub, through the `#feedback` channel on our [Discord server](https://discord.tailwarden.com) or testing existing and new features. Feel free to check out our [contributor guidelines](./CONTRIBUTING.md) and consider becoming a **contributor** today. 
 
-### Watch! :
-Learn how to contribute with this walkthrough [video](https://www.youtube.com/watch?v=Vn5uc2elcVg)
+Learn how to contribute with this walkthrough videos:
+
+- [How to contributor to Komiser engine](https://www.youtube.com/watch?v=Vn5uc2elcVg)
+- [How to contributor to Komiser dashboard](https://www.youtube.com/watch?v=uwxj11-eRt8)
 
 # Users 🧑‍🤝‍🧑
 

VERSION.md

@@ -0,0 +1,43 @@
+# Komiser Versioning Guidelines
+
+We use the [**SemVer**](https://semver.org/) versioning and maintain our own We follow the guidelines of Semantic Versioning (SemVer) and maintain our own standards on top of it.
+
+## For a Komiser version x.y.z:
+
+> X: Major | Y: Minor | Z: Patch
+
+### Patch releases include
+
+Patch releases incorporate performance and UX improving features without affecting the state in the forms of:
+
+- Minute bug patches
+- Cost coverage enhancements
+- Supporting new cloud resources in the release that are backward compatible
+- Any changes do **NOT** involve dealing with
+  - Persistent state
+  - Database or model changes
+
+### Minor releases include
+
+Minor releases incorporate significant features that maintain backward compatibility by:
+
+- Keeping with the persistent state
+- Handling logic for new as well old cases
+- Database changes but have auto migrations that work with old models as well
+
+### Major releases include
+
+Major releases incorporate significant changes that fall into two main categories:
+
+- Breaking change that is **NOT** backward compatible
+- Huge enhancements that might require a lot of refactoring
+
+> ⛔ We prioritize simplicity in our versioning approach and generally avoid the use of other somewhat complicated versioning labels such as `alpha, beta, and rc`.
+>
+> However, if necessary, we are open to utilizing these labels as well to ensure the most appropriate versioning for our releases.
+
+### Release Schedules
+
+Our ideal release schedule aims to have regular releases once every 2 weeks. The version format will follow the guidelines mentioned above, incorporating the principles of Semantic Versioning (SemVer) and our own additional standards.
+
+This systematic approach ensures clarity and consistency in our versioning process, making it easier for users and enterprises to understand the significance of each release and determine when to upgrade.

dashboard/components/icons/ClearFilterIcon.tsx

@@ -0,0 +1,39 @@
+import { SVGProps } from 'react';
+
+const ClearFilterIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="text-black-400"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+      d="M13.41 20.79L12 21.7c-1.31.81-3.13-.1-3.13-1.72v-5.35c0-.71-.4-1.62-.81-2.12L4.22 8.47c-.51-.51-.91-1.41-.91-2.02V4.13c0-1.21.91-2.12 2.02-2.12h13.34c1.11 0 2.02.91 2.02 2.02v2.22c0 .81-.51 1.82-1.01 2.32"
+    ></path>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+      d="M21.63 14.75c0 .89-.25 1.73-.69 2.45a4.709 4.709 0 01-4.06 2.3 4.73 4.73 0 01-4.06-2.3 4.66 4.66 0 01-.69-2.45c0-2.62 2.13-4.75 4.75-4.75s4.75 2.13 4.75 4.75zM18.15 15.99l-2.51-2.51M18.13 13.51l-2.51 2.51"
+    ></path>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      strokeWidth="1.5"
+      d="M20.69 4.02v2.22c0 .81-.51 1.82-1.01 2.33l-1.76 1.55a4.42 4.42 0 00-1.04-.12c-2.62 0-4.75 2.13-4.75 4.75 0 .89.25 1.73.69 2.45.37.62.88 1.15 1.5 1.53v.34c0 .61-.4 1.42-.91 1.72L12 21.7c-1.31.81-3.13-.1-3.13-1.72v-5.35c0-.71-.41-1.62-.81-2.12L4.22 8.47c-.5-.51-.91-1.42-.91-2.02V4.12C3.31 2.91 4.22 2 5.33 2h13.34c1.11 0 2.02.91 2.02 2.02z"
+    ></path>
+  </svg>
+);
+
+export default ClearFilterIcon;

dashboard/components/inventory/components/InventoryActiveFilters.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { NextRouter } from 'next/router';
 import Button from '../../button/Button';
 import { InventoryFilterData } from '../hooks/useInventory/types/useInventoryTypes';
@@ -6,29 +7,49 @@ import PlusIcon from '../../icons/PlusIcon';
 import useFilterWizard from './filter/hooks/useFilterWizard';
 import useInventory from '../hooks/useInventory/useInventory';
 import InventoryFilterDropdown from './InventoryFilterDropdown';
+import ClearFilterIcon from '../../icons/ClearFilterIcon';
 
 type InventoryActiveFiltersProps = {
   hasFilters: boolean | undefined;
   displayedFilters: InventoryFilterData[] | undefined;
   isNotCustomView: boolean;
   deleteFilter: (idx: number) => void;
   router: NextRouter;
+  children?: ReactNode;
 };
 
 function InventoryActiveFilters({
   hasFilters,
   displayedFilters,
   isNotCustomView,
   deleteFilter,
-  router
+  router,
+  children
 }: InventoryActiveFiltersProps) {
   const { setSkippedSearch } = useInventory();
   const { toggle, isOpen } = useFilterWizard({ router, setSkippedSearch });
 
   return (
-    <>
-      {hasFilters && (
-        <div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg bg-white px-6 py-2">
+    <div className="my-5 flex items-center justify-between rounded-lg bg-white px-6 py-2">
+      {!hasFilters ? (
+        <>
+          <div
+            className="flex w-fit cursor-pointer items-center gap-1 rounded-md border-2 border-dashed border-black-200 border-opacity-60 px-3 py-1"
+            onClick={toggle}
+          >
+            <PlusIcon width={16} height={16} />
+            <span className="font-sans text-sm text-black-400">Filter</span>
+          </div>
+          {isOpen && (
+            <InventoryFilterDropdown
+              position={'top-10'}
+              toggle={toggle}
+              closeDropdownAfterAdd={true}
+            />
+          )}
+        </>
+      ) : (
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
           <div className="h-full text-sm text-black-400">Filters</div>
           {displayedFilters &&
             displayedFilters.map((activeFilter, idx) => (
@@ -61,46 +82,16 @@ function InventoryActiveFilters({
                 style="ghost"
                 onClick={() => router.push(router.pathname)}
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  className="text-black-400"
-                >
-                  <path
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeMiterlimit="10"
-                    strokeWidth="1.5"
-                    d="M13.41 20.79L12 21.7c-1.31.81-3.13-.1-3.13-1.72v-5.35c0-.71-.4-1.62-.81-2.12L4.22 8.47c-.51-.51-.91-1.41-.91-2.02V4.13c0-1.21.91-2.12 2.02-2.12h13.34c1.11 0 2.02.91 2.02 2.02v2.22c0 .81-.51 1.82-1.01 2.32"
-                  ></path>
-                  <path
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeMiterlimit="10"
-                    strokeWidth="1.5"
-                    d="M21.63 14.75c0 .89-.25 1.73-.69 2.45a4.709 4.709 0 01-4.06 2.3 4.73 4.73 0 01-4.06-2.3 4.66 4.66 0 01-.69-2.45c0-2.62 2.13-4.75 4.75-4.75s4.75 2.13 4.75 4.75zM18.15 15.99l-2.51-2.51M18.13 13.51l-2.51 2.51"
-                  ></path>
-                  <path
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeMiterlimit="10"
-                    strokeWidth="1.5"
-                    d="M20.69 4.02v2.22c0 .81-.51 1.82-1.01 2.33l-1.76 1.55a4.42 4.42 0 00-1.04-.12c-2.62 0-4.75 2.13-4.75 4.75 0 .89.25 1.73.69 2.45.37.62.88 1.15 1.5 1.53v.34c0 .61-.4 1.42-.91 1.72L12 21.7c-1.31.81-3.13-.1-3.13-1.72v-5.35c0-.71-.41-1.62-.81-2.12L4.22 8.47c-.5-.51-.91-1.42-.91-2.02V4.12C3.31 2.91 4.22 2 5.33 2h13.34c1.11 0 2.02.91 2.02 2.02z"
-                  ></path>
-                </svg>
+                <ClearFilterIcon />
                 Clear filters
               </Button>
             </div>
           )}
         </div>
       )}
-    </>
+
+      {children}
+    </div>
   );
 }
 

dashboard/components/inventory/components/InventoryHeader.tsx

@@ -2,18 +2,16 @@ import { ReactNode } from 'react';
 
 type InventoryHeaderProps = {
   isNotCustomView: boolean;
-  children: ReactNode;
 };
 
-function InventoryHeader({ isNotCustomView, children }: InventoryHeaderProps) {
+function InventoryHeader({ isNotCustomView }: InventoryHeaderProps) {
   return (
     <div className="flex min-h-[40px] items-center justify-between gap-8">
       {isNotCustomView && (
         <p className="flex items-center gap-2 text-lg font-medium text-black-900">
           All Resources
         </p>
       )}
-      <div className="flex flex-shrink-0 items-center gap-4">{children}</div>
     </div>
   );
 }

dashboard/components/inventory/components/view/InventoryView.tsx

@@ -5,7 +5,6 @@ import providers, { Provider } from '../../../../utils/providerHelper';
 import Button from '../../../button/Button';
 import Checkbox from '../../../checkbox/Checkbox';
 import AlertIcon from '../../../icons/AlertIcon';
-import BookmarkIcon from '../../../icons/BookmarkIcon';
 import Input from '../../../input/Input';
 import Sidepanel from '../../../sidepanel/Sidepanel';
 import SidepanelHeader from '../../../sidepanel/SidepanelHeader';
@@ -87,7 +86,7 @@ function InventoryView({
 
       {/* Alerts button */}
       {router.query.view && (
-        <div className="absolute right-0">
+        <div className="w-fit">
           <Button
             style="secondary"
             size="xs"
@@ -105,10 +104,12 @@ function InventoryView({
 
       {/* Save as a view button */}
       {!router.query.view && (
-        <Button size="sm" onClick={() => openModal(filters)}>
-          <BookmarkIcon width={20} height={20} />
-          Save as a view
-        </Button>
+        <div
+          onClick={() => openModal(filters)}
+          className="cursor-pointer font-sans text-[14px] font-semibold text-komiser-600"
+        >
+          Save as view
+        </div>
       )}
 
       {/* Sidepanel */}