@oneuptime/common 11.7.2 → 11.7.3

package/UI/Components/Table/TableRow.tsx

@@ -77,6 +77,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
     };
   }, []);
 
+  // The columns this row will actually put on screen.
+  const renderedColumns: Array<Column<T>> = (props.columns || []).filter(
+    (column: Column<T>) => {
+      return !(column.hideOnMobile && isMobile);
+    },
+  );
+
   type GetRowFunction = (provided?: DraggableProvided) => ReactElement;
 
   const getRow: GetRowFunction = (
@@ -339,186 +346,184 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             </td>
           )}
           {props.columns &&
-            props.columns
-              .filter((column: Column<T>) => {
-                return !(column.hideOnMobile && isMobile);
-              })
-              .map((column: Column<T>, i: number) => {
-                let className: string =
-                  "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-                if (i === props.columns.length - 1) {
-                  className =
-                    "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-                }
-
-                let columnContent: React.ReactNode = null;
-
-                if (column.key && !column.getElement) {
-                  columnContent =
-                    column.type === FieldType.Date ? (
-                      props.item[column.key] ? (
-                        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-                          props.item[column.key] as string,
-                          true,
-                        )
-                      ) : (
-                        column.noValueMessage || ""
-                      )
-                    ) : column.type === FieldType.DateTime ? (
-                      props.item[column.key] ? (
-                        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-                          props.item[column.key] as string,
-                          false,
-                        )
-                      ) : (
-                        column.noValueMessage || ""
-                      )
-                    ) : column.type === FieldType.USDCents ? (
-                      props.item[column.key] ? (
-                        ((props.item[column.key] as number) || 0) / 100 + " USD"
-                      ) : (
-                        column.noValueMessage || "0 USD"
-                      )
-                    ) : column.type === FieldType.Percent ? (
-                      props.item[column.key] ? (
-                        props.item[column.key] + "%"
-                      ) : (
-                        column.noValueMessage || "0%"
+            renderedColumns.map((column: Column<T>, i: number) => {
+              let className: string =
+                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              /*
+               * Compared against the rendered count, not the declared one:
+               * with any column filtered out the two differ, and the extra
+               * right padding would land on the wrong cell - or on none.
+               */
+              if (i === renderedColumns.length - 1) {
+                className =
+                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              }
+
+              let columnContent: React.ReactNode = null;
+
+              if (column.key && !column.getElement) {
+                columnContent =
+                  column.type === FieldType.Date ? (
+                    props.item[column.key] ? (
+                      OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                        props.item[column.key] as string,
+                        true,
                       )
-                    ) : column.type === FieldType.Color ? (
-                      props.item[column.key] ? (
-                        <ColorInput value={props.item[column.key] as Color} />
-                      ) : (
-                        column.noValueMessage || "0%"
-                      )
-                    ) : column.type === FieldType.LongText ? (
-                      props.item[column.key] ? (
-                        <LongTextViewer
-                          text={props.item[column.key] as string}
-                        />
-                      ) : (
-                        column.noValueMessage || ""
-                      )
-                    ) : column.type === FieldType.Boolean ? (
-                      props.item[column.key] ? (
-                        <Icon
-                          icon={IconProp.Check}
-                          className={"h-5 w-5 text-gray-500"}
-                          thick={ThickProp.Thick}
-                        />
-                      ) : (
-                        <Icon
-                          icon={IconProp.False}
-                          className={"h-5 w-5 text-gray-500"}
-                          thick={ThickProp.Thick}
-                        />
+                    ) : (
+                      column.noValueMessage || ""
+                    )
+                  ) : column.type === FieldType.DateTime ? (
+                    props.item[column.key] ? (
+                      OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                        props.item[column.key] as string,
+                        false,
                       )
                     ) : (
-                      getNestedValue(
-                        props.item,
-                        String(column.key),
-                      )?.toString() ||
-                      column.noValueMessage ||
-                      ""
-                    );
-                } else if (column.key && column.getElement) {
-                  columnContent = column.getElement(props.item);
-                }
-
-                const contentWrapperClassName: string = column.contentClassName
-                  ? column.contentClassName
-                  : "";
-
-                const actionsContainerClassName: string =
-                  column.contentClassName
-                    ? `flex justify-end ${column.contentClassName}`
-                    : "flex justify-end";
+                      column.noValueMessage || ""
+                    )
+                  ) : column.type === FieldType.USDCents ? (
+                    props.item[column.key] ? (
+                      ((props.item[column.key] as number) || 0) / 100 + " USD"
+                    ) : (
+                      column.noValueMessage || "0 USD"
+                    )
+                  ) : column.type === FieldType.Percent ? (
+                    props.item[column.key] ? (
+                      props.item[column.key] + "%"
+                    ) : (
+                      column.noValueMessage || "0%"
+                    )
+                  ) : column.type === FieldType.Color ? (
+                    props.item[column.key] ? (
+                      <ColorInput value={props.item[column.key] as Color} />
+                    ) : (
+                      column.noValueMessage || "0%"
+                    )
+                  ) : column.type === FieldType.LongText ? (
+                    props.item[column.key] ? (
+                      <LongTextViewer text={props.item[column.key] as string} />
+                    ) : (
+                      column.noValueMessage || ""
+                    )
+                  ) : column.type === FieldType.Boolean ? (
+                    props.item[column.key] ? (
+                      <Icon
+                        icon={IconProp.Check}
+                        className={"h-5 w-5 text-gray-500"}
+                        thick={ThickProp.Thick}
+                      />
+                    ) : (
+                      <Icon
+                        icon={IconProp.False}
+                        className={"h-5 w-5 text-gray-500"}
+                        thick={ThickProp.Thick}
+                      />
+                    )
+                  ) : (
+                    getNestedValue(
+                      props.item,
+                      String(column.key),
+                    )?.toString() ||
+                    column.noValueMessage ||
+                    ""
+                  );
+              } else if (column.key && column.getElement) {
+                columnContent = column.getElement(props.item);
+              }
+
+              const contentWrapperClassName: string = column.contentClassName
+                ? column.contentClassName
+                : "";
+
+              const actionsContainerClassName: string = column.contentClassName
+                ? `flex justify-end ${column.contentClassName}`
+                : "flex justify-end";
+
+              return (
+                <td
+                  key={i}
+                  className={className}
+                  style={{
+                    textAlign:
+                      column.type === FieldType.Actions ? "right" : "left",
+                  }}
+                  onClick={() => {
+                    if (column.tooltipText) {
+                      setTooltipModalText(column.tooltipText(props.item));
+                    }
+                  }}
+                >
+                  {columnContent !== null && columnContent !== undefined && (
+                    <div className={contentWrapperClassName}>
+                      {columnContent}
+                    </div>
+                  )}
+                  {column.type === FieldType.Actions && (
+                    <div className={actionsContainerClassName}>
+                      {error && (
+                        <div className="text-align-left">
+                          <ConfirmModal
+                            title={`Error`}
+                            description={error}
+                            submitButtonText={"Close"}
+                            onSubmit={() => {
+                              return setError("");
+                            }}
+                          />
+                        </div>
+                      )}
+                      {props.actionButtons?.map(
+                        (button: ActionButtonSchema<T>, i: number) => {
+                          if (
+                            button.isVisible &&
+                            !button.isVisible(props.item)
+                          ) {
+                            return <div key={i}></div>;
+                          }
 
-                return (
-                  <td
-                    key={i}
-                    className={className}
-                    style={{
-                      textAlign:
-                        column.type === FieldType.Actions ? "right" : "left",
-                    }}
-                    onClick={() => {
-                      if (column.tooltipText) {
-                        setTooltipModalText(column.tooltipText(props.item));
-                      }
-                    }}
-                  >
-                    {columnContent !== null && columnContent !== undefined && (
-                      <div className={contentWrapperClassName}>
-                        {columnContent}
-                      </div>
-                    )}
-                    {column.type === FieldType.Actions && (
-                      <div className={actionsContainerClassName}>
-                        {error && (
-                          <div className="text-align-left">
-                            <ConfirmModal
-                              title={`Error`}
-                              description={error}
-                              submitButtonText={"Close"}
-                              onSubmit={() => {
-                                return setError("");
-                              }}
-                            />
-                          </div>
-                        )}
-                        {props.actionButtons?.map(
-                          (button: ActionButtonSchema<T>, i: number) => {
-                            if (
-                              button.isVisible &&
-                              !button.isVisible(props.item)
-                            ) {
-                              return <div key={i}></div>;
-                            }
-
-                            // Hide button on mobile if hideOnMobile is true
-                            if (button.hideOnMobile && isMobile) {
-                              return <div key={i}></div>;
-                            }
-
-                            return (
-                              <div key={i}>
-                                <Button
-                                  buttonSize={ButtonSize.Small}
-                                  title={button.title}
-                                  icon={button.icon}
-                                  buttonStyle={button.buttonStyleType}
-                                  isLoading={isButtonLoading[i]}
-                                  onClick={() => {
-                                    if (button.onClick) {
-                                      isButtonLoading[i] = true;
-                                      setIsButtonLoading(isButtonLoading);
+                          // Hide button on mobile if hideOnMobile is true
+                          if (button.hideOnMobile && isMobile) {
+                            return <div key={i}></div>;
+                          }
 
-                                      button.onClick(
-                                        props.item,
-                                        () => {
-                                          // on action complete
-                                          isButtonLoading[i] = false;
-                                          setIsButtonLoading(isButtonLoading);
-                                        },
-                                        (err: Error) => {
-                                          isButtonLoading[i] = false;
-                                          setIsButtonLoading(isButtonLoading);
-                                          setError((err as Error).message);
-                                        },
-                                      );
-                                    }
-                                  }}
-                                />
-                              </div>
-                            );
-                          },
-                        )}
-                      </div>
-                    )}
-                  </td>
-                );
-              })}
+                          return (
+                            <div key={i}>
+                              <Button
+                                buttonSize={ButtonSize.Small}
+                                title={button.title}
+                                icon={button.icon}
+                                buttonStyle={button.buttonStyleType}
+                                isLoading={isButtonLoading[i]}
+                                onClick={() => {
+                                  if (button.onClick) {
+                                    isButtonLoading[i] = true;
+                                    setIsButtonLoading(isButtonLoading);
+
+                                    button.onClick(
+                                      props.item,
+                                      () => {
+                                        // on action complete
+                                        isButtonLoading[i] = false;
+                                        setIsButtonLoading(isButtonLoading);
+                                      },
+                                      (err: Error) => {
+                                        isButtonLoading[i] = false;
+                                        setIsButtonLoading(isButtonLoading);
+                                        setError((err as Error).message);
+                                      },
+                                    );
+                                  }
+                                }}
+                              />
+                            </div>
+                          );
+                        },
+                      )}
+                    </div>
+                  )}
+                </td>
+              );
+            })}
         </tr>
         {tooltipModalText && (
           <ConfirmModal

package/UI/Components/Table/Types/Column.ts

@@ -5,6 +5,8 @@ import { ReactElement } from "react";
 
 export default interface Column<T extends GenericObject> {
   title: string;
+  // Stable identity carried over from the ModelTable column, if it had one.
+  id?: string | undefined;
   description?: string | undefined;
   disableSort?: boolean | undefined;
   tooltipText?: ((item: T) => string) | undefined;

package/Utils/UserPreferences.ts

@@ -1,7 +1,9 @@
 import LocalStorage from "../UI/Utils/LocalStorage";
+import { JSONObject } from "../Types/JSON";
 
 export enum UserPreferenceType {
   BaseModelTablePageSize = "BaseModelTablePageSize",
+  BaseModelTableColumns = "BaseModelTableColumns",
 }
 
 export default class UserPreferences {
@@ -30,4 +32,55 @@ export default class UserPreferences {
     const finalKey: string = `${userPreferenceType}.${key}`;
     LocalStorage.setItem(finalKey, value);
   }
+
+  /*
+   * Object-shaped preferences (e.g. a table's column layout). LocalStorage
+   * already JSON-serializes objects on the way in and parses them on the way
+   * out, so this only has to reject anything that came back as something other
+   * than a plain object - a half-written or hand-edited entry must degrade to
+   * "no preference" rather than reaching the caller as a string or an array.
+   */
+  public static getUserPreferenceByTypeAsJSON(data: {
+    key: string;
+    userPreferenceType: UserPreferenceType;
+  }): JSONObject | null {
+    const { key, userPreferenceType } = data;
+
+    const finalKey: string = `${userPreferenceType}.${key}`;
+
+    let value: unknown = null;
+
+    try {
+      value = LocalStorage.getItem(finalKey);
+    } catch {
+      return null;
+    }
+
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+      return null;
+    }
+
+    return value as JSONObject;
+  }
+
+  public static saveUserPreferenceByTypeAsJSON(data: {
+    key: string;
+    userPreferenceType: UserPreferenceType;
+    value: JSONObject;
+  }): void {
+    const { key, userPreferenceType, value } = data;
+
+    const finalKey: string = `${userPreferenceType}.${key}`;
+    LocalStorage.setItem(finalKey, value);
+  }
+
+  public static removeUserPreferenceByType(data: {
+    key: string;
+    userPreferenceType: UserPreferenceType;
+  }): void {
+    const { key, userPreferenceType } = data;
+
+    const finalKey: string = `${userPreferenceType}.${key}`;
+    LocalStorage.removeItem(finalKey);
+  }
 }

package/build/dist/Models/AnalyticsModels/KubernetesCostAllocation.js

@@ -305,6 +305,11 @@ export default class KubernetesCostAllocation extends AnalyticsBaseModel {
                 title: "CPU Core Usage Average",
                 description: "Average CPU cores actually used over the window.",
             },
+            {
+                key: "cpuCoreLimitAverage",
+                title: "CPU Core Limit Average",
+                description: "Average CPU core limit over the window. 0 when no limit is set — which is also what a row ingested before this column reads back.",
+            },
             {
                 key: "cpuCost",
                 title: "CPU Cost",
@@ -335,6 +340,16 @@ export default class KubernetesCostAllocation extends AnalyticsBaseModel {
                 title: "RAM Bytes Usage Average",
                 description: "Average RAM bytes actually used over the window.",
             },
+            {
+                key: "ramBytesLimitAverage",
+                title: "RAM Bytes Limit Average",
+                description: "Average RAM byte limit over the window. 0 when no limit is set — which is also what a row ingested before this column reads back.",
+            },
+            {
+                key: "ramBytesUsageMax",
+                title: "RAM Bytes Usage Max",
+                description: "Peak RAM bytes used during the window, from Prometheus rather than the cost engine — the engine only reports averages, and an hourly mean hides the burst that OOMKills a container. 0 when the agent has no Prometheus configured, when the scrape had no data, or on rows ingested before this column; treat 0 as 'unknown', never as a real peak.",
+            },
             {
                 key: "ramCost",
                 title: "RAM Cost",
@@ -420,6 +435,45 @@ export default class KubernetesCostAllocation extends AnalyticsBaseModel {
                 update: [],
             },
         });
+        /*
+         * Delivery bookkeeping, not workload data. A window wider than the
+         * agent's batch size arrives as several independent ingest jobs, so the
+         * ingest service needs to tell "another chunk of the delivery I am
+         * already ingesting" (accept) from "a window a previous delivery already
+         * ingested" (drop, or a restarted agent double-counts spend). shipmentId
+         * is the agent's content hash of the window — identical across restarts,
+         * different when the engine's answer for that window changed.
+         *
+         * Empty / 0 on rows written before these columns existed and on rows
+         * from agents older than the shipment contract; the ingest service falls
+         * back to the whole-window guard for those.
+         */
+        const shipmentIdColumn = new AnalyticsTableColumn({
+            key: "shipmentId",
+            title: "Shipment ID",
+            description: "Content hash identifying the agent delivery this row arrived in. Used to deduplicate re-shipped windows; empty for rows ingested before the shipment contract.",
+            required: true,
+            defaultValue: "",
+            type: TableColumnType.Text,
+            accessControl: {
+                read: readPermissions,
+                create: createPermissions,
+                update: [],
+            },
+        });
+        const shipmentChunkColumn = new AnalyticsTableColumn({
+            key: "shipmentChunk",
+            title: "Shipment Chunk",
+            description: "Index of the request within its shipment that carried this row. 0 for single-request shipments and for rows ingested before the shipment contract.",
+            required: true,
+            defaultValue: 0,
+            type: TableColumnType.Number,
+            accessControl: {
+                read: readPermissions,
+                create: createPermissions,
+                update: [],
+            },
+        });
         const retentionDateColumn = new AnalyticsTableColumn({
             key: "retentionDate",
             codec: [{ codec: "DoubleDelta" }, { codec: "ZSTD", level: 1 }],
@@ -462,6 +516,8 @@ export default class KubernetesCostAllocation extends AnalyticsBaseModel {
                 labelKeysColumn,
                 ...measureColumns,
                 currencyColumn,
+                shipmentIdColumn,
+                shipmentChunkColumn,
                 retentionDateColumn,
             ],
             sortKeys: [
@@ -595,6 +651,12 @@ export default class KubernetesCostAllocation extends AnalyticsBaseModel {
     set cpuCoreUsageAverage(v) {
         this.setColumnValue("cpuCoreUsageAverage", v);
     }
+    get cpuCoreLimitAverage() {
+        return this.getColumnValue("cpuCoreLimitAverage");
+    }
+    set cpuCoreLimitAverage(v) {
+        this.setColumnValue("cpuCoreLimitAverage", v);
+    }
     get cpuCost() {
         return this.getColumnValue("cpuCost");
     }
@@ -631,6 +693,18 @@ export default class KubernetesCostAllocation extends AnalyticsBaseModel {
     set ramBytesUsageAverage(v) {
         this.setColumnValue("ramBytesUsageAverage", v);
     }
+    get ramBytesLimitAverage() {
+        return this.getColumnValue("ramBytesLimitAverage");
+    }
+    set ramBytesLimitAverage(v) {
+        this.setColumnValue("ramBytesLimitAverage", v);
+    }
+    get ramBytesUsageMax() {
+        return this.getColumnValue("ramBytesUsageMax");
+    }
+    set ramBytesUsageMax(v) {
+        this.setColumnValue("ramBytesUsageMax", v);
+    }
     get ramCost() {
         return this.getColumnValue("ramCost");
     }
@@ -703,6 +777,18 @@ export default class KubernetesCostAllocation extends AnalyticsBaseModel {
     set currency(v) {
         this.setColumnValue("currency", v);
     }
+    get shipmentId() {
+        return this.getColumnValue("shipmentId");
+    }
+    set shipmentId(v) {
+        this.setColumnValue("shipmentId", v);
+    }
+    get shipmentChunk() {
+        return this.getColumnValue("shipmentChunk");
+    }
+    set shipmentChunk(v) {
+        this.setColumnValue("shipmentChunk", v);
+    }
     get retentionDate() {
         return this.getColumnValue("retentionDate");
     }