@oneuptime/common 10.0.35 → 10.0.36

package/UI/Components/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,69 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export enum AlertBannerType {
+  Success = "success",
+  Warning = "warning",
+  Danger = "danger",
+  Info = "info",
+}
+
+export interface ComponentProps {
+  title: string;
+  type: AlertBannerType;
+  children?: ReactElement | undefined;
+  rightElement?: ReactElement | undefined;
+  className?: string | undefined;
+}
+
+const bannerStyles: Record<
+  AlertBannerType,
+  { container: string; dot: string; title: string }
+> = {
+  [AlertBannerType.Success]: {
+    container: "bg-emerald-50 border-emerald-200",
+    dot: "bg-emerald-500",
+    title: "text-emerald-800",
+  },
+  [AlertBannerType.Warning]: {
+    container: "bg-amber-50 border-amber-200",
+    dot: "bg-amber-500",
+    title: "text-amber-800",
+  },
+  [AlertBannerType.Danger]: {
+    container: "bg-red-50 border-red-200",
+    dot: "bg-red-500",
+    title: "text-red-800",
+  },
+  [AlertBannerType.Info]: {
+    container: "bg-blue-50 border-blue-200",
+    dot: "bg-blue-500",
+    title: "text-blue-800",
+  },
+};
+
+const AlertBanner: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const styles: { container: string; dot: string; title: string } =
+    bannerStyles[props.type];
+
+  return (
+    <div
+      className={`rounded-lg border p-4 ${styles.container} ${props.className || ""}`}
+      role="alert"
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className={`inline-flex h-3 w-3 rounded-full ${styles.dot}`} />
+          <span className={`text-lg font-semibold ${styles.title}`}>
+            {props.title}
+          </span>
+        </div>
+        {props.rightElement && <div>{props.rightElement}</div>}
+      </div>
+      {props.children && <div className="mt-2">{props.children}</div>}
+    </div>
+  );
+};
+
+export default AlertBanner;

package/UI/Components/ConditionsTable/ConditionsTable.tsx

@@ -0,0 +1,149 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import ExpandableText from "../ExpandableText/ExpandableText";
+
+export interface Condition {
+  type: string;
+  status: string;
+  reason?: string | undefined;
+  message?: string | undefined;
+  lastTransitionTime?: string | undefined;
+}
+
+export interface ComponentProps {
+  conditions: Array<Condition>;
+  negativeTypes?: Array<string> | undefined;
+  className?: string | undefined;
+}
+
+// Default condition types where "True" is bad
+const defaultNegativeTypes: Array<string> = [
+  "MemoryPressure",
+  "DiskPressure",
+  "PIDPressure",
+  "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>,
+): string {
+  const isNegativeType: boolean = negativeTypes.includes(condition.type);
+  if (condition.status === "True") {
+    return isNegativeType
+      ? "bg-gradient-to-r from-red-50 to-red-100 text-red-800 ring-1 ring-inset ring-red-200/80"
+      : "bg-gradient-to-r from-emerald-50 to-emerald-100 text-emerald-800 ring-1 ring-inset ring-emerald-200/80";
+  }
+  if (condition.status === "False") {
+    return isNegativeType
+      ? "bg-gradient-to-r from-emerald-50 to-emerald-100 text-emerald-800 ring-1 ring-inset ring-emerald-200/80"
+      : "bg-gradient-to-r from-red-50 to-red-100 text-red-800 ring-1 ring-inset ring-red-200/80";
+  }
+  return "bg-gradient-to-r from-amber-50 to-amber-100 text-amber-800 ring-1 ring-inset ring-amber-200/80";
+}
+
+function formatRelativeTime(timestamp: string): string {
+  if (!timestamp) {
+    return "-";
+  }
+  const date: Date = new Date(timestamp);
+  const now: Date = new Date();
+  const diffMs: number = now.getTime() - date.getTime();
+  if (diffMs < 0) {
+    return timestamp;
+  }
+  const diffSec: number = Math.floor(diffMs / 1000);
+  if (diffSec < 60) {
+    return `${diffSec}s ago`;
+  }
+  const diffMin: number = Math.floor(diffSec / 60);
+  if (diffMin < 60) {
+    return `${diffMin}m ago`;
+  }
+  const diffHrs: number = Math.floor(diffMin / 60);
+  if (diffHrs < 24) {
+    return `${diffHrs}h ago`;
+  }
+  const diffDays: number = Math.floor(diffHrs / 24);
+  return `${diffDays}d ago`;
+}
+
+const ConditionsTable: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  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">
+                  {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>
+    </div>
+  );
+};
+
+export default ConditionsTable;

package/UI/Components/Dictionary/DictionaryOfStingsViewer.tsx

@@ -40,22 +40,42 @@ const DictionaryOfStringsViewer: FunctionComponent<ComponentProps> = (
     );
   }, [props.value]);
 
+  if (data.length === 0) {
+    return (
+      <div className="text-gray-400 text-sm py-2">No items to display.</div>
+    );
+  }
+
   return (
-    <div>
-      <div>
-        {data.map((item: Item, index: number) => {
-          return (
-            <div key={index} className="flex">
-              <div className="mr-1">
-                <div>{item.key}</div>
-              </div>
-              <div className="ml-1">
-                <div>{item.value}</div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
+    <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) => {
+            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>
+            );
+          })}
+        </tbody>
+      </table>
     </div>
   );
 };

package/UI/Components/ExpandableText/ExpandableText.tsx

@@ -0,0 +1,42 @@
+import React, { FunctionComponent, ReactElement, useState } from "react";
+
+export interface ComponentProps {
+  text: string;
+  maxLength?: number | undefined;
+  className?: string | undefined;
+}
+
+const ExpandableText: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const maxLength: number = props.maxLength || 80;
+
+  if (!props.text || props.text === "-") {
+    return <span className="text-gray-400">-</span>;
+  }
+
+  const isLong: boolean = props.text.length > maxLength;
+
+  if (!isLong) {
+    return (
+      <span className={props.className || "text-gray-600"}>{props.text}</span>
+    );
+  }
+
+  return (
+    <span className={props.className || "text-gray-600"}>
+      {isExpanded ? props.text : props.text.substring(0, maxLength) + "..."}
+      <button
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
+        className="ml-1.5 text-xs text-indigo-600 hover:text-indigo-800 font-medium"
+      >
+        {isExpanded ? "Less" : "More"}
+      </button>
+    </span>
+  );
+};
+
+export default ExpandableText;

package/UI/Components/FilterButtons/FilterButtons.tsx

@@ -0,0 +1,60 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface FilterButtonOption {
+  label: string;
+  value: string;
+  badge?: number | undefined;
+}
+
+export interface ComponentProps {
+  options: Array<FilterButtonOption>;
+  selectedValue: string;
+  onSelect: (value: string) => void;
+  className?: string | undefined;
+}
+
+const FilterButtons: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <div
+      className={`inline-flex gap-1 ${props.className || ""}`}
+      role="radiogroup"
+      aria-label="Filter options"
+    >
+      {props.options.map((option: FilterButtonOption) => {
+        const isActive: boolean = props.selectedValue === option.value;
+        return (
+          <button
+            key={option.value}
+            onClick={() => {
+              props.onSelect(option.value);
+            }}
+            className={`px-3 py-1.5 text-xs rounded-md font-medium transition-all duration-150 ${
+              isActive
+                ? "bg-indigo-100 text-indigo-800 ring-1 ring-inset ring-indigo-200"
+                : "bg-white text-gray-600 ring-1 ring-inset ring-gray-200 hover:bg-gray-50 hover:text-gray-800"
+            }`}
+            role="radio"
+            aria-checked={isActive}
+          >
+            {option.label}
+            {option.badge !== undefined && option.badge > 0 && (
+              <span
+                className={`ml-1.5 inline-flex min-w-[1.25rem] justify-center px-1 py-0 text-[10px] rounded-full ${
+                  isActive
+                    ? "bg-indigo-200 text-indigo-900"
+                    : "bg-gray-100 text-gray-500"
+                }`}
+              >
+                {option.badge}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default FilterButtons;

package/UI/Components/Markdown.tsx/MarkdownEditor.tsx

@@ -1,6 +1,7 @@
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import TinyFormDocumentation from "../TinyFormDocumentation/TinyFormDocumentation";
+import DOMPurify from "dompurify";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -416,9 +417,11 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
       htmlContent = `<p class="mb-4">${htmlContent}</p>`;
     }
 
+    const sanitizedContent: string = DOMPurify.sanitize(htmlContent);
+
     return (
       <div className="p-4 min-h-32 bg-white prose prose-sm max-w-none">
-        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+        <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
       </div>
     );
   };

package/UI/Components/ResourceUsageBar/ResourceUsageBar.tsx

@@ -0,0 +1,58 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  label: string;
+  value: number; // percentage 0-100
+  valueLabel?: string | undefined;
+  secondaryLabel?: string | undefined;
+  heightClassName?: string | undefined;
+  className?: string | undefined;
+  labelWidthClassName?: string | undefined;
+}
+
+function getBarColor(percent: number): string {
+  if (percent > 80) {
+    return "bg-red-500";
+  }
+  if (percent > 60) {
+    return "bg-amber-500";
+  }
+  return "bg-emerald-500";
+}
+
+const ResourceUsageBar: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const percent: number = Math.min(Math.max(props.value, 0), 100);
+  const heightClass: string = props.heightClassName || "h-2";
+  const labelWidthClass: string = props.labelWidthClassName || "w-40";
+
+  return (
+    <div className={`flex items-center gap-3 ${props.className || ""}`}>
+      <div
+        className={`${labelWidthClass} truncate text-sm text-gray-800 font-medium`}
+        title={props.label}
+      >
+        {props.label}
+      </div>
+      {props.secondaryLabel && (
+        <span className="inline-flex px-1.5 py-0.5 text-xs rounded bg-blue-50 text-blue-700">
+          {props.secondaryLabel}
+        </span>
+      )}
+      <div className={`flex-1 bg-gray-100 rounded-full ${heightClass}`}>
+        <div
+          className={`${heightClass} rounded-full transition-all duration-300 ${getBarColor(percent)}`}
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      {props.valueLabel && (
+        <span className="text-xs text-gray-600 w-16 text-right font-medium tabular-nums">
+          {props.valueLabel}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default ResourceUsageBar;

package/UI/Components/StackedProgressBar/StackedProgressBar.tsx

@@ -0,0 +1,81 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface StackedProgressBarSegment {
+  value: number;
+  color: string; // Tailwind bg class, e.g. "bg-green-500"
+  label: string;
+  tooltip?: string | undefined;
+}
+
+export interface ComponentProps {
+  segments: Array<StackedProgressBarSegment>;
+  totalValue?: number | undefined;
+  heightClassName?: string | undefined;
+  showLegend?: boolean | undefined;
+  className?: string | undefined;
+}
+
+const StackedProgressBar: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const total: number =
+    props.totalValue ||
+    props.segments.reduce((sum: number, seg: StackedProgressBarSegment) => {
+      return sum + seg.value;
+    }, 0);
+
+  const heightClass: string = props.heightClassName || "h-4";
+  const showLegend: boolean = props.showLegend !== false;
+
+  return (
+    <div className={props.className || ""}>
+      <div
+        className={`flex ${heightClass} rounded-full overflow-hidden bg-gray-100`}
+        role="progressbar"
+        aria-label="Stacked progress bar"
+      >
+        {props.segments.map(
+          (segment: StackedProgressBarSegment, index: number) => {
+            if (segment.value <= 0 || total <= 0) {
+              return null;
+            }
+            const widthPercent: number = (segment.value / total) * 100;
+            return (
+              <div
+                key={index}
+                className={`${segment.color} ${heightClass} transition-all duration-300`}
+                style={{ width: `${widthPercent}%` }}
+                title={segment.tooltip || `${segment.label}: ${segment.value}`}
+              />
+            );
+          },
+        )}
+      </div>
+      {showLegend && (
+        <div className="flex flex-wrap gap-x-5 gap-y-1 mt-2.5">
+          {props.segments
+            .filter((seg: StackedProgressBarSegment) => {
+              return seg.value > 0;
+            })
+            .map((segment: StackedProgressBarSegment, index: number) => {
+              return (
+                <div key={index} className="flex items-center gap-1.5">
+                  <span
+                    className={`inline-block w-2.5 h-2.5 rounded-full ${segment.color}`}
+                  />
+                  <span className="text-sm text-gray-600">
+                    {segment.label}{" "}
+                    <span className="font-medium text-gray-800">
+                      ({segment.value})
+                    </span>
+                  </span>
+                </div>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StackedProgressBar;

package/UI/Components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,44 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export enum StatusBadgeType {
+  Success = "success",
+  Warning = "warning",
+  Danger = "danger",
+  Info = "info",
+  Neutral = "neutral",
+}
+
+export interface ComponentProps {
+  text: string;
+  type?: StatusBadgeType | undefined;
+  className?: string | undefined;
+}
+
+const statusStyles: Record<StatusBadgeType, string> = {
+  [StatusBadgeType.Success]:
+    "bg-gradient-to-r from-emerald-50 to-emerald-100 text-emerald-800 ring-1 ring-inset ring-emerald-200/80",
+  [StatusBadgeType.Warning]:
+    "bg-gradient-to-r from-amber-50 to-amber-100 text-amber-800 ring-1 ring-inset ring-amber-200/80",
+  [StatusBadgeType.Danger]:
+    "bg-gradient-to-r from-red-50 to-red-100 text-red-800 ring-1 ring-inset ring-red-200/80",
+  [StatusBadgeType.Info]:
+    "bg-gradient-to-r from-blue-50 to-blue-100 text-blue-800 ring-1 ring-inset ring-blue-200/80",
+  [StatusBadgeType.Neutral]:
+    "bg-gradient-to-r from-gray-50 to-gray-100 text-gray-700 ring-1 ring-inset ring-gray-200/80",
+};
+
+const StatusBadge: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const type: StatusBadgeType = props.type || StatusBadgeType.Neutral;
+
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-full ${statusStyles[type]} ${props.className || ""}`}
+    >
+      {props.text}
+    </span>
+  );
+};
+
+export default StatusBadge;

package/UI/Components/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useRef,
   useState,
 } from "react";
 
@@ -14,19 +15,46 @@ export interface ComponentProps {
 const Tabs: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [currentTab, setCurrentTab] = useState<Tab | null>(null);
+  const [currentTabName, setCurrentTabName] = useState<string | null>(null);
+  const hasInitialized: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
 
+  // Initialize current tab only once, or when the tab list names change
   useEffect(() => {
-    setCurrentTab(props.tabs.length > 0 ? (props.tabs[0] as Tab) : null);
-  }, [props.tabs]);
+    const tabNames: Array<string> = props.tabs.map((t: Tab) => {
+      return t.name;
+    });
+
+    if (!hasInitialized.current && props.tabs.length > 0) {
+      hasInitialized.current = true;
+      setCurrentTabName(props.tabs[0]!.name);
+      return;
+    }
+
+    // If current tab no longer exists in the list, reset to first
+    if (currentTabName && !tabNames.includes(currentTabName)) {
+      setCurrentTabName(props.tabs.length > 0 ? props.tabs[0]!.name : null);
+    }
+  }, [
+    props.tabs
+      .map((t: Tab) => {
+        return t.name;
+      })
+      .join(","),
+  ]);
+
+  // Find the current tab object by name
+  const currentTab: Tab | undefined = props.tabs.find((t: Tab) => {
+    return t.name === currentTabName;
+  });
 
   useEffect(() => {
     if (currentTab && props.onTabChange) {
       props.onTabChange(currentTab);
     }
-  }, [currentTab]);
+  }, [currentTabName]);
 
-  const tabPanelId: string = `tabpanel-${currentTab?.name || "default"}`;
+  const tabPanelId: string = `tabpanel-${currentTabName || "default"}`;
 
   return (
     <div>
@@ -41,9 +69,9 @@ const Tabs: FunctionComponent<ComponentProps> = (
               key={tab.name}
               tab={tab}
               onClick={() => {
-                setCurrentTab(tab);
+                setCurrentTabName(tab.name);
               }}
-              isSelected={tab === currentTab}
+              isSelected={tab.name === currentTabName}
               tabPanelId={tabPanelId}
             />
           );
@@ -52,7 +80,7 @@ const Tabs: FunctionComponent<ComponentProps> = (
       <div
         id={tabPanelId}
         role="tabpanel"
-        aria-labelledby={`tab-${currentTab?.name || "default"}`}
+        aria-labelledby={`tab-${currentTabName || "default"}`}
         className="mt-3 ml-1"
       >
         {currentTab && currentTab.children}

package/UI/Utils/Dropdown.ts

@@ -80,7 +80,8 @@ export default class DropdownUtil {
   public static getDropdownOptionsFromArray(
     arr: Array<string>,
   ): Array<DropdownOption> {
-    return arr.map((item: string) => {
+    const uniqueArr: Array<string> = [...new Set(arr)];
+    return uniqueArr.map((item: string) => {
       return {
         label: item,
         value: item,