@oneuptime/common 13.0.4 → 13.0.6

package/UI/Components/RuleRun/RuleTable.tsx

@@ -0,0 +1,183 @@
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Route from "../../../Types/API/Route";
+import URL from "../../../Types/API/URL";
+import { ErrorFunction, VoidFunction } from "../../../Types/FunctionTypes";
+import IconProp from "../../../Types/Icon/IconProp";
+import ObjectID from "../../../Types/ObjectID";
+import { RuleRunType, RuleRunTypeUtil } from "../../../Types/Rules/RuleRun";
+import Navigation from "../../Utils/Navigation";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
+import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
+import { ButtonStyleType } from "../Button/Button";
+import { BulkActionProps } from "../ModelTable/BaseModelTable";
+import ModelTable, {
+  ComponentProps as ModelTableComponentProps,
+} from "../ModelTable/ModelTable";
+import RuleView from "./RuleView";
+import RunRuleNowModal from "./RunRuleNowModal";
+import getRunRulesBulkAction from "./RunRulesBulkAction";
+import React, { Fragment, ReactElement, useState } from "react";
+
+export interface ComponentProps<TBaseModel extends BaseModel>
+  extends ModelTableComponentProps<TBaseModel> {
+  /*
+   * When set, the rule's own page is rendered instead of the table - so a
+   * rule's view page is the same component, with the same form fields, as the
+   * table that lists it.
+   */
+  viewRuleId?: ObjectID | undefined;
+  // Where a row's View button goes. Defaults to viewPageRoute + "/<id>".
+  getRuleViewRoute?: ((item: TBaseModel) => Route) | undefined;
+  /*
+   * The table's own route, where the view page returns once its rule is
+   * deleted. Defaults to the current route minus its last segment.
+   */
+  listRoute?: Route | undefined;
+}
+
+function getParentRoute(): Route {
+  return new Route(
+    Navigation.getCurrentRoute()
+      .toString()
+      .replace(/\/+$/, "")
+      .replace(/\/[^/]+$/, ""),
+  );
+}
+
+/*
+ * A table of rules. For rules that can be run - label, owner, privacy, and
+ * status page and SLO monitor rules - it adds "Run Now" to each row and to
+ * the bulk actions, and makes each rule viewable on its own page.
+ */
+const RuleTable: <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+) => ReactElement = <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+): ReactElement => {
+  const [ruleBeingRun, setRuleBeingRun] = useState<{
+    id: string;
+    name: string | undefined;
+  } | null>(null);
+
+  const { viewRuleId, getRuleViewRoute, listRoute, ...tableProps } = props;
+
+  const model: TBaseModel = new props.modelType();
+  const ruleType: RuleRunType | null = RuleRunTypeUtil.fromTableName(
+    model.tableName,
+  );
+
+  if (viewRuleId) {
+    return (
+      <RuleView<TBaseModel>
+        modelType={props.modelType}
+        ruleId={viewRuleId}
+        formFields={props.formFields || []}
+        formSteps={props.formSteps}
+        listRoute={listRoute || getParentRoute()}
+        createEditModalWidth={props.createEditModalWidth}
+        modelAPI={props.modelAPI}
+      />
+    );
+  }
+
+  const updateGate: PermissionGateResult = PermissionGate.check(
+    model,
+    ModelAction.Update,
+  );
+  const canOfferRun: boolean = Boolean(
+    ruleType && (updateGate.isAllowed || updateGate.disabledReason),
+  );
+
+  const actionButtons: Array<ActionButtonSchema<TBaseModel>> = [
+    ...(props.actionButtons || []),
+  ];
+
+  let bulkActions: BulkActionProps<TBaseModel> | undefined = props.bulkActions;
+
+  if (ruleType && canOfferRun) {
+    actionButtons.push({
+      title: "Run Now",
+      icon: IconProp.Play,
+      buttonStyleType: ButtonStyleType.NORMAL,
+      disabled: !updateGate.isAllowed,
+      tooltip: updateGate.disabledReason,
+      onClick: (
+        item: TBaseModel,
+        onCompleteAction: VoidFunction,
+        onError: ErrorFunction,
+      ) => {
+        try {
+          const id: string | undefined =
+            item.id?.toString() || item._id?.toString();
+
+          if (id && updateGate.isAllowed) {
+            const name: unknown = (item as unknown as Record<string, unknown>)[
+              "name"
+            ];
+
+            setRuleBeingRun({
+              id: id,
+              name: typeof name === "string" ? name : undefined,
+            });
+          }
+
+          onCompleteAction();
+        } catch (err) {
+          onCompleteAction();
+          onError(err as Error);
+        }
+      },
+    });
+
+    bulkActions = {
+      ...(props.bulkActions || {}),
+      buttons: [
+        ...(props.bulkActions?.buttons || []),
+        getRunRulesBulkAction<TBaseModel>({
+          ruleType: ruleType,
+          modelType: props.modelType,
+        }),
+      ],
+    };
+  }
+
+  const isViewable: boolean =
+    props.isViewable ??
+    Boolean(ruleType && (getRuleViewRoute || props.viewPageRoute));
+
+  return (
+    <Fragment>
+      <ModelTable<TBaseModel>
+        {...tableProps}
+        actionButtons={actionButtons}
+        bulkActions={bulkActions}
+        isViewable={isViewable}
+        {...(getRuleViewRoute
+          ? {
+              onViewPage: (item: TBaseModel): Promise<Route | URL> => {
+                return Promise.resolve(getRuleViewRoute(item));
+              },
+            }
+          : {})}
+      />
+
+      {ruleType && ruleBeingRun ? (
+        <RunRuleNowModal
+          ruleType={ruleType}
+          ruleId={ruleBeingRun.id}
+          ruleName={ruleBeingRun.name}
+          onClose={() => {
+            setRuleBeingRun(null);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </Fragment>
+  );
+};
+
+export default RuleTable;

package/UI/Components/RuleRun/RuleView.tsx

@@ -0,0 +1,170 @@
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Route from "../../../Types/API/Route";
+import Select from "../../../Types/BaseDatabase/Select";
+import IconProp from "../../../Types/Icon/IconProp";
+import ObjectID from "../../../Types/ObjectID";
+import { RuleRunType, RuleRunTypeUtil } from "../../../Types/Rules/RuleRun";
+import RuleRunSummary from "../../../Utils/Rules/RuleRunSummary";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import Navigation from "../../Utils/Navigation";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
+import { ButtonStyleType } from "../Button/Button";
+import Card from "../Card/Card";
+import type { ModelField } from "../Forms/ModelForm";
+import { FormStep } from "../Forms/Types/FormStep";
+import { ModalWidth } from "../Modal/Modal";
+import ModelDelete from "../ModelDelete/ModelDelete";
+import CardModelDetail from "../ModelDetail/CardModelDetail";
+import FieldType from "../Types/FieldType";
+import { getRuleDetailFields, RuleDetailFields } from "./RuleDetailFields";
+import RunRuleNowModal from "./RunRuleNowModal";
+import React, { Fragment, ReactElement, useMemo, useState } from "react";
+
+export interface ComponentProps<TBaseModel extends BaseModel> {
+  modelType: { new (): TBaseModel };
+  ruleId: ObjectID;
+  // The same fields the rule table creates and edits the rule with.
+  formFields: Array<ModelField<TBaseModel>>;
+  formSteps?: Array<FormStep<TBaseModel>> | undefined;
+  // Where to go once the rule is deleted: the table it is listed in.
+  listRoute: Route;
+  createEditModalWidth?: ModalWidth | undefined;
+  modelAPI?: typeof ModelAPI | undefined;
+}
+
+/*
+ * A rule's own page: its details (editable with the same form as the table),
+ * "Run Now", and delete.
+ */
+const RuleView: <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+) => ReactElement = <TBaseModel extends BaseModel>(
+  props: ComponentProps<TBaseModel>,
+): ReactElement => {
+  const model: TBaseModel = useMemo((): TBaseModel => {
+    return new props.modelType();
+  }, [props.modelType]);
+
+  const ruleType: RuleRunType | null = RuleRunTypeUtil.fromTableName(
+    model.tableName,
+  );
+
+  const [rule, setRule] = useState<TBaseModel | null>(null);
+  const [isRunModalOpen, setIsRunModalOpen] = useState<boolean>(false);
+
+  const detail: RuleDetailFields<TBaseModel> = useMemo(() => {
+    return getRuleDetailFields({ model: model, formFields: props.formFields });
+  }, [model, props.formFields]);
+
+  const updateGate: PermissionGateResult = PermissionGate.check(
+    model,
+    ModelAction.Update,
+  );
+
+  const singularName: string = model.singularName || "Rule";
+  const ruleValues: Record<string, unknown> = (rule || {}) as unknown as Record<
+    string,
+    unknown
+  >;
+  const ruleName: string | undefined =
+    typeof ruleValues["name"] === "string" ? ruleValues["name"] : undefined;
+  const isEnabled: boolean = ruleValues["isEnabled"] === true;
+
+  const runNowTooltip: string | undefined =
+    updateGate.disabledReason ||
+    (rule && !isEnabled
+      ? "This rule is disabled. Enable it before running it."
+      : undefined);
+
+  return (
+    <Fragment>
+      <CardModelDetail<TBaseModel>
+        name={`${singularName} Details`}
+        cardProps={{
+          title: ruleName || `${singularName} Details`,
+          description: `Here are the details of this ${singularName.toLowerCase()}.`,
+        }}
+        isEditable={true}
+        formSteps={props.formSteps}
+        formFields={props.formFields}
+        createEditModalWidth={props.createEditModalWidth}
+        modelAPI={props.modelAPI}
+        modelDetailProps={{
+          modelType: props.modelType,
+          id: "rule-view-detail",
+          modelId: props.ruleId,
+          modelAPI: props.modelAPI,
+          showDetailsInNumberOfColumns: 2,
+          selectMoreFields: {
+            ...detail.selectMoreFields,
+            name: true,
+            isEnabled: true,
+          } as Select<TBaseModel>,
+          onItemLoaded: (item: TBaseModel) => {
+            setRule(item);
+          },
+          fields: [
+            {
+              field: { _id: true } as Select<TBaseModel>,
+              title: "Rule ID",
+              fieldType: FieldType.ObjectID,
+            },
+            ...detail.fields,
+          ],
+        }}
+      />
+
+      {ruleType && (updateGate.isAllowed || updateGate.disabledReason) ? (
+        <Card
+          title="Run Now"
+          description={RuleRunSummary.describeRunNowCard(ruleType)}
+          buttons={[
+            {
+              title: "Run Now",
+              icon: IconProp.Play,
+              buttonStyle: ButtonStyleType.NORMAL,
+              disabled: !updateGate.isAllowed || !isEnabled,
+              tooltip: runNowTooltip,
+              onClick: () => {
+                if (!updateGate.isAllowed || !isEnabled) {
+                  return;
+                }
+
+                setIsRunModalOpen(true);
+              },
+            },
+          ]}
+        />
+      ) : (
+        <></>
+      )}
+
+      <ModelDelete<TBaseModel>
+        modelType={props.modelType}
+        modelId={props.ruleId}
+        modelAPI={props.modelAPI}
+        onDeleteSuccess={() => {
+          Navigation.navigate(props.listRoute);
+        }}
+      />
+
+      {ruleType && isRunModalOpen ? (
+        <RunRuleNowModal
+          ruleType={ruleType}
+          ruleId={props.ruleId.toString()}
+          ruleName={ruleName}
+          onClose={() => {
+            setIsRunModalOpen(false);
+          }}
+        />
+      ) : (
+        <></>
+      )}
+    </Fragment>
+  );
+};
+
+export default RuleView;

package/UI/Components/RuleRun/RunRuleNowModal.tsx

@@ -0,0 +1,147 @@
+import {
+  RuleRunAction,
+  RuleRunResult,
+  RuleRunType,
+  RuleRunTypeMetadata,
+  RuleRunTypeUtil,
+} from "../../../Types/Rules/RuleRun";
+import RuleRunSummary from "../../../Utils/Rules/RuleRunSummary";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import RuleRunClient, { RuleRunOutcome } from "../../Utils/Rules/RuleRunClient";
+import CheckboxElement from "../Checkbox/Checkbox";
+import ConfirmModal from "../Modal/ConfirmModal";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useCallback,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  ruleType: RuleRunType;
+  ruleId: string;
+  // Shown in the title when the rule has a name.
+  ruleName?: string | undefined;
+  onClose: () => void;
+  // Called once a run has ended, with what it did (null if nothing ran).
+  onRunComplete?: ((result: RuleRunResult | null) => void) | undefined;
+}
+
+/*
+ * "Run now" for one rule: a confirmation first - owner rules ask whether to
+ * notify the owners the run adds, and that choice belongs before the run - then
+ * a progress line while passes chain, then the same modal turned into the
+ * report of what the run did.
+ */
+const RunRuleNowModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+  const [summary, setSummary] = useState<string>("");
+  const [progress, setProgress] = useState<string>("");
+  const [notifyOwners, setNotifyOwners] = useState<boolean>(false);
+
+  const meta: RuleRunTypeMetadata = RuleRunTypeUtil.getMetadata(props.ruleType);
+  const isOwnerRule: boolean = meta.action === RuleRunAction.AddOwners;
+
+  const runRule: () => Promise<void> = useCallback(async (): Promise<void> => {
+    setIsRunning(true);
+    setError("");
+    setProgress("");
+
+    const outcome: RuleRunOutcome = await RuleRunClient.run({
+      ruleType: props.ruleType,
+      ruleId: props.ruleId,
+      notifyOwners: isOwnerRule && notifyOwners,
+      headers: ModelAPI.getCommonHeaders(),
+      onProgress: (result: RuleRunResult): void => {
+        setProgress(
+          RuleRunSummary.describeProgress({
+            ruleType: props.ruleType,
+            result: result,
+          }),
+        );
+      },
+    });
+
+    setProgress("");
+
+    if (outcome.isSuccess) {
+      setSummary(outcome.message);
+    } else {
+      setError(outcome.message);
+    }
+
+    setIsRunning(false);
+
+    if (props.onRunComplete) {
+      props.onRunComplete(outcome.result);
+    }
+  }, [
+    props.ruleType,
+    props.ruleId,
+    props.onRunComplete,
+    isOwnerRule,
+    notifyOwners,
+  ]);
+
+  const title: string = props.ruleName
+    ? `Run "${props.ruleName}" Now`
+    : "Run This Rule Now";
+
+  /*
+   * Once the run has answered, the modal stops being a confirmation and
+   * becomes the report: one button, and it closes.
+   */
+  if (summary) {
+    return (
+      <ConfirmModal
+        title={title}
+        description={summary}
+        submitButtonText="Close"
+        onSubmit={props.onClose}
+      />
+    );
+  }
+
+  return (
+    <ConfirmModal
+      title={title}
+      description={RuleRunSummary.describeConfirmation(props.ruleType)}
+      error={error || undefined}
+      isLoading={isRunning}
+      submitButtonText="Run Rule"
+      onSubmit={runRule}
+      onClose={isRunning ? undefined : props.onClose}
+    >
+      <div>
+        {isOwnerRule ? (
+          <CheckboxElement
+            title="Notify the owners this run adds"
+            description={`Off by default, and only honoured when the rule itself has Notify Owners turned on. An owner is notified once for every ${meta.resourceSingular} they are added to, which on a large project can be a lot of notifications.`}
+            value={notifyOwners}
+            dataTestId="run-rule-notify-owners-checkbox"
+            onChange={(value: boolean) => {
+              setNotifyOwners(value);
+            }}
+          />
+        ) : (
+          <></>
+        )}
+        {progress ? (
+          <p
+            className="mt-3 text-sm text-gray-600"
+            data-testid="run-rule-progress"
+          >
+            {progress}
+          </p>
+        ) : (
+          <></>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+};
+
+export default RunRuleNowModal;

package/UI/Components/RuleRun/RunRulesBulkAction.ts

@@ -0,0 +1,103 @@
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import IconProp from "../../../Types/Icon/IconProp";
+import { RuleRunType } from "../../../Types/Rules/RuleRun";
+import RuleRunSummary from "../../../Utils/Rules/RuleRunSummary";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import PermissionGate, {
+  ModelAction,
+  PermissionGateResult,
+} from "../../Utils/PermissionGate";
+import RuleRunClient, { RuleRunOutcome } from "../../Utils/Rules/RuleRunClient";
+import { ButtonStyleType } from "../Button/Button";
+import {
+  BulkActionButtonSchema,
+  BulkActionFailed,
+  BulkActionOnClickProps,
+} from "../BulkUpdate/BulkUpdateForm";
+
+/*
+ * "Run Now" in a rule table's bulk actions: every selected rule, one after
+ * another, each run to completion before the next starts.
+ *
+ * Sequential on purpose. Two rules running at once over the same resources
+ * would race each other's "is this label already attached" reads, and one run
+ * at a time is also what keeps a bulk press from multiplying load on the API.
+ *
+ * A bulk run never notifies added owners - it has no place to ask - and its
+ * confirmation says so.
+ */
+export function getRunRulesBulkAction<TBaseModel extends BaseModel>(data: {
+  ruleType: RuleRunType;
+  modelType: { new (): TBaseModel };
+}): BulkActionButtonSchema<TBaseModel> {
+  // Running a rule is a use of it, gated like editing it; the server re-checks.
+  const gate: PermissionGateResult = PermissionGate.check(
+    new data.modelType(),
+    ModelAction.Update,
+  );
+
+  return {
+    title: "Run Now",
+    icon: IconProp.Play,
+    buttonStyleType: ButtonStyleType.NORMAL,
+    disabled: !gate.isAllowed,
+    tooltip: gate.disabledReason,
+    confirmTitle: (items: Array<TBaseModel>): string => {
+      return items.length === 1
+        ? "Run 1 Rule Now"
+        : `Run ${items.length} Rules Now`;
+    },
+    confirmMessage: (items: Array<TBaseModel>): string => {
+      return RuleRunSummary.describeBulkConfirmation({
+        ruleType: data.ruleType,
+        ruleCount: items.length,
+      });
+    },
+    confirmButtonStyleType: ButtonStyleType.PRIMARY,
+    onClick: async (
+      props: BulkActionOnClickProps<TBaseModel>,
+    ): Promise<void> => {
+      if (!gate.isAllowed) {
+        return;
+      }
+
+      props.onBulkActionStart();
+
+      const totalItems: Array<TBaseModel> = [...props.items];
+      const inProgressItems: Array<TBaseModel> = [...props.items];
+      const successItems: Array<TBaseModel> = [];
+      const failedItems: Array<BulkActionFailed<TBaseModel>> = [];
+
+      for (const item of totalItems) {
+        inProgressItems.splice(inProgressItems.indexOf(item), 1);
+
+        const outcome: RuleRunOutcome = await RuleRunClient.run({
+          ruleType: data.ruleType,
+          ruleId: item.id?.toString() || item._id?.toString() || "",
+          notifyOwners: false,
+          headers: ModelAPI.getCommonHeaders(),
+        });
+
+        if (outcome.isSuccess) {
+          successItems.push(item);
+        } else {
+          failedItems.push({
+            item: item,
+            failedMessage: outcome.message,
+          });
+        }
+
+        props.onProgressInfo({
+          totalItems: totalItems,
+          failed: failedItems,
+          successItems: successItems,
+          inProgressItems: inProgressItems,
+        });
+      }
+
+      props.onBulkActionEnd();
+    },
+  };
+}
+
+export default getRunRulesBulkAction;

package/UI/Components/Table/Table.tsx

@@ -43,6 +43,10 @@ export interface ComponentProps<T extends GenericObject> {
    * bound and pagination switches to a prev/next-only UI.
    */
   hasMore?: boolean | undefined;
+  /** Page sizes offered by the shared ModelTable-style footer. */
+  itemsOnPageOptions?: Array<number> | undefined;
+  /** Optional stable id for consumers that need to target this footer. */
+  paginationDataTestId?: string | undefined;
   itemsOnPage: number;
   error: string;
   isLoading: boolean;
@@ -496,9 +500,13 @@ const Table: TableFunction = <T extends GenericObject>(
               hasMore={props.hasMore}
               itemsOnCurrentPage={props.data.length}
               itemsOnPage={props.itemsOnPage}
+              itemsOnPageOptions={props.itemsOnPageOptions}
               onNavigateToPage={props.onNavigateToPage}
               isLoading={props.isLoading}
               isError={Boolean(props.error)}
+              {...(props.paginationDataTestId
+                ? { dataTestId: props.paginationDataTestId }
+                : {})}
             />
           )}
         </div>

package/UI/Components/Table/TableRow.tsx

@@ -193,8 +193,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             <div className="space-y-3">
               {renderedColumns.map((column: Column<T>, i: number) => {
                 if (column.type === FieldType.Actions) {
+                  const customAction: ReactElement | null = column.getElement
+                    ? column.getElement(props.item)
+                    : null;
+
                   return (
                     <div key={i} className="flex flex-wrap gap-2">
+                      {customAction}
                       {error && (
                         <ConfirmModal
                           title={`Error`}
@@ -513,13 +518,16 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                     }
                   }}
                 >
-                  {columnContent !== null && columnContent !== undefined && (
-                    <div className={contentWrapperClassName}>
-                      {columnContent}
-                    </div>
-                  )}
+                  {column.type !== FieldType.Actions &&
+                    columnContent !== null &&
+                    columnContent !== undefined && (
+                      <div className={contentWrapperClassName}>
+                        {columnContent}
+                      </div>
+                    )}
                   {column.type === FieldType.Actions && (
                     <div className={actionsContainerClassName}>
+                      {columnContent}
                       {error && (
                         <div className="text-align-left">
                           <ConfirmModal