@oneuptime/common 10.0.43 → 10.0.45

package/UI/Components/Graphs/UptimeBarTooltip.tsx

@@ -0,0 +1,547 @@
+import OneUptimeDate from "../../../Types/Date";
+import Color from "../../../Types/Color";
+import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface StatusDuration {
+  label: string;
+  seconds: number;
+  color: Color;
+  isDowntime: boolean;
+}
+
+export interface ComponentProps {
+  date: Date;
+  uptimePercent: number;
+  hasEvents: boolean;
+  statusDurations: Array<StatusDuration>;
+  incidents: Array<UptimeBarTooltipIncident>;
+  onIncidentClick?: ((incidentId: string) => void) | undefined;
+}
+
+const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const dateStr: string =
+    OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.date, true);
+
+  // Color tiers
+  const isGood: boolean = props.uptimePercent >= 99.9;
+  const isWarn: boolean = !isGood && props.uptimePercent >= 99;
+
+  const uptimeColor: string = isGood
+    ? "#059669"
+    : isWarn
+      ? "#d97706"
+      : "#dc2626";
+
+  // Sort: downtime first, then by duration desc
+  const sortedDurations: Array<StatusDuration> = [
+    ...props.statusDurations,
+  ].sort((a: StatusDuration, b: StatusDuration) => {
+    if (a.isDowntime !== b.isDowntime) {
+      return a.isDowntime ? -1 : 1;
+    }
+    return b.seconds - a.seconds;
+  });
+
+  const totalSeconds: number = sortedDurations.reduce(
+    (sum: number, d: StatusDuration) => {
+      return sum + d.seconds;
+    },
+    0,
+  );
+
+  const hasIncidents: boolean = props.incidents.length > 0;
+  const hasStatuses: boolean = sortedDurations.length > 0;
+
+  return (
+    <div
+      style={{
+        minWidth: "280px",
+        maxWidth: "340px",
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      {/* ── Date header ── */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          paddingBottom: "10px",
+          marginBottom: "10px",
+          borderBottom: "1px solid #f0f0f0",
+        }}
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#9ca3af"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          style={{ flexShrink: 0 }}
+        >
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" />
+        </svg>
+        <span
+          style={{
+            fontWeight: 600,
+            fontSize: "13px",
+            color: "#111827",
+            letterSpacing: "-0.01em",
+          }}
+        >
+          {dateStr}
+        </span>
+      </div>
+
+      {/* ── Uptime ── */}
+      {props.hasEvents && (
+        <div
+          style={{
+            marginBottom: hasStatuses || hasIncidents ? "12px" : "0",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "baseline",
+              justifyContent: "space-between",
+              marginBottom: "8px",
+            }}
+          >
+            <span
+              style={{
+                fontSize: "11px",
+                color: "#6b7280",
+                fontWeight: 500,
+              }}
+            >
+              Uptime
+            </span>
+            <div style={{ display: "flex", alignItems: "baseline" }}>
+              <span
+                style={{
+                  fontSize: "14px",
+                  fontWeight: 600,
+                  color: uptimeColor,
+                  fontVariantNumeric: "tabular-nums",
+                  lineHeight: 1,
+                  letterSpacing: "-0.03em",
+                }}
+              >
+                {props.uptimePercent >= 100
+                  ? "100"
+                  : props.uptimePercent.toFixed(2)}
+              </span>
+              <span
+                style={{
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: uptimeColor,
+                  marginLeft: "1px",
+                  opacity: 0.7,
+                }}
+              >
+                %
+              </span>
+            </div>
+          </div>
+          {/* Segmented bar */}
+          {totalSeconds > 0 && sortedDurations.length > 1 ? (
+            <div
+              style={{
+                width: "100%",
+                height: "4px",
+                borderRadius: "100px",
+                overflow: "hidden",
+                display: "flex",
+                gap: "1px",
+                backgroundColor: "#e5e7eb",
+              }}
+            >
+              {sortedDurations.map((status: StatusDuration, index: number) => {
+                const widthPercent: number =
+                  (status.seconds / totalSeconds) * 100;
+                if (widthPercent < 0.5) {
+                  return null;
+                }
+                return (
+                  <div
+                    key={index}
+                    style={{
+                      width: `${widthPercent}%`,
+                      height: "100%",
+                      backgroundColor: status.color.toString(),
+                    }}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div
+              style={{
+                width: "100%",
+                height: "4px",
+                backgroundColor: "#e5e7eb",
+                borderRadius: "100px",
+                overflow: "hidden",
+              }}
+            >
+              <div
+                style={{
+                  width: `${Math.min(props.uptimePercent, 100)}%`,
+                  height: "100%",
+                  backgroundColor: uptimeColor,
+                  borderRadius: "100px",
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── No data ── */}
+      {!props.hasEvents && (
+        <div
+          style={{
+            backgroundColor: "#f9fafb",
+            borderRadius: "8px",
+            padding: "16px",
+            textAlign: "center",
+          }}
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#d1d5db"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ margin: "0 auto 6px" }}
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          <div
+            style={{
+              fontSize: "12px",
+              color: "#9ca3af",
+              fontWeight: 500,
+            }}
+          >
+            No monitoring data for this day
+          </div>
+        </div>
+      )}
+
+      {/* ── Status breakdown ── */}
+      {hasStatuses && (
+        <div
+          style={{
+            paddingBottom: hasIncidents ? "10px" : "0",
+            marginBottom: hasIncidents ? "10px" : "0",
+            borderBottom: hasIncidents ? "1px solid #f0f0f0" : "none",
+          }}
+        >
+          {sortedDurations.map((status: StatusDuration, index: number) => {
+            const pct: number =
+              totalSeconds > 0 ? (status.seconds / totalSeconds) * 100 : 0;
+            return (
+              <div
+                key={index}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "4px 0",
+                  gap: "8px",
+                }}
+              >
+                {/* Color dot + label */}
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    width: "100px",
+                    flexShrink: 0,
+                  }}
+                >
+                  <span
+                    style={{
+                      width: "6px",
+                      height: "6px",
+                      borderRadius: "50%",
+                      backgroundColor: status.color.toString(),
+                      display: "inline-block",
+                      flexShrink: 0,
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontSize: "12px",
+                      color: "#374151",
+                      fontWeight: 500,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {status.label}
+                  </span>
+                </div>
+                {/* Mini bar */}
+                <div
+                  style={{
+                    flex: 1,
+                    height: "4px",
+                    backgroundColor: "#f3f4f6",
+                    borderRadius: "100px",
+                    overflow: "hidden",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: `${pct}%`,
+                      height: "100%",
+                      backgroundColor: status.color.toString(),
+                      borderRadius: "100px",
+                      opacity: 0.7,
+                    }}
+                  />
+                </div>
+                {/* Duration */}
+                <span
+                  style={{
+                    fontSize: "11px",
+                    color: status.isDowntime ? "#dc2626" : "#6b7280",
+                    fontWeight: status.isDowntime ? 600 : 400,
+                    fontVariantNumeric: "tabular-nums",
+                    whiteSpace: "nowrap",
+                    flexShrink: 0,
+                  }}
+                >
+                  {OneUptimeDate.secondsToFormattedFriendlyTimeString(
+                    status.seconds,
+                  )}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* ── Incidents ── */}
+      {hasIncidents && (
+        <div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              marginBottom: "8px",
+            }}
+          >
+            <span
+              style={{
+                fontSize: "11px",
+                color: "#6b7280",
+                fontWeight: 500,
+                flex: 1,
+              }}
+            >
+              Incidents
+            </span>
+            <span
+              style={{
+                fontSize: "10px",
+                fontWeight: 600,
+                color: "#dc2626",
+                backgroundColor: "#fef2f2",
+                padding: "1px 7px",
+                borderRadius: "9999px",
+                lineHeight: "1.6",
+              }}
+            >
+              {props.incidents.length}
+            </span>
+          </div>
+
+          {props.incidents
+            .slice(0, 3)
+            .map((incident: UptimeBarTooltipIncident) => {
+              const isClickable: boolean = Boolean(props.onIncidentClick);
+
+              return (
+                <div
+                  key={incident.id}
+                  onClick={
+                    isClickable
+                      ? (e: React.MouseEvent) => {
+                          e.stopPropagation();
+                          props.onIncidentClick!(incident.id);
+                        }
+                      : undefined
+                  }
+                  style={{
+                    borderLeft: `3px solid ${incident.incidentSeverity ? incident.incidentSeverity.color.toString() : "#dc2626"}`,
+                    padding: "6px 10px",
+                    marginBottom: "6px",
+                    cursor: isClickable ? "pointer" : "default",
+                    transition: "background-color 0.12s ease",
+                    backgroundColor: "#fafafa",
+                    borderRadius: "0 6px 6px 0",
+                  }}
+                  onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
+                    if (isClickable) {
+                      (
+                        e.currentTarget as HTMLDivElement
+                      ).style.backgroundColor = "#f3f4f6";
+                    }
+                  }}
+                  onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
+                    if (isClickable) {
+                      (
+                        e.currentTarget as HTMLDivElement
+                      ).style.backgroundColor = "#fafafa";
+                    }
+                  }}
+                >
+                  {/* Title row */}
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                    }}
+                  >
+                    <div
+                      style={{
+                        flex: 1,
+                        minWidth: 0,
+                        fontSize: "12px",
+                        color: "#111827",
+                        fontWeight: 600,
+                        lineHeight: "1.3",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {incident.title}
+                    </div>
+                    {isClickable && (
+                      <svg
+                        width="10"
+                        height="10"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        style={{ flexShrink: 0, opacity: 0.35 }}
+                      >
+                        <path
+                          d="M6 3l5 5-5 5"
+                          stroke="#6b7280"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    )}
+                  </div>
+                  {/* Meta row: badges + time */}
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      flexWrap: "wrap",
+                      marginTop: "4px",
+                    }}
+                  >
+                    {incident.incidentSeverity && (
+                      <span
+                        style={{
+                          fontSize: "9px",
+                          fontWeight: 600,
+                          color: incident.incidentSeverity.color.toString(),
+                          backgroundColor:
+                            incident.incidentSeverity.color.toString() + "14",
+                          padding: "1px 5px",
+                          borderRadius: "3px",
+                          lineHeight: "1.6",
+                          textTransform: "uppercase",
+                          letterSpacing: "0.03em",
+                        }}
+                      >
+                        {incident.incidentSeverity.name}
+                      </span>
+                    )}
+                    {incident.currentIncidentState && (
+                      <span
+                        style={{
+                          fontSize: "9px",
+                          fontWeight: 600,
+                          color: incident.currentIncidentState.color.toString(),
+                          backgroundColor:
+                            incident.currentIncidentState.color.toString() +
+                            "14",
+                          padding: "1px 5px",
+                          borderRadius: "3px",
+                          lineHeight: "1.6",
+                          textTransform: "uppercase",
+                          letterSpacing: "0.03em",
+                        }}
+                      >
+                        {incident.currentIncidentState.name}
+                      </span>
+                    )}
+                    <span
+                      style={{
+                        fontSize: "10px",
+                        color: "#b0b0b0",
+                        marginLeft: "auto",
+                        whiteSpace: "nowrap",
+                      }}
+                    >
+                      {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                        incident.declaredAt,
+                        false,
+                      )}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+
+          {props.incidents.length > 3 && (
+            <div
+              style={{
+                fontSize: "11px",
+                color: "#9ca3af",
+                textAlign: "center",
+                padding: "4px 0 0",
+                fontWeight: 500,
+              }}
+            >
+              +{props.incidents.length - 3} more incident
+              {props.incidents.length - 3 !== 1 ? "s" : ""}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UptimeBarTooltip;

package/UI/Components/MonitorGraphs/Uptime.tsx

@@ -7,6 +7,7 @@ import CommonMonitorEvent from "../../../Utils/Uptime/MonitorEvent";
 import MonitorStatus from "../../../Models/DatabaseModels/MonitorStatus";
 import MonitorStatusTimeline from "../../../Models/DatabaseModels/MonitorStatusTimeline";
 import StatusPageHistoryChartBarColorRule from "../../../Models/DatabaseModels/StatusPageHistoryChartBarColorRule";
+import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -27,6 +28,9 @@ export interface ComponentProps {
   barColorRules?: Array<StatusPageHistoryChartBarColorRule> | undefined;
   downtimeMonitorStatuses: Array<MonitorStatus> | undefined;
   defaultBarColor: Color;
+  incidents?: Array<UptimeBarTooltipIncident> | undefined;
+  onBarClick?: (date: Date, incidents: Array<UptimeBarTooltipIncident>) => void;
+  onIncidentClick?: ((incidentId: string) => void) | undefined;
 }
 
 const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
@@ -83,6 +87,9 @@ const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
           return status.id!;
         }) || []
       }
+      incidents={props.incidents}
+      onBarClick={props.onBarClick}
+      onIncidentClick={props.onIncidentClick}
     />
   );
 };