@oneuptime/common 8.0.5440 → 8.0.5466

package/Server/Utils/Telemetry/Telemetry.ts

@@ -143,10 +143,10 @@ export default class TelemetryUtil {
     let { prefixKeysWithString } = data;
 
     if (prefixKeysWithString) {
-      prefixKeysWithString = prefixKeysWithString + ".";
+      prefixKeysWithString = `${prefixKeysWithString}.`;
     }
 
-    let finalObj: Dictionary<AttributeType | Array<AttributeType>> = {};
+    const finalObj: Dictionary<AttributeType | Array<AttributeType>> = {};
     const attributes: JSONArray = items;
 
     if (!attributes) {
@@ -154,25 +154,41 @@ export default class TelemetryUtil {
     }
 
     for (const attribute of attributes) {
-      if (attribute["key"] && typeof attribute["key"] === "string") {
-        const keyWithPrefix: string = `${prefixKeysWithString}${attribute["key"]}`;
-
-        const value:
-          | AttributeType
-          | Dictionary<AttributeType>
-          | Array<AttributeType> = this.getAttributeValues(
-          keyWithPrefix,
-          attribute["value"],
-        );
-
-        if (Array.isArray(value)) {
-          finalObj = { ...finalObj, [keyWithPrefix]: value };
-        } else if (typeof value === "object" && value !== null) {
-          finalObj = { ...finalObj, ...(value as Dictionary<AttributeType>) };
-        } else {
-          finalObj[keyWithPrefix] = value;
+      if (!attribute["key"] || typeof attribute["key"] !== "string") {
+        continue;
+      }
+
+      const keyWithPrefix: string = `${prefixKeysWithString}${attribute["key"]}`;
+
+      const value:
+        | AttributeType
+        | Dictionary<AttributeType | Array<AttributeType>>
+        | Array<AttributeType>
+        | null = this.getAttributeValues(keyWithPrefix, attribute["value"]);
+
+      if (value === null) {
+        finalObj[keyWithPrefix] = null;
+        continue;
+      }
+
+      if (Array.isArray(value)) {
+        finalObj[keyWithPrefix] = value;
+        continue;
+      }
+
+      if (typeof value === "object") {
+        for (const [nestedKey, nestedValue] of Object.entries(
+          value as Dictionary<AttributeType | Array<AttributeType>>,
+        )) {
+          finalObj[nestedKey] = nestedValue as
+            | AttributeType
+            | Array<AttributeType>;
         }
+
+        continue;
       }
+
+      finalObj[keyWithPrefix] = value as AttributeType;
     }
 
     return finalObj;
@@ -181,73 +197,111 @@ export default class TelemetryUtil {
   public static getAttributeValues(
     prefixKeysWithString: string,
     value: JSONValue,
-  ): AttributeType | Dictionary<AttributeType> | Array<AttributeType> {
+  ):
+    | AttributeType
+    | Dictionary<AttributeType | Array<AttributeType>>
+    | Array<AttributeType>
+    | null {
     let finalObj:
-      | Dictionary<AttributeType>
+      | Dictionary<AttributeType | Array<AttributeType>>
       | AttributeType
-      | Array<AttributeType> = null;
-    value = value as JSONObject;
-
-    if (value["stringValue"]) {
-      finalObj = value["stringValue"] as string;
-    } else if (value["intValue"]) {
-      finalObj = value["intValue"] as number;
-    } else if (value["doubleValue"]) {
-      finalObj = value["doubleValue"] as number;
-    } else if (value["boolValue"]) {
-      finalObj = value["boolValue"] as boolean;
-    } else if (
-      value["arrayValue"] &&
-      (value["arrayValue"] as JSONObject)["values"]
-    ) {
-      const values: JSONArray = (value["arrayValue"] as JSONObject)[
-        "values"
-      ] as JSONArray;
-      finalObj = values.map((v: JSONObject) => {
-        return this.getAttributeValues(
-          prefixKeysWithString,
-          v,
-        ) as AttributeType;
-      }) as Array<AttributeType>;
-    } else if (
-      value["mapValue"] &&
-      (value["mapValue"] as JSONObject)["fields"]
-    ) {
-      const fields: JSONObject = (value["mapValue"] as JSONObject)?.[
-        "fields"
-      ] as JSONObject;
-
-      const flattenedFields: Dictionary<AttributeType> = {};
-      for (const key in fields) {
-        const prefixKey: string = `${prefixKeysWithString}.${key}`;
-        const nestedValue: AttributeType | Dictionary<AttributeType> =
-          this.getAttributeValues(prefixKey, fields[key]) as AttributeType;
-        if (typeof nestedValue === "object" && nestedValue !== null) {
-          for (const nestedKey in nestedValue as Dictionary<AttributeType>) {
-            flattenedFields[`${prefixKey}.${nestedKey}`] = (
-              nestedValue as Dictionary<AttributeType>
-            )[nestedKey] as AttributeType;
+      | Array<AttributeType>
+      | null = null;
+    const jsonValue: JSONObject = value as JSONObject;
+
+    if (jsonValue && typeof jsonValue === "object") {
+      if (Object.prototype.hasOwnProperty.call(jsonValue, "stringValue")) {
+        const stringValue: JSONValue = jsonValue["stringValue"];
+        finalObj =
+          stringValue !== undefined && stringValue !== null
+            ? (stringValue as string)
+            : "";
+      } else if (Object.prototype.hasOwnProperty.call(jsonValue, "intValue")) {
+        const intValue: JSONValue = jsonValue["intValue"];
+        if (intValue !== undefined && intValue !== null) {
+          finalObj = intValue as number;
+        }
+      } else if (
+        Object.prototype.hasOwnProperty.call(jsonValue, "doubleValue")
+      ) {
+        const doubleValue: JSONValue = jsonValue["doubleValue"];
+        if (doubleValue !== undefined && doubleValue !== null) {
+          finalObj = doubleValue as number;
+        }
+      } else if (Object.prototype.hasOwnProperty.call(jsonValue, "boolValue")) {
+        finalObj = jsonValue["boolValue"] as boolean;
+      } else if (
+        jsonValue["arrayValue"] &&
+        (jsonValue["arrayValue"] as JSONObject)["values"]
+      ) {
+        const values: JSONArray = (jsonValue["arrayValue"] as JSONObject)[
+          "values"
+        ] as JSONArray;
+        finalObj = values.map((v: JSONObject) => {
+          return this.getAttributeValues(
+            prefixKeysWithString,
+            v,
+          ) as AttributeType;
+        }) as Array<AttributeType>;
+      } else if (
+        jsonValue["mapValue"] &&
+        (jsonValue["mapValue"] as JSONObject)["fields"]
+      ) {
+        const fields: JSONObject = (jsonValue["mapValue"] as JSONObject)[
+          "fields"
+        ] as JSONObject;
+
+        const flattenedFields: Dictionary<
+          AttributeType | Array<AttributeType>
+        > = {};
+        for (const key in fields) {
+          const nestedPrefix: string = `${prefixKeysWithString}.${key}`;
+          const nestedValue:
+            | AttributeType
+            | Dictionary<AttributeType | Array<AttributeType>>
+            | Array<AttributeType>
+            | null = this.getAttributeValues(nestedPrefix, fields[key]);
+
+          if (nestedValue === null) {
+            flattenedFields[nestedPrefix] = null;
+            continue;
           }
-        } else {
-          flattenedFields[prefixKey] = nestedValue;
+
+          if (Array.isArray(nestedValue)) {
+            flattenedFields[nestedPrefix] = nestedValue;
+            continue;
+          }
+
+          if (typeof nestedValue === "object") {
+            for (const [nestedKey, nestedEntry] of Object.entries(
+              nestedValue as Dictionary<AttributeType | Array<AttributeType>>,
+            )) {
+              flattenedFields[nestedKey] = nestedEntry as
+                | AttributeType
+                | Array<AttributeType>;
+            }
+
+            continue;
+          }
+
+          flattenedFields[nestedPrefix] = nestedValue as AttributeType;
         }
+
+        finalObj = flattenedFields;
+      } else if (
+        jsonValue["kvlistValue"] &&
+        (jsonValue["kvlistValue"] as JSONObject)["values"]
+      ) {
+        const values: JSONArray = (jsonValue["kvlistValue"] as JSONObject)[
+          "values"
+        ] as JSONArray;
+        finalObj = this.getAttributes({
+          prefixKeysWithString,
+          items: values,
+        });
+      } else if ("nullValue" in jsonValue) {
+        finalObj = null;
       }
-      finalObj = flattenedFields;
-    }
-    // kvlistValue
-    else if (
-      value["kvlistValue"] &&
-      (value["kvlistValue"] as JSONObject)["values"]
-    ) {
-      const values: JSONArray = (value["kvlistValue"] as JSONObject)[
-        "values"
-      ] as JSONArray;
-      finalObj = this.getAttributes({
-        prefixKeysWithString,
-        items: values,
-      }) as Dictionary<AttributeType>;
-    } else if (value["nullValue"]) {
-      finalObj = null;
     }
 
     return finalObj;

package/Server/Utils/VM/VMRunner.ts

@@ -48,10 +48,9 @@ export default class VMRunner {
 
     vm.createContext(sandbox); // Contextify the object.
 
-    const script: string =
-      `(async()=>{
-            ${code}
-        })()` || "";
+    const script: string = `(async()=>{
+        ${code}
+      })()`;
 
     const returnVal: any = await vm.runInContext(script, sandbox, {
       timeout: options.timeout || 5000,

package/Types/Date.ts

@@ -1453,4 +1453,9 @@ export default class OneUptimeDate {
     date = this.fromString(date);
     return moment(date).format("YYYY-MM-DD HH:mm:ss");
   }
+
+  public static toClickhouseDateTime(date: Date | string): string {
+    const parsedDate: Date = this.fromString(date);
+    return moment(parsedDate).utc().format("YYYY-MM-DD HH:mm:ss");
+  }
 }

package/UI/Components/LogsViewer/LogItem.tsx

@@ -265,7 +265,7 @@ const LogItem: FunctionComponent<ComponentProps> = (
   if (isCollapsed) {
     return (
       <div
-        className={`group relative text-slate-200 flex items-center gap-2 cursor-pointer hover:bg-slate-800/40 px-2 py-0.5 border border-transparent border-l ${leftBorderColor} rounded-sm transition-colors duration-100`}
+        className={`group relative text-slate-200 flex items-center gap-2 cursor-pointer hover:bg-slate-800/40 px-2 py-0.5 border border-transparent border-l ${leftBorderColor} rounded-sm transition-colors duration-100 font-mono`}
         onClick={toggleCollapsed}
         role="button"
         aria-expanded={!isCollapsed}
@@ -311,11 +311,14 @@ const LogItem: FunctionComponent<ComponentProps> = (
           className={`${bodyColor} font-mono text-[13px] md:text-sm leading-5 tracking-tight subpixel-antialiased flex-1 min-w-0`}
         >
           {isBodyInJSON ? (
-            <div className="truncate" title={logBodyMinified}>
+            <div className="truncate font-mono" title={logBodyMinified}>
               {logBodyMinified}
             </div>
           ) : (
-            <div className="truncate" title={props.log.body?.toString()}>
+            <div
+              className="truncate font-mono"
+              title={props.log.body?.toString()}
+            >
               {props.log.body?.toString()}
             </div>
           )}
@@ -339,7 +342,12 @@ const LogItem: FunctionComponent<ComponentProps> = (
       className={`group relative text-slate-200 bg-slate-950/70 border ${leftBorderColor} border-l border-slate-900 rounded-sm p-2 hover:border-slate-700 transition-colors`}
     >
       {/* Header with Service Name and Close Indicator */}
-      <div className="flex items-center justify-between mb-1 pb-1 border-b border-slate-800/80">
+      <div
+        className="flex items-center justify-between mb-1 pb-1 border-b border-slate-800/80"
+        onClick={() => {
+          toggleCollapsed();
+        }}
+      >
         {serviceName && (
           <div
             className="text-[13px] font-semibold"

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" }}
               />
             ) : (