@oneuptime/common 10.7.1 → 10.8.0

package/Types/Telemetry/ServiceType.ts

@@ -14,6 +14,9 @@ enum ServiceType {
   Host = "Host",
   DockerHost = "DockerHost",
   KubernetesCluster = "KubernetesCluster",
+  ServerlessFunction = "ServerlessFunction",
+  CloudResource = "CloudResource",
+  RealUserMonitor = "RealUserMonitor",
   /*
    * Telemetry that arrived without an OTel service.name and with no
    * host / docker / k8s resource signal. Instead of synthesising a

package/Types/Workflow/ComponentID.ts

@@ -19,6 +19,7 @@ enum ComponentID {
   SendEmail = "send-email",
   IfElse = "if-else",
   WorkflowRun = "workflow-run",
+  Sleep = "sleep",
 }
 
 export default ComponentID;

package/Types/Workflow/Components/Sleep.ts

@@ -0,0 +1,71 @@
+import IconProp from "../../Icon/IconProp";
+import ComponentID from "../ComponentID";
+import ComponentMetadata, {
+  ComponentInputType,
+  ComponentType,
+} from "./../Component";
+
+const components: Array<ComponentMetadata> = [
+  {
+    id: ComponentID.Sleep,
+    title: "Sleep",
+    category: "Utils",
+    description:
+      "Pause the workflow for a specified duration, then continue with the next steps. The workflow is suspended while sleeping and does not consume a worker — it resumes automatically when the sleep is over.",
+    iconProp: IconProp.Clock,
+    componentType: ComponentType.Component,
+    arguments: [
+      {
+        type: ComponentInputType.Number,
+        name: "Days",
+        description: "Number of days to sleep. Optional. Defaults to 0.",
+        required: false,
+        id: "days",
+        placeholder: "0",
+      },
+      {
+        type: ComponentInputType.Number,
+        name: "Hours",
+        description: "Number of hours to sleep. Optional. Defaults to 0.",
+        required: false,
+        id: "hours",
+        placeholder: "0",
+      },
+      {
+        type: ComponentInputType.Number,
+        name: "Minutes",
+        description: "Number of minutes to sleep. Optional. Defaults to 0.",
+        required: false,
+        id: "minutes",
+        placeholder: "0",
+      },
+      {
+        type: ComponentInputType.Number,
+        name: "Seconds",
+        description: "Number of seconds to sleep. Optional. Defaults to 0.",
+        required: false,
+        id: "seconds",
+        placeholder: "0",
+      },
+    ],
+    returnValues: [],
+    inPorts: [
+      {
+        title: "In",
+        description:
+          "Please connect components to this port for this component to work.",
+        id: "in",
+      },
+    ],
+    outPorts: [
+      {
+        title: "Out",
+        description:
+          "Connect components to this port to run them after the sleep is over.",
+        id: "out",
+      },
+    ],
+  },
+];
+
+export default components;

package/Types/Workflow/Components.ts

@@ -11,6 +11,7 @@ import ManualComponents from "./Components/Manual";
 import MicrosoftTeamsComponents from "./Components/MicrosoftTeams";
 import ScheduleComponents from "./Components/Schedule";
 import SlackComponents from "./Components/Slack";
+import SleepComponents from "./Components/Sleep";
 import TelegramComponents from "./Components/Telegram";
 import WebhookComponents from "./Components/Webhook";
 import WorkflowComponents from "./Components/Workflow";
@@ -30,6 +31,7 @@ const components: Array<ComponentMetadata> = [
   ...WorkflowComponents,
   ...ManualComponents,
   ...MicrosoftTeamsComponents,
+  ...SleepComponents,
 ];
 
 export default components;

package/Types/Workflow/WorkflowStatus.ts

@@ -1,6 +1,7 @@
 enum WorkflowStatus {
   Scheduled = "Scheduled",
   Running = "Running",
+  Waiting = "Waiting",
   Success = "Success",
   Error = "Error",
   Timeout = "Timeout",

package/UI/Components/BulkUpdate/BulkLabelActions.tsx

@@ -7,12 +7,15 @@ import IconProp from "../../../Types/Icon/IconProp";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import ListResult from "../../../Types/BaseDatabase/ListResult";
+import Includes from "../../../Types/BaseDatabase/Includes";
 import ObjectID from "../../../Types/ObjectID";
 import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import ProjectUtil from "../../Utils/Project";
 import { ButtonStyleType } from "../Button/Button";
 import BasicFormModal from "../FormModal/BasicFormModal";
+import Modal from "../Modal/Modal";
+import { DropdownOption } from "../Dropdown/Dropdown";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import {
   BulkActionButtonSchema,
@@ -50,6 +53,17 @@ function useBulkLabelActions<T extends BaseModel>(
   const [bulkActionProps, setBulkActionProps] =
     useState<BulkActionOnClickProps<T> | null>(null);
 
+  /*
+   * For "Remove Labels" we only want to offer labels that are actually
+   * attached to the selected items (not every label in the project). These
+   * are computed from the selected items each time the remove modal opens.
+   */
+  const [removeLabelDropdownOptions, setRemoveLabelDropdownOptions] = useState<
+    Array<DropdownOption>
+  >([]);
+  const [isLoadingRemoveLabels, setIsLoadingRemoveLabels] =
+    useState<boolean>(false);
+
   useEffect(() => {
     const fetchLabels: () => Promise<void> = async (): Promise<void> => {
       try {
@@ -187,13 +201,106 @@ function useBulkLabelActions<T extends BaseModel>(
     setBulkActionProps(null);
   };
 
-  const labelDropdownOptions: Array<{ label: string; value: string }> =
-    labels.map((label: Label) => {
-      return {
+  /*
+   * Build the dropdown options for the "Remove Labels" modal from only the
+   * labels actually attached to the selected items. We fetch the selected
+   * items (by id) with their labels and take the de-duplicated union, so the
+   * modal offers only labels that can really be removed instead of every
+   * label in the project.
+   */
+  const loadLabelsForSelectedItems: (
+    items: Array<T>,
+  ) => Promise<void> = async (items: Array<T>): Promise<void> => {
+    setIsLoadingRemoveLabels(true);
+
+    try {
+      const itemIds: Array<string> = items
+        .map((item: T) => {
+          return item.id?.toString() || "";
+        })
+        .filter((id: string) => {
+          return id.length > 0;
+        });
+
+      if (itemIds.length === 0) {
+        setRemoveLabelDropdownOptions([]);
+        return;
+      }
+
+      const result: ListResult<T> = await ModelAPI.getList<T>({
+        modelType: config.modelType,
+        query: {
+          _id: new Includes(itemIds),
+        } as any,
+        limit: LIMIT_PER_PROJECT,
+        skip: 0,
+        select: {
+          labels: {
+            _id: true,
+            name: true,
+            color: true,
+          },
+        } as any,
+        sort: {},
+      });
+
+      // Union of labels across all selected items, de-duplicated by id.
+      const labelById: Map<string, Label> = new Map<string, Label>();
+
+      for (const item of result.data) {
+        const itemLabels: Array<Label> =
+          ((item as any).labels as Array<Label> | undefined) || [];
+
+        for (const label of itemLabels) {
+          const id: string = label._id?.toString() || "";
+          if (id.length > 0) {
+            labelById.set(id, label);
+          }
+        }
+      }
+
+      const options: Array<DropdownOption> = Array.from(
+        labelById.values(),
+      ).map((label: Label) => {
+        const option: DropdownOption = {
+          label: label.name || "",
+          value: label._id?.toString() || "",
+        };
+
+        if (label.color) {
+          option.color = label.color;
+        }
+
+        return option;
+      });
+
+      options.sort((a: DropdownOption, b: DropdownOption) => {
+        return a.label.localeCompare(b.label);
+      });
+
+      setRemoveLabelDropdownOptions(options);
+    } catch {
+      // on error, show no options rather than every label in the project
+      setRemoveLabelDropdownOptions([]);
+    } finally {
+      setIsLoadingRemoveLabels(false);
+    }
+  };
+
+  const labelDropdownOptions: Array<DropdownOption> = labels.map(
+    (label: Label) => {
+      const option: DropdownOption = {
         label: label.name || "",
         value: label._id?.toString() || "",
       };
-    });
+
+      if (label.color) {
+        option.color = label.color;
+      }
+
+      return option;
+    },
+  );
 
   const addLabelsAction: BulkActionButtonSchema<T> = {
     title: "Add Labels",
@@ -211,10 +318,21 @@ function useBulkLabelActions<T extends BaseModel>(
     icon: IconProp.Close,
     onClick: async (actionProps: BulkActionOnClickProps<T>): Promise<void> => {
       setBulkActionProps(actionProps);
+      setRemoveLabelDropdownOptions([]);
       setShowRemoveModal(true);
+      await loadLabelsForSelectedItems(actionProps.items);
     },
   };
 
+  const closeRemoveModal: () => void = (): void => {
+    setShowRemoveModal(false);
+    setBulkActionProps(null);
+    setRemoveLabelDropdownOptions([]);
+  };
+
+  const hasNoLabelsToRemove: boolean =
+    !isLoadingRemoveLabels && removeLabelDropdownOptions.length === 0;
+
   const modals: ReactElement = (
     <>
       {showAddModal && (
@@ -247,35 +365,44 @@ function useBulkLabelActions<T extends BaseModel>(
         />
       )}
 
-      {showRemoveModal && (
-        <BasicFormModal
-          title="Remove Labels"
-          description="Select labels to remove from the selected items. Items that do not have any of these labels will be skipped."
-          onClose={() => {
-            setShowRemoveModal(false);
-            setBulkActionProps(null);
-          }}
-          submitButtonText="Remove Labels"
-          onSubmit={async (formData: { labelIds: Array<string> }) => {
-            await applyLabels(formData.labelIds || [], "remove");
-          }}
-          formProps={{
-            fields: [
-              {
-                field: {
-                  labelIds: true,
+      {showRemoveModal &&
+        (hasNoLabelsToRemove ? (
+          <Modal
+            title="No Labels to Remove"
+            description="The selected items don't have any labels to remove."
+            icon={IconProp.Label}
+            onClose={closeRemoveModal}
+            closeButtonText="Close"
+          >
+            <></>
+          </Modal>
+        ) : (
+          <BasicFormModal
+            title="Remove Labels"
+            description="Select labels to remove from the selected items. Only labels currently applied to the selected items are shown."
+            isLoading={isLoadingRemoveLabels}
+            onClose={closeRemoveModal}
+            submitButtonText="Remove Labels"
+            onSubmit={async (formData: { labelIds: Array<string> }) => {
+              await applyLabels(formData.labelIds || [], "remove");
+            }}
+            formProps={{
+              fields: [
+                {
+                  field: {
+                    labelIds: true,
+                  },
+                  title: "Select Labels",
+                  description:
+                    "These labels will be removed from each selected item.",
+                  fieldType: FormFieldSchemaType.MultiSelectDropdown,
+                  required: true,
+                  dropdownOptions: removeLabelDropdownOptions,
                 },
-                title: "Select Labels",
-                description:
-                  "These labels will be removed from each selected item.",
-                fieldType: FormFieldSchemaType.MultiSelectDropdown,
-                required: true,
-                dropdownOptions: labelDropdownOptions,
-              },
-            ],
-          }}
-        />
-      )}
+              ],
+            }}
+          />
+        ))}
     </>
   );
 

package/UI/Components/Navbar/NavBar.tsx

@@ -3,14 +3,12 @@ import React, {
   ReactElement,
   useState,
   useEffect,
-  useRef,
 } from "react";
 import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
 import IconProp from "../../../Types/Icon/IconProp";
 import NavBarItem from "./NavBarItem";
-import NavBarMenu from "./NavBarMenu";
-import NavBarMenuItem from "./NavBarMenuItem";
+import NavBarMenuModal from "./NavBarMenuModal";
 import Button, { ButtonStyleType } from "../Button/Button";
 import Navigation from "../../Utils/Navigation";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
@@ -41,6 +39,10 @@ export interface ComponentProps {
   rightElement?: NavItem;
   moreMenuItems?: MoreMenuItem[];
   moreMenuTitle?: string; // Title for the more menu (default: "More")
+  moreMenuSearchPlaceholder?: string; // Placeholder for the menu search box
+  moreMenuNoResultsText?: string; // Empty-state text when search matches nothing
+  moreMenuKeyboardHint?: string; // Keyboard hint shown in the menu footer
+  moreMenuRecentLabel?: string; // Heading for the recently-visited products row
   moreMenuFooter?: {
     title: string;
     description: string;
@@ -58,11 +60,6 @@ const Navbar: FunctionComponent<ComponentProps> = (
   const [isMobileMenuVisible, setIsMobileMenuVisible] =
     useState<boolean>(false);
   const [isMoreMenuVisible, setIsMoreMenuVisible] = useState<boolean>(false);
-  const [moreMenuTimeout, setMoreMenuTimeout] = useState<ReturnType<
-    typeof setTimeout
-  > | null>(null);
-  const suppressShowRef: React.MutableRefObject<boolean> =
-    useRef<boolean>(false);
 
   // Use the existing outside click hook for mobile menu
   const {
@@ -90,41 +87,32 @@ const Navbar: FunctionComponent<ComponentProps> = (
     };
   }, []);
 
-  // More menu functions
-  const hideMoreMenu: () => void = (): void => {
-    if (moreMenuTimeout) {
-      clearTimeout(moreMenuTimeout);
-      setMoreMenuTimeout(null);
-    }
+  // Open/close the products menu with Cmd/Ctrl + K from anywhere.
+  useEffect(() => {
+    const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
+      event: KeyboardEvent,
+    ): void => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setIsMoreMenuVisible((visible: boolean) => {
+          return !visible;
+        });
+      }
+    };
 
-    const timeout: ReturnType<typeof setTimeout> = setTimeout(() => {
-      setIsMoreMenuVisible(false);
-    }, 500);
+    document.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleGlobalKeyDown);
+    };
+  }, []);
 
-    setMoreMenuTimeout(timeout);
+  // More menu open/close.
+  const openMoreMenu: () => void = (): void => {
+    setIsMoreMenuVisible(true);
   };
 
-  const forceHideMoreMenu: () => void = (): void => {
-    if (moreMenuTimeout) {
-      clearTimeout(moreMenuTimeout);
-      setMoreMenuTimeout(null);
-    }
-
+  const closeMoreMenu: () => void = (): void => {
     setIsMoreMenuVisible(false);
-    suppressShowRef.current = true;
-    setTimeout(() => {
-      suppressShowRef.current = false;
-    }, 300);
-  };
-
-  const showMoreMenu: () => void = (): void => {
-    if (suppressShowRef.current) {
-      return;
-    }
-    if (moreMenuTimeout) {
-      clearTimeout(moreMenuTimeout);
-    }
-    setIsMoreMenuVisible(true);
   };
 
   // Legacy support: if children are provided, render the old way
@@ -270,37 +258,6 @@ const Navbar: FunctionComponent<ComponentProps> = (
     },
   );
 
-  // Group items by category for the menu
-  const categories: Map<string, MoreMenuItem[]> = new Map();
-  props.moreMenuItems?.forEach((item: MoreMenuItem) => {
-    const cat: string = item.category || "Other";
-    if (!categories.has(cat)) {
-      categories.set(cat, []);
-    }
-    categories.get(cat)!.push(item);
-  });
-
-  // Convert to sections array for NavBarMenu
-  const sections: Array<{ title: string; items: Array<ReactElement> }> = [];
-  categories.forEach((items: MoreMenuItem[], category: string) => {
-    sections.push({
-      title: category,
-      items: items.map((item: MoreMenuItem) => {
-        return (
-          <NavBarMenuItem
-            key={item.title}
-            title={item.title}
-            description={item.description}
-            route={item.route}
-            icon={item.icon}
-            iconColor={item.iconColor}
-            onClick={forceHideMoreMenu}
-          />
-        );
-      }),
-    });
-  });
-
   /*
    * Find Home item from navItems. Match by id so this keeps working when the
    * title is translated to a non-English language.
@@ -336,34 +293,23 @@ const Navbar: FunctionComponent<ComponentProps> = (
           {activeMoreItem && (
             <>
               <span className="text-gray-400 mx-1">/</span>
-              <div
-                onMouseOver={showMoreMenu}
-                onMouseLeave={hideMoreMenu}
-                className="relative"
+              <button
+                onClick={openMoreMenu}
+                className="group bg-gray-100 text-gray-900 hover:bg-gray-200 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer"
               >
-                <button
-                  onClick={showMoreMenu}
-                  onMouseOver={showMoreMenu}
-                  className="bg-gray-100 text-gray-900 hover:bg-gray-200 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer"
-                >
-                  <Icon
-                    icon={activeMoreItem.icon}
-                    className="mr-1.5 h-4 w-4"
-                    thick={ThickProp.Thick}
-                  />
-                  <span>{activeMoreItem.title}</span>
-                  <Icon
-                    icon={IconProp.ChevronDown}
-                    className="ml-1.5 h-3 w-3 text-gray-500"
-                  />
-                </button>
-                {isMoreMenuVisible && (
-                  <NavBarMenu
-                    sections={sections}
-                    footer={props.moreMenuFooter}
-                  />
-                )}
-              </div>
+                <Icon
+                  icon={activeMoreItem.icon}
+                  className="mr-1.5 h-4 w-4 transition-transform duration-150 group-hover:scale-110"
+                  thick={ThickProp.Thick}
+                />
+                <span>{activeMoreItem.title}</span>
+                <Icon
+                  icon={IconProp.ChevronDown}
+                  className={`ml-1.5 h-3 w-3 text-gray-500 transition-transform duration-200 ${
+                    isMoreMenuVisible ? "rotate-180" : ""
+                  }`}
+                />
+              </button>
             </>
           )}
 
@@ -373,34 +319,23 @@ const Navbar: FunctionComponent<ComponentProps> = (
             props.moreMenuItems.length > 0 && (
               <>
                 <span className="text-gray-400 mx-1">/</span>
-                <div
-                  onMouseOver={showMoreMenu}
-                  onMouseLeave={hideMoreMenu}
-                  className="relative"
+                <button
+                  onClick={openMoreMenu}
+                  className="group text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer"
                 >
-                  <button
-                    onClick={showMoreMenu}
-                    onMouseOver={showMoreMenu}
-                    className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer"
-                  >
-                    <Icon
-                      icon={IconProp.Squares}
-                      className="mr-1.5 h-4 w-4"
-                      thick={ThickProp.Thick}
-                    />
-                    <span>{props.moreMenuTitle || "Products"}</span>
-                    <Icon
-                      icon={IconProp.ChevronDown}
-                      className="ml-1.5 h-3 w-3 text-gray-400"
-                    />
-                  </button>
-                  {isMoreMenuVisible && (
-                    <NavBarMenu
-                      sections={sections}
-                      footer={props.moreMenuFooter}
-                    />
-                  )}
-                </div>
+                  <Icon
+                    icon={IconProp.Squares}
+                    className="mr-1.5 h-4 w-4 transition-transform duration-150 group-hover:scale-110 group-hover:text-indigo-600"
+                    thick={ThickProp.Thick}
+                  />
+                  <span>{props.moreMenuTitle || "Products"}</span>
+                  <Icon
+                    icon={IconProp.ChevronDown}
+                    className={`ml-1.5 h-3 w-3 text-gray-400 transition-transform duration-200 ${
+                      isMoreMenuVisible ? "rotate-180" : ""
+                    }`}
+                  />
+                </button>
               </>
             )}
         </div>
@@ -432,6 +367,20 @@ const Navbar: FunctionComponent<ComponentProps> = (
           />
         </div>
       )}
+
+      {isMoreMenuVisible &&
+        props.moreMenuItems &&
+        props.moreMenuItems.length > 0 && (
+          <NavBarMenuModal
+            items={props.moreMenuItems}
+            footer={props.moreMenuFooter}
+            searchPlaceholder={props.moreMenuSearchPlaceholder}
+            noResultsText={props.moreMenuNoResultsText}
+            keyboardHint={props.moreMenuKeyboardHint}
+            recentLabel={props.moreMenuRecentLabel}
+            onClose={closeMoreMenu}
+          />
+        )}
     </nav>
   );
 };