@localstack/appinspector-ui 1.0.176 → 1.0.178

package/dist/spans-worker.js

@@ -1,18 +1,120 @@
 (() => {
-  // src/types/error-levels.ts
-  var ErrorLevel = {
-    ERROR: 3,
-    // General error
-    IAM_PERMISSION: 5,
-    // IAM permission issues
-    OK: 2,
-    // OK
-    // Standard OTEL status codes
-    UNSET: 1,
-    // Unset
-    // Extended custom levels
-    WARNING: 4
-    // Warning
+  // src/utils/query.ts
+  var EXTERNAL_PRODUCER = "external";
+  var QUERY_KEYS = ["service", "producer", "status", "op", "resource", "client", "region", "account", "dur", "trace"];
+  var isQueryKey = (value) => QUERY_KEYS.includes(value);
+  var TOKEN_PATTERN = /(?:[^\s"]+|"[^"]*"?)+/g;
+  var unquote = (value) => value.replaceAll('"', "");
+  var isExclusion = (token) => token.length > 1 && token.startsWith("-");
+  var splitTerm = (token) => {
+    const unquoted = unquote(isExclusion(token) ? token.slice(1) : token);
+    const separator = unquoted.indexOf(":");
+    if (separator <= 0) {
+      return void 0;
+    }
+    const key = unquoted.slice(0, separator).toLowerCase();
+    const value = unquoted.slice(separator + 1);
+    return isQueryKey(key) && value !== "" ? [key, value] : void 0;
+  };
+  var parseQuery = (query) => {
+    const parsed = { excludedTerms: {}, excludedWords: [], terms: {}, words: [] };
+    for (const token of query.match(TOKEN_PATTERN) ?? []) {
+      const excluded = isExclusion(token);
+      const term = splitTerm(token);
+      if (term) {
+        const [key, value] = term;
+        ((excluded ? parsed.excludedTerms : parsed.terms)[key] ??= []).push(value);
+      } else {
+        const word = unquote(excluded ? token.slice(1) : token).toLowerCase();
+        if (word !== "") {
+          (excluded ? parsed.excludedWords : parsed.words).push(word);
+        }
+      }
+    }
+    return parsed;
+  };
+  var hasExclusions = (parsed) => parsed.excludedWords.length > 0 || Object.keys(parsed.excludedTerms).length > 0;
+  var isQueryEmpty = (parsed) => parsed.words.length === 0 && Object.keys(parsed.terms).length === 0 && !hasExclusions(parsed);
+  var UNIT_TO_MS = { m: 6e4, ms: 1, s: 1e3, us: 1e-3 };
+  var parseDuration = (value) => {
+    const match = /^(>=|<=|>|<|=)?\s*(\d+(?:\.\d+)?)\s*(us|ms|s|m)?$/i.exec(value.trim());
+    if (!match) {
+      return void 0;
+    }
+    const [, operator = ">=", amount = "0", unit = "ms"] = match;
+    const threshold = Number(amount) * (UNIT_TO_MS[unit.toLowerCase()] ?? 1);
+    switch (operator) {
+      case "<": {
+        return (durationMs) => durationMs < threshold;
+      }
+      case "<=": {
+        return (durationMs) => durationMs <= threshold;
+      }
+      case "=": {
+        return (durationMs) => Math.round(durationMs) === Math.round(threshold);
+      }
+      case ">": {
+        return (durationMs) => durationMs > threshold;
+      }
+      default: {
+        return (durationMs) => durationMs >= threshold;
+      }
+    }
+  };
+  var includesIgnoreCase = (haystack, needle) => haystack.toLowerCase().includes(needle.toLowerCase());
+  var matchesTerm = (span, key, value) => {
+    switch (key) {
+      case "account": {
+        return span.accountId === value;
+      }
+      case "client": {
+        return span.triggerKind === value.toLowerCase();
+      }
+      case "dur": {
+        const predicate = parseDuration(value);
+        return predicate !== void 0 && span.durationMs !== void 0 && predicate(span.durationMs);
+      }
+      case "op": {
+        return includesIgnoreCase(span.operationName, value);
+      }
+      case "producer": {
+        return span.producer.toLowerCase() === value.toLowerCase();
+      }
+      case "region": {
+        return span.region.toLowerCase() === value.toLowerCase();
+      }
+      case "resource": {
+        return includesIgnoreCase(span.resourceName, value) || includesIgnoreCase(span.arn, value);
+      }
+      case "service": {
+        return span.serviceName.toLowerCase() === value.toLowerCase();
+      }
+      case "status": {
+        const status = value.toLowerCase();
+        if (status === "error") return span.error;
+        if (status === "warning" || status === "warn") return span.warning;
+        if (status === "ok") return !span.error && !span.warning;
+        return span.statusMessage?.includes(value) ?? false;
+      }
+      case "trace": {
+        return span.traceId.startsWith(value.toLowerCase());
+      }
+    }
+  };
+  var matchesExclusion = (span, parsed) => Object.entries(parsed.excludedTerms).some(([key, values]) => values.some((value) => matchesTerm(span, key, value))) || parsed.excludedWords.some((word) => span.haystack.includes(word));
+  var matchesQuery = (span, parsed, textMatches) => {
+    if (matchesExclusion(span, parsed)) {
+      return false;
+    }
+    for (const [key, values] of Object.entries(parsed.terms)) {
+      if (!values.some((value) => matchesTerm(span, key, value))) {
+        return false;
+      }
+    }
+    if (parsed.words.length > 0 && !textMatches?.has(span.spanId)) {
+      return parsed.words.every((word) => span.haystack.includes(word));
+    }
+    return true;
   };
 
   // src/utils/iam-utils.ts
@@ -71,161 +173,274 @@
     }
   }
 
-  // src/utils/error-level.ts
-  var calculateHighestErrorLevel = (span) => {
-    if (span.operation_status) {
-      switch (span.operation_status) {
-        case "error": {
-          return ErrorLevel.ERROR;
-        }
-        case "iam_explicit_deny":
-        case "iam_explicit_warn":
-        case "iam_implicit_deny":
-        case "iam_implicit_warn": {
-          return ErrorLevel.IAM_PERMISSION;
-        }
-        default: {
-          return ErrorLevel.OK;
-        }
-      }
+  // src/utils/span-issues.ts
+  var firstText = (...values) => values.find((value) => !!value) ?? void 0;
+  var OTEL_STATUS_ERROR = 2;
+  var getIamDenials = (span) => span.events.flatMap((event) => {
+    if (!event.event_type?.toLowerCase().includes("iam") || typeof event.attributes?.payload !== "string") {
+      return [];
     }
-    const hasIamDenial = span.events.some((event) => {
-      if (!event.event_type?.toLowerCase().includes("iam")) return false;
-      if (typeof event.attributes?.payload !== "string") return false;
-      const parsed = parseIAMEvent(event.attributes.payload);
-      return parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied";
-    });
-    if (hasIamDenial) return ErrorLevel.IAM_PERMISSION;
-    if (span.status_code === 2) return ErrorLevel.ERROR;
-    const hasErrorInErrors = span.errors?.some((error) => error.level === "error");
-    if (hasErrorInErrors) return ErrorLevel.ERROR;
-    const hasWarning = span.errors?.some((error) => error.level === "warning");
-    if (hasWarning) return ErrorLevel.WARNING;
-    return span.status_code || ErrorLevel.UNSET;
+    const permission = parseIAMEvent(event.attributes.payload)?.permission;
+    if (permission === "explicitly_denied") return ["explicit"];
+    if (permission === "implicitly_denied") return ["implicit"];
+    return [];
+  });
+  var getSpanIssues = (span) => {
+    const status = span.operation_status;
+    const iamDenied = status === "iam_explicit_deny" || status === "iam_implicit_deny";
+    const iamWarned = status === "iam_explicit_warn" || status === "iam_implicit_warn";
+    const errorMessages = (span.errors ?? []).filter((item) => item.level === "error");
+    const warningMessages = (span.errors ?? []).filter((item) => item.level === "warning");
+    const denials = getIamDenials(span);
+    const unenforcedDenial = !iamDenied && (denials.length > 0 || span.attributes?.["localstack.has_iam_deny_event"] === true);
+    const error = status === "error" || iamDenied || span.status_code === OTEL_STATUS_ERROR || errorMessages.length > 0;
+    const warning = iamWarned || warningMessages.length > 0 || unenforcedDenial;
+    const denialCount = unenforcedDenial ? Math.max(1, denials.length) : 0;
+    return {
+      error,
+      errorType: error ? firstText(span.status_message, errorMessages[0]?.message) ?? (iamDenied ? "AccessDenied" : "Error") : void 0,
+      warning,
+      warningCount: warning ? Math.max(1, warningMessages.length + denialCount) : 0,
+      warningType: warning ? firstText(warningMessages[0]?.message) ?? (unenforcedDenial ? `IAM ${denials[0] ?? "implicit"} deny` : iamWarned ? "IAM permission warning" : "Warning") : void 0
+    };
   };
 
-  // src/utils/spans-filters.ts
-  var EMPTY_FILTERS = {
-    consumerService: [],
-    producerService: [],
-    status: []
-  };
-  var EXTERNAL_PRODUCER_VALUE = "__external__";
-  function isFiltersEmpty(filters) {
-    return filters.consumerService.length === 0 && filters.producerService.length === 0 && filters.status.length === 0;
-  }
-  var collapseStatusValue = (status) => {
-    if (status === "iam_explicit_deny" || status === "iam_implicit_deny") return "iam_deny";
-    if (status === "iam_explicit_warn" || status === "iam_implicit_warn") return "iam_warn";
-    return status;
-  };
-  function applyFilters(spans, filters) {
-    if (isFiltersEmpty(filters)) return spans;
-    return spans.filter((span) => {
-      if (filters.consumerService.length > 0 && !filters.consumerService.includes(span.service_name)) {
-        return false;
-      }
-      if (filters.producerService.length > 0) {
-        const includesExternal = filters.producerService.includes(EXTERNAL_PRODUCER_VALUE);
-        const namedServices = filters.producerService.filter((value) => value !== EXTERNAL_PRODUCER_VALUE);
-        const matchesExternal = includesExternal && !span.parent_service_name;
-        const matchesNamed = namedServices.length > 0 && !!span.parent_service_name && namedServices.includes(span.parent_service_name);
-        if (!matchesExternal && !matchesNamed) return false;
+  // src/utils/span-parents.ts
+  var resolveParents = (spans) => {
+    const byId = new Map(spans.map((span) => [span.span_id, span]));
+    const parentOf = /* @__PURE__ */ new Map();
+    for (const span of spans) {
+      const parent = span.parent_span_id === null ? void 0 : byId.get(span.parent_span_id);
+      if (parent && parent.span_id !== span.span_id && parent.trace_id === span.trace_id) {
+        parentOf.set(span.span_id, parent.span_id);
       }
-      if (filters.status.length > 0) {
-        if (!span.operation_status) return false;
-        if (!filters.status.includes(collapseStatusValue(span.operation_status))) return false;
+    }
+    const causes = /* @__PURE__ */ new Map();
+    const addCause = (spanId, causeId) => {
+      const list = causes.get(spanId);
+      if (list) list.push(causeId);
+      else causes.set(spanId, [causeId]);
+    };
+    for (const span of spans) {
+      for (const causeId of span.outgoing_link_span_ids ?? []) addCause(span.span_id, causeId);
+      for (const effectId of span.incoming_link_span_ids ?? []) addCause(effectId, span.span_id);
+    }
+    const isAncestorOrSelf = (candidateId, spanId) => {
+      let current = spanId;
+      for (let hops = 0; current !== void 0 && hops <= spans.length; hops++) {
+        if (current === candidateId) return true;
+        current = parentOf.get(current);
       }
-      return true;
-    });
-  }
+      return false;
+    };
+    for (const span of spans) {
+      if (parentOf.has(span.span_id)) continue;
+      const cause = causes.get(span.span_id)?.find((causeId) => byId.has(causeId) && !isAncestorOrSelf(span.span_id, causeId));
+      if (cause !== void 0) parentOf.set(span.span_id, cause);
+    }
+    return parentOf;
+  };
+
+  // src/utils/trigger.ts
+  var getTriggerKind = (span) => span.isInternal ? "internal" : "client";
 
   // src/workers/spans-reducer.ts
-  var compareByStartTime = (a, b) => a.start_time_unix_nano < b.start_time_unix_nano ? -1 : 1;
-  var insertSorted = (array, item, compareFunction, hint) => {
-    let left;
-    let right;
-    if (hint === "back") {
-      left = array.length;
-      right = array.length;
-      let step = 1;
-      while (left > 0 && compareFunction(array[left - 1], item) > 0) {
-        right = left;
-        left = Math.max(0, left - step);
-        step *= 2;
-      }
-    } else {
-      left = 0;
-      right = 0;
-      let step = 1;
-      while (right < array.length && compareFunction(array[right], item) <= 0) {
-        left = right + 1;
-        right = Math.min(array.length, right + step);
-        step *= 2;
-      }
-    }
-    while (left < right) {
-      const mid = left + right >>> 1;
-      if (compareFunction(array[mid], item) <= 0) {
-        left = mid + 1;
-      } else {
-        right = mid;
-      }
+  var nanosToMilliseconds = (start, end) => {
+    if (!end) return void 0;
+    return Number(BigInt(end) - BigInt(start)) / 1e6;
+  };
+  var toCorpusEntry = (projection, arrivedAt) => {
+    const issues = getSpanIssues(projection);
+    return {
+      accountId: projection.account_id,
+      arn: projection.arn,
+      arrivedAt,
+      durationMs: nanosToMilliseconds(projection.start_time_unix_nano, projection.end_time_unix_nano),
+      error: issues.error,
+      haystack: [
+        projection.service_name,
+        projection.operation_name,
+        projection.resource_name,
+        projection.arn,
+        projection.status_message,
+        projection.region,
+        projection.account_id,
+        projection.trace_id,
+        projection.span_id,
+        ...(projection.errors ?? []).map((error) => error.message)
+      ].filter(Boolean).join("\n").toLowerCase(),
+      issues,
+      operationName: projection.operation_name,
+      parents: projection,
+      producer: projection.parent_service_name ?? EXTERNAL_PRODUCER,
+      region: projection.region,
+      resourceName: projection.resource_name,
+      serviceName: projection.service_name,
+      spanId: projection.span_id,
+      startTime: projection.start_time_unix_nano,
+      statusMessage: projection.status_message,
+      traceId: projection.trace_id,
+      triggerKind: getTriggerKind({ isInternal: projection.is_internal }),
+      warning: issues.warning
+    };
+  };
+  var compareByStartTime = (left, right) => {
+    if (left.startTime.length !== right.startTime.length) {
+      return left.startTime.length - right.startTime.length;
     }
-    array.splice(left, 0, item);
+    return left.startTime.localeCompare(right.startTime, "en");
   };
-  var createSpansReducer = () => {
-    let corpus = [];
-    let filters = EMPTY_FILTERS;
+  var countFacet = (counts, value) => {
+    counts.set(value, (counts.get(value) ?? 0) + 1);
+  };
+  var toFacetValues = (counts) => [...counts].map(([value, count]) => ({ count, value })).toSorted((left, right) => left.value.localeCompare(right.value));
+  var createSpansReducer = ({ now = Date.now, orphanGraceMs = 0 } = {}) => {
+    const corpus = /* @__PURE__ */ new Map();
+    let parsedQuery = parseQuery("");
+    let textMatches;
+    let nextReveal;
     const computeResult = () => {
-      const filtered = applyFilters(corpus, filters);
-      let errorCount = 0;
-      let warningCount = 0;
-      const orderedFilteredIds = [];
-      for (const entry of filtered) {
-        orderedFilteredIds.push(entry.span_id);
-        if (entry.errorLevel === ErrorLevel.ERROR || entry.errorLevel === ErrorLevel.IAM_PERMISSION) {
-          errorCount++;
-        } else if (entry.errorLevel === ErrorLevel.WARNING) {
-          warningCount++;
+      const sorted = [...corpus.values()].toSorted(compareByStartTime);
+      const queryActive = !isQueryEmpty(parsedQuery);
+      const parentOf = resolveParents(sorted.map((entry) => entry.parents));
+      const time = now();
+      nextReveal = void 0;
+      const waiting = /* @__PURE__ */ new Map();
+      const isOrphanWaiting = (root) => {
+        if (root.parents.parent_span_id === null && (root.parents.outgoing_link_span_ids?.length ?? 0) === 0) return false;
+        const revealAt = root.arrivedAt + orphanGraceMs;
+        if (time >= revealAt) return false;
+        nextReveal = Math.min(nextReveal ?? revealAt, revealAt);
+        return true;
+      };
+      const isWaiting = (entry) => {
+        const chain = [];
+        let current = entry;
+        let result = false;
+        while (current) {
+          const known = waiting.get(current.spanId);
+          if (known !== void 0) {
+            result = known;
+            break;
+          }
+          chain.push(current);
+          const parent = corpus.get(parentOf.get(current.spanId) ?? "");
+          if (!parent) result = isOrphanWaiting(current);
+          current = parent;
+        }
+        for (const item of chain) waiting.set(item.spanId, result);
+        return result;
+      };
+      const entries = orphanGraceMs > 0 ? sorted.filter((entry) => !isWaiting(entry)) : sorted;
+      const children = /* @__PURE__ */ new Map();
+      const topLevel = [];
+      for (const entry of entries) {
+        const parentId = parentOf.get(entry.spanId);
+        if (parentId === void 0) {
+          topLevel.push(entry);
+          continue;
+        }
+        const siblings = children.get(parentId);
+        if (siblings) siblings.push(entry);
+        else children.set(parentId, [entry]);
+      }
+      const rows = {};
+      const visit = (root) => {
+        const stack = [{ entry: root, expanded: false }];
+        while (stack.length > 0) {
+          const frame = stack.at(-1);
+          const kids = children.get(frame.entry.spanId) ?? [];
+          if (!frame.expanded) {
+            frame.expanded = true;
+            for (const kid of kids) {
+              if (!(kid.spanId in rows)) stack.push({ entry: kid, expanded: false });
+            }
+            continue;
+          }
+          stack.pop();
+          const matches = !queryActive || matchesQuery(frame.entry, parsedQuery, textMatches);
+          const row = {
+            ...frame.entry.issues,
+            downstream: { count: 0, errors: 0, warnings: 0 },
+            matches,
+            parentServiceName: corpus.get(parentOf.get(frame.entry.spanId) ?? "")?.serviceName,
+            rootSpanId: root.spanId,
+            treeMatches: matches ? 1 : 0,
+            treeSize: 1
+          };
+          for (const kid of kids) {
+            const kidRow = rows[kid.spanId];
+            if (!kidRow) continue;
+            row.downstream.count += kidRow.downstream.count + 1;
+            row.downstream.errors += kidRow.downstream.errors + (kidRow.error ? 1 : 0);
+            row.downstream.warnings += kidRow.downstream.warnings + (kidRow.warning ? 1 : 0);
+            row.treeMatches += kidRow.treeMatches;
+            row.treeSize += kidRow.treeSize;
+          }
+          rows[frame.entry.spanId] = row;
+        }
+        return rows[root.spanId]?.treeMatches ?? 0;
+      };
+      const topLevelIds = [];
+      for (const entry of topLevel) {
+        if (visit(entry) > 0) {
+          topLevelIds.push(entry.spanId);
         }
       }
-      const producers = /* @__PURE__ */ new Set();
-      const consumers = /* @__PURE__ */ new Set();
-      const statuses = /* @__PURE__ */ new Set();
-      let hasExternalProducer = false;
-      for (const entry of corpus) {
-        if (entry.parent_service_name) producers.add(entry.parent_service_name);
-        else hasExternalProducer = true;
-        consumers.add(entry.service_name);
-        if (entry.operation_status) statuses.add(collapseStatusValue(entry.operation_status));
+      const allIds = [];
+      let excludedCount = 0;
+      const excluding = hasExclusions(parsedQuery);
+      const producers = /* @__PURE__ */ new Map();
+      const services = /* @__PURE__ */ new Map();
+      const regions = /* @__PURE__ */ new Map();
+      const accounts = /* @__PURE__ */ new Map();
+      const clients = /* @__PURE__ */ new Map();
+      const issues = /* @__PURE__ */ new Map();
+      for (const entry of entries) {
+        if (rows[entry.spanId]?.matches) allIds.push(entry.spanId);
+        if (excluding && matchesExclusion(entry, parsedQuery)) excludedCount++;
+        countFacet(producers, entry.producer);
+        countFacet(services, entry.serviceName);
+        countFacet(regions, entry.region);
+        countFacet(accounts, entry.accountId);
+        countFacet(clients, entry.triggerKind);
+        if (entry.error) countFacet(issues, "error");
+        if (entry.warning) countFacet(issues, "warning");
+        if (!entry.error && !entry.warning) countFacet(issues, "ok");
       }
       return {
-        consumerValues: [...consumers].toSorted(),
-        errorCount,
-        hasExternalProducer,
-        orderedFilteredIds,
-        producerValues: [...producers].toSorted(),
-        statusValues: [...statuses].toSorted(),
-        warningCount
+        allIds: allIds.toReversed(),
+        excludedCount,
+        facets: {
+          account: toFacetValues(accounts),
+          client: toFacetValues(clients),
+          issues: ["error", "warning", "ok"].map((value) => ({ count: issues.get(value) ?? 0, value })),
+          producer: toFacetValues(producers),
+          region: toFacetValues(regions),
+          service: toFacetValues(services)
+        },
+        queryActive,
+        rows,
+        topLevelIds: topLevelIds.toReversed(),
+        totalCount: entries.length
       };
     };
     return {
-      addPage: (direction, projections) => {
-        const hint = direction === "forward" ? "back" : "front";
-        const sorted = projections.toSorted(compareByStartTime);
-        for (const projection of sorted) {
-          insertSorted(corpus, { ...projection, errorLevel: calculateHighestErrorLevel(projection) }, compareByStartTime, hint);
+      addPage: (_direction, projections) => {
+        for (const projection of projections) {
+          corpus.set(projection.span_id, toCorpusEntry(projection, corpus.get(projection.span_id)?.arrivedAt ?? now()));
         }
         return computeResult();
       },
       clear: () => {
-        corpus = [];
-        filters = EMPTY_FILTERS;
+        corpus.clear();
         return computeResult();
       },
-      setFilters: (next) => {
-        filters = next;
+      nextReveal: () => nextReveal,
+      refresh: computeResult,
+      setQuery: (query, matches) => {
+        parsedQuery = parseQuery(query);
+        textMatches = matches ? new Set(matches) : void 0;
         return computeResult();
       }
     };
@@ -233,10 +448,35 @@
 
   // src/workers/spans-worker.worker.ts
   var context = globalThis;
-  var reducer = createSpansReducer();
+  var reducer = createSpansReducer({ orphanGraceMs: 3e3 });
+  var revealTimer;
+  var post = (result, seq) => {
+    context.postMessage({ result, seq });
+    clearTimeout(revealTimer);
+    const revealAt = reducer.nextReveal();
+    if (revealAt !== void 0) {
+      revealTimer = setTimeout(() => {
+        post(reducer.refresh(), seq);
+      }, Math.max(0, revealAt - Date.now()));
+    }
+  };
   context.addEventListener("message", (event) => {
     const request = event.data;
-    const result = request.op === "addPage" ? reducer.addPage(request.direction, request.projections) : request.op === "setFilters" ? reducer.setFilters(request.filters) : reducer.clear();
-    context.postMessage({ result, seq: request.seq });
+    let result;
+    switch (request.op) {
+      case "addPage": {
+        result = reducer.addPage(request.direction, request.projections);
+        break;
+      }
+      case "clear": {
+        result = reducer.clear();
+        break;
+      }
+      case "setQuery": {
+        result = reducer.setQuery(request.query, request.textMatches);
+        break;
+      }
+    }
+    post(result, request.seq);
   });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localstack/appinspector-ui",
-  "version": "1.0.176",
+  "version": "1.0.178",
   "description": "LocalStack AppInspector UI",
   "license": "UNLICENSED",
   "type": "module",