@oneuptime/common 7.0.3309 → 7.0.3336

package/Server/Services/DatabaseService.ts

@@ -1392,6 +1392,9 @@ class DatabaseService<TBaseModel extends BaseModel> extends BaseService {
           ...data,
         } as any;
 
+        logger.debug("Updated Item");
+        logger.debug(JSON.stringify(updatedItem, null, 2));
+
         await this.getRepository().save(updatedItem);
 
         // hit workflow.

package/Server/Utils/Monitor/MonitorResource.ts

@@ -93,6 +93,7 @@ export default class MonitorResourceUtil {
         disableActiveMonitoringBecauseOfScheduledMaintenanceEvent: true,
         currentMonitorStatusId: true,
         _id: true,
+        name: true,
       },
       props: {
         isRoot: true,
@@ -137,6 +138,9 @@ export default class MonitorResourceUtil {
       );
     }
 
+    let probeName: string | undefined = undefined;
+    const monitorName: string | undefined = monitor.name || undefined;
+
     // save the last log to MonitorProbe.
 
     // get last log. We do this because there are many monitoring steps and we need to store those.
@@ -160,6 +164,9 @@ export default class MonitorResourceUtil {
             },
             select: {
               lastMonitoringLog: true,
+              probe: {
+                name: true,
+              },
             },
             props: {
               isRoot: true,
@@ -170,6 +177,8 @@ export default class MonitorResourceUtil {
           throw new BadDataException("Probe is not assigned to this monitor");
         }
 
+        probeName = monitorProbe.probe?.name || undefined;
+
         await MonitorProbeService.updateOneBy({
           query: {
             monitorId: monitor.id!,
@@ -252,6 +261,8 @@ export default class MonitorResourceUtil {
         monitorId: monitor.id!,
         projectId: monitor.projectId!,
         dataToProcess: dataToProcess,
+        probeName: probeName || undefined,
+        monitorName: monitorName || undefined,
       });
     } catch (err) {
       logger.error("Unable to save metrics");
@@ -564,6 +575,8 @@ export default class MonitorResourceUtil {
     monitorId: ObjectID;
     projectId: ObjectID;
     dataToProcess: DataToProcess;
+    probeName: string | undefined;
+    monitorName: string | undefined;
   }): Promise<void> {
     if (!data.monitorId) {
       return;
@@ -611,6 +624,14 @@ export default class MonitorResourceUtil {
           projectId: data.projectId.toString(),
         };
 
+        if (data.monitorName) {
+          monitorMetric.attributes["monitorName"] = data.monitorName.toString();
+        }
+
+        if (data.probeName) {
+          monitorMetric.attributes["probeName"] = data.probeName.toString();
+        }
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -641,6 +662,14 @@ export default class MonitorResourceUtil {
           projectId: data.projectId.toString(),
         };
 
+        if (data.monitorName) {
+          monitorMetric.attributes["monitorName"] = data.monitorName.toString();
+        }
+
+        if (data.probeName) {
+          monitorMetric.attributes["probeName"] = data.probeName.toString();
+        }
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -664,6 +693,14 @@ export default class MonitorResourceUtil {
           projectId: data.projectId.toString(),
         };
 
+        if (data.monitorName) {
+          monitorMetric.attributes["monitorName"] = data.monitorName.toString();
+        }
+
+        if (data.probeName) {
+          monitorMetric.attributes["probeName"] = data.probeName.toString();
+        }
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -689,6 +726,15 @@ export default class MonitorResourceUtil {
             diskPath: diskMetric.diskPath,
           };
 
+          if (data.monitorName) {
+            monitorMetric.attributes["monitorName"] =
+              data.monitorName.toString();
+          }
+
+          if (data.probeName) {
+            monitorMetric.attributes["probeName"] = data.probeName.toString();
+          }
+
           monitorMetric.time = OneUptimeDate.getCurrentDate();
           monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
           monitorMetric.metricPointType = MetricPointType.Sum;
@@ -721,6 +767,14 @@ export default class MonitorResourceUtil {
         ).probeId.toString(),
       };
 
+      if (data.monitorName) {
+        monitorMetric.attributes["monitorName"] = data.monitorName.toString();
+      }
+
+      if (data.probeName) {
+        monitorMetric.attributes["probeName"] = data.probeName.toString();
+      }
+
       monitorMetric.time = OneUptimeDate.getCurrentDate();
       monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
       monitorMetric.metricPointType = MetricPointType.Sum;
@@ -758,6 +812,14 @@ export default class MonitorResourceUtil {
           screenSizeType: syntheticMonitorResponse.screenSizeType,
         };
 
+        if (data.monitorName) {
+          monitorMetric.attributes["monitorName"] = data.monitorName.toString();
+        }
+
+        if (data.probeName) {
+          monitorMetric.attributes["probeName"] = data.probeName.toString();
+        }
+
         monitorMetric.time = OneUptimeDate.getCurrentDate();
         monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
         monitorMetric.metricPointType = MetricPointType.Sum;
@@ -786,6 +848,14 @@ export default class MonitorResourceUtil {
         ).probeId.toString(),
       };
 
+      if (data.monitorName) {
+        monitorMetric.attributes["monitorName"] = data.monitorName.toString();
+      }
+
+      if (data.probeName) {
+        monitorMetric.attributes["probeName"] = data.probeName.toString();
+      }
+
       monitorMetric.time = OneUptimeDate.getCurrentDate();
       monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
       monitorMetric.metricPointType = MetricPointType.Sum;
@@ -814,6 +884,14 @@ export default class MonitorResourceUtil {
         ).probeId.toString(),
       };
 
+      if (data.monitorName) {
+        monitorMetric.attributes["monitorName"] = data.monitorName.toString();
+      }
+
+      if (data.probeName) {
+        monitorMetric.attributes["probeName"] = data.probeName.toString();
+      }
+
       monitorMetric.time = OneUptimeDate.getCurrentDate();
       monitorMetric.timeUnixNano = OneUptimeDate.getCurrentDateAsUnixNano();
       monitorMetric.metricPointType = MetricPointType.Sum;

package/Types/ColorSwatch.ts

@@ -0,0 +1,27 @@
+enum ColorSwatch {
+  Zinc = "zinc",
+  Neutra = "neutra",
+  Stone = "stone",
+  Slate = "slate",
+  Purple = "purple",
+  Pink = "pink",
+  Red = "red",
+  Orange = "orange",
+  Yellow = "yellow",
+  Green = "green",
+  Teal = "teal",
+  Cyan = "cyan",
+  Gray = "gray",
+  Moroon = "moroon",
+  Blue = "blue",
+  Indigo = "indigo",
+  Amber = "amber",
+  Lime = "lime",
+  Emerald = "emerald",
+  Sky = "sky",
+  Violet = "violet",
+  Fuchsia = "fuchsia",
+  Rose = "rose",
+}
+
+export default ColorSwatch;

package/Types/Dashboard/DashboardComponents/ComponentArgument.ts

@@ -7,7 +7,7 @@ export enum ComponentInputType {
   Boolean = "True or False",
   Number = "Number",
   Decimal = "Decimal",
-  MetricsEditor = "MetricsEditor",
+  MetricsQueryConfig = "MetricsQueryConfig",
   LongText = "Long Text",
 }
 

package/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts

@@ -1,4 +1,4 @@
-import MetricsViewConfig from "../../Metrics/MetricsViewConfig";
+import MetricQueryConfigData from "../../Metrics/MetricQueryConfigData";
 import ObjectID from "../../ObjectID";
 import DashboardComponentType from "../DashboardComponentType";
 import BaseComponent from "./DashboardBaseComponent";
@@ -7,6 +7,10 @@ export default interface DashboardChartComponent extends BaseComponent {
   componentType: DashboardComponentType.Chart;
   componentId: ObjectID;
   arguments: {
-    metricsViewConfig?: MetricsViewConfig | undefined;
+    metricQueryConfig?: MetricQueryConfigData | undefined;
+    chartTitle?: string | undefined;
+    chartDescription?: string | undefined;
+    legendText?: string | undefined;
+    legendUnit?: string | undefined;
   };
 }

package/Types/Dashboard/DashboardComponents/DashboardValueComponent.ts

@@ -1,4 +1,4 @@
-import MetricsViewConfig from "../../Metrics/MetricsViewConfig";
+import MetricQueryConfigData from "../../Metrics/MetricQueryConfigData";
 import ObjectID from "../../ObjectID";
 import DashboardComponentType from "../DashboardComponentType";
 import BaseComponent from "./DashboardBaseComponent";
@@ -7,6 +7,7 @@ export default interface DashboardValueComponent extends BaseComponent {
   componentType: DashboardComponentType.Value;
   componentId: ObjectID;
   arguments: {
-    metricsViewConfig?: MetricsViewConfig | undefined;
+    metricQueryConfig?: MetricQueryConfigData | undefined;
+    title: string;
   };
 }

package/Types/Metrics/MetricAliasData.ts

@@ -1,5 +1,7 @@
 export default interface MetricAliasData {
-  metricVariable: string;
-  title: string;
-  description: string;
+  metricVariable: string | undefined;
+  title: string | undefined;
+  description: string | undefined;
+  legend: string | undefined;
+  legendUnit: string | undefined;
 }

package/Types/Metrics/MetricQueryConfigData.ts

@@ -7,7 +7,7 @@ export interface ChartSeries {
 }
 
 export default interface MetricQueryConfigData {
-  metricAliasData: MetricAliasData;
+  metricAliasData?: MetricAliasData | undefined;
   metricQueryData: MetricQueryData;
   getSeries?: ((data: AggregatedModel) => ChartSeries) | undefined;
 }

package/Types/ObjectID.ts

@@ -36,7 +36,7 @@ export default class ObjectID extends DatabaseProperty {
   }
 
   public equals(other: ObjectID): boolean {
-    return this.id.toString() === other.id.toString();
+    return (this.id?.toString() || "") === (other.id?.toString() || "");
   }
 
   public override toString(): string {

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -18,6 +18,8 @@ export interface Chart {
 
 export interface ComponentProps {
   charts: Array<Chart>;
+  hideCard?: boolean | undefined;
+  heightInPx?: number | undefined;
 }
 
 const ChartGroup: FunctionComponent<ComponentProps> = (
@@ -31,7 +33,10 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
         switch (chart.type) {
           case ChartType.LINE:
             return (
-              <div key={index} className="p-6 rounded-md bg-white shadow">
+              <div
+                key={index}
+                className={`p-6 ${props.hideCard ? "" : "rounded-md bg-white shadow"}`}
+              >
                 <h2
                   data-testid="card-details-heading"
                   id="card-details-heading"
@@ -47,7 +52,12 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                     {chart.description}
                   </p>
                 )}
-                <LineChart key={index} {...chart.props} syncid={syncId} />
+                <LineChart
+                  key={index}
+                  {...chart.props}
+                  syncid={syncId}
+                  heightInPx={props.heightInPx}
+                />
               </div>
             );
           default:

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

@@ -13,6 +13,7 @@ export interface ComponentProps {
   yAxis: YAxis;
   curve: ChartCurve;
   sync: boolean;
+  heightInPx?: number | undefined;
 }
 
 export interface LineInternalProps extends ComponentProps {
@@ -42,9 +43,15 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     setRecords(records);
   }, [props.data]);
 
+  const className: string = props.heightInPx ? `` : "h-80";
+  const style: React.CSSProperties = props.heightInPx
+    ? { height: `${props.heightInPx}px` }
+    : {};
+
   return (
     <LineChart
-      className="h-80"
+      className={className}
+      style={style}
       data={records}
       tickGap={1}
       index={"Time"}

package/UI/Components/Date/StartAndEndDate.tsx

@@ -13,6 +13,7 @@ export interface ComponentProps {
   initialValue?: InBetween<Date> | undefined;
   onValueChanged: (value: InBetween<Date> | null) => void;
   type: StartAndEndDateType;
+  hideTimeButtons?: boolean | undefined;
 }
 
 type DateFilterFunction = (props: ComponentProps) => ReactElement;
@@ -212,17 +213,135 @@ const StartAndEndDate: DateFilterFunction = (
           </div>
         </div>
 
-        <div className="mt-1 flex space-x-2 -ml-3">
-          {props.type === StartAndEndDateType.DateTime && (
+        {!props.hideTimeButtons && (
+          <div className="mt-1 flex space-x-2 -ml-3">
+            {props.type === StartAndEndDateType.DateTime && (
+              <Button
+                buttonStyle={
+                  is1Hour ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+                }
+                buttonSize={ButtonSize.Small}
+                onClick={() => {
+                  // set it to past 1 hour
+                  const endDate: Date = OneUptimeDate.getCurrentDate();
+                  const startDate: Date = OneUptimeDate.addRemoveHours(
+                    endDate,
+                    -1,
+                  );
+
+                  setStartDateTime(startDate);
+                  setEndDateTime(endDate);
+                }}
+                title="1 hour"
+              />
+            )}
+
+            {props.type === StartAndEndDateType.DateTime && (
+              <Button
+                buttonStyle={
+                  is3Hours ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+                }
+                buttonSize={ButtonSize.Small}
+                onClick={() => {
+                  // set it to past 3 hour
+                  const endDate: Date = OneUptimeDate.getCurrentDate();
+                  const startDate: Date = OneUptimeDate.addRemoveHours(
+                    endDate,
+                    -3,
+                  );
+
+                  setStartDateTime(startDate);
+                  setEndDateTime(endDate);
+                }}
+                title="3 hours"
+              />
+            )}
+
+            <Button
+              buttonStyle={
+                is1Day ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+              }
+              buttonSize={ButtonSize.Small}
+              onClick={() => {
+                // set it to past 1 day
+                const endDate: Date = OneUptimeDate.getCurrentDate();
+                const startDate: Date = OneUptimeDate.addRemoveDays(
+                  endDate,
+                  -1,
+                );
+
+                setStartDateTime(startDate);
+                setEndDateTime(endDate);
+              }}
+              title="1 day"
+            />
+
+            <Button
+              buttonStyle={
+                is1Week ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+              }
+              buttonSize={ButtonSize.Small}
+              onClick={() => {
+                // set it to past 1 week
+                const endDate: Date = OneUptimeDate.getCurrentDate();
+                const startDate: Date = OneUptimeDate.addRemoveDays(
+                  endDate,
+                  -7,
+                );
+
+                setStartDateTime(startDate);
+                setEndDateTime(endDate);
+              }}
+              title="1 week"
+            />
+
+            <Button
+              buttonStyle={
+                is2Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+              }
+              buttonSize={ButtonSize.Small}
+              onClick={() => {
+                // set it to past 1 week
+                const endDate: Date = OneUptimeDate.getCurrentDate();
+                const startDate: Date = OneUptimeDate.addRemoveDays(
+                  endDate,
+                  -14,
+                );
+
+                setStartDateTime(startDate);
+                setEndDateTime(endDate);
+              }}
+              title="2 weeks"
+            />
+
             <Button
               buttonStyle={
-                is1Hour ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+                is3Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
               }
               buttonSize={ButtonSize.Small}
               onClick={() => {
-                // set it to past 1 hour
+                // set it to past 1 week
                 const endDate: Date = OneUptimeDate.getCurrentDate();
-                const startDate: Date = OneUptimeDate.addRemoveHours(
+                const startDate: Date = OneUptimeDate.addRemoveDays(
+                  endDate,
+                  -21,
+                );
+
+                setStartDateTime(startDate);
+                setEndDateTime(endDate);
+              }}
+              title="3 weeks"
+            />
+
+            <Button
+              buttonStyle={
+                is1Month ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+              }
+              buttonSize={ButtonSize.Small}
+              onClick={() => {
+                // set it to past 1 month
+                const endDate: Date = OneUptimeDate.getCurrentDate();
+                const startDate: Date = OneUptimeDate.addRemoveMonths(
                   endDate,
                   -1,
                 );
@@ -230,20 +349,18 @@ const StartAndEndDate: DateFilterFunction = (
                 setStartDateTime(startDate);
                 setEndDateTime(endDate);
               }}
-              title="1 hour"
+              title="1 month"
             />
-          )}
 
-          {props.type === StartAndEndDateType.DateTime && (
             <Button
               buttonStyle={
-                is3Hours ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
+                is3Months ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
               }
               buttonSize={ButtonSize.Small}
               onClick={() => {
-                // set it to past 3 hour
+                // set it to past 1 month
                 const endDate: Date = OneUptimeDate.getCurrentDate();
-                const startDate: Date = OneUptimeDate.addRemoveHours(
+                const startDate: Date = OneUptimeDate.addRemoveMonths(
                   endDate,
                   -3,
                 );
@@ -251,112 +368,10 @@ const StartAndEndDate: DateFilterFunction = (
                 setStartDateTime(startDate);
                 setEndDateTime(endDate);
               }}
-              title="3 hours"
+              title="3 months"
             />
-          )}
-
-          <Button
-            buttonStyle={
-              is1Day ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
-            }
-            buttonSize={ButtonSize.Small}
-            onClick={() => {
-              // set it to past 1 day
-              const endDate: Date = OneUptimeDate.getCurrentDate();
-              const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -1);
-
-              setStartDateTime(startDate);
-              setEndDateTime(endDate);
-            }}
-            title="1 day"
-          />
-
-          <Button
-            buttonStyle={
-              is1Week ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
-            }
-            buttonSize={ButtonSize.Small}
-            onClick={() => {
-              // set it to past 1 week
-              const endDate: Date = OneUptimeDate.getCurrentDate();
-              const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -7);
-
-              setStartDateTime(startDate);
-              setEndDateTime(endDate);
-            }}
-            title="1 week"
-          />
-
-          <Button
-            buttonStyle={
-              is2Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
-            }
-            buttonSize={ButtonSize.Small}
-            onClick={() => {
-              // set it to past 1 week
-              const endDate: Date = OneUptimeDate.getCurrentDate();
-              const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -14);
-
-              setStartDateTime(startDate);
-              setEndDateTime(endDate);
-            }}
-            title="2 weeks"
-          />
-
-          <Button
-            buttonStyle={
-              is3Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
-            }
-            buttonSize={ButtonSize.Small}
-            onClick={() => {
-              // set it to past 1 week
-              const endDate: Date = OneUptimeDate.getCurrentDate();
-              const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -21);
-
-              setStartDateTime(startDate);
-              setEndDateTime(endDate);
-            }}
-            title="3 weeks"
-          />
-
-          <Button
-            buttonStyle={
-              is1Month ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
-            }
-            buttonSize={ButtonSize.Small}
-            onClick={() => {
-              // set it to past 1 month
-              const endDate: Date = OneUptimeDate.getCurrentDate();
-              const startDate: Date = OneUptimeDate.addRemoveMonths(
-                endDate,
-                -1,
-              );
-
-              setStartDateTime(startDate);
-              setEndDateTime(endDate);
-            }}
-            title="1 month"
-          />
-
-          <Button
-            buttonStyle={
-              is3Months ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
-            }
-            buttonSize={ButtonSize.Small}
-            onClick={() => {
-              // set it to past 1 month
-              const endDate: Date = OneUptimeDate.getCurrentDate();
-              const startDate: Date = OneUptimeDate.addRemoveMonths(
-                endDate,
-                -3,
-              );
-
-              setStartDateTime(startDate);
-              setEndDateTime(endDate);
-            }}
-            title="3 months"
-          />
-        </div>
+          </div>
+        )}
       </div>
     );
   }

package/UI/Components/Forms/BasicForm.tsx

@@ -51,6 +51,7 @@ export const DefaultValidateFunction: DefaultValidateFunctionType = (
 export interface BaseComponentProps<T> {
   submitButtonStyleType?: ButtonStyleType | undefined;
   initialValues?: FormValues<T> | undefined;
+  values?: FormValues<T> | undefined;
   onValidate?: undefined | ((values: FormValues<T>) => JSONObject);
   onChange?: undefined | ((values: FormValues<T>) => void);
   fields: Fields<T>;
@@ -121,6 +122,12 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
       null,
     );
 
+    useEffect(() => {
+      if (props.values) {
+        refCurrentValue.current = props.values || {};
+      }
+    }, [props.values]);
+
     useEffect(() => {
       if (formSteps && formSteps.length > 0 && formSteps[0]) {
         setCurrentFormStepId(formSteps[0].id);

package/UI/Components/HeaderAlert/HeaderAlert.tsx

@@ -3,6 +3,7 @@ import IconProp from "Common/Types/Icon/IconProp";
 import React, { ReactElement } from "react";
 import Tooltip from "../Tooltip/Tooltip";
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
+import ColorSwatch from "../../../Types/ColorSwatch";
 
 export enum HeaderAlertType {
   SUCCESS = "Success",
@@ -18,6 +19,7 @@ export interface ComponentProps {
   className?: string | undefined;
   alertType: HeaderAlertType;
   tooltip?: string | undefined;
+  colorSwatch?: ColorSwatch | undefined;
 }
 
 const HeaderAlert: (props: ComponentProps) => ReactElement = (
@@ -57,6 +59,12 @@ const HeaderAlert: (props: ComponentProps) => ReactElement = (
       break;
   }
 
+  // color swatch overrides the color.
+  if (props.colorSwatch) {
+    textColor = `text-${props.colorSwatch}-500 hover:text-${props.colorSwatch}-600`;
+    bgColor = `bg-${props.colorSwatch}`;
+  }
+
   const getElement: GetReactElementFunction = (): ReactElement => {
     return (
       <div