@oneuptime/common 8.0.5438 → 8.0.5462

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -15,9 +15,11 @@ import React, {
   ReactElement,
   Ref,
   useCallback,
+  useMemo,
 } from "react";
 import Toggle from "../Toggle/Toggle";
 import Card from "../Card/Card";
+import Icon from "../Icon/Icon";
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import IconProp from "../../../Types/Icon/IconProp";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
@@ -66,8 +68,9 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     typeof window !== "undefined" ? window.innerHeight : 900,
   );
   const [autoScroll, setAutoScroll] = React.useState<boolean>(true);
-  const [showScrollToBottom, setShowScrollToBottom] =
+  const [showScrollToLatest, setShowScrollToLatest] =
     React.useState<boolean>(false);
+  const [isDescending, setIsDescending] = React.useState<boolean>(false);
   // removed wrapLines toggle for a cleaner toolbar
   const logsViewerRef: Ref<HTMLDivElement> = React.useRef<HTMLDivElement>(null);
   const scrollContainerRef: Ref<HTMLDivElement> =
@@ -89,6 +92,14 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     Dictionary<TelemetryService>
   >({});
 
+  const displayLogs: Array<Log> = useMemo(() => {
+    if (isDescending) {
+      return [...props.logs].reverse();
+    }
+
+    return props.logs;
+  }, [props.logs, isDescending]);
+
   const loadTelemetryServices: PromiseVoidFunction =
     useCallback(async (): Promise<void> => {
       try {
@@ -178,33 +189,73 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     };
   }, [loadTelemetryServices]);
 
-  // Keep scroll to the bottom of the log
+  // Keep scroll aligned with the latest log entry
 
-  const scrollToBottom: VoidFunction = (): void => {
+  const scrollToLatest: VoidFunction = (): void => {
     const scrollContainer: HTMLDivElement | null = scrollContainerRef.current;
 
-    if (scrollContainer) {
-      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    if (!scrollContainer) {
+      return;
+    }
+
+    if (isDescending) {
+      scrollContainer.scrollTop = 0;
+      return;
     }
+
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  };
+
+  const applySortDirection: (nextDescending: boolean) => void = (
+    nextDescending: boolean,
+  ) => {
+    setShowScrollToLatest(false);
+    setIsDescending((previous: boolean) => {
+      if (previous === nextDescending) {
+        return previous;
+      }
+
+      // Apply scroll alignment after the DOM reorders log entries.
+      setTimeout(() => {
+        const scrollContainer: HTMLDivElement | null =
+          scrollContainerRef.current;
+
+        if (!scrollContainer) {
+          return;
+        }
+
+        if (nextDescending) {
+          scrollContainer.scrollTop = 0;
+          return;
+        }
+
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      }, 0);
+
+      return nextDescending;
+    });
   };
 
-  const handleScroll: VoidFunction = (): void => {
+  const handleScroll: VoidFunction = React.useCallback((): void => {
     const scrollContainer: HTMLDivElement | null = scrollContainerRef.current;
-    if (scrollContainer) {
-      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-      const isNearBottom: boolean =
-        scrollHeight - scrollTop - clientHeight < 100;
-      setShowScrollToBottom(!isNearBottom && props.logs.length > 0);
+    if (!scrollContainer) {
+      return;
     }
-  };
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+    const isNearLatest: boolean = isDescending
+      ? scrollTop < 100
+      : scrollHeight - scrollTop - clientHeight < 100;
+    setShowScrollToLatest(!isNearLatest && displayLogs.length > 0);
+  }, [isDescending, displayLogs.length]);
 
   React.useEffect(() => {
     if (!autoScroll) {
       return;
     }
 
-    scrollToBottom();
-  }, [props.logs]);
+    scrollToLatest();
+  }, [props.logs, autoScroll, isDescending]);
 
   React.useEffect(() => {
     const scrollContainer: HTMLDivElement | null = scrollContainerRef.current;
@@ -215,7 +266,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       };
     }
     return () => {}; // Return empty cleanup function if no scrollContainer
-  }, []);
+  }, [handleScroll]);
 
   if (isPageLoading) {
     return <PageLoader isVisible={true} />;
@@ -305,12 +356,54 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                   </div>
                   <span className="hidden sm:block h-4 w-px bg-slate-200" />
                   <span className="text-xs text-slate-500">
-                    {props.logs.length} result
-                    {props.logs.length !== 1 ? "s" : ""}
+                    {displayLogs.length} result
+                    {displayLogs.length !== 1 ? "s" : ""}
                   </span>
                 </div>
 
                 <div className="flex items-center gap-2">
+                  <div className="inline-flex items-center rounded-full border border-slate-200 bg-white/80 p-1 shadow-sm ring-1 ring-slate-200/60">
+                    <button
+                      type="button"
+                      aria-pressed={isDescending}
+                      className={`flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold tracking-wide transition-all duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 ${
+                        isDescending
+                          ? "bg-indigo-600 text-white shadow-sm ring-1 ring-indigo-500/40"
+                          : "text-slate-500 hover:text-indigo-600"
+                      }`}
+                      onClick={() => {
+                        applySortDirection(true);
+                      }}
+                    >
+                      <Icon
+                        icon={IconProp.BarsArrowDown}
+                        className={`h-4 w-4 ${
+                          isDescending ? "text-white/90" : "text-slate-400"
+                        }`}
+                      />
+                      <span>Newest first</span>
+                    </button>
+                    <button
+                      type="button"
+                      aria-pressed={!isDescending}
+                      className={`flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold tracking-wide transition-all duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 ${
+                        !isDescending
+                          ? "bg-indigo-600 text-white shadow-sm ring-1 ring-indigo-500/40"
+                          : "text-slate-500 hover:text-indigo-600"
+                      }`}
+                      onClick={() => {
+                        applySortDirection(false);
+                      }}
+                    >
+                      <Icon
+                        icon={IconProp.BarsArrowUp}
+                        className={`h-4 w-4 ${
+                          !isDescending ? "text-white/90" : "text-slate-400"
+                        }`}
+                      />
+                      <span>Oldest first</span>
+                    </button>
+                  </div>
                   <Button
                     title="Apply Filters"
                     icon={IconProp.Search}
@@ -342,7 +435,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               onScroll={handleScroll}
             >
               <ul role="list" className="divide-y divide-slate-800">
-                {props.logs.map((log: Log, i: number) => {
+                {displayLogs.map((log: Log, i: number) => {
                   const traceRouteProps: OptionalTraceRouteProps =
                     props.getTraceRoute
                       ? { getTraceRoute: props.getTraceRoute }
@@ -364,7 +457,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                 })}
               </ul>
 
-              {props.logs.length === 0 && (
+              {displayLogs.length === 0 && (
                 <div className="flex items-center justify-center h-full px-4">
                   <div className="text-center">
                     <h3 className="text-sm font-medium text-slate-300 mb-1">
@@ -380,12 +473,12 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
             </div>
           </div>
 
-          {/* Floating Scroll to Bottom Button */}
-          {showScrollToBottom && (
+          {/* Floating Scroll to Latest Button */}
+          {showScrollToLatest && (
             <button
-              onClick={scrollToBottom}
+              onClick={scrollToLatest}
               className="absolute bottom-3 right-3 bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-md shadow transition-all"
-              title="Scroll to bottom"
+              title={isDescending ? "Scroll to top" : "Scroll to bottom"}
             >
               <svg
                 className="w-5 h-5"
@@ -393,12 +486,21 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                 stroke="currentColor"
                 viewBox="0 0 24 24"
               >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                />
+                {isDescending ? (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 14l7-7 7 7m-7-7v18"
+                  />
+                ) : (
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 10l-7 7-7-7m7 7V3"
+                  />
+                )}
               </svg>
             </button>
           )}

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -98,7 +98,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
 
             const baseClass: string = isSyntaxHighlighter
               ? "mt-4 mb-4 rounded-lg overflow-hidden"
-              : "bg-gray-900 text-gray-100 mt-4 mb-4 p-4 rounded-lg text-sm overflow-x-auto border border-gray-700";
+              : "bg-gray-900 text-gray-100 mt-4 mb-4 p-2 rounded-lg text-sm overflow-x-auto border border-gray-700";
 
             return (
               <pre className={baseClass} {...rest}>
@@ -201,7 +201,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
                 children={content}
                 language={match[1]}
                 style={a11yDark}
-                className="rounded-lg mt-4 mb-4 !bg-gray-900 !p-4 text-sm"
+                className="rounded-lg mt-4 mb-4 !bg-gray-900 !p-2 text-sm"
                 codeTagProps={{ className: "font-mono" }}
               />
             ) : (

package/UI/Components/ModelFilter/Filter.ts

@@ -26,4 +26,5 @@ export default interface Filter<
   filterDropdownOptions?: Array<DropdownOption> | undefined;
   fetchFilterDropdownOptions?: () => Promise<Array<DropdownOption>> | undefined;
   jsonKeys?: Array<string> | undefined;
+  isAdvancedFilter?: boolean | undefined;
 }

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -682,6 +682,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               key: key,
               type: filter.type,
               jsonKeys: filter.jsonKeys,
+              isAdvancedFilter: filter.isAdvancedFilter,
             };
           })
           .filter((filter: ClassicFilterType<TBaseModel> | null) => {
@@ -782,7 +783,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         setTableFilterError(API.getFriendlyMessage(err));
       });
     }
-  }, [showFilterModal]);
+  }, [showFilterModal, props.filters]);
 
   type GetSelectFunction = () => Select<TBaseModel>;
 

package/UI/Components/Table/TableRow.tsx

@@ -350,6 +350,90 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                   className =
                     "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
                 }
+
+                let columnContent: React.ReactNode = null;
+
+                if (column.key && !column.getElement) {
+                  columnContent =
+                    column.type === FieldType.Date ? (
+                      props.item[column.key] ? (
+                        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                          props.item[column.key] as string,
+                          true,
+                        )
+                      ) : (
+                        column.noValueMessage || ""
+                      )
+                    ) : column.type === FieldType.DateTime ? (
+                      props.item[column.key] ? (
+                        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                          props.item[column.key] as string,
+                          false,
+                        )
+                      ) : (
+                        column.noValueMessage || ""
+                      )
+                    ) : column.type === FieldType.USDCents ? (
+                      props.item[column.key] ? (
+                        ((props.item[column.key] as number) || 0) / 100 + " USD"
+                      ) : (
+                        column.noValueMessage || "0 USD"
+                      )
+                    ) : column.type === FieldType.Percent ? (
+                      props.item[column.key] ? (
+                        props.item[column.key] + "%"
+                      ) : (
+                        column.noValueMessage || "0%"
+                      )
+                    ) : column.type === FieldType.Color ? (
+                      props.item[column.key] ? (
+                        <ColorInput value={props.item[column.key] as Color} />
+                      ) : (
+                        column.noValueMessage || "0%"
+                      )
+                    ) : column.type === FieldType.LongText ? (
+                      props.item[column.key] ? (
+                        <LongTextViewer
+                          text={props.item[column.key] as string}
+                        />
+                      ) : (
+                        column.noValueMessage || ""
+                      )
+                    ) : column.type === FieldType.Boolean ? (
+                      props.item[column.key] ? (
+                        <Icon
+                          icon={IconProp.Check}
+                          className={"h-5 w-5 text-gray-500"}
+                          thick={ThickProp.Thick}
+                        />
+                      ) : (
+                        <Icon
+                          icon={IconProp.False}
+                          className={"h-5 w-5 text-gray-500"}
+                          thick={ThickProp.Thick}
+                        />
+                      )
+                    ) : (
+                      getNestedValue(
+                        props.item,
+                        String(column.key),
+                      )?.toString() ||
+                      column.noValueMessage ||
+                      ""
+                    );
+                } else if (column.key && column.getElement) {
+                  columnContent = column.getElement(props.item);
+                }
+
+                const contentWrapperClassName: string = column.contentClassName
+                  ? column.contentClassName
+                  : "";
+
+                const actionsContainerClassName: string =
+                  column.contentClassName
+                    ? `flex justify-end ${column.contentClassName}`
+                    : "flex justify-end";
+
                 return (
                   <td
                     key={i}
@@ -364,85 +448,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                       }
                     }}
                   >
-                    {column.key && !column.getElement ? (
-                      column.type === FieldType.Date ? (
-                        props.item[column.key] ? (
-                          OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-                            props.item[column.key] as string,
-                            true,
-                          )
-                        ) : (
-                          column.noValueMessage || ""
-                        )
-                      ) : column.type === FieldType.DateTime ? (
-                        props.item[column.key] ? (
-                          OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-                            props.item[column.key] as string,
-                            false,
-                          )
-                        ) : (
-                          column.noValueMessage || ""
-                        )
-                      ) : column.type === FieldType.USDCents ? (
-                        props.item[column.key] ? (
-                          ((props.item[column.key] as number) || 0) / 100 +
-                          " USD"
-                        ) : (
-                          column.noValueMessage || "0 USD"
-                        )
-                      ) : column.type === FieldType.Percent ? (
-                        props.item[column.key] ? (
-                          props.item[column.key] + "%"
-                        ) : (
-                          column.noValueMessage || "0%"
-                        )
-                      ) : column.type === FieldType.Color ? (
-                        props.item[column.key] ? (
-                          <ColorInput value={props.item[column.key] as Color} />
-                        ) : (
-                          column.noValueMessage || "0%"
-                        )
-                      ) : column.type === FieldType.LongText ? (
-                        props.item[column.key] ? (
-                          <LongTextViewer
-                            text={props.item[column.key] as string}
-                          />
-                        ) : (
-                          column.noValueMessage || ""
-                        )
-                      ) : column.type === FieldType.Boolean ? (
-                        props.item[column.key] ? (
-                          <Icon
-                            icon={IconProp.Check}
-                            className={"h-5 w-5 text-gray-500"}
-                            thick={ThickProp.Thick}
-                          />
-                        ) : (
-                          <Icon
-                            icon={IconProp.False}
-                            className={"h-5 w-5 text-gray-500"}
-                            thick={ThickProp.Thick}
-                          />
-                        )
-                      ) : (
-                        getNestedValue(
-                          props.item,
-                          String(column.key),
-                        )?.toString() ||
-                        column.noValueMessage ||
-                        ""
-                      )
-                    ) : (
-                      <></>
-                    )}
-
-                    {column.key && column.getElement ? (
-                      column.getElement(props.item)
-                    ) : (
-                      <></>
+                    {columnContent !== null && columnContent !== undefined && (
+                      <div className={contentWrapperClassName}>
+                        {columnContent}
+                      </div>
                     )}
                     {column.type === FieldType.Actions && (
-                      <div className="flex justify-end">
+                      <div className={actionsContainerClassName}>
                         {error && (
                           <div className="text-align-left">
                             <ConfirmModal

package/UI/esbuild-config.js

@@ -8,6 +8,37 @@ const path = require('path');
 const fs = require('fs');
 const dotenv = require('dotenv');
 
+function createRefractorCompatibilityPlugin() {
+  const candidateRoots = [
+    path.resolve(__dirname, '../node_modules/refractor'),
+    path.resolve(__dirname, '../../node_modules/refractor'),
+  ];
+
+  const refractorRoot = candidateRoots.find((packagePath) => fs.existsSync(packagePath));
+
+  if (!refractorRoot) {
+    throw new Error('Unable to locate refractor package for esbuild compatibility plugin.');
+  }
+
+  return {
+    name: 'refractor-compatibility',
+    setup(build) {
+      build.onResolve({ filter: /^refractor\/lib\// }, (args) => {
+        const relativePath = args.path.replace(/^refractor\/lib\//, '');
+        const candidatePath = path.join(refractorRoot, 'lib', `${relativePath}.js`);
+        return { path: candidatePath };
+      });
+
+      build.onResolve({ filter: /^refractor\/lang\// }, (args) => {
+        const relativePath = args.path.replace(/^refractor\/lang\//, '');
+        const filename = relativePath.endsWith('.js') ? relativePath : `${relativePath}.js`;
+        const candidatePath = path.join(refractorRoot, 'lang', filename);
+        return { path: candidatePath };
+      });
+    },
+  };
+}
+
 // CSS Plugin to handle CSS/SCSS files
 function createCSSPlugin() {
   return {
@@ -146,7 +177,7 @@ function createConfig(options) {
       'react': path.resolve('./node_modules/react'),
       ...additionalAlias,
     },
-    plugins: [createCSSPlugin(), createFileLoaderPlugin()],
+    plugins: [createRefractorCompatibilityPlugin(), createCSSPlugin(), createFileLoaderPlugin()],
     loader: {
       '.tsx': 'tsx',
       '.ts': 'ts',

package/build/dist/Models/DatabaseModels/StatusPage.js

@@ -107,6 +107,8 @@ let StatusPage = class StatusPage extends BaseModel {
         this.showScheduledMaintenanceEventsOnStatusPage = undefined;
         this.showSubscriberPageOnStatusPage = undefined;
         this.ipWhitelist = undefined;
+        this.enableEmbeddedOverallStatus = undefined;
+        this.embeddedOverallStatusToken = undefined;
     }
 };
 __decorate([
@@ -2361,6 +2363,86 @@ __decorate([
     }),
     __metadata("design:type", String)
 ], StatusPage.prototype, "ipWhitelist", void 0);
+__decorate([
+    ColumnAccessControl({
+        create: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.CreateProjectStatusPage,
+        ],
+        read: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.ReadProjectStatusPage,
+        ],
+        update: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.EditProjectStatusPage,
+        ],
+    }),
+    TableColumn({
+        isDefaultValueColumn: true,
+        type: TableColumnType.Boolean,
+        title: "Enable Embedded Overall Status Badge",
+        description: "Enable embedded overall status badge that can be displayed on external websites?",
+        defaultValue: false,
+    }),
+    Column({
+        type: ColumnType.Boolean,
+        default: false,
+        nullable: false,
+    }),
+    ColumnBillingAccessControl({
+        read: PlanType.Free,
+        update: PlanType.Growth,
+        create: PlanType.Free,
+    }),
+    __metadata("design:type", Boolean)
+], StatusPage.prototype, "enableEmbeddedOverallStatus", void 0);
+__decorate([
+    ColumnAccessControl({
+        create: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.CreateProjectStatusPage,
+        ],
+        read: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.ReadProjectStatusPage,
+        ],
+        update: [
+            Permission.ProjectOwner,
+            Permission.ProjectAdmin,
+            Permission.ProjectMember,
+            Permission.EditProjectStatusPage,
+        ],
+    }),
+    Index(),
+    TableColumn({
+        type: TableColumnType.ShortText,
+        required: false,
+        title: "Embedded Overall Status Token",
+        description: "Security token required to access the embedded overall status badge. This token must be provided in the URL.",
+    }),
+    Column({
+        type: ColumnType.ShortText,
+        length: ColumnLength.ShortText,
+        nullable: true,
+    }),
+    ColumnBillingAccessControl({
+        read: PlanType.Free,
+        update: PlanType.Growth,
+        create: PlanType.Free,
+    }),
+    __metadata("design:type", String)
+], StatusPage.prototype, "embeddedOverallStatusToken", void 0);
 StatusPage = __decorate([
     EnableDocumentation(),
     AccessControlColumn("labels"),