@oneuptime/common 10.0.35 → 10.0.37

package/Types/Permission.ts

@@ -771,6 +771,11 @@ enum Permission {
   EditWorkspaceNotificationRule = "EditWorkspaceNotificationRule",
   ReadWorkspaceNotificationRule = "ReadWorkspaceNotificationRule",
 
+  CreateWorkspaceNotificationSummary = "CreateWorkspaceNotificationSummary",
+  DeleteWorkspaceNotificationSummary = "DeleteWorkspaceNotificationSummary",
+  EditWorkspaceNotificationSummary = "EditWorkspaceNotificationSummary",
+  ReadWorkspaceNotificationSummary = "ReadWorkspaceNotificationSummary",
+
   // Alert Episode Permissions
   CreateAlertEpisode = "CreateAlertEpisode",
   DeleteAlertEpisode = "DeleteAlertEpisode",
@@ -1389,6 +1394,43 @@ export class PermissionHelper {
         group: PermissionGroup.Settings,
       },
 
+      {
+        permission: Permission.CreateWorkspaceNotificationSummary,
+        title: "Create Workspace Notification Summary",
+        description:
+          "This permission can create workspace notification summaries for this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        group: PermissionGroup.Settings,
+      },
+      {
+        permission: Permission.DeleteWorkspaceNotificationSummary,
+        title: "Delete Workspace Notification Summary",
+        description:
+          "This permission can delete workspace notification summaries of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        group: PermissionGroup.Settings,
+      },
+      {
+        permission: Permission.EditWorkspaceNotificationSummary,
+        title: "Edit Workspace Notification Summary",
+        description:
+          "This permission can edit workspace notification summaries of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        group: PermissionGroup.Settings,
+      },
+      {
+        permission: Permission.ReadWorkspaceNotificationSummary,
+        title: "Read Workspace Notification Summary",
+        description:
+          "This permission can read workspace notification summaries of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        group: PermissionGroup.Settings,
+      },
+
       {
         permission: Permission.CreateIncidentStateTimeline,
         title: "Create Incident State Timeline",

package/Types/Workspace/NotificationSummary/WorkspaceNotificationSummaryItem.ts

@@ -0,0 +1,13 @@
+enum WorkspaceNotificationSummaryItem {
+  TotalCount = "Total Count",
+  ListWithLinks = "List with Links",
+  WhoAcknowledged = "Who Acknowledged",
+  WhoResolved = "Who Resolved",
+  TimeToAcknowledge = "Time to Acknowledge",
+  TimeToResolve = "Time to Resolve",
+  ResourcesAffected = "Resources Affected",
+  SeverityBreakdown = "Severity Breakdown",
+  StateBreakdown = "State Breakdown",
+}
+
+export default WorkspaceNotificationSummaryItem;

package/Types/Workspace/NotificationSummary/WorkspaceNotificationSummaryType.ts

@@ -0,0 +1,8 @@
+enum WorkspaceNotificationSummaryType {
+  Incident = "Incident",
+  Alert = "Alert",
+  IncidentEpisode = "Incident Episode",
+  AlertEpisode = "Alert Episode",
+}
+
+export default WorkspaceNotificationSummaryType;

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/GanttChart/Bar/Index.tsx

@@ -4,8 +4,10 @@ import React, {
   FunctionComponent,
   MouseEventHandler,
   ReactElement,
+  useRef,
   useState,
 } from "react";
+import ReactDOM from "react-dom";
 
 export interface GanttChartBar {
   id: string;
@@ -33,6 +35,9 @@ const Bar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [isHovered, setIsHovered] = useState(false);
+  const barRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null,
+  ) as React.RefObject<HTMLDivElement>;
 
   // calculate bar width.
   let barWidth: number =
@@ -88,6 +93,7 @@ const Bar: FunctionComponent<ComponentProps> = (
       }}
     >
       <div
+        ref={barRef}
         className="chart-bar h-8 pt-1 pb-1 mt-2.5 mb-2.5 rounded absolute cursor-pointer ml-1 mr-1"
         style={{
           width: `${barWidth}px`,
@@ -105,13 +111,25 @@ const Bar: FunctionComponent<ComponentProps> = (
             props.onSelect(props.bar.id);
           }
         }}
-      >
-        {isHovered && props.bar.tooltip && (
-          <div className="bar-tooltip cursor-pointer bg-white shadow rounded p-2 w-fit z-40 absolute">
+      />
+      {isHovered &&
+        props.bar.tooltip &&
+        barRef.current &&
+        ReactDOM.createPortal(
+          <div
+            className="bar-tooltip cursor-pointer bg-white shadow-lg rounded p-2 w-fit"
+            style={{
+              position: "fixed",
+              zIndex: 9999,
+              top: barRef.current.getBoundingClientRect().bottom + 4,
+              left: barRef.current.getBoundingClientRect().left,
+              pointerEvents: "none",
+            }}
+          >
             {props.bar.tooltip}
-          </div>
+          </div>,
+          document.body,
         )}
-      </div>
 
       <div
         className="h-8 pt-1 pb-1 mt-2.5 mb-2.5"

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;