Merge branch 'main' into feat/mssql-db

Signed-off-by: Tal <[email protected]>

.github/workflows/release.yml

@@ -0,0 +1,27 @@
+name: Keep Release
+
+on:
+  workflow_dispatch:
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    concurrency: release
+    permissions:
+      id-token: write
+      contents: write
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+        persist-credentials: false
+
+    - name: Release Keep
+      uses: python-semantic-release/[email protected]
+      env:
+        GH_TOKEN: ${{ secrets.SHAHAR_PAT }}
+      with:
+        git_committer_name: Keep Release Bot
+        git_committer_email: [email protected]
+        github_token: ${{ secrets.SHAHAR_PAT }}

.gitignore

@@ -172,8 +172,10 @@ keep.yaml
 providers.yaml
 .vercel
 keepstate.json
+
 # keep single tenant id
 e1faa321-35df-486b-8fa8-3601ee714011*
+
 # sqlite db
 *.sqlite3
 state/*

CHANGELOG.md

@@ -0,0 +1,25 @@
+# CHANGELOG
+{% if context.history.unreleased | length > 0 %}
+
+{# UNRELEASED #}
+## Unreleased
+{% for type_, commits in context.history.unreleased | dictsort %}
+### {{ type_ | capitalize }}
+{% for commit in commits %}{% if type_ != "unknown" %}
+* {{ commit.commit.message.rstrip() }} ([`{{ commit.commit.hexsha[:7] }}`]({{ commit.commit.hexsha | commit_hash_url }}))
+{% else %}
+* {{ commit.commit.message.rstrip() }} ([`{{ commit.commit.hexsha[:7] }}`]({{ commit.commit.hexsha | commit_hash_url }}))
+{% endif %}{% endfor %}{% endfor %}
+
+{% endif %}
+
+{# RELEASED #}
+{% for version, release in context.history.released.items() %}
+## {{ version.as_tag() }} ({{ release.tagged_date.strftime("%Y-%m-%d") }})
+{% for type_, commits in release["elements"] | dictsort %}
+### {{ type_ | capitalize }}
+{% for commit in commits %}{% if type_ != "unknown" %}
+* {{ commit.commit.message.rstrip() }} ([`{{ commit.commit.hexsha[:7] }}`]({{ commit.commit.hexsha | commit_hash_url }}))
+{% else %}
+* {{ commit.commit.message.rstrip() }} ([`{{ commit.commit.hexsha[:7] }}`]({{ commit.commit.hexsha | commit_hash_url }}))
+{% endif %}{% endfor %}{% endfor %}{% endfor %}

docker/Dockerfile.ui

@@ -32,9 +32,13 @@ RUN npm run build
 # Production image, copy all the files and run next
 FROM base AS runner
 ARG GIT_COMMIT_HASH=local
+ARG KEEP_VERSION=local
+
 WORKDIR /app
 # Inject the git commit hash into the build
+# This is being injected from the build script
 ENV GIT_COMMIT_HASH=${GIT_COMMIT_HASH}
+ENV KEEP_VERSION=${KEEP_VERSION}
 
 
 

examples/workflows/new_github_stars.yml

@@ -1,41 +1,42 @@
-# Alert when there are new GitHub Stars utilizing keepstate
-workflow:
-  id: new-github-stars
-  description: Notify Slack about new GitHub star for keephq/keep
-  triggers:
-    - type: interval
-      value: 300
-  steps:
-    - name: get-github-stars
-      provider:
-        type: github.stars
-        config: "{{ providers.github }}"
-        with:
-          repository: "keephq/keep"
-          previous_stars_count:
-            key: "{{ state.new-github-stars.-1.workflow_context.steps_context.get-github-stars.results.stars }}"
-            default: 0
-  actions:
-    - name: trigger-slack
-      condition:
-      - name: assert-condition
+id: new-github-stars
+description: Notify Slack about new GitHub star for keephq/keep
+triggers:
+  - type: manual
+  - type: interval
+    value: 300
+steps:
+  - name: get-github-stars
+    provider:
+      config: "{{ providers.github }}"
+      type: github.stars
+      with:
+        previous_stars_count:
+          default: 0
+          key: "{{ last_workflow_results.get-github-stars.0.stars }}"
+        repository: keephq/keep
+actions:
+  - condition:
+      - assert: "{{ steps.get-github-stars.results.new_stargazers_count }} > 0"
+        name: assert-condition
         type: assert
-        assert: "{{ steps.get-github-stars.results.new_stargazers_count }} > 0" # if there are more than 0 new stargazers, trigger the action
-      provider:
-        type: slack
-        config: " {{ providers.slack-demo }} "
-        with:
-          blocks:
-            - type: section
-              text:
-                type: plain_text
-                text: There are new keep.len({{ steps.get-github-stars.results.new_stargazers }}) stargazers for keephq/keep
-                emoji: true
-            - type: section
-              text:
-                type: plain_text
-                text: |-
-                  {{#steps.get-github-stars.results.new_stargazers}}
-                  - {{username}} at {{starred_at}}
-                  {{/steps.get-github-stars.results.new_stargazers}}
-                emoji: true
+    name: trigger-slack
+    provider:
+      config: "{{ providers.slack-demo }}"
+      type: slack
+      with:
+        blocks:
+          - text:
+              emoji: true
+              text: There are new keep.len({{ steps.get-github-stars.results.new_stargazers}}) stargazers for keephq/keep
+              type: plain_text
+            type: section
+          - text:
+              emoji: true
+              text: "{{#steps.get-github-stars.results.new_stargazers}}
+
+                - {{username}} at {{starred_at}}
+
+                {{/steps.get-github-stars.results.new_stargazers}}"
+              type: plain_text
+            type: section
+        channel: "C06N0KXXXX"

keep-ui/app/alerts/ColumnSelection.tsx

@@ -83,6 +83,7 @@ export default function ColumnSelection({
     closePopover();
   };
 
+
   return (
     <Popover as={Fragment}>
       {({ close }) => (

keep-ui/app/alerts/ThemeSelection.tsx

@@ -0,0 +1,123 @@
+import React, { useState, Fragment, useRef, FormEvent } from 'react';
+import { Popover } from '@headlessui/react';
+import { Button, Tab, TabGroup, TabList, TabPanels, TabPanel } from "@tremor/react";
+import { IoColorPaletteOutline } from 'react-icons/io5';
+import { FloatingArrow, arrow, offset, useFloating } from "@floating-ui/react";
+
+const predefinedThemes = {
+  Transparent: {
+    critical: 'bg-white',
+    high: 'bg-white',
+    warning: 'bg-white',
+    low: 'bg-white',
+    info: 'bg-white'
+  },
+  Keep: {
+    critical: 'bg-orange-400', // Highest opacity for critical
+    high: 'bg-orange-300',
+    warning: 'bg-orange-200',
+    low: 'bg-orange-100',
+    info: 'bg-orange-50' // Lowest opacity for info
+  },
+  Basic: {
+    critical: 'bg-red-200',
+    high: 'bg-orange-200',
+    warning: 'bg-yellow-200',
+    low: 'bg-green-200',
+    info: 'bg-blue-200'
+  }
+};
+
+const themeKeyMapping = {
+  0: 'Transparent',
+  1: 'Keep',
+  2: 'Basic'
+};
+type ThemeName = keyof typeof predefinedThemes;
+
+export const ThemeSelection = ({ onThemeChange }: { onThemeChange: (theme: any) => void }) => {
+  const arrowRef = useRef(null);
+  const [selectedTab, setSelectedTab] = useState<ThemeName>('Transparent');
+
+  const { refs, floatingStyles, context } = useFloating({
+    strategy: "fixed",
+    placement: "bottom-end",
+    middleware: [offset({ mainAxis: 10 }), arrow({ element: arrowRef })],
+  });
+
+  const handleThemeChange = (event: any) => {
+    const themeIndex = event as 0 | 1 | 2;
+    handleApplyTheme(themeIndex as 0 | 1 | 2);
+  };
+
+
+
+
+  const handleApplyTheme = (themeKey: keyof typeof themeKeyMapping) => {
+    const themeName = themeKeyMapping[themeKey];
+    setSelectedTab(themeName as ThemeName);
+};
+
+
+
+  const onApplyTheme = (close: () => void) => {
+    // themeName is now assured to be a key of predefinedThemes
+    const themeName: ThemeName = selectedTab;
+    const newTheme = predefinedThemes[themeName]; // This should now be error-free
+    onThemeChange(newTheme);
+    setSelectedTab('Transparent'); // Assuming 'Transparent' is a valid key
+    close(); // Close the popover
+  };
+
+  return (
+    <Popover as={Fragment}>
+      {({ close }) => (
+        <>
+          <Popover.Button
+            as={Button}
+            variant="light"
+            color="gray"
+            icon={IoColorPaletteOutline}
+            ref={refs.setReference}
+            className="ml-2"
+          />
+          <Popover.Overlay className="fixed inset-0 bg-black opacity-30 z-20" />
+          <Popover.Panel
+            className="bg-white z-30 p-4 rounded-sm"
+            ref={refs.setFloating}
+            style={{ ...floatingStyles, minWidth: '250px' }} // Adjust width here
+          >
+            <FloatingArrow
+              className="fill-white [&>path:last-of-type]:stroke-white"
+              ref={arrowRef}
+              context={context}
+            />
+            <span className="text-gray-400 text-sm">Set theme colors</span>
+            <TabGroup onChange={handleThemeChange}>
+              <TabList color="orange">
+                <Tab>Transparent</Tab>
+                <Tab>Keep</Tab>
+                <Tab>Basic</Tab>
+              </TabList>
+              <TabPanels>
+                {Object.keys(predefinedThemes).map(themeName => (
+                  <TabPanel key={themeName}>
+                    {Object.entries(predefinedThemes[themeName as keyof typeof predefinedThemes]).map(([severity, color]) => (
+                      <div key={severity} className="flex justify-between items-center my-2">
+                        <span>{severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase()}</span>
+                        <div className={`w-6 h-6 rounded-full border border-gray-400 ${color}`}></div>
+                      </div>
+                    ))}
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </TabGroup>
+             <Button className="mt-5" color="orange" onClick={() => onApplyTheme(close)}>
+              Apply theme
+            </Button>
+          </Popover.Panel>
+        </>
+      )}
+    </Popover>
+  );
+};

keep-ui/app/alerts/TitleAndFilters.tsx

@@ -3,17 +3,24 @@ import { DateRangePicker, DateRangePickerValue, Title } from "@tremor/react";
 import { AlertDto } from "./models";
 import ColumnSelection from "./ColumnSelection";
 import { LastRecieved } from "./LastReceived";
+import { ThemeSelection } from './ThemeSelection';
+
+type Theme = {
+  [key: string]: string;
+};
 
 type TableHeaderProps = {
   presetName: string;
   alerts: AlertDto[];
   table: Table<AlertDto>;
+  onThemeChange: (newTheme: Theme) => void;
 };
 
 export const TitleAndFilters = ({
   presetName,
   alerts,
   table,
+  onThemeChange,
 }: TableHeaderProps) => {
   const onDateRangePickerChange = ({
     from: start,
@@ -46,7 +53,10 @@ export const TitleAndFilters = ({
           onValueChange={onDateRangePickerChange}
           enableYearNavigation
         />
-        <ColumnSelection table={table} presetName={presetName} />
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <ColumnSelection table={table} presetName={presetName} />
+          <ThemeSelection onThemeChange={onThemeChange} />
+        </div>
         <LastRecieved />
       </div>
     </div>

keep-ui/app/alerts/ViewAlertModal.tsx

@@ -0,0 +1,40 @@
+import { AlertDto } from "./models"; // Adjust the import path as needed
+import Modal from "@/components/ui/Modal"; // Ensure this path matches your project structure
+import { Button } from "@tremor/react";
+import { toast } from "react-toastify";
+
+interface ViewAlertModalProps {
+  alert: AlertDto | null | undefined;
+  handleClose: () => void;
+}
+
+export const ViewAlertModal: React.FC<ViewAlertModalProps> = ({ alert, handleClose }) => {
+  const isOpen = !!alert;
+
+  const handleCopy = async () => {
+    if (alert) {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(alert, null, 2));
+        toast.success("Alert copied to clipboard!");
+      } catch (err) {
+        toast.error("Failed to copy alert.");
+      }
+    }
+  };
+
+  return (
+    <Modal onClose={handleClose} isOpen={isOpen} className="overflow-visible max-w-fit">
+      <div className="flex justify-between items-center">
+        <h2 className="text-lg font-semibold">Alert Details</h2>
+        <Button onClick={handleCopy} color="orange">
+          Copy to Clipboard
+        </Button>
+      </div>
+      {alert && (
+        <pre className="p-2 bg-gray-100 rounded mt-2 overflow-auto">
+          {JSON.stringify(alert, null, 2)}
+        </pre>
+      )}
+    </Modal>
+  );
+};

keep-ui/app/alerts/alert-history.tsx

@@ -49,8 +49,8 @@ const AlertHistoryPanel = ({
   return (
     <Fragment>
       <Flex alignItems="center" justifyContent="between">
-        <div>
-          <Title>History of: {alertsHistoryWithDate.at(0)?.name}</Title>
+        <div className="w-11/12">
+          <Title className="truncate">History of: {alertsHistoryWithDate.at(0)?.name}</Title>
           <Subtitle>
             Showing: {alertsHistoryWithDate.length} alerts (1000 maximum)
           </Subtitle>