@oneuptime/common 10.0.37 → 10.0.39

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -955,7 +955,7 @@ const LineChart: React.ForwardRefExoticComponent<
                   }}
                   key={category}
                   name={category}
-                  type="linear"
+                  type={props.curve || ChartCurve.LINEAR}
                   dataKey={category}
                   stroke=""
                   strokeWidth={2}

package/UI/Components/Charts/ChartLibrary/Utils/ChartColors.ts

@@ -5,73 +5,84 @@ export type ColorUtility = "bg" | "stroke" | "fill" | "text";
 export const chartColors: {
   [color: string]: {
     [key in ColorUtility]: string;
-  };
+  } & { hex: string };
 } = {
   blue: {
     bg: "bg-blue-500",
     stroke: "stroke-blue-500",
     fill: "fill-blue-500",
     text: "text-blue-500",
+    hex: "#3b82f6",
   },
   emerald: {
     bg: "bg-emerald-500",
     stroke: "stroke-emerald-500",
     fill: "fill-emerald-500",
     text: "text-emerald-500",
+    hex: "#10b981",
   },
   violet: {
     bg: "bg-violet-500",
     stroke: "stroke-violet-500",
     fill: "fill-violet-500",
     text: "text-violet-500",
+    hex: "#8b5cf6",
   },
   amber: {
     bg: "bg-amber-500",
     stroke: "stroke-amber-500",
     fill: "fill-amber-500",
     text: "text-amber-500",
+    hex: "#f59e0b",
   },
   gray: {
     bg: "bg-gray-500",
     stroke: "stroke-gray-500",
     fill: "fill-gray-500",
     text: "text-gray-500",
+    hex: "#6b7280",
   },
   cyan: {
     bg: "bg-cyan-500",
     stroke: "stroke-cyan-500",
     fill: "fill-cyan-500",
     text: "text-cyan-500",
+    hex: "#06b6d4",
   },
   pink: {
     bg: "bg-pink-500",
     stroke: "stroke-pink-500",
     fill: "fill-pink-500",
     text: "text-pink-500",
+    hex: "#ec4899",
   },
   lime: {
     bg: "bg-lime-500",
     stroke: "stroke-lime-500",
     fill: "fill-lime-500",
     text: "text-lime-500",
+    hex: "#84cc16",
   },
   fuchsia: {
     bg: "bg-fuchsia-500",
     stroke: "stroke-fuchsia-500",
     fill: "fill-fuchsia-500",
     text: "text-fuchsia-500",
+    hex: "#d946ef",
   },
   indigo: {
     bg: "bg-indigo-500",
     stroke: "stroke-indigo-500",
     fill: "fill-indigo-500",
     text: "text-indigo-500",
+    hex: "#6366f1",
   },
   rose: {
     bg: "bg-rose-500",
     stroke: "stroke-rose-500",
     fill: "fill-rose-500",
     text: "text-rose-500",
+    hex: "#f43f5e",
   },
 };
 
@@ -115,3 +126,9 @@ export const getColorClassName: (
   };
   return chartColors[color]?.[type] ?? fallbackColor[type];
 };
+
+export const getColorHex: (color: AvailableChartColorsKeys) => string = (
+  color: AvailableChartColorsKeys,
+): string => {
+  return chartColors[color]?.hex ?? "#6b7280";
+};

package/UI/Components/Charts/Utils/XAxis.ts

@@ -27,67 +27,72 @@ export default class XAxisUtil {
     const totalWeeks: number = totalDays / 7;
     const totalMonths: number = totalDays / 30;
 
-    if (totalSeconds <= 100) {
+    /*
+     * Thresholds are chosen so that the number of tick labels
+     * stays between ~6 and ~15 for any range, keeping the axis readable.
+     */
+
+    if (totalSeconds <= 15) {
       return XAxisPrecision.EVERY_SECOND;
     }
-    if (totalSeconds <= 500) {
+    if (totalSeconds <= 75) {
       return XAxisPrecision.EVERY_FIVE_SECONDS;
     }
-    if (totalSeconds <= 1000) {
+    if (totalSeconds <= 150) {
       return XAxisPrecision.EVERY_TEN_SECONDS;
     }
-    if (totalSeconds <= 3000) {
+    if (totalSeconds <= 450) {
       return XAxisPrecision.EVERY_THIRTY_SECONDS;
     }
-    if (totalMinutes <= 100) {
+    if (totalMinutes <= 15) {
       return XAxisPrecision.EVERY_MINUTE;
     }
-    if (totalMinutes <= 500) {
+    if (totalMinutes <= 75) {
       return XAxisPrecision.EVERY_FIVE_MINUTES;
     }
-    if (totalMinutes <= 1000) {
+    if (totalMinutes <= 150) {
       return XAxisPrecision.EVERY_TEN_MINUTES;
     }
-    if (totalMinutes <= 3000) {
+    if (totalMinutes <= 450) {
       return XAxisPrecision.EVERY_THIRTY_MINUTES;
     }
-    if (totalHours <= 80) {
+    if (totalHours <= 15) {
       return XAxisPrecision.EVERY_HOUR;
     }
-    if (totalHours <= 100) {
+    if (totalHours <= 30) {
       return XAxisPrecision.EVERY_TWO_HOURS;
     }
-    if (totalHours <= 150) {
+    if (totalHours <= 45) {
       return XAxisPrecision.EVERY_THREE_HOURS;
     }
-    if (totalHours <= 300) {
+    if (totalHours <= 90) {
       return XAxisPrecision.EVERY_SIX_HOURS;
     }
-    if (totalHours <= 1200) {
+    if (totalHours <= 180) {
       return XAxisPrecision.EVERY_TWELVE_HOURS;
     }
-    if (totalDays <= 100) {
+    if (totalDays <= 15) {
       return XAxisPrecision.EVERY_DAY;
     }
-    if (totalDays <= 200) {
+    if (totalDays <= 30) {
       return XAxisPrecision.EVERY_TWO_DAYS;
     }
-    if (totalWeeks <= 100) {
+    if (totalWeeks <= 15) {
       return XAxisPrecision.EVERY_WEEK;
     }
-    if (totalWeeks <= 200) {
+    if (totalWeeks <= 30) {
       return XAxisPrecision.EVERY_TWO_WEEKS;
     }
-    if (totalMonths <= 100) {
+    if (totalMonths <= 15) {
       return XAxisPrecision.EVERY_MONTH;
     }
-    if (totalMonths <= 200) {
+    if (totalMonths <= 30) {
       return XAxisPrecision.EVERY_TWO_MONTHS;
     }
-    if (totalMonths <= 300) {
+    if (totalMonths <= 45) {
       return XAxisPrecision.EVERY_THREE_MONTHS;
     }
-    if (totalMonths <= 600) {
+    if (totalMonths <= 90) {
       return XAxisPrecision.EVERY_SIX_MONTHS;
     }
     return XAxisPrecision.EVERY_YEAR;

package/UI/Components/ConditionsTable/ConditionsTable.tsx

@@ -1,5 +1,8 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import ExpandableText from "../ExpandableText/ExpandableText";
+import Table from "../Table/Table";
+import FieldType from "../Types/FieldType";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 
 export interface Condition {
   type: string;
@@ -23,16 +26,6 @@ const defaultNegativeTypes: Array<string> = [
   "NetworkUnavailable",
 ];
 
-function isConditionBad(
-  condition: Condition,
-  negativeTypes: Array<string>,
-): boolean {
-  if (negativeTypes.includes(condition.type)) {
-    return condition.status === "True";
-  }
-  return condition.status === "False";
-}
-
 function getStatusStyle(
   condition: Condition,
   negativeTypes: Array<string>,
@@ -83,65 +76,91 @@ const ConditionsTable: FunctionComponent<ComponentProps> = (
   const negativeTypes: Array<string> =
     props.negativeTypes || defaultNegativeTypes;
 
-  if (props.conditions.length === 0) {
-    return (
-      <div className="text-gray-500 text-sm p-4">No conditions available.</div>
-    );
-  }
-
   return (
-    <div className={`overflow-x-auto ${props.className || ""}`}>
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="bg-gray-50">
-          <tr>
-            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-              Type
-            </th>
-            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-              Status
-            </th>
-            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-              Reason
-            </th>
-            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-              Message
-            </th>
-            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-              Last Transition
-            </th>
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-200">
-          {props.conditions.map((condition: Condition, index: number) => {
-            const isBad: boolean = isConditionBad(condition, negativeTypes);
-            return (
-              <tr key={index} className={isBad ? "bg-red-50/50" : ""}>
-                <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
+    <div className={props.className || ""}>
+      <Table<Condition>
+        id="conditions-table"
+        data={props.conditions}
+        singularLabel="Condition"
+        pluralLabel="Conditions"
+        isLoading={false}
+        error=""
+        currentPageNumber={1}
+        totalItemsCount={props.conditions.length}
+        itemsOnPage={props.conditions.length}
+        disablePagination={true}
+        noItemsMessage="No conditions available."
+        onNavigateToPage={() => {}}
+        sortBy={null}
+        sortOrder={SortOrder.Ascending}
+        onSortChanged={() => {}}
+        columns={[
+          {
+            title: "Type",
+            type: FieldType.Element,
+            key: "type",
+            disableSort: true,
+            getElement: (condition: Condition): ReactElement => {
+              return (
+                <span className="font-medium text-gray-900">
                   {condition.type}
-                </td>
-                <td className="px-4 py-3 whitespace-nowrap text-sm">
-                  <span
-                    className={`inline-flex px-2 py-0.5 text-xs font-semibold rounded-full ${getStatusStyle(condition, negativeTypes)}`}
-                  >
-                    {condition.status}
-                  </span>
-                </td>
-                <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-600">
-                  {condition.reason || "-"}
-                </td>
-                <td className="px-4 py-3 text-sm max-w-md">
-                  <ExpandableText text={condition.message || "-"} />
-                </td>
-                <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
-                  <span title={condition.lastTransitionTime || ""}>
-                    {formatRelativeTime(condition.lastTransitionTime || "")}
-                  </span>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                </span>
+              );
+            },
+          },
+          {
+            title: "Status",
+            type: FieldType.Element,
+            key: "status",
+            disableSort: true,
+            getElement: (condition: Condition): ReactElement => {
+              return (
+                <span
+                  className={`inline-flex px-2 py-0.5 text-xs font-semibold rounded-full ${getStatusStyle(condition, negativeTypes)}`}
+                >
+                  {condition.status}
+                </span>
+              );
+            },
+          },
+          {
+            title: "Reason",
+            type: FieldType.Element,
+            key: "reason",
+            disableSort: true,
+            getElement: (condition: Condition): ReactElement => {
+              return (
+                <span className="text-gray-600">{condition.reason || "-"}</span>
+              );
+            },
+          },
+          {
+            title: "Message",
+            type: FieldType.Element,
+            key: "message",
+            disableSort: true,
+            getElement: (condition: Condition): ReactElement => {
+              return <ExpandableText text={condition.message || "-"} />;
+            },
+          },
+          {
+            title: "Last Transition",
+            type: FieldType.Element,
+            key: "lastTransitionTime",
+            disableSort: true,
+            getElement: (condition: Condition): ReactElement => {
+              return (
+                <span
+                  className="text-gray-500"
+                  title={condition.lastTransitionTime || ""}
+                >
+                  {formatRelativeTime(condition.lastTransitionTime || "")}
+                </span>
+              );
+            },
+          },
+        ]}
+      />
     </div>
   );
 };

package/UI/Components/Dictionary/DictionaryOfStingsViewer.tsx

@@ -1,4 +1,7 @@
 import Dictionary from "../../../Types/Dictionary";
+import Table from "../Table/Table";
+import FieldType from "../Types/FieldType";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -47,36 +50,53 @@ const DictionaryOfStringsViewer: FunctionComponent<ComponentProps> = (
   }
 
   return (
-    <div className="overflow-x-auto">
-      <table className="min-w-full divide-y divide-gray-200">
-        <thead className="bg-gray-50">
-          <tr>
-            <th className="px-4 py-2.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Key
-            </th>
-            <th className="px-4 py-2.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Value
-            </th>
-          </tr>
-        </thead>
-        <tbody className="bg-white divide-y divide-gray-100">
-          {data.map((item: Item, index: number) => {
+    <Table<Item>
+      id="dictionary-viewer-table"
+      data={data}
+      singularLabel="Item"
+      pluralLabel="Items"
+      isLoading={false}
+      error=""
+      currentPageNumber={1}
+      totalItemsCount={data.length}
+      itemsOnPage={data.length}
+      disablePagination={true}
+      noItemsMessage="No items to display."
+      onNavigateToPage={() => {}}
+      sortBy={null}
+      sortOrder={SortOrder.Ascending}
+      onSortChanged={() => {}}
+      columns={[
+        {
+          title: "Key",
+          type: FieldType.Element,
+          key: "key",
+          disableSort: true,
+          getElement: (item: Item): ReactElement => {
+            return (
+              <span className="font-mono font-medium text-gray-900">
+                {item.key}
+              </span>
+            );
+          },
+        },
+        {
+          title: "Value",
+          type: FieldType.Element,
+          key: "value",
+          disableSort: true,
+          getElement: (item: Item): ReactElement => {
             return (
-              <tr key={index} className="hover:bg-gray-50/50">
-                <td className="px-4 py-2 text-sm font-mono font-medium text-indigo-700 whitespace-nowrap">
-                  {item.key}
-                </td>
-                <td className="px-4 py-2 text-sm font-mono text-gray-600 break-all">
-                  {item.value || (
-                    <span className="text-gray-400 italic">empty</span>
-                  )}
-                </td>
-              </tr>
+              <span className="font-mono text-gray-600">
+                {item.value || (
+                  <span className="text-gray-400 italic">empty</span>
+                )}
+              </span>
             );
-          })}
-        </tbody>
-      </table>
-    </div>
+          },
+        },
+      ]}
+    />
   );
 };
 

package/UI/Components/Filters/FiltersForm.tsx

@@ -66,12 +66,18 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
       <div className="pt-3 pb-5">
         <div className="space-y-5">
           {props.showFilter &&
-            !props.isFilterLoading &&
-            !props.filterError &&
             props.filters &&
             props.filters
               .filter((filter: Filter<T>) => {
-                return !filter.isAdvancedFilter || showMoreFilters;
+                if (filter.isAdvancedFilter) {
+                  // Hide advanced filters if not toggled on, or if they are still loading/errored
+                  return (
+                    showMoreFilters &&
+                    !props.isFilterLoading &&
+                    !props.filterError
+                  );
+                }
+                return true;
               })
               .map((filter: Filter<T>, i: number) => {
                 return (
@@ -127,6 +133,16 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
                 );
               })}
         </div>
+        {props.showFilter && props.isFilterLoading && !props.filterError && (
+          <ComponentLoader />
+        )}
+
+        {props.showFilter && props.filterError && (
+          <ErrorMessage
+            message={props.filterError}
+            onRefreshClick={props.onFilterRefreshClick}
+          />
+        )}
         {showAdvancedFilterButton && (
           <Button
             className="-ml-3 mt-1"
@@ -146,16 +162,6 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
           />
         )}
       </div>
-      {props.showFilter && props.isFilterLoading && !props.filterError && (
-        <ComponentLoader />
-      )}
-
-      {props.showFilter && props.filterError && (
-        <ErrorMessage
-          message={props.filterError}
-          onRefreshClick={props.onFilterRefreshClick}
-        />
-      )}
     </div>
   );
 };

package/UI/Components/InfoCard/InfoCard.tsx

@@ -6,6 +6,7 @@ export interface ComponentProps {
   value: string | ReactElement;
   className?: string;
   textClassName?: string;
+  onClick?: (() => void) | undefined;
 }
 
 const InfoCard: FunctionComponent<ComponentProps> = (
@@ -13,7 +14,8 @@ const InfoCard: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <div
-      className={`rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${props.className || ""}`}
+      onClick={props.onClick}
+      className={`rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${props.onClick ? "cursor-pointer" : ""} ${props.className || ""}`}
     >
       <div className="mb-2">
         <FieldLabelElement title={props.title} />

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -87,6 +87,7 @@ export interface ComponentProps {
   onFacetExclude?: (facetKey: string, value: string) => void;
   showFacetSidebar?: boolean;
   activeFilters?: Array<ActiveFilter> | undefined;
+  baseActiveFilters?: Array<ActiveFilter> | undefined;
   onRemoveFilter?: ((facetKey: string, value: string) => void) | undefined;
   onClearAllFilters?: (() => void) | undefined;
   valueSuggestions?: Record<string, Array<string>> | undefined;
@@ -829,11 +830,15 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         </div>
       )}
 
-      {/* Active filter chips */}
-      {enrichedActiveFilters.length > 0 && props.onRemoveFilter && (
+      {/* Active filter chips (read-only base filters + user-applied filters) */}
+      {((props.baseActiveFilters && props.baseActiveFilters.length > 0) ||
+        (enrichedActiveFilters.length > 0 && props.onRemoveFilter)) && (
         <ActiveFilterChips
-          filters={enrichedActiveFilters}
-          onRemove={props.onRemoveFilter}
+          filters={[
+            ...(props.baseActiveFilters || []),
+            ...enrichedActiveFilters,
+          ]}
+          onRemove={props.onRemoveFilter || (() => {})}
           onClearAll={props.onClearAllFilters || (() => {})}
         />
       )}

package/UI/Components/LogsViewer/components/ActiveFilterChips.tsx

@@ -16,9 +16,36 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
     return null;
   }
 
+  const readOnlyFilters: Array<ActiveFilter> = props.filters.filter(
+    (f: ActiveFilter) => {
+      return f.readOnly;
+    },
+  );
+  const removableFilters: Array<ActiveFilter> = props.filters.filter(
+    (f: ActiveFilter) => {
+      return !f.readOnly;
+    },
+  );
+
   return (
     <div className="flex flex-wrap items-center gap-1.5 px-0.5">
-      {props.filters.map((filter: ActiveFilter) => {
+      {readOnlyFilters.map((filter: ActiveFilter) => {
+        const chipKey: string = `readonly:${filter.facetKey}:${filter.value}`;
+        return (
+          <span
+            key={chipKey}
+            className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700"
+            title={`${filter.displayKey}: ${filter.displayValue} (applied filter)`}
+          >
+            <Icon icon={IconProp.Lock} className="h-2.5 w-2.5 text-gray-400" />
+            <span className="font-medium text-gray-500">
+              {filter.displayKey}:
+            </span>
+            <span>{filter.displayValue}</span>
+          </span>
+        );
+      })}
+      {removableFilters.map((filter: ActiveFilter) => {
         const chipKey: string = `${filter.facetKey}:${filter.value}`;
         return (
           <span
@@ -42,7 +69,7 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
           </span>
         );
       })}
-      {props.filters.length > 1 && (
+      {removableFilters.length > 1 && (
         <button
           type="button"
           className="rounded px-1.5 py-0.5 text-[11px] font-medium text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"

package/UI/Components/LogsViewer/types.ts

@@ -22,6 +22,7 @@ export interface ActiveFilter {
   value: string;
   displayKey: string;
   displayValue: string;
+  readOnly?: boolean | undefined;
 }
 
 export type LogsViewMode = "list" | "analytics";

package/UI/Components/Workflow/Utils.ts

@@ -8,7 +8,10 @@ import ComponentMetadata, {
 import Components, { Categories } from "../../../Types/Workflow/Components";
 import BaseModelComponentFactory from "../../../Types/Workflow/Components/BaseModel";
 import Entities from "../../../Models/DatabaseModels/Index";
-import { ConditionOperator } from "../../../Types/Workflow/Components/Condition";
+import {
+  ConditionOperator,
+  ConditionValueType,
+} from "../../../Types/Workflow/Components/Condition";
 
 type LoadComponentsAndCategoriesFunction = () => {
   components: Array<ComponentMetadata>;
@@ -230,6 +233,34 @@ export const componentInputTypeToFormFieldType: ComponentInputTypeToFormFieldTyp
       };
     }
 
+    if (componentInputType === ComponentInputType.ValueType) {
+      return {
+        fieldType: FormFieldSchemaType.Dropdown,
+        dropdownOptions: [
+          {
+            label: "Text",
+            value: ConditionValueType.Text,
+          },
+          {
+            label: "Boolean",
+            value: ConditionValueType.Boolean,
+          },
+          {
+            label: "Number",
+            value: ConditionValueType.Number,
+          },
+          {
+            label: "Null",
+            value: ConditionValueType.Null,
+          },
+          {
+            label: "Undefined",
+            value: ConditionValueType.Undefined,
+          },
+        ],
+      };
+    }
+
     if (componentInputType === ComponentInputType.Date) {
       return {
         fieldType: FormFieldSchemaType.Date,