@oneuptime/common 7.0.3480 → 7.0.3517

package/Types/Permission.ts

@@ -420,20 +420,20 @@ enum Permission {
   ReadIncidentStateTimeline = "ReadIncidentStateTimeline",
   DeleteIncidentStateTimeline = "DeleteIncidentStateTimeline",
 
-  CreateIncidentLog = "CreateIncidentLog",
-  EditIncidentLog = "EditIncidentLog",
-  ReadIncidentLog = "ReadIncidentLog",
-  DeleteIncidentLog = "DeleteIncidentLog",
+  CreateIncidentFeed = "CreateIncidentFeed",
+  EditIncidentFeed = "EditIncidentFeed",
+  ReadIncidentFeed = "ReadIncidentFeed",
+  DeleteIncidentFeed = "DeleteIncidentFeed",
 
-  CreateScheduledMaintenanceLog = "CreateScheduledMaintenanceLog",
-  EditScheduledMaintenanceLog = "EditScheduledMaintenanceLog",
-  ReadScheduledMaintenanceLog = "ReadScheduledMaintenanceLog",
-  DeleteScheduledMaintenanceLog = "DeleteScheduledMaintenanceLog",
+  CreateScheduledMaintenanceFeed = "CreateScheduledMaintenanceFeed",
+  EditScheduledMaintenanceFeed = "EditScheduledMaintenanceFeed",
+  ReadScheduledMaintenanceFeed = "ReadScheduledMaintenanceFeed",
+  DeleteScheduledMaintenanceFeed = "DeleteScheduledMaintenanceFeed",
 
-  CreateAlertLog = "CreateAlertLog",
-  EditAlertLog = "EditAlertLog",
-  ReadAlertLog = "ReadAlertLog",
-  DeleteAlertLog = "DeleteAlertLog",
+  CreateAlertFeed = "CreateAlertFeed",
+  EditAlertFeed = "EditAlertFeed",
+  ReadAlertFeed = "ReadAlertFeed",
+  DeleteAlertFeed = "DeleteAlertFeed",
 
   // Incident Status Permissions (Owner + Admin Permission by default)
   CreateMonitorStatusTimeline = "CreateMonitorStatusTimeline",
@@ -1073,32 +1073,32 @@ export class PermissionHelper {
       },
 
       {
-        permission: Permission.CreateIncidentLog,
-        title: "Create Incident Log",
+        permission: Permission.CreateIncidentFeed,
+        title: "Create Incident Feed",
         description:
           "This permission can create log of an incident in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.DeleteIncidentLog,
-        title: "Delete Incident Log",
+        permission: Permission.DeleteIncidentFeed,
+        title: "Delete Incident Feed",
         description:
           "This permission can delete log of an incident in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.EditIncidentLog,
-        title: "Edit Incident Log",
+        permission: Permission.EditIncidentFeed,
+        title: "Edit Incident Feed",
         description:
           "This permission can edit log of an incident in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.ReadIncidentLog,
-        title: "Read Incident Log",
+        permission: Permission.ReadIncidentFeed,
+        title: "Read Incident Feed",
         description:
           "This permission can read log of an incident in this project.",
         isAssignableToTenant: true,
@@ -1106,32 +1106,32 @@ export class PermissionHelper {
       },
 
       {
-        permission: Permission.CreateAlertLog,
-        title: "Create Alert Log",
+        permission: Permission.CreateAlertFeed,
+        title: "Create Alert Feed",
         description:
           "This permission can create log of an incident in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.DeleteAlertLog,
-        title: "Delete Alert Log",
+        permission: Permission.DeleteAlertFeed,
+        title: "Delete Alert Feed",
         description:
           "This permission can delete log of an incident in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.EditAlertLog,
-        title: "Edit Alert Log",
+        permission: Permission.EditAlertFeed,
+        title: "Edit Alert Feed",
         description:
           "This permission can edit log of an incident in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.ReadAlertLog,
-        title: "Read Alert Log",
+        permission: Permission.ReadAlertFeed,
+        title: "Read Alert Feed",
         description:
           "This permission can read log of an incident in this project.",
         isAssignableToTenant: true,
@@ -1139,7 +1139,7 @@ export class PermissionHelper {
       },
 
       {
-        permission: Permission.CreateScheduledMaintenanceLog,
+        permission: Permission.CreateScheduledMaintenanceFeed,
         title: "Create Scheduled Maintenance Log",
         description:
           "This permission can create log of a scheduled maintenance in this project.",
@@ -1147,7 +1147,7 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.DeleteScheduledMaintenanceLog,
+        permission: Permission.DeleteScheduledMaintenanceFeed,
         title: "Delete Scheduled Maintenance Log",
         description:
           "This permission can delete log of an scheduled maintenance in this project.",
@@ -1155,7 +1155,7 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.EditScheduledMaintenanceLog,
+        permission: Permission.EditScheduledMaintenanceFeed,
         title: "Edit Scheduled Maintenance Log",
         description:
           "This permission can edit log of an scheduled maintenance in this project.",
@@ -1163,7 +1163,7 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
       {
-        permission: Permission.ReadScheduledMaintenanceLog,
+        permission: Permission.ReadScheduledMaintenanceFeed,
         title: "Read Scheduled Maintenance Log",
         description:
           "This permission can read log of an incident in this project.",

package/UI/Components/CategoryCheckbox/Index.tsx

@@ -81,7 +81,7 @@ const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
   if (options.length === 0) {
     return (
       <div>
-        <ErrorMessage error="No options found." />
+        <ErrorMessage message="No options found." />
       </div>
     );
   }

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -120,10 +120,10 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       <div className="border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2">
         {isLoading && !error && <ComponentLoader />}
         {!isLoading && !error && schemaList.length === 0 && (
-          <ErrorMessage error="No custom fields have been added for this resource. You may add custom fields in Project Settings." />
+          <ErrorMessage message="No custom fields have been added for this resource. You may add custom fields in Project Settings." />
         )}
-        {error && <ErrorMessage error={error} />}
-        {!model && <ErrorMessage error={"Item not found"} />}
+        {error && <ErrorMessage message={error} />}
+        {!model && <ErrorMessage message={"Item not found"} />}
 
         {!isLoading && !error && model && (
           <Detail

package/UI/Components/ErrorMessage/ErrorMessage.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
-  error: string | ReactElement;
+  message: string | ReactElement;
   onRefreshClick?: undefined | (() => void);
 }
 
@@ -10,7 +10,7 @@ const ErrorMessage: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <div className="text-center my-10 text-gray-500 text-sm">
-      {props.error}
+      {props.message}
       {props.onRefreshClick ? (
         <div
           role={"refresh-button"}

package/UI/Components/Feed/Feed.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import FeedItem, { FeedItemProps } from "./FeedItem";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+
+export interface ComponentProps {
+  items: Array<FeedItemProps>;
+  noItemsMessage: string;
+}
+
+const Feed: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <div className="flow-root">
+      <ul role="list">
+        {props.items.length === 0 && (
+          <div>
+            <ErrorMessage message={props.noItemsMessage} />
+          </div>
+        )}
+        {props.items.map((item: FeedItemProps, index: number) => {
+          return (
+            <FeedItem {...item} isLastItem={index === props.items.length - 1} />
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default Feed;

package/UI/Components/Feed/FeedItem.tsx

@@ -0,0 +1,176 @@
+import React, { FunctionComponent, ReactElement, useState } from "react";
+import User from "../../../Models/DatabaseModels/User";
+import { GetReactElementFunction } from "../../Types/FunctionTypes";
+import Image from "../Image/Image";
+import Route from "../../../Types/API/Route";
+import BlankProfilePic from "../../Images/users/blank-profile.svg";
+import FileUtil from "../../Utils/File";
+import ObjectID from "../../../Types/ObjectID";
+import OneUptimeDate from "../../../Types/Date";
+import Tooltip from "../Tooltip/Tooltip";
+import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
+import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import ConfirmModal from "../Modal/ConfirmModal";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface FeedItemProps {
+  key: string;
+  textInMarkdown: string;
+  element?: ReactElement;
+  moreTextInMarkdown?: string;
+  user?: User | undefined;
+  itemDateTime: Date;
+  icon: IconProp;
+  color: Color;
+}
+
+export interface ComponentProps extends FeedItemProps {
+  isLastItem: boolean;
+}
+
+const FeedItem: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [showMoreInformationModal, setShowMoreInformationModal] =
+    useState<boolean>(false);
+
+  const getMoreInformationModal: GetReactElementFunction = (): ReactElement => {
+    if (showMoreInformationModal) {
+      return (
+        <ConfirmModal
+          title={`More Information`}
+          description={
+            <div>
+              <MarkdownViewer text={props.moreTextInMarkdown || ""} />
+            </div>
+          }
+          isLoading={false}
+          submitButtonText={"Close"}
+          onSubmit={() => {
+            return setShowMoreInformationModal(false);
+          }}
+          submitButtonType={ButtonStyleType.NORMAL}
+        />
+      );
+    }
+
+    return <></>;
+  };
+
+  const getUserIcon: GetReactElementFunction = (): ReactElement => {
+    return (
+      <div>
+        {!props.user?.profilePictureId && (
+          <Image
+            className="h-10 w-10 rounded-full"
+            imageUrl={Route.fromString(`${BlankProfilePic}`)}
+          />
+        )}
+
+        {props.user?.profilePictureId && (
+          <Image
+            className="flex size-10 items-center justify-center rounded-full bg-gray-400 ring-8 ring-white"
+            imageUrl={FileUtil.getFileRoute(
+              props.user!.profilePictureId as ObjectID,
+            )}
+          />
+        )}
+
+        {props.icon && (
+          <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-white px-0.5 py-px">
+            <Icon
+              className="size-5 text-gray-500"
+              icon={props.icon}
+              color={props.color}
+            />
+          </span>
+        )}
+      </div>
+    );
+  };
+
+  const getItem: GetReactElementFunction = (): ReactElement => {
+    return (
+      <li key={props.key}>
+        <div className="relative pb-8">
+          {!props.isLastItem && (
+            <span
+              className="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200"
+              aria-hidden="true"
+            ></span>
+          )}
+          <div className="relative flex items-start space-x-3">
+            <div className="relative">
+              {props.user && getUserIcon()}
+              {!props.user && props.icon && getIconItem()}
+            </div>
+            <div className="min-w-0 flex-1">
+              <div>
+                {props.user?.name && (
+                  <div className="text-sm">
+                    <div className="font-medium text-gray-900">
+                      {props.user?.name?.toString() || "Unknown User"}
+                    </div>
+                  </div>
+                )}
+                <div className="mt-0.5 text-sm text-gray-500 w-fit">
+                  <Tooltip
+                    text={OneUptimeDate.getDateAsLocalFormattedString(
+                      props.itemDateTime,
+                    )}
+                  >
+                    <div className="w-fit">
+                      {OneUptimeDate.fromNow(props.itemDateTime)}
+                    </div>
+                  </Tooltip>
+                </div>
+              </div>
+              <div className="mt-2 text-sm text-gray-700">
+                {props.textInMarkdown && (
+                  <div>
+                    <MarkdownViewer text={props.textInMarkdown} />
+                  </div>
+                )}
+                {props.element && <div>{props.element}</div>}
+                {props.moreTextInMarkdown && (
+                  <div className="-ml-3">
+                    <Button
+                      onClick={() => {
+                        return setShowMoreInformationModal(true);
+                      }}
+                      title="More Information"
+                      buttonStyle={ButtonStyleType.NORMAL}
+                      buttonSize={ButtonSize.Small}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        {getMoreInformationModal()}
+      </li>
+    );
+  };
+
+  const getIconItem: GetReactElementFunction = (): ReactElement => {
+    if (!props.icon) {
+      return <></>;
+    }
+    return (
+      <div className="flex size-10 items-center justify-center rounded-full bg-gray-100 ring-10 ring-white">
+        <Icon
+          className="size-5 text-gray-500"
+          icon={props.icon}
+          color={props.color}
+        />
+      </div>
+    );
+  };
+
+  return getItem();
+};
+
+export default FeedItem;

package/UI/Components/Filters/FilterViewer.tsx

@@ -346,7 +346,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
   });
 
   if (props.filterError) {
-    return <ErrorMessage error={props.filterError} />;
+    return <ErrorMessage message={props.filterError} />;
   }
 
   const showViewer: boolean = filterTexts.length > 0;

package/UI/Components/Filters/FiltersForm.tsx

@@ -142,7 +142,7 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
 
       {props.showFilter && props.filterError && (
         <ErrorMessage
-          error={props.filterError}
+          message={props.filterError}
           onRefreshClick={props.onFilterRefreshClick}
         />
       )}

package/UI/Components/FormModal/BasicFormModal.tsx

@@ -45,7 +45,7 @@ const BasicFormModal: <T extends GenericObject>(
       <>
         {isLoading && <ComponentLoader />}
 
-        {props.error && <ErrorMessage error={props.error} />}
+        {props.error && <ErrorMessage message={props.error} />}
 
         {!isLoading && (
           <BasicForm

package/UI/Components/Forms/BasicForm.tsx

@@ -511,7 +511,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
     }
 
     if (formError) {
-      return <ErrorMessage error={formError} />;
+      return <ErrorMessage message={formError} />;
     }
 
     let showSubmitButton: boolean = !props.hideSubmitButton;

package/UI/Components/Icon/Icon.tsx

@@ -1075,6 +1075,22 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
       />,
     );
+  } else if (icon === IconProp.WrenchScrewdriver) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"
+      />,
+    );
+  } else if (icon === IconProp.Text) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+      />,
+    );
   } else if (icon === IconProp.SendMessage) {
     return getSvgWrapper(
       <path

package/UI/Components/InfoCard/InfoCard.tsx

@@ -12,9 +12,7 @@ const InfoCard: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div
-      className={`rounded-md bg-white shadow-md p-5 ${props.className || ""}`}
-    >
+    <div className={`rounded-md bg-white shadow p-5 ${props.className || ""}`}>
       <div>
         <FieldLabelElement title={props.title} />
       </div>

package/UI/Components/List/List.tsx

@@ -61,7 +61,7 @@ const List: ListFunction = <T extends GenericObject>(
       return (
         <div className="p-6">
           <ErrorMessage
-            error={props.error}
+            message={props.error}
             onRefreshClick={props.onRefreshClick}
           />
         </div>
@@ -72,7 +72,7 @@ const List: ListFunction = <T extends GenericObject>(
       return (
         <div className="p-6">
           <ErrorMessage
-            error={
+            message={
               props.noItemsMessage
                 ? props.noItemsMessage
                 : `No ${props.singularLabel.toLocaleLowerCase()}`

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -153,7 +153,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   }
 
   if (pageError) {
-    return <ErrorMessage error={pageError} />;
+    return <ErrorMessage message={pageError} />;
   }
 
   return (

package/UI/Components/ModelDetail/ModelDetail.tsx

@@ -251,7 +251,7 @@ const ModelDetail: <TBaseModel extends BaseModel>(
   }
 
   if (!item) {
-    return <ErrorMessage error="Item not found" />;
+    return <ErrorMessage message="Item not found" />;
   }
 
   return (

package/UI/Components/ModelList/ModelList.tsx

@@ -218,12 +218,12 @@ const ModelList: <TBaseModel extends BaseModel>(
         )}
       </div>
       <div className="max-h-96 mb-5 overflow-y-auto p-2">
-        {error ? <ErrorMessage error={error} /> : <></>}
+        {error ? <ErrorMessage message={error} /> : <></>}
         {isLoading ? <ComponentLoader /> : <></>}
 
         {!isLoading && !error && searchedList.length === 0 ? (
           <ErrorMessage
-            error={
+            message={
               searchText
                 ? "No items match your search"
                 : props.noItemsMessage || "No items found."

package/UI/Components/ModelProgress/ModelProgress.tsx

@@ -55,7 +55,7 @@ const ModelProgress: <TBaseModel extends BaseModel>(
       <div className="w-full -mt-6">
         {!error && (
           <div>
-            <ErrorMessage error={error} />
+            <ErrorMessage message={error} />
           </div>
         )}
         {isLoading && <ComponentLoader />}

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -661,8 +661,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           | DatabaseBaseModelType
           | AnalyticsBaseModelType,
         query: {
-          ...query,
           ...props.query,
+          ...query,
         },
         limit: LIMIT_PER_PROJECT,
         skip: 0,
@@ -700,8 +700,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           | DatabaseBaseModelType
           | AnalyticsBaseModelType,
         query: {
-          ...query,
           ...props.query,
+          ...query,
         },
         groupBy: {
           ...props.groupBy,
@@ -1717,7 +1717,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             >
               {tableColumns.length === 0 && props.columns.length > 0 ? (
                 <ErrorMessage
-                  error={`You are not authorized to view this table. You need any one of these permissions: ${PermissionHelper.getPermissionTitles(
+                  message={`You are not authorized to view this table. You need any one of these permissions: ${PermissionHelper.getPermissionTitles(
                     model.getReadPermissions(),
                   ).join(", ")}`}
                 />

package/UI/Components/MonitorGraphs/Uptime.tsx

@@ -64,7 +64,7 @@ const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
   if (props.error) {
     return (
       <ErrorMessage
-        error={props.error}
+        message={props.error}
         onRefreshClick={props.onRefreshClick ? props.onRefreshClick : undefined}
       />
     );

package/UI/Components/OrderedStatesList/OrderedStatesList.tsx

@@ -39,14 +39,17 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
 
   if (props.error) {
     return (
-      <ErrorMessage error={props.error} onRefreshClick={props.onRefreshClick} />
+      <ErrorMessage
+        message={props.error}
+        onRefreshClick={props.onRefreshClick}
+      />
     );
   }
 
   if (props.data.length === 0) {
     return (
       <ErrorMessage
-        error={
+        message={
           props.noItemsMessage
             ? props.noItemsMessage
             : `No ${props.singularLabel.toLocaleLowerCase()}`

package/UI/Components/Page/Page.tsx

@@ -33,7 +33,7 @@ const Page: FunctionComponent<ComponentProps> = (
   }, [props.breadcrumbLinks]);
 
   if (props.error) {
-    return <ErrorMessage error={props.error} />;
+    return <ErrorMessage message={props.error} />;
   }
 
   return (