@oneuptime/common 14.0.9 → 14.0.11

package/UI/Components/TelemetryViewer/components/LockedFilterChip.tsx

@@ -10,7 +10,10 @@ import Icon from "../../Icon/Icon";
 import Tooltip from "../../Tooltip/Tooltip";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Clipboard from "../../../Utils/Clipboard";
-import { LockedFilterDetail } from "../../../../Types/Telemetry/LockedFilterDetail";
+import {
+  LockedFilterDetail,
+  LockedFilterScopeMatch,
+} from "../../../../Types/Telemetry/LockedFilterDetail";
 import {
   TELEMETRY_EXPLORER_LABELS,
   TelemetrySignal,
@@ -48,24 +51,105 @@ export const COPY_FAILED_ANNOUNCEMENT: string = "Copy failed";
 export const NO_SEARCH_SYNTAX_REASON: string =
   "This filter has no search syntax.";
 
+/** A scope chip's opening line when its builder gave none. */
+export const DEFAULT_SCOPE_SUMMARY: string =
+  "This page only shows telemetry that matches any of these:";
+
+type GetScopeMatchesFunction = (
+  detail: LockedFilterDetail | undefined,
+) => Array<LockedFilterScopeMatch>;
+
+/**
+ * The scope breakdown a detail carries: entries with a label and at least
+ * one non-blank value, values trimmed. Anything else is dropped rather than
+ * drawn as an empty heading.
+ */
+export const getLockedFilterScopeMatches: GetScopeMatchesFunction = (
+  detail: LockedFilterDetail | undefined,
+): Array<LockedFilterScopeMatch> => {
+  const matches: unknown = detail?.scopeMatches;
+
+  if (!Array.isArray(matches)) {
+    return [];
+  }
+
+  const result: Array<LockedFilterScopeMatch> = [];
+
+  for (const candidate of matches as Array<unknown>) {
+    if (!candidate || typeof candidate !== "object") {
+      continue;
+    }
+
+    const match: LockedFilterScopeMatch = candidate as LockedFilterScopeMatch;
+    const label: string =
+      typeof match.label === "string" ? match.label.trim() : "";
+    const values: Array<string> = (
+      Array.isArray(match.values) ? match.values : []
+    )
+      .map((value: unknown): string => {
+        return typeof value === "string" ? value.trim() : "";
+      })
+      .filter((value: string): boolean => {
+        return value.length > 0;
+      });
+
+    if (!label || values.length === 0) {
+      continue;
+    }
+
+    const description: string =
+      typeof match.description === "string" ? match.description.trim() : "";
+
+    result.push(
+      description
+        ? { label: label, description: description, values: values }
+        : { label: label, values: values },
+    );
+  }
+
+  return result;
+};
+
+type CountScopeMatchValuesFunction = (
+  matches: ReadonlyArray<LockedFilterScopeMatch>,
+) => number;
+
+/** How many values a scope breakdown lists across all its headings. */
+export const countLockedFilterScopeValues: CountScopeMatchValuesFunction = (
+  matches: ReadonlyArray<LockedFilterScopeMatch>,
+): number => {
+  return matches.reduce((total: number, match: LockedFilterScopeMatch) => {
+    return total + match.values.length;
+  }, 0);
+};
+
 type GetLockedFilterChipAriaLabelFunction = (
   displayKey: string,
   displayValue: string,
   hasSearchToken?: boolean | undefined,
+  scopeValueCount?: number | undefined,
 ) => string;
 
 /**
  * The accessible name of a chip that carries a detail. It names the filter,
- * says it is locked, and — when there is syntax to copy — tells a keyboard
- * user what Enter does, since the tooltip's own Copy button is out of reach.
+ * says it is locked, says how many things a scope chip matches (its tooltip
+ * lists them), and — when there is syntax to copy — tells a keyboard user
+ * what Enter does, since the tooltip's own Copy button is out of reach.
  */
 export const getLockedFilterChipAriaLabel: GetLockedFilterChipAriaLabelFunction =
   (
     displayKey: string,
     displayValue: string,
     hasSearchToken?: boolean | undefined,
+    scopeValueCount?: number | undefined,
   ): string => {
-    const base: string = `${displayKey}: ${displayValue}, locked filter`;
+    let base: string = `${displayKey}: ${displayValue}, locked filter`;
+
+    if (scopeValueCount && scopeValueCount > 0) {
+      base = `${base} matching any of ${scopeValueCount} ${
+        scopeValueCount === 1 ? "value" : "values"
+      }`;
+    }
 
     if (!hasSearchToken) {
       return base;
@@ -227,17 +311,116 @@ const SearchSyntaxRow: FunctionComponent<SearchSyntaxRowProps> = (
   );
 };
 
+interface ScopeMatchesSectionProps {
+  summary?: string | undefined;
+  matches: ReadonlyArray<LockedFilterScopeMatch>;
+}
+
+/*
+ * What a scope chip matches, heading by heading: "Endpoints · 24", the
+ * sentence on how telemetry reaches the scope through them, then each value.
+ * The list scrolls inside the tooltip, so a database with dozens of
+ * endpoints still gets a tooltip that fits on screen.
+ */
+const ScopeMatchesSection: FunctionComponent<ScopeMatchesSectionProps> = (
+  props: ScopeMatchesSectionProps,
+): ReactElement => {
+  return (
+    <div className="space-y-2" data-testid="locked-filter-scope">
+      <p
+        className="text-[11px] text-gray-600"
+        data-testid="locked-filter-scope-summary"
+      >
+        {props.summary || DEFAULT_SCOPE_SUMMARY}
+      </p>
+      <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
+        {props.matches.map((match: LockedFilterScopeMatch) => {
+          return (
+            <div
+              key={match.label}
+              className="space-y-0.5"
+              data-testid="locked-filter-scope-match"
+            >
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+                  {match.label}
+                </span>
+                <span
+                  className="text-[10px] tabular-nums text-gray-400"
+                  data-testid="locked-filter-scope-match-count"
+                >
+                  {match.values.length}
+                </span>
+              </div>
+              {match.description ? (
+                <p className="text-[11px] text-gray-400">{match.description}</p>
+              ) : (
+                <></>
+              )}
+              <ul className="space-y-0.5">
+                {match.values.map((value: string) => {
+                  return (
+                    <li
+                      key={value}
+                      className="break-all rounded bg-gray-50 px-1.5 py-0.5 font-mono text-[11px] text-gray-700"
+                      data-testid="locked-filter-scope-value"
+                    >
+                      {value}
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 /**
  * The body of the locked chip's tooltip: the search syntax that reproduces
  * the filter on the explorer, with a Copy button — or, when the grammar
- * cannot spell the filter, the reason why. Nothing else: the syntax is what a
- * reader opens the chip for. Exported so tests can render it without going
- * through Tippy's hover timers.
+ * cannot spell the filter, the reason why. A chip that stands for a whole
+ * scope (a database: its id, endpoints and instances) leads with what it
+ * matches instead, and adds the syntax only when there is some to copy — a
+ * reason nobody can act on is noise under a list that already says what the
+ * filter does. Exported so tests can render it without going through
+ * Tippy's hover timers.
  */
 export const LockedFilterTooltipContent: FunctionComponent<
   LockedFilterTooltipContentProps
 > = (props: LockedFilterTooltipContentProps): ReactElement => {
   const detail: LockedFilterDetail = props.lockedDetail;
+  const scopeMatches: Array<LockedFilterScopeMatch> =
+    getLockedFilterScopeMatches(detail);
+
+  if (scopeMatches.length > 0) {
+    return (
+      <div
+        className="w-96 max-w-full space-y-2 p-1 text-left text-xs"
+        data-testid="locked-filter-tooltip"
+      >
+        <ScopeMatchesSection
+          summary={detail.scopeSummary?.trim() || undefined}
+          matches={scopeMatches}
+        />
+        {detail.searchToken ? (
+          <div className="space-y-1 border-t border-gray-100 pt-2">
+            <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-400">
+              Search syntax
+            </div>
+            <SearchSyntaxRow
+              searchToken={detail.searchToken}
+              signal={props.signal}
+            />
+          </div>
+        ) : (
+          <></>
+        )}
+      </div>
+    );
+  }
 
   return (
     <div
@@ -281,6 +464,11 @@ interface LockedFilterChipBodyProps {
   /** The lock, or the copy outcome for a moment after Enter. */
   copied: boolean;
   failed: boolean;
+  /*
+   * Set for a chip that stands for a whole scope: an info mark after the
+   * value says there is more behind it — the list of what it matches.
+   */
+  hasScopeMatches?: boolean | undefined;
 }
 
 const LockedFilterChipBody: FunctionComponent<LockedFilterChipBodyProps> = (
@@ -306,6 +494,20 @@ const LockedFilterChipBody: FunctionComponent<LockedFilterChipBodyProps> = (
       />
       <span className="font-medium text-gray-500">{props.displayKey}:</span>
       <span>{props.displayValue}</span>
+      {props.hasScopeMatches ? (
+        <span
+          className="inline-flex items-center"
+          data-testid="locked-filter-chip-scope-mark"
+          aria-hidden="true"
+        >
+          <Icon
+            icon={IconProp.InformationCircle}
+            className="h-3 w-3 text-gray-400"
+          />
+        </span>
+      ) : (
+        <></>
+      )}
     </>
   );
 };
@@ -328,6 +530,9 @@ const DetailedLockedFilterChip: FunctionComponent<
 > = (props: DetailedLockedFilterChipProps): ReactElement => {
   const feedback: CopiedFeedback = useCopiedFeedback();
   const searchToken: string | undefined = props.lockedDetail.searchToken;
+  const scopeValueCount: number = countLockedFilterScopeValues(
+    getLockedFilterScopeMatches(props.lockedDetail),
+  );
 
   const announcement: string = feedback.copied
     ? COPIED_SEARCH_SYNTAX_ANNOUNCEMENT
@@ -343,6 +548,7 @@ const DetailedLockedFilterChip: FunctionComponent<
         props.displayKey,
         props.displayValue,
         Boolean(searchToken),
+        scopeValueCount,
       )}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
         /*
@@ -363,6 +569,7 @@ const DetailedLockedFilterChip: FunctionComponent<
         displayValue={props.displayValue}
         copied={feedback.copied}
         failed={feedback.failed}
+        hasScopeMatches={scopeValueCount > 0}
       />
     </button>
   );

package/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.tsx

@@ -12,6 +12,7 @@ import HiddenFacetsFooter from "./HiddenFacetsFooter";
 import {
   FacetVisibility,
   computeFacetVisibility,
+  getFacetValuesInScope,
   getSidebarFacetEmptyStateText,
 } from "../FacetVisibility";
 import useFacetSearchExemptions, {
@@ -44,6 +45,12 @@ export interface TelemetryFacetSidebarProps {
    * only, so the sidebar stays mounted and keeps its search and expand state.
    */
   isCollapsedOnSmallScreens?: boolean | undefined;
+  /*
+   * The viewer is pinned to a scope (it shows locked chips): list only the
+   * values found in it, never the project's zero-count catalog padding.
+   * See getFacetValuesInScope.
+   */
+  onlyShowValuesInScope?: boolean | undefined;
 }
 
 const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
@@ -108,6 +115,16 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
     onFacetSearchChange: props.onFacetSearchChange,
   });
 
+  // What the sections list: under a locked scope, only values in it.
+  const facetData: FacetData = useMemo(() => {
+    return props.onlyShowValuesInScope
+      ? getFacetValuesInScope({
+          facetData: props.facetData,
+          activeValuesByKey: activeValuesByKey,
+        })
+      : props.facetData;
+  }, [props.onlyShowValuesInScope, props.facetData, activeValuesByKey]);
+
   /*
    * Only configs that opt in with hideWhenEmpty (the resource facets) fold
    * away while empty; every other config renders exactly as before.
@@ -117,7 +134,7 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
       keys: orderedConfigs.map((config: FacetConfig): string => {
         return config.key;
       }),
-      facetData: props.facetData,
+      facetData: facetData,
       isHideable: (key: string): boolean => {
         return configsByKey.get(key)?.hideWhenEmpty === true;
       },
@@ -131,7 +148,7 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
   }, [
     orderedConfigs,
     configsByKey,
-    props.facetData,
+    facetData,
     activeValuesByKey,
     facetSearch.searchExemptKeys,
     showHidden,
@@ -166,7 +183,7 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
 
       <div id={facetListId} className="flex-1 overflow-y-auto">
         {visibleConfigs.map((config: FacetConfig) => {
-          const values: Array<FacetValue> = props.facetData[config.key] || [];
+          const values: Array<FacetValue> = facetData[config.key] || [];
 
           const onSearchChange: ((text: string) => void) | undefined =
             config.serverSearchable
@@ -195,6 +212,7 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
                 emptyStateNoun: config.emptyStateNoun,
                 searchedAtArrivalText:
                   facetSearch.searchedAtArrivalByKey[config.key],
+                isScoped: props.onlyShowValuesInScope,
               })}
             />
           );

package/UI/Components/TextArea/TextArea.tsx

@@ -5,6 +5,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useState,
 } from "react";
 
@@ -30,6 +31,12 @@ const TextArea: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const { translateString } = useTranslateValue();
+  /*
+   * An id of its own for this field's error message, as Input has: a fixed
+   * one was shared by every text area in error on a form, so each was
+   * described by the first one's message.
+   */
+  const errorId: string = `textarea-error-${useId()}`;
   const [text, setText] = useState<string>(props.initialValue || "");
 
   let className: string = "";
@@ -75,7 +82,7 @@ const TextArea: FunctionComponent<ComponentProps> = (
           spellCheck={!props.disableSpellCheck}
           aria-labelledby={props.ariaLabelledby}
           aria-invalid={props.error ? "true" : undefined}
-          aria-describedby={props.error ? "textarea-error-message" : undefined}
+          aria-describedby={props.error ? errorId : undefined}
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
             const value: string = e.target.value;
 
@@ -108,7 +115,7 @@ const TextArea: FunctionComponent<ComponentProps> = (
       </div>
       {props.error && (
         <p
-          id="textarea-error-message"
+          id={errorId}
           data-testid="error-message"
           className="mt-1 text-sm text-red-400"
           role="alert"

package/UI/Components/Workflow/ModelFieldPicker.tsx

@@ -956,18 +956,16 @@ const ModelFieldPicker: FunctionComponent<ComponentProps> = (
       )}
 
       {(viewMode === "json" || loadError) && (
-        <div className="rounded-md border border-gray-200 overflow-hidden">
-          <CodeEditor
-            type={CodeType.JSON}
-            value={jsonText}
-            onChange={onJsonChange}
-            placeholder={
-              props.placeholder || 'Example: {"columnName": true, ...}'
-            }
-            error={props.error}
-            tabIndex={props.tabIndex}
-          />
-        </div>
+        <CodeEditor
+          type={CodeType.JSON}
+          value={jsonText}
+          onChange={onJsonChange}
+          placeholder={
+            props.placeholder || 'Example: {"columnName": true, ...}'
+          }
+          error={props.error}
+          tabIndex={props.tabIndex}
+        />
       )}
 
       {viewMode === "picker" && !loadError && (

package/UI/Styles/Theme.css

@@ -677,6 +677,14 @@ html.dark :is(
   background-color: rgb(49 46 129 / 35%);
 }
 
+/*
+ * The same wash painted on a row's ::before, which reaches past the row's
+ * text without moving the row (the AI investigation's evidence rows).
+ */
+html.dark [class~="before:bg-indigo-50/70"]::before {
+  background-color: rgb(49 46 129 / 35%);
+}
+
 html.dark :is(.bg-violet-50, .bg-violet-100, [class~="bg-violet-50/40"]) {
   background-color: rgb(76 29 149 / 32%);
 }

package/UI/esbuild-config.js

@@ -182,26 +182,7 @@ function createFileLoaderPlugin() {
   };
 }
 
-// Copy Monaco's runtime next to the bundle so the editor loads from this
-// install instead of cdn.jsdelivr.net, which is unreachable when self-hosted
-// offline. Only min/vs is copied - the rest of the package is sources and
-// type definitions the browser never asks for.
-//
-// Every frontend gets a copy. Forms/Fields/FormField.tsx imports CodeEditor
-// directly, so every service that renders a form pulls the editor into its
-// bundle - there is no service to skip. Gating this on the built output only
-// looked selective; it matched all five services and risked a silent offline
-// 404 the moment a code field showed up somewhere unexpected.
-function copyMonacoAssets(outdir) {
-  const source = path.join(resolvePackageRoot("monaco-editor"), "min", "vs");
-  const destination = path.resolve(path.dirname(outdir), "assets/monaco/vs");
-
-  fs.rmSync(destination, { recursive: true, force: true });
-  fs.mkdirSync(path.dirname(destination), { recursive: true });
-  fs.cpSync(source, destination, { recursive: true });
-}
-
-// Tailwind's Play CDN build, copied out of Common the same way.
+// Tailwind's Play CDN build, copied out of Common next to the bundle.
 //
 // It used to be committed once per frontend - five byte-identical copies of a
 // 684 KB minified file, each one its own set of code-scanning alerts to
@@ -380,11 +361,6 @@ function createConfig(options) {
     splitting: true,
     publicPath,
     define: {
-      // Monaco resolves its runtime against this at load time. import.meta is
-      // empty at the es2017 target, so the path has to come from the build.
-      "process.env.MONACO_ASSET_PATH": JSON.stringify(
-        `${publicPath.replace(/dist\/$/, "")}assets/monaco/vs`,
-      ),
       "process.env.NODE_ENV": JSON.stringify(
         isDev ? "development" : "production",
       ),
@@ -456,9 +432,6 @@ async function build(config, serviceName) {
   try {
     const result = await esbuild.build(config);
 
-    copyMonacoAssets(config.outdir);
-    console.log(`📦 Copied Monaco assets for ${serviceName}`);
-
     copyTailwindAsset(config.outdir);
     console.log(`📦 Copied Tailwind for ${serviceName}`);
 
@@ -489,12 +462,9 @@ async function watch(config, serviceName) {
   try {
     const context = await esbuild.context(config);
 
-    // The copy no longer reads the built output, so it can run before the
+    // The copy does not read the built output, so it can run before the
     // first build instead of forcing an extra one just to have something to
     // inspect. context.watch() does the initial build on its own.
-    copyMonacoAssets(config.outdir);
-    console.log(`📦 Copied Monaco assets for ${serviceName}`);
-
     copyTailwindAsset(config.outdir);
     console.log(`📦 Copied Tailwind for ${serviceName}`);