@oneuptime/common 10.0.34 → 10.0.36

package/Types/Permission.ts

@@ -705,6 +705,11 @@ enum Permission {
   DeleteAlertSeverity = "DeleteAlertSeverity",
   ReadAlertSeverity = "ReadAlertSeverity",
 
+  CreateKubernetesCluster = "CreateKubernetesCluster",
+  DeleteKubernetesCluster = "DeleteKubernetesCluster",
+  EditKubernetesCluster = "EditKubernetesCluster",
+  ReadKubernetesCluster = "ReadKubernetesCluster",
+
   CreateService = "CreateService",
   DeleteService = "DeleteService",
   EditService = "EditService",
@@ -4324,6 +4329,43 @@ export class PermissionHelper {
         group: PermissionGroup.AIAgent,
       },
 
+      {
+        permission: Permission.CreateKubernetesCluster,
+        title: "Create Kubernetes Cluster",
+        description:
+          "This permission can create Kubernetes Cluster in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.DeleteKubernetesCluster,
+        title: "Delete Kubernetes Cluster",
+        description:
+          "This permission can delete Kubernetes Cluster of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.EditKubernetesCluster,
+        title: "Edit Kubernetes Cluster",
+        description:
+          "This permission can edit Kubernetes Cluster of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+      {
+        permission: Permission.ReadKubernetesCluster,
+        title: "Read Kubernetes Cluster",
+        description:
+          "This permission can read Kubernetes Cluster of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+        group: PermissionGroup.Telemetry,
+      },
+
       {
         permission: Permission.CreateService,
         title: "Create Service",

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/Icon/Icon.tsx

@@ -2733,6 +2733,57 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="m15 11.25 1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94-.19-1.28-.53a1.818 1.818 0 0 1 0-2.56l8.47-8.47M15 11.25 12 8.25"
       />,
     );
+  } else if (icon === IconProp.Kubernetes) {
+    // Kubernetes helm wheel — 7-sided shape with 7 spokes, matching the official logo
+    const cx: number = 12;
+    const cy: number = 12;
+    const outerR: number = 9.5;
+    const innerR: number = 2.2;
+    const spokeEnd: number = 8;
+    const sides: number = 7;
+    const offsetAngle: number = -Math.PI / 2; // start from top
+
+    const outerPoints: string[] = [];
+    const spokes: React.ReactElement[] = [];
+
+    for (let i: number = 0; i < sides; i++) {
+      const angle: number = offsetAngle + (2 * Math.PI * i) / sides;
+      const ox: number = cx + outerR * Math.cos(angle);
+      const oy: number = cy + outerR * Math.sin(angle);
+      outerPoints.push(`${ox.toFixed(2)},${oy.toFixed(2)}`);
+
+      const sx: number = cx + innerR * Math.cos(angle);
+      const sy: number = cy + innerR * Math.sin(angle);
+      const ex: number = cx + spokeEnd * Math.cos(angle);
+      const ey: number = cy + spokeEnd * Math.sin(angle);
+
+      spokes.push(
+        <line
+          key={`spoke-${i}`}
+          x1={sx.toFixed(2)}
+          y1={sy.toFixed(2)}
+          x2={ex.toFixed(2)}
+          y2={ey.toFixed(2)}
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />,
+      );
+    }
+
+    return getSvgWrapper(
+      <>
+        <polygon
+          points={outerPoints.join(" ")}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinejoin="round"
+        />
+        <circle cx={cx} cy={cy} r={innerR} />
+        {spokes}
+      </>,
+    );
   }
 
   return <></>;

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -102,6 +102,7 @@ export interface ComponentProps {
   onEditSavedView?: ((viewId: string) => void) | undefined;
   onDeleteSavedView?: ((viewId: string) => void) | undefined;
   onUpdateCurrentSavedView?: (() => void) | undefined;
+  onShowDocumentation?: (() => void) | undefined;
   viewMode?: LogsViewMode | undefined;
   onViewModeChange?: ((mode: LogsViewMode) => void) | undefined;
   analyticsServiceIds?: Array<string> | undefined;
@@ -805,6 +806,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         return !prev;
       });
     },
+    onShowDocumentation: props.onShowDocumentation,
   };
 
   const showSidebar: boolean =

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

@@ -37,6 +37,7 @@ export interface LogsViewerToolbarProps {
   onExportJSON?: (() => void) | undefined;
   showKeyboardShortcuts?: boolean | undefined;
   onToggleKeyboardShortcuts?: (() => void) | undefined;
+  onShowDocumentation?: (() => void) | undefined;
 }
 
 const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
@@ -155,6 +156,30 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
             />
           )}
 
+        {props.onShowDocumentation && (
+          <button
+            type="button"
+            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50"
+            onClick={props.onShowDocumentation}
+            title="Setup Documentation"
+          >
+            <svg
+              className="h-3.5 w-3.5"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+              />
+            </svg>
+            Docs
+          </button>
+        )}
+
         {props.onToggleKeyboardShortcuts && (
           <div className="relative">
             <button

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>
     );
   };