@oneuptime/common 14.0.10 → 14.0.11

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -61,6 +61,7 @@ import { DropdownOption, DropdownOptionLabel } from "../Dropdown/Dropdown";
 import OrderedStatesList from "../OrderedStatesList/OrderedStatesList";
 import Pill from "../Pill/Pill";
 import Table from "../Table/Table";
+import { getEmptyTableMessage } from "../Table/EmptyTableMessage";
 import TableColumn from "../Table/Types/Column";
 import FieldType from "../Types/FieldType";
 import ModelTableColumn from "./Column";
@@ -3209,17 +3210,93 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   const getNoItemsMessage: GetNoItemsMessageFunction = ():
     | string
     | ReactElement => {
-    const plural: string = (
-      props.pluralName ||
-      model.pluralName ||
-      "items"
-    ).toLocaleLowerCase();
+    const pluralLabel: string = props.pluralName || model.pluralName || "items";
 
     if (isSearchActive() || hasFilterApplied(filterData)) {
-      return `${tx("No")} ${plural} ${tx("match your search or filters.")}`;
+      return getEmptyTableMessage({
+        pluralLabel: pluralLabel,
+        isFiltered: true,
+        translate: tx,
+      });
+    }
+
+    return (
+      props.noItemsMessage ||
+      getEmptyTableMessage({
+        pluralLabel: pluralLabel,
+        isFiltered: false,
+        translate: tx,
+      })
+    );
+  };
+
+  type GetNoItemsActionFunction = () => ReactElement | undefined;
+
+  /*
+   * The way forward from an empty table: the "Create X" button the card's
+   * header already shows - same handler, same permission gate, same label -
+   * repeated as the primary action under "No X yet.", where a new user is
+   * looking.
+   *
+   * Only under the table's own "No X yet.". A page that words its empty
+   * state itself is describing a slice of the list ("Nice work! No Active
+   * Incidents so far.", "No monitors are reporting a problem."), where a big
+   * "Create" button answers a question nobody asked. And never when a
+   * search or filter emptied the table: creating one is the wrong answer to
+   * a search that missed.
+   */
+  const getNoItemsAction: GetNoItemsActionFunction = ():
+    | ReactElement
+    | undefined => {
+    if (!props.cardProps) {
+      return undefined;
+    }
+
+    if (isSearchActive() || hasFilterApplied(filterData)) {
+      return undefined;
+    }
+
+    if (props.noItemsMessage) {
+      return undefined;
     }
 
-    return props.noItemsMessage || `${tx("No")} ${plural} ${tx("yet.")}`;
+    const createButton: CardButtonSchema | undefined = cardButtons.find(
+      (button: CardButtonSchema | ReactElement): boolean => {
+        if (React.isValidElement(button)) {
+          return false;
+        }
+
+        const schema: CardButtonSchema = button as CardButtonSchema;
+
+        return (
+          schema.icon === IconProp.Add &&
+          (schema.buttonStyle === ButtonStyleType.NORMAL ||
+            schema.buttonStyle === ButtonStyleType.PRIMARY)
+        );
+      },
+    ) as CardButtonSchema | undefined;
+
+    if (!createButton) {
+      return undefined;
+    }
+
+    return (
+      <Button
+        title={createButton.title}
+        icon={createButton.icon}
+        buttonStyle={ButtonStyleType.PRIMARY}
+        disabled={createButton.disabled}
+        tooltip={createButton.tooltip}
+        dataTestId="empty-table-create-button"
+        onClick={() => {
+          if (createButton.disabled) {
+            return;
+          }
+
+          createButton.onClick?.();
+        }}
+      />
+    );
   };
 
   const getTable: GetReactElementFunction = (): ReactElement => {
@@ -3513,6 +3590,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           setItemsOnPage(newItemsOnPage);
         }}
         noItemsMessage={getNoItemsMessage()}
+        noItemsAction={getNoItemsAction()}
         onRefreshClick={async () => {
           await fetchItems();
         }}

package/UI/Components/ResetObjectID/ResetObjectID.tsx

@@ -21,6 +21,26 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   description: string | ReactElement;
   modelId: ObjectID;
   onUpdateComplete?: undefined | ((updatedValue: ObjectID) => void);
+  /*
+   * The reset button's text, when the card is about more than the reset -
+   * a "Share Link" card showing the link, whose button is "Reset Link".
+   * Defaults to the card's title.
+   */
+  buttonTitle?: string | undefined;
+  // Shown in the card, under its title: the value the button replaces, say.
+  children?: ReactElement | Array<ReactElement> | undefined;
+  /*
+   * What the confirmation and the result say. By default they only name the
+   * column ("Reset Share Key", "Your new Share Key is ..."), which tells the
+   * reader nothing about what the reset does to whoever relies on the old
+   * value - a link that stops working, for example. Each defaults to that
+   * generic wording.
+   */
+  confirmTitle?: string | undefined;
+  confirmDescription?: string | undefined;
+  confirmButtonText?: string | undefined;
+  resultTitle?: string | undefined;
+  resultDescription?: string | undefined;
 }
 
 const ResetObjectID: <TBaseModel extends BaseModel>(
@@ -79,7 +99,7 @@ const ResetObjectID: <TBaseModel extends BaseModel>(
         description={props.description}
         buttons={[
           {
-            title: `${props.title}`,
+            title: props.buttonTitle || `${props.title}`,
             buttonStyle: ButtonStyleType.NORMAL,
             disabled: !updateGate.isAllowed,
             tooltip: updateGate.disabledReason,
@@ -94,12 +114,17 @@ const ResetObjectID: <TBaseModel extends BaseModel>(
             icon: IconProp.Reload,
           },
         ]}
-      />
+      >
+        {props.children}
+      </Card>
 
       {showModal ? (
         <ConfirmModal
-          description={`Are you sure you want to reset ${tableColumnName}?`}
-          title={`Reset ${tableColumnName}`}
+          description={
+            props.confirmDescription ||
+            `Are you sure you want to reset ${tableColumnName}?`
+          }
+          title={props.confirmTitle || `Reset ${tableColumnName}`}
           onSubmit={async () => {
             await resetKey();
           }}
@@ -107,7 +132,7 @@ const ResetObjectID: <TBaseModel extends BaseModel>(
           onClose={() => {
             setShowModal(false);
           }}
-          submitButtonText={`Reset`}
+          submitButtonText={props.confirmButtonText || `Reset`}
           submitButtonType={ButtonStyleType.DANGER}
         />
       ) : (
@@ -131,10 +156,11 @@ const ResetObjectID: <TBaseModel extends BaseModel>(
 
       {showResultModal ? (
         <ConfirmModal
-          description={`Your new ${tableColumnName} is ${
-            newId?.toString() || ""
-          }`}
-          title={`New ${tableColumnName}`}
+          description={
+            props.resultDescription ||
+            `Your new ${tableColumnName} is ${newId?.toString() || ""}`
+          }
+          title={props.resultTitle || `New ${tableColumnName}`}
           onSubmit={() => {
             if (props.onUpdateComplete && newId) {
               props.onUpdateComplete(newId);

package/UI/Components/Table/EmptyTableMessage.ts

@@ -0,0 +1,81 @@
+/*
+ * The sentence an empty table shows when its page has not written one.
+ *
+ * It is built from the table's plural noun - "No monitors yet." - and a
+ * sentence built that way cannot be translated a word at a time: "No" is also
+ * the answer to a question, so German read "Nein monitors yet.", and word
+ * order and plural forms differ between languages anyway. So the whole
+ * sentence is looked up first; a locale without it gets a sentence that needs
+ * no noun ("Nothing here yet."); and only a locale that has neither - English,
+ * where both look up to themselves - builds the sentence from the noun.
+ */
+
+export type TranslateFunction = (value: string) => string;
+
+export const NOTHING_HERE_YET: string = "Nothing here yet.";
+
+export const NOTHING_MATCHES_SEARCH_OR_FILTERS: string =
+  "Nothing matches your search or filters.";
+
+// Two capitals in a row: "SLOs", "API". Such a word is kept as written.
+const ACRONYM_PATTERN: RegExp = new RegExp("[A-Z]{2,}");
+
+/*
+ * "Monitors" -> "monitors", "On-Call Duty Policies" -> "on-call duty
+ * policies", but "SLOs" and "API Keys" keep their acronyms ("SLOs", "API
+ * keys") - lower-casing every letter, as the tables used to, gave "slos".
+ */
+export const toSentenceNoun: (pluralLabel: string) => string = (
+  pluralLabel: string,
+): string => {
+  const words: Array<string> = pluralLabel.trim().split(" ");
+
+  return words
+    .filter((word: string): boolean => {
+      return word.length > 0;
+    })
+    .map((word: string): string => {
+      return ACRONYM_PATTERN.test(word) ? word : word.toLocaleLowerCase();
+    })
+    .join(" ");
+};
+
+export interface EmptyTableMessageOptions {
+  // The table's plural noun, in English: "Monitors", "Status Pages".
+  pluralLabel: string;
+  // A search or filter emptied the table, not a project with nothing in it.
+  isFiltered: boolean;
+  translate: TranslateFunction;
+}
+
+export const getEmptyTableMessage: (
+  options: EmptyTableMessageOptions,
+) => string = (options: EmptyTableMessageOptions): string => {
+  const noun: string = toSentenceNoun(options.pluralLabel) || "items";
+
+  const sentence: string = options.isFiltered
+    ? `No ${noun} match your search or filters.`
+    : `No ${noun} yet.`;
+
+  const translatedSentence: string = options.translate(sentence);
+
+  if (translatedSentence && translatedSentence !== sentence) {
+    return translatedSentence;
+  }
+
+  const nounFreeSentence: string = options.isFiltered
+    ? NOTHING_MATCHES_SEARCH_OR_FILTERS
+    : NOTHING_HERE_YET;
+
+  const translatedNounFreeSentence: string =
+    options.translate(nounFreeSentence);
+
+  if (
+    translatedNounFreeSentence &&
+    translatedNounFreeSentence !== nounFreeSentence
+  ) {
+    return translatedNounFreeSentence;
+  }
+
+  return sentence;
+};

package/UI/Components/Table/Table.tsx

@@ -8,6 +8,7 @@ import BulkUpdateForm, {
   BulkActionOnClickProps,
 } from "../BulkUpdate/BulkUpdateForm";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import { getEmptyTableMessage } from "./EmptyTableMessage";
 import FilterViewer from "../Filters/FilterViewer";
 import Filter from "../Filters/Types/Filter";
 import FilterData from "../Filters/Types/FilterData";
@@ -56,6 +57,13 @@ export interface ComponentProps<T extends GenericObject> {
   onRefreshClick?: undefined | (() => void);
 
   noItemsMessage?: undefined | string | ReactElement;
+  /*
+   * What to do about an empty table - typically the "Create X" button its
+   * header already has. Shown under the no-items message in place of the
+   * "Refresh?" link, which on an empty list read like a failed load and
+   * offered no way forward.
+   */
+  noItemsAction?: undefined | ReactElement;
 
   sortOrder: SortOrder;
   sortBy: keyof T | null;
@@ -226,6 +234,45 @@ const Table: TableFunction = <T extends GenericObject>(
   const isRefetchingWithData: boolean =
     props.isLoading && props.data.length > 0;
 
+  /*
+   * A finished load with nothing in it (loading shows skeletons, a failure
+   * shows its error). Its message is drawn below the table rather than in a
+   * row of it: a row spans every column, so on a wide table the message was
+   * centred across columns scrolled out of view, and cut off at the card's
+   * edge.
+   */
+  const isEmptyResult: boolean =
+    !props.isLoading && !props.error && props.data.length === 0;
+
+  const getNoItemsElement: GetReactElementFunction = (): ReactElement => {
+    return (
+      <div
+        /*
+         * The rule under the header row the table body used to draw. A phone
+         * shows no header row, and the table's own container already draws
+         * that line, so a second one would sit right under it.
+         */
+        className={`${isMobile ? "" : "border-t border-gray-200 "}px-6 md:-mx-6`}
+        data-testid={`${props.id}-no-items`}
+      >
+        <ErrorMessage
+          message={
+            props.noItemsMessage ||
+            getEmptyTableMessage({
+              pluralLabel: props.pluralLabel,
+              isFiltered: false,
+              translate: (value: string): string => {
+                return translateString(value) ?? value;
+              },
+            })
+          }
+          onRefreshClick={props.onRefreshClick}
+          action={props.noItemsAction}
+        />
+      </div>
+    );
+  };
+
   const getTablebody: GetReactElementFunction = (): ReactElement => {
     if (props.isLoading && props.data.length === 0) {
       return (
@@ -259,25 +306,6 @@ const Table: TableFunction = <T extends GenericObject>(
       );
     }
 
-    if (props.data.length === 0) {
-      return (
-        <tbody>
-          <tr>
-            <td colSpan={colspan}>
-              <ErrorMessage
-                message={
-                  props.noItemsMessage
-                    ? props.noItemsMessage
-                    : `${translateString("No") ?? "No"} ${translatedSingularLabel.toLocaleLowerCase()}`
-                }
-                onRefreshClick={props.onRefreshClick}
-              />
-            </td>
-          </tr>
-        </tbody>
-      );
-    }
-
     if (!props.isLoading && props.filterError) {
       return <></>;
     }
@@ -455,7 +483,7 @@ const Table: TableFunction = <T extends GenericObject>(
                 {isMobile ? (
                   // Mobile view: render as list
                   <div className="min-w-full divide-y divide-gray-200">
-                    {getTablebody()}
+                    {isEmptyResult ? <></> : getTablebody()}
                   </div>
                 ) : (
                   // Desktop view: render as table
@@ -483,13 +511,14 @@ const Table: TableFunction = <T extends GenericObject>(
                       }
                       hasTableItems={selectableRowsOnThePage.length > 0}
                     />
-                    {getTablebody()}
+                    {isEmptyResult ? <></> : getTablebody()}
                   </table>
                 )}
               </div>
             </div>
           </div>
         </div>
+        {isEmptyResult && getNoItemsElement()}
         <div className="bg-gray-50 text-right md:-mx-6 -mb-6 rounded-b-xl">
           {!props.disablePagination && (
             <Pagination

package/UI/Components/Table/TableRow.tsx

@@ -16,6 +16,7 @@ import Color from "../../../Types/Color";
 import OneUptimeDate from "../../../Types/Date";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
+import useTranslateValue from "../../Utils/Translation";
 import React, { ReactElement, useState, useEffect } from "react";
 import { Draggable, DraggableProvided } from "react-beautiful-dnd";
 import LongTextViewer from "../LongText/LongTextViewer";
@@ -79,6 +80,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
 
   const [tooltipModalText, setTooltipModalText] = useState<string>("");
 
+  /*
+   * On a phone a row is a card that labels each value with its column's
+   * title, which TableHeader - hidden there - would otherwise have
+   * translated.
+   */
+  const { translateString } = useTranslateValue();
+
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -297,7 +305,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                     }}
                   >
                     <div className="text-sm font-medium text-gray-500">
-                      {column.title}
+                      {translateString(column.title) ?? column.title}
                     </div>
                     <div className="text-sm text-gray-900">{value}</div>
                   </div>

package/UI/Components/TelemetryViewer/FacetVisibility.ts

@@ -1,4 +1,4 @@
-import { FacetData } from "./types";
+import { ActiveFilter, FacetData } from "./types";
 
 /*
  * Which facet sections a telemetry sidebar (Logs, Traces, Metrics,
@@ -115,6 +115,94 @@ export const computeFacetVisibility: (
   };
 };
 
+/*
+ * A locked chip is the viewer's host saying "this page is about one slice" —
+ * a database, a service, a trace, a stored query — so its sidebar lists only
+ * what is in that slice (getFacetValuesInScope).
+ */
+export const hasLockedTelemetryScope: (
+  activeFilters: ReadonlyArray<ActiveFilter> | null | undefined,
+) => boolean = (
+  activeFilters: ReadonlyArray<ActiveFilter> | null | undefined,
+): boolean => {
+  if (!Array.isArray(activeFilters)) {
+    return false;
+  }
+
+  return activeFilters.some((filter: ActiveFilter): boolean => {
+    return Boolean(filter && filter.readOnly);
+  });
+};
+
+export interface FacetValuesInScopeOptions {
+  facetData: FacetData;
+  // Selected values per facet key: kept whatever their count, so they can be cleared.
+  activeValuesByKey: Readonly<Record<string, Set<string> | undefined>>;
+}
+
+/*
+ * The sidebar of a viewer pinned to one scope — a database's Logs tab, a
+ * service's Traces tab, an incident's stored query — lists only values that
+ * occur in that scope.
+ *
+ * Resource facets (Service, Database, Kubernetes Cluster, Host, ...) arrive
+ * as the project's whole Postgres list, with count 0 for every resource with
+ * no rows in range. On the main explorer that is the point: any resource can
+ * be picked, even a quiet one. Under a locked scope it is noise that reads
+ * as wrong — a PostgreSQL database's Logs tab listed fifty other databases
+ * and thirty services, all at 0, as if they were part of it, and picking one
+ * could only ever empty the list. A count of 0 never comes from a GROUP BY,
+ * so dropping the zero-count values drops exactly the catalog padding.
+ *
+ * A selected value survives at 0 (the reader must be able to clear it). A
+ * facet left with no values keeps its key with an empty list, so the
+ * sidebar's own empty-facet rules decide whether to fold it away. Facets
+ * with nothing to drop keep their very array.
+ */
+export const getFacetValuesInScope: (
+  options: FacetValuesInScopeOptions,
+) => FacetData = (options: FacetValuesInScopeOptions): FacetData => {
+  const result: FacetData = {};
+
+  for (const [key, values] of Object.entries(options.facetData)) {
+    if (!Array.isArray(values)) {
+      result[key] = values;
+      continue;
+    }
+
+    const activeValues: Set<string> | undefined =
+      options.activeValuesByKey[key];
+
+    const kept: FacetData[string] = values.filter(
+      (value: FacetData[string][number]): boolean => {
+        const count: number = Number(value?.count);
+        return (
+          (Number.isFinite(count) && count > 0) ||
+          Boolean(activeValues?.has(String(value?.value)))
+        );
+      },
+    );
+
+    result[key] = kept.length === values.length ? values : kept;
+  }
+
+  return result;
+};
+
+/*
+ * The empty state of a resource facet under a locked scope. The project may
+ * well have such resources; none of them has rows in this scope and window,
+ * so "in this project" would be false.
+ */
+export const getScopedHiddenFacetEmptyStateText: (
+  pluralNoun: string | undefined,
+) => string = (pluralNoun: string | undefined): string => {
+  const noun: string = (pluralNoun || "").trim();
+  return noun
+    ? `No ${noun} in this time range`
+    : DEFAULT_FACET_EMPTY_STATE_TEXT;
+};
+
 // Keeps only entries with non-blank text, trimmed.
 export const getNonEmptySearchTextByKey: (
   searchTextByKey: Readonly<Record<string, string | undefined>>,
@@ -208,6 +296,11 @@ export interface SidebarFacetEmptyStateOptions {
    * even though the box has since been cleared.
    */
   searchedAtArrivalText?: string | undefined;
+  /*
+   * The sidebar lists only values in a locked scope (getFacetValuesInScope),
+   * so an empty resource facet means none in scope, not none in the project.
+   */
+  isScoped?: boolean | undefined;
 }
 
 /*
@@ -223,7 +316,9 @@ export const getSidebarFacetEmptyStateText: (
     return getFacetNoMatchesText(options.searchedAtArrivalText);
   }
   if (options.isHideable) {
-    return getHiddenFacetEmptyStateText(options.emptyStateNoun);
+    return options.isScoped
+      ? getScopedHiddenFacetEmptyStateText(options.emptyStateNoun)
+      : getHiddenFacetEmptyStateText(options.emptyStateNoun);
   }
   return undefined;
 };

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -14,6 +14,7 @@ import TelemetrySearchBar, {
   TelemetrySearchBarRef,
 } from "./components/TelemetrySearchBar";
 import TelemetryFacetSidebar from "./components/TelemetryFacetSidebar";
+import { hasLockedTelemetryScope } from "./FacetVisibility";
 import TelemetryActiveFilterChips from "./components/TelemetryActiveFilterChips";
 import { TelemetrySignal } from "../../../Utils/Telemetry/LockedFilterSearch";
 import TelemetryHistogram from "./components/TelemetryHistogram";
@@ -109,6 +110,13 @@ export interface TelemetryViewerProps<T> {
    * tooltips. Forwarded to the chip list.
    */
   lockedFilterSignal?: TelemetrySignal | undefined;
+  /*
+   * Whether the facet sidebar lists only values found in the viewer's scope
+   * (see getFacetValuesInScope). Defaults to "whenever a locked chip is
+   * showing": a page pinned to one database, service or trace wants its
+   * sidebar to describe that slice, not the project's catalog.
+   */
+  onlyShowFacetValuesInScope?: boolean | undefined;
 
   // -- Histogram --
   showHistogram?: boolean;
@@ -167,6 +175,10 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
 
   const showHistogram: boolean = props.showHistogram ?? true;
 
+  const onlyShowFacetValuesInScope: boolean =
+    props.onlyShowFacetValuesInScope ??
+    hasLockedTelemetryScope(props.activeFilters);
+
   /*
    * Drag-zooming the histogram is a one-way trip on its own: it swaps the
    * window for a custom one and nothing remembers what the reader was
@@ -363,6 +375,7 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
               props.onFacetExclude?.(key, value);
             }}
             onFacetSearchChange={props.onFacetSearchChange}
+            onlyShowValuesInScope={onlyShowFacetValuesInScope}
           />
         )}