Patterns: Logs sample

docker-compose.yaml

@@ -2,7 +2,7 @@ version: '3.0'
 
 services:
   grafana:
-    image: grafana/grafana:11.0.0
+    image: grafana/grafana:11.1.1
     environment:
       - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
       - GF_AUTH_ANONYMOUS_ENABLED=true

package.json

@@ -78,11 +78,11 @@
   "dependencies": {
     "@bsull/augurs": "^0.3.1",
     "@emotion/css": "^11.10.6",
-    "@grafana/data": "^11.0.0",
+    "@grafana/data": "^11.1.1",
     "@grafana/lezer-logql": "^0.2.6",
-    "@grafana/runtime": "^11.0.0",
+    "@grafana/runtime": "^11.1.1",
     "@grafana/scenes": "5.7.2",
-    "@grafana/ui": "^11.0.0",
+    "@grafana/ui": "^11.1.1",
     "@lezer/common": "^1.2.1",
     "@lezer/lr": "^1.4.1",
     "@playwright/test": "^1.43.1",

project-words.txt

@@ -468,3 +468,4 @@ logql
 subqueries
 dbscan
 svgs
+Dont

src/Components/ServiceScene/Breakdowns/FieldsBreakdownScene.tsx

@@ -468,7 +468,7 @@ export class FieldsBreakdownScene extends SceneObjectBase<FieldsBreakdownSceneSt
   };
 }
 
-const emptyStateStyles = {
+export const emptyStateStyles = {
   link: css({
     textDecoration: 'underline',
   }),

src/Components/ServiceScene/Breakdowns/Patterns/PatternsViewTableScene.tsx

@@ -3,6 +3,7 @@ import {
   SceneComponentProps,
   SceneDataNode,
   sceneGraph,
+  SceneObject,
   SceneObjectBase,
   SceneObjectState,
 } from '@grafana/scenes';
@@ -20,30 +21,32 @@ import { testIds } from '../../../../services/testIds';
 import { PatternsFrameScene } from './PatternsFrameScene';
 import { PatternNameLabel } from './PatternNameLabel';
 import { getExplorationFor } from 'services/scenes';
+import { PatternsTableExpandedRow } from '../PatternsTableExpandedRow';
 
 // copied from from grafana repository packages/grafana-data/src/valueFormats/categories.ts
 // that is used in Grafana codebase for "short" units
 const SCALED_UNITS = ['', ' K', ' Mil', ' Bil', ' Tri', ' Quadr', ' Quint', ' Sext', ' Sept'];
 export interface SingleViewTableSceneState extends SceneObjectState {
   // The local copy of the pattern frames, the parent breakdown scene decides if we get the filtered subset or not, in this scene we just present the data
   patternFrames: PatternFrame[] | undefined;
+  expandedRows?: SceneObject[];
+
+  // An array of patterns to exclude links
+  patternsNotMatchingFilters?: string[];
 }
 
-interface WithCustomCellData {
+export interface PatternsTableCellData {
   pattern: string;
   dataFrame: DataFrame;
   sum: number;
-  // samples: Array<[number, string]>,
   includeLink: () => void;
   excludeLink: () => void;
   undoLink: () => void;
 }
 
 export class PatternsViewTableScene extends SceneObjectBase<SingleViewTableSceneState> {
   constructor(state: SingleViewTableSceneState) {
-    super({
-      ...state,
-    });
+    super(state);
   }
 
   public static Component = PatternTableViewSceneComponent;
@@ -53,16 +56,22 @@ export class PatternsViewTableScene extends SceneObjectBase<SingleViewTableScene
    * @param total
    * @param appliedPatterns
    * @param theme
+   * @param patternsNotMatchingFilters
    * @protected
    */
-  public buildColumns(total: number, appliedPatterns: AppliedPattern[] | undefined, theme: GrafanaTheme2) {
+  public buildColumns(
+    total: number,
+    appliedPatterns: AppliedPattern[] | undefined,
+    theme: GrafanaTheme2,
+    patternsNotMatchingFilters?: string[]
+  ) {
     const styles = getColumnStyles(theme);
     const timeRange = sceneGraph.getTimeRange(this).state.value;
-    const columns: Array<Column<WithCustomCellData>> = [
+    const columns: Array<Column<PatternsTableCellData>> = [
       {
         id: 'volume-samples',
         header: '',
-        cell: (props: CellProps<WithCustomCellData>) => {
+        cell: (props: CellProps<PatternsTableCellData>) => {
           const panelData: PanelData = {
             timeRange: timeRange,
             series: [props.cell.row.original.dataFrame],
@@ -125,7 +134,7 @@ export class PatternsViewTableScene extends SceneObjectBase<SingleViewTableScene
       {
         id: 'pattern',
         header: 'Pattern',
-        cell: (props: CellProps<WithCustomCellData>) => {
+        cell: (props: CellProps<PatternsTableCellData>) => {
           return (
             <div className={cx(getTablePatternTextStyles(), styles.tablePatternTextDefault)}>
               <PatternNameLabel exploration={getExplorationFor(this)} pattern={props.cell.row.original.pattern} />
@@ -137,7 +146,11 @@ export class PatternsViewTableScene extends SceneObjectBase<SingleViewTableScene
         id: 'include',
         header: undefined,
         disableGrow: true,
-        cell: (props: CellProps<WithCustomCellData>) => {
+        cell: (props: CellProps<PatternsTableCellData>) => {
+          if (patternsNotMatchingFilters?.includes(props.cell.row.original.pattern)) {
+            return undefined;
+          }
+
           const existingPattern = appliedPatterns?.find(
             (appliedPattern) => appliedPattern.pattern === props.cell.row.original.pattern
           );
@@ -164,7 +177,7 @@ export class PatternsViewTableScene extends SceneObjectBase<SingleViewTableScene
    * @param legendSyncPatterns
    * @private
    */
-  public buildTableData(patternFrames: PatternFrame[], legendSyncPatterns: Set<string>): WithCustomCellData[] {
+  public buildTableData(patternFrames: PatternFrame[], legendSyncPatterns: Set<string>): PatternsTableCellData[] {
     const logExploration = sceneGraph.getAncestor(this, IndexScene);
     return patternFrames
       .filter((patternFrame) => {
@@ -211,6 +224,9 @@ const getTablePatternTextStyles = () => {
 
 const getTableStyles = (theme: GrafanaTheme2) => {
   return {
+    link: css({
+      textDecoration: 'underline',
+    }),
     tableWrap: css({
       // Override interactive table style
       '> div': {
@@ -265,7 +281,7 @@ export function PatternTableViewSceneComponent({ model }: SceneComponentProps<Pa
   const { legendSyncPatterns } = patternsFrameScene.useState();
 
   // Must use local patternFrames as the parent decides if we get the filtered or not
-  const { patternFrames: patternFramesRaw } = model.useState();
+  const { patternFrames: patternFramesRaw, patternsNotMatchingFilters } = model.useState();
   const patternFrames = patternFramesRaw ?? [];
 
   // Calculate total for percentages
@@ -274,11 +290,16 @@ export function PatternTableViewSceneComponent({ model }: SceneComponentProps<Pa
   }, 0);
 
   const tableData = model.buildTableData(patternFrames, legendSyncPatterns);
-  const columns = model.buildColumns(total, appliedPatterns, theme);
+  const columns = model.buildColumns(total, appliedPatterns, theme, patternsNotMatchingFilters);
 
   return (
     <div data-testid={testIds.patterns.tableWrapper} className={styles.tableWrap}>
-      <InteractiveTable columns={columns} data={tableData} getRowId={(r: WithCustomCellData) => r.pattern} />
+      <InteractiveTable
+        columns={columns}
+        data={tableData}
+        getRowId={(r: PatternsTableCellData) => r.pattern}
+        renderExpandedRow={(row) => <PatternsTableExpandedRow tableViz={model} row={row} />}
+      />
     </div>
   );
 }