@openchoreo/backstage-plugin-openchoreo-observability 1.1.0

package/dist/components/Traces/TracesFilters.esm.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Grid, TextField, FormControl, InputLabel, Select, MenuItem, Checkbox } from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
+import { TimeRangeFilter } from '../TimeRangeFilter/TimeRangeFilter.esm.js';
+import { useDebouncedSearch } from '../../hooks/useDebouncedSearch.esm.js';
+
+const TracesFilters = ({
+  filters,
+  onFiltersChange,
+  environments,
+  environmentsLoading,
+  components,
+  componentsLoading,
+  disabled = false
+}) => {
+  const [searchInput, handleSearchChange] = useDebouncedSearch(
+    filters.searchQuery,
+    (value) => onFiltersChange({ searchQuery: value }),
+    500
+  );
+  const handleEnvironmentChange = (event) => {
+    const selectedEnvironment = environments.find(
+      (env) => env.uid === event.target.value
+    );
+    if (selectedEnvironment) {
+      onFiltersChange({ environment: selectedEnvironment });
+    }
+  };
+  const handleComponentChange = (event) => {
+    const value = event.target.value;
+    onFiltersChange({ components: value });
+  };
+  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        label: "Search Trace ID",
+        variant: "outlined",
+        value: searchInput,
+        onChange: handleSearchChange,
+        placeholder: "Enter Trace ID to search",
+        disabled
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxs(
+      FormControl,
+      {
+        fullWidth: true,
+        disabled: disabled || componentsLoading,
+        variant: "outlined",
+        children: [
+          /* @__PURE__ */ jsx(InputLabel, { id: "components-label", children: "Components" }),
+          componentsLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 56 }) : /* @__PURE__ */ jsx(
+            Select,
+            {
+              multiple: true,
+              value: filters.components || [],
+              onChange: handleComponentChange,
+              labelId: "components-label",
+              label: "Component",
+              renderValue: (selected) => {
+                const selectedArray = selected;
+                if (selectedArray.length === 0) return "All";
+                return selectedArray.map((id) => {
+                  const comp = components.find((c) => c.name === id);
+                  return comp?.displayName || comp?.name || id;
+                }).join(", ");
+              },
+              children: components.map((component) => {
+                return /* @__PURE__ */ jsxs(MenuItem, { value: component.name, children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: (filters.components || []).indexOf(component.name) > -1
+                    }
+                  ),
+                  component.displayName || component.name
+                ] }, component.name);
+              })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsxs(
+      FormControl,
+      {
+        fullWidth: true,
+        disabled: disabled || environmentsLoading,
+        variant: "outlined",
+        children: [
+          /* @__PURE__ */ jsx(InputLabel, { id: "environment-label", children: "Environment" }),
+          environmentsLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 56 }) : /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: filters.environment?.uid || "",
+              onChange: handleEnvironmentChange,
+              labelId: "environment-label",
+              label: "Environment",
+              children: environments.map((env) => /* @__PURE__ */ jsx(MenuItem, { value: env.uid || env.name, children: env.displayName || env.name }, env.uid || env.name))
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
+      TimeRangeFilter,
+      {
+        value: filters.timeRange,
+        customStartTime: filters.customStartTime,
+        customEndTime: filters.customEndTime,
+        onChange: onFiltersChange,
+        disabled
+      }
+    ) })
+  ] });
+};
+
+export { TracesFilters };
+//# sourceMappingURL=TracesFilters.esm.js.map

package/dist/components/Traces/TracesFilters.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TracesFilters.esm.js","sources":["../../../src/components/Traces/TracesFilters.tsx"],"sourcesContent":["import { FC, ChangeEvent } from 'react';\nimport {\n  FormControl,\n  InputLabel,\n  Select,\n  MenuItem,\n  Grid,\n  TextField,\n  Checkbox,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { type Environment, Filters } from '../../types';\nimport { TimeRangeFilter } from '../TimeRangeFilter';\nimport { Component } from '../../hooks/useGetComponentsByProject';\nimport { useDebouncedSearch } from '../../hooks/useDebouncedSearch';\n\ninterface TracesFiltersProps {\n  filters: Filters;\n  onFiltersChange: (filters: Partial<Filters>) => void;\n  environments: Environment[];\n  environmentsLoading: boolean;\n  components: Component[];\n  componentsLoading: boolean;\n  disabled?: boolean;\n}\n\nexport const TracesFilters: FC<TracesFiltersProps> = ({\n  filters,\n  onFiltersChange,\n  environments,\n  environmentsLoading,\n  components,\n  componentsLoading,\n  disabled = false,\n}) => {\n  const [searchInput, handleSearchChange] = useDebouncedSearch(\n    filters.searchQuery,\n    value => onFiltersChange({ searchQuery: value }),\n    500,\n  );\n\n  const handleEnvironmentChange = (event: ChangeEvent<{ value: unknown }>) => {\n    const selectedEnvironment = environments.find(\n      env => env.uid === (event.target.value as string),\n    );\n    if (selectedEnvironment) {\n      onFiltersChange({ environment: selectedEnvironment });\n    }\n  };\n\n  const handleComponentChange = (event: ChangeEvent<{ value: unknown }>) => {\n    const value = event.target.value as string[];\n    onFiltersChange({ components: value });\n  };\n\n  return (\n    <Grid container spacing={3}>\n      <Grid item xs={12} md={3}>\n        <TextField\n          fullWidth\n          label=\"Search Trace ID\"\n          variant=\"outlined\"\n          value={searchInput}\n          onChange={handleSearchChange}\n          placeholder=\"Enter Trace ID to search\"\n          disabled={disabled}\n        />\n      </Grid>\n\n      <Grid item xs={12} md={3}>\n        <FormControl\n          fullWidth\n          disabled={disabled || componentsLoading}\n          variant=\"outlined\"\n        >\n          <InputLabel id=\"components-label\">Components</InputLabel>\n          {componentsLoading ? (\n            <Skeleton variant=\"rect\" height={56} />\n          ) : (\n            <Select\n              multiple\n              value={filters.components || []}\n              onChange={handleComponentChange}\n              labelId=\"components-label\"\n              label=\"Component\"\n              renderValue={selected => {\n                const selectedArray = selected as string[];\n                if (selectedArray.length === 0) return 'All';\n                return selectedArray\n                  .map(id => {\n                    const comp = components.find(c => c.name === id);\n                    return comp?.displayName || comp?.name || id;\n                  })\n                  .join(', ');\n              }}\n            >\n              {components.map(component => {\n                return (\n                  <MenuItem key={component.name} value={component.name}>\n                    <Checkbox\n                      checked={\n                        (filters.components || []).indexOf(component.name) > -1\n                      }\n                    />\n                    {component.displayName || component.name}\n                  </MenuItem>\n                );\n              })}\n            </Select>\n          )}\n        </FormControl>\n      </Grid>\n\n      <Grid item xs={12} md={3}>\n        <FormControl\n          fullWidth\n          disabled={disabled || environmentsLoading}\n          variant=\"outlined\"\n        >\n          <InputLabel id=\"environment-label\">Environment</InputLabel>\n          {environmentsLoading ? (\n            <Skeleton variant=\"rect\" height={56} />\n          ) : (\n            <Select\n              value={filters.environment?.uid || ''}\n              onChange={handleEnvironmentChange}\n              labelId=\"environment-label\"\n              label=\"Environment\"\n            >\n              {environments.map((env: Environment) => (\n                <MenuItem key={env.uid || env.name} value={env.uid || env.name}>\n                  {env.displayName || env.name}\n                </MenuItem>\n              ))}\n            </Select>\n          )}\n        </FormControl>\n      </Grid>\n\n      <Grid item xs={12} md={3}>\n        <TimeRangeFilter\n          value={filters.timeRange}\n          customStartTime={filters.customStartTime}\n          customEndTime={filters.customEndTime}\n          onChange={onFiltersChange}\n          disabled={disabled}\n        />\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Traces/TracesTable.esm.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, Fragment } from 'react';
+import { Paper, Box, Table, TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton, CircularProgress, Typography } from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import { WaterfallView } from './WaterfallView.esm.js';
+import { useTracesTableStyles } from './styles.esm.js';
+import { formatDuration } from './utils.esm.js';
+
+const TracesTable = ({
+  traces,
+  traceSpans,
+  spanDetails,
+  loading = false
+}) => {
+  const classes = useTracesTableStyles();
+  const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
+  const toggleRowExpansion = (traceId) => {
+    const newExpanded = new Set(expandedRows);
+    if (newExpanded.has(traceId)) {
+      newExpanded.delete(traceId);
+    } else {
+      newExpanded.add(traceId);
+      traceSpans.fetchSpans(traceId);
+    }
+    setExpandedRows(newExpanded);
+  };
+  const renderEmptyState = () => {
+    if (loading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.emptyState, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "No traces found" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "Try adjusting your filters or time range to see more traces." })
+    ] }) }) });
+  };
+  return /* @__PURE__ */ jsx(Paper, { className: classes.tablePaper, children: /* @__PURE__ */ jsx(Box, { className: classes.tableContainer, children: /* @__PURE__ */ jsxs(Table, { className: classes.table, "aria-label": "traces table", stickyHeader: true, children: [
+    /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { className: classes.headerCell, width: "12%", children: "Trace Name" }),
+      /* @__PURE__ */ jsx(TableCell, { className: classes.headerCell, width: "20%", children: "Start Time" }),
+      /* @__PURE__ */ jsx(TableCell, { className: classes.headerCell, width: "20%", children: "End Time" }),
+      /* @__PURE__ */ jsx(TableCell, { className: classes.headerCell, width: "12%", children: "Duration" }),
+      /* @__PURE__ */ jsx(TableCell, { className: classes.headerCell, width: "12%", children: "Number of Spans" }),
+      /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          className: classes.headerCell,
+          width: "12%",
+          align: "right",
+          children: "Details"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(TableBody, { children: [
+      traces.length === 0 && !loading && renderEmptyState(),
+      traces.map((trace) => {
+        const isExpanded = expandedRows.has(trace.traceId);
+        const spans = traceSpans.getSpans(trace.traceId);
+        const spansLoading = traceSpans.isLoading(trace.traceId);
+        const spansError = traceSpans.getError(trace.traceId);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              className: `${classes.traceRow} ${isExpanded ? classes.expandedRow : ""} ${trace.hasErrors ? classes.errorRow : ""}`,
+              onClick: () => toggleRowExpansion(trace.traceId),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  TableCell,
+                  {
+                    component: "th",
+                    scope: "row",
+                    width: "12%",
+                    className: classes.traceIdCell,
+                    children: [
+                      trace.hasErrors && /* @__PURE__ */ jsx(Tooltip, { title: "This trace contains errors", arrow: true, children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: classes.errorStripe,
+                          role: "presentation"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Tooltip, { title: trace.traceId, children: /* @__PURE__ */ jsx("span", { children: trace.traceName || `${trace.traceId.slice(0, 8)}...` }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(TableCell, { width: "20%", className: classes.traceCell, children: trace.startTime }),
+                /* @__PURE__ */ jsx(TableCell, { width: "20%", className: classes.traceCell, children: trace.endTime }),
+                /* @__PURE__ */ jsx(TableCell, { width: "12%", className: classes.traceCell, children: formatDuration(trace.durationNs) }),
+                /* @__PURE__ */ jsx(TableCell, { width: "12%", className: classes.traceCell, children: trace.spanCount }),
+                /* @__PURE__ */ jsx(TableCell, { width: "12%", align: "right", children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "small",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleRowExpansion(trace.traceId);
+                    },
+                    className: classes.expandIcon,
+                    children: isExpanded ? /* @__PURE__ */ jsx(ExpandLessIcon, {}) : /* @__PURE__ */ jsx(ExpandMoreIcon, {})
+                  }
+                ) })
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsxs(TableCell, { colSpan: 6, style: { padding: 0 }, children: [
+            spansLoading && /* @__PURE__ */ jsx(
+              Box,
+              {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                p: 2,
+                children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 })
+              }
+            ),
+            spansError && /* @__PURE__ */ jsx(Box, { p: 2, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "error", children: [
+              "Failed to load spans: ",
+              spansError
+            ] }) }),
+            !spansLoading && !spansError && spans && /* @__PURE__ */ jsx(
+              WaterfallView,
+              {
+                traceId: trace.traceId,
+                spans,
+                spanDetails
+              }
+            )
+          ] }) })
+        ] }, trace.traceId);
+      })
+    ] })
+  ] }) }) });
+};
+
+export { TracesTable };
+//# sourceMappingURL=TracesTable.esm.js.map

package/dist/components/Traces/TracesTable.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TracesTable.esm.js","sources":["../../../src/components/Traces/TracesTable.tsx"],"sourcesContent":["import { FC, useState, Fragment } from 'react';\nimport {\n  Table,\n  TableHead,\n  TableBody,\n  TableRow,\n  TableCell,\n  Paper,\n  IconButton,\n  Tooltip,\n  Box,\n  Typography,\n  CircularProgress,\n} from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport { WaterfallView } from './WaterfallView';\nimport { useTracesTableStyles } from './styles';\nimport { Trace, Span, SpanDetails } from '../../types';\nimport { formatDuration } from './utils';\n\ninterface TraceSpansHook {\n  fetchSpans: (traceId: string) => Promise<void>;\n  getSpans: (traceId: string) => Span[] | undefined;\n  isLoading: (traceId: string) => boolean;\n  getError: (traceId: string) => string | undefined;\n}\n\ninterface SpanDetailsHook {\n  fetchSpanDetails: (traceId: string, spanId: string) => Promise<void>;\n  getDetails: (traceId: string, spanId: string) => SpanDetails | undefined;\n  isLoading: (traceId: string, spanId: string) => boolean;\n  getError: (traceId: string, spanId: string) => string | undefined;\n}\n\ninterface TracesTableProps {\n  traces: Trace[];\n  traceSpans: TraceSpansHook;\n  spanDetails: SpanDetailsHook;\n  loading?: boolean;\n}\n\nexport const TracesTable: FC<TracesTableProps> = ({\n  traces,\n  traceSpans,\n  spanDetails,\n  loading = false,\n}) => {\n  const classes = useTracesTableStyles();\n  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());\n\n  const toggleRowExpansion = (traceId: string) => {\n    const newExpanded = new Set(expandedRows);\n    if (newExpanded.has(traceId)) {\n      newExpanded.delete(traceId);\n    } else {\n      newExpanded.add(traceId);\n      // Trigger on-demand span fetch when expanding\n      traceSpans.fetchSpans(traceId);\n    }\n    setExpandedRows(newExpanded);\n  };\n\n  const renderEmptyState = () => {\n    if (loading) {\n      return null;\n    }\n\n    return (\n      <TableRow>\n        <TableCell colSpan={6}>\n          <Box className={classes.emptyState}>\n            <Typography variant=\"h6\" gutterBottom>\n              No traces found\n            </Typography>\n            <Typography variant=\"body2\">\n              Try adjusting your filters or time range to see more traces.\n            </Typography>\n          </Box>\n        </TableCell>\n      </TableRow>\n    );\n  };\n\n  return (\n    <Paper className={classes.tablePaper}>\n      <Box className={classes.tableContainer}>\n        <Table className={classes.table} aria-label=\"traces table\" stickyHeader>\n          <TableHead>\n            <TableRow>\n              <TableCell className={classes.headerCell} width=\"12%\">\n                Trace Name\n              </TableCell>\n              <TableCell className={classes.headerCell} width=\"20%\">\n                Start Time\n              </TableCell>\n              <TableCell className={classes.headerCell} width=\"20%\">\n                End Time\n              </TableCell>\n              <TableCell className={classes.headerCell} width=\"12%\">\n                Duration\n              </TableCell>\n              <TableCell className={classes.headerCell} width=\"12%\">\n                Number of Spans\n              </TableCell>\n              <TableCell\n                className={classes.headerCell}\n                width=\"12%\"\n                align=\"right\"\n              >\n                Details\n              </TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {traces.length === 0 && !loading && renderEmptyState()}\n\n            {traces.map(trace => {\n              const isExpanded = expandedRows.has(trace.traceId);\n              const spans = traceSpans.getSpans(trace.traceId);\n              const spansLoading = traceSpans.isLoading(trace.traceId);\n              const spansError = traceSpans.getError(trace.traceId);\n\n              return (\n                <Fragment key={trace.traceId}>\n                  <TableRow\n                    className={`${classes.traceRow} ${\n                      isExpanded ? classes.expandedRow : ''\n                    } ${trace.hasErrors ? classes.errorRow : ''}`}\n                    onClick={() => toggleRowExpansion(trace.traceId)}\n                  >\n                    <TableCell\n                      component=\"th\"\n                      scope=\"row\"\n                      width=\"12%\"\n                      className={classes.traceIdCell}\n                    >\n                      {trace.hasErrors && (\n                        <Tooltip title=\"This trace contains errors\" arrow>\n                          <span\n                            className={classes.errorStripe}\n                            role=\"presentation\"\n                          />\n                        </Tooltip>\n                      )}\n                      <Tooltip title={trace.traceId}>\n                        <span>\n                          {trace.traceName || `${trace.traceId.slice(0, 8)}...`}\n                        </span>\n                      </Tooltip>\n                    </TableCell>\n                    <TableCell width=\"20%\" className={classes.traceCell}>\n                      {trace.startTime}\n                    </TableCell>\n                    <TableCell width=\"20%\" className={classes.traceCell}>\n                      {trace.endTime}\n                    </TableCell>\n                    <TableCell width=\"12%\" className={classes.traceCell}>\n                      {formatDuration(trace.durationNs)}\n                    </TableCell>\n                    <TableCell width=\"12%\" className={classes.traceCell}>\n                      {trace.spanCount}\n                    </TableCell>\n                    <TableCell width=\"12%\" align=\"right\">\n                      <IconButton\n                        size=\"small\"\n                        onClick={e => {\n                          e.stopPropagation();\n                          toggleRowExpansion(trace.traceId);\n                        }}\n                        className={classes.expandIcon}\n                      >\n                        {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}\n                      </IconButton>\n                    </TableCell>\n                  </TableRow>\n\n                  {isExpanded && (\n                    <TableRow>\n                      <TableCell colSpan={6} style={{ padding: 0 }}>\n                        {spansLoading && (\n                          <Box\n                            display=\"flex\"\n                            justifyContent=\"center\"\n                            alignItems=\"center\"\n                            p={2}\n                          >\n                            <CircularProgress size={24} />\n                          </Box>\n                        )}\n                        {spansError && (\n                          <Box p={2}>\n                            <Typography variant=\"body2\" color=\"error\">\n                              Failed to load spans: {spansError}\n                            </Typography>\n                          </Box>\n                        )}\n                        {!spansLoading && !spansError && spans && (\n                          <WaterfallView\n                            traceId={trace.traceId}\n                            spans={spans}\n                            spanDetails={spanDetails}\n                          />\n                        )}\n                      </TableCell>\n                    </TableRow>\n                  )}\n                </Fragment>\n              );\n            })}\n          </TableBody>\n        </Table>\n      </Box>\n    </Paper>\n  );\n};\n"],"names":[],"mappings":"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"}