@oneuptime/common 10.0.43 → 10.0.45

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

@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -32,12 +33,8 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
   });
 
   useEffect(() => {
-    if (!props.data || props.data.length === 0) {
-      setRecords([]);
-    }
-
     const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
-      seriesPoints: props.data,
+      seriesPoints: props.data || [],
       xAxis: props.xAxis,
       yAxis: props.yAxis,
     });
@@ -50,34 +47,44 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     ? { height: `${props.heightInPx}px` }
     : {};
 
+  const hasNoData: boolean =
+    !props.data ||
+    props.data.length === 0 ||
+    props.data.every((series: SeriesPoint) => {
+      return series.data.length === 0;
+    });
+
   return (
-    <LineChart
-      className={className}
-      style={style}
-      data={records}
-      tickGap={1}
-      index={"Time"}
-      categories={categories}
-      colors={[
-        "indigo",
-        "rose",
-        "emerald",
-        "amber",
-        "cyan",
-        "gray",
-        "pink",
-        "lime",
-        "fuchsia",
-      ]}
-      valueFormatter={props.yAxis.options.formatter || undefined}
-      showTooltip={true}
-      connectNulls={true}
-      curve={props.curve}
-      syncid={props.sync ? props.syncid : undefined}
-      yAxisWidth={60}
-      onValueChange={() => {}}
-      referenceLines={props.referenceLines}
-    />
+    <div className="relative">
+      <LineChart
+        className={className}
+        style={style}
+        data={records}
+        tickGap={1}
+        index={"Time"}
+        categories={categories}
+        colors={[
+          "indigo",
+          "rose",
+          "emerald",
+          "amber",
+          "cyan",
+          "gray",
+          "pink",
+          "lime",
+          "fuchsia",
+        ]}
+        valueFormatter={props.yAxis.options.formatter || undefined}
+        showTooltip={true}
+        connectNulls={true}
+        curve={props.curve}
+        syncid={props.sync ? props.syncid : undefined}
+        yAxisWidth={60}
+        onValueChange={() => {}}
+        referenceLines={props.referenceLines}
+      />
+      {hasNoData && <NoDataMessage />}
+    </div>
   );
 };
 

package/UI/Components/Forms/BasicForm.tsx

@@ -607,7 +607,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
     }
 
     return (
-      <div className="row">
+      <div className="row" id={props.id}>
         <div className="col-lg-1">
           <div>
             {props.title && (

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -1,9 +1,11 @@
 import Tooltip from "../Tooltip/Tooltip";
+import UptimeBarTooltip, { StatusDuration } from "./UptimeBarTooltip";
 import { Green } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import OneUptimeDate from "../../../Types/Date";
 import Dictionary from "../../../Types/Dictionary";
 import ObjectID from "../../../Types/ObjectID";
+import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -27,6 +29,11 @@ export interface ComponentProps {
   barColorRules?: Array<BarChartRule> | undefined;
   downtimeEventStatusIds?: Array<ObjectID> | undefined;
   defaultBarColor: Color;
+  incidents?: Array<UptimeBarTooltipIncident> | undefined;
+  onBarClick?:
+    | ((date: Date, incidents: Array<UptimeBarTooltipIncident>) => void)
+    | undefined;
+  onIncidentClick?: ((incidentId: string) => void) | undefined;
 }
 
 const DayUptimeGraph: FunctionComponent<ComponentProps> = (
@@ -43,6 +50,24 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     );
   }, [props.startDate, props.endDate]);
 
+  type GetIncidentsForDayFunction = (
+    startOfDay: Date,
+    endOfDay: Date,
+  ) => Array<UptimeBarTooltipIncident>;
+
+  const getIncidentsForDay: GetIncidentsForDayFunction = (
+    startOfDay: Date,
+    endOfDay: Date,
+  ): Array<UptimeBarTooltipIncident> => {
+    if (!props.incidents || props.incidents.length === 0) {
+      return [];
+    }
+
+    return props.incidents.filter((incident: UptimeBarTooltipIncident) => {
+      return OneUptimeDate.isBetween(incident.declaredAt, startOfDay, endOfDay);
+    });
+  };
+
   type GetUptimeBarFunction = (dayNumber: number) => ReactElement;
 
   const getUptimeBar: GetUptimeBarFunction = (
@@ -55,11 +80,6 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
       dayNumber,
     );
 
-    let toolTipText: string = `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-      todaysDay,
-      true,
-    )}`;
-
     const startOfTheDay: Date = OneUptimeDate.getStartOfDay(todaysDay);
     const endOfTheDay: Date = OneUptimeDate.getEndOfDay(todaysDay);
 
@@ -90,6 +110,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     });
 
     const secondsOfEvent: Dictionary<number> = {};
+    const eventColors: Dictionary<Color> = {};
 
     let currentPriority: number = 1;
 
@@ -121,6 +142,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
       secondsOfEvent[event.eventStatusId.toString()]! += seconds;
 
       eventLabels[event.eventStatusId.toString()] = event.label;
+      eventColors[event.eventStatusId.toString()] = event.color;
 
       // set bar color.
       if (currentPriority <= event.priority) {
@@ -140,33 +162,21 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
 
     let totalUptimeInSeconds: number = 0;
 
+    const downtimeStatusIds: Array<string> = (
+      props.downtimeEventStatusIds || []
+    ).map((id: ObjectID) => {
+      return id.toString();
+    });
+
     for (const key in secondsOfEvent) {
       hasEvents = true;
 
       const eventStatusId: string = key;
 
-      // if this is downtime state then, include tooltip.
-
-      if (
-        (props.downtimeEventStatusIds?.filter((id: ObjectID) => {
-          return id.toString() === eventStatusId.toString();
-        }).length || 0) > 0
-      ) {
-        toolTipText += `, ${
-          eventLabels[key]
-        } for ${OneUptimeDate.secondsToFormattedFriendlyTimeString(
-          secondsOfEvent[key] || 0,
-        )}`;
-      }
-
-      const isDowntimeEvent: boolean = Boolean(
-        props.downtimeEventStatusIds?.find((id: ObjectID) => {
-          return id.toString() === eventStatusId;
-        }),
-      );
+      const isDowntimeEvent: boolean =
+        downtimeStatusIds.includes(eventStatusId);
 
       if (isDowntimeEvent) {
-        // remove the seconds from total uptime.
         const secondsOfDowntime: number = secondsOfEvent[key] || 0;
         totalDowntimeInSeconds += secondsOfDowntime;
       } else {
@@ -177,8 +187,11 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     // now check bar rules and finalize the color of the bar
 
     const uptimePercentForTheDay: number =
-      (totalUptimeInSeconds / (totalDowntimeInSeconds + totalUptimeInSeconds)) *
-      100;
+      totalUptimeInSeconds + totalDowntimeInSeconds > 0
+        ? (totalUptimeInSeconds /
+            (totalDowntimeInSeconds + totalUptimeInSeconds)) *
+          100
+        : 100;
 
     for (const rules of props.barColorRules || []) {
       if (uptimePercentForTheDay >= rules.uptimePercentGreaterThanOrEqualTo) {
@@ -187,31 +200,71 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
       }
     }
 
+    if (todaysEvents.length === 1 && !hasEvents) {
+      hasEvents = true;
+    }
+
     if (todaysEvents.length === 1) {
       hasEvents = true;
-      toolTipText = `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-        todaysDay,
-        true,
-      )} - 100% ${todaysEvents[0]?.label || "Operational"}.`;
     }
 
-    if (!hasEvents) {
-      toolTipText += ` - No data for this day.`;
+    if (todaysEvents.length === 0) {
+      hasEvents = false;
       color = props.defaultBarColor || Green;
     }
 
+    // Get incidents for this day
+    const dayIncidents: Array<UptimeBarTooltipIncident> = getIncidentsForDay(
+      startOfTheDay,
+      endOfTheDay,
+    );
+
     let className: string = "h-20 w-20";
 
     if (props.height) {
       className = "w-20 h-" + props.height;
     }
+
+    // Build status durations for tooltip
+    const statusDurations: Array<StatusDuration> = [];
+    for (const key in secondsOfEvent) {
+      statusDurations.push({
+        label: eventLabels[key] || "Unknown",
+        seconds: secondsOfEvent[key] || 0,
+        color: eventColors[key] || props.defaultBarColor || Green,
+        isDowntime: downtimeStatusIds.includes(key),
+      });
+    }
+
+    const hasDayIncidents: boolean = dayIncidents.length > 0;
+    const isClickable: boolean = hasDayIncidents && Boolean(props.onBarClick);
+
     return (
-      <Tooltip key={dayNumber} text={toolTipText || "100% Operational"}>
+      <Tooltip
+        key={dayNumber}
+        richContent={
+          <UptimeBarTooltip
+            date={todaysDay}
+            uptimePercent={uptimePercentForTheDay}
+            hasEvents={hasEvents}
+            statusDurations={statusDurations}
+            incidents={dayIncidents}
+            onIncidentClick={props.onIncidentClick}
+          />
+        }
+      >
         <div
-          className={className}
+          className={`${className}${isClickable ? " cursor-pointer hover:opacity-80" : ""}`}
           style={{
             backgroundColor: color.toString(),
           }}
+          onClick={
+            isClickable
+              ? () => {
+                  props.onBarClick!(todaysDay, dayIncidents);
+                }
+              : undefined
+          }
         ></div>
       </Tooltip>
     );