[FEATURE] Selection provider

.gitignore

@@ -22,3 +22,7 @@ dist/
 
 # external CUE dependencies
 /*/cue.mod/pkg/
+
+# ignore shared package links
+.plugins-shared-link-bk.json
+.plugins-shared-link-lock-bk.json

logstable/cue.mod/module.cue

@@ -5,3 +5,9 @@ language: {
 source: {
 	kind: "git"
 }
+deps: {
+	"github.com/perses/shared/cue@v0": {
+		v:       "v0.53.0-rc.1"
+		default: true
+	}
+}

logstable/schemas/logstable.cue

@@ -13,9 +13,15 @@
 
 package model
 
+import (
+	"github.com/perses/shared/cue/common"
+)
+
 kind: "LogsTable"
 spec: close({
 	allowWrap?:     bool
 	enableDetails?: bool
 	showTime?:      bool
+	selection?:     common.#selection
+	actions?:       common.#actions
 })

logstable/src/LogsTable.ts

@@ -13,12 +13,16 @@
 
 import { PanelPlugin } from '@perses-dev/plugin-system';
 import { LogsTableComponent } from './LogsTableComponent';
-import { LogsTableOptions, LogsTableProps } from './model';
+import { LogsTableItemSelectionActionsEditor } from './LogsTableItemSelectionActionsEditor';
 import { LogsTableSettingsEditor } from './LogsTableSettingsEditor';
+import { LogsTableOptions, LogsTableProps } from './model';
 
 export const LogsTable: PanelPlugin<LogsTableOptions, LogsTableProps> = {
   PanelComponent: LogsTableComponent,
-  panelOptionsEditorComponents: [{ label: 'Settings', content: LogsTableSettingsEditor }],
+  panelOptionsEditorComponents: [
+    { label: 'Settings', content: LogsTableSettingsEditor },
+    { label: 'Item Actions', content: LogsTableItemSelectionActionsEditor },
+  ],
   supportedQueryTypes: ['LogQuery'],
   createInitialOptions: () => ({
     showTime: true,

logstable/src/LogsTableItemSelectionActionsEditor.tsx

@@ -0,0 +1,35 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ActionOptions, ItemSelectionActionsEditor, SelectionOptions } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { LogsTableSettingsEditorProps } from './model';
+
+export function LogsTableItemSelectionActionsEditor({ value, onChange }: LogsTableSettingsEditorProps): ReactElement {
+  function handleActionsChange(actions: ActionOptions | undefined): void {
+    onChange({ ...value, actions: actions });
+  }
+
+  function handleSelectionChange(selection: SelectionOptions | undefined): void {
+    onChange({ ...value, selection: selection });
+  }
+
+  return (
+    <ItemSelectionActionsEditor
+      actionOptions={value.actions}
+      onChangeActions={handleActionsChange}
+      selectionOptions={value.selection}
+      onChangeSelection={handleSelectionChange}
+    />
+  );
+}

logstable/src/LogsTableSettingsEditor.tsx

@@ -12,8 +12,8 @@
 // limitations under the License.
 
 import {
-  OptionsEditorGrid,
   OptionsEditorColumn,
+  OptionsEditorGrid,
   ThresholdsEditor,
   ThresholdsEditorProps,
 } from '@perses-dev/components';

logstable/src/components/LogRow/LogRow.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { memo, useCallback, useState, useRef, useEffect } from 'react';
+import React, { memo, useCallback, useState, useRef, useEffect, ReactNode } from 'react';
 import {
   Box,
   Collapse,
@@ -48,6 +48,7 @@ interface LogRowProps {
   allowWrap?: boolean;
   isSelected?: boolean;
   onSelect?: (index: number, event: React.MouseEvent) => void;
+  itemActionButtons?: ReactNode[];
 }
 
 const DefaultLogRow: React.FC<LogRowProps> = ({
@@ -60,6 +61,7 @@ const DefaultLogRow: React.FC<LogRowProps> = ({
   allowWrap = false,
   isSelected = false,
   onSelect,
+  itemActionButtons,
 }) => {
   const theme = useTheme();
   const severityColor = useSeverityColor(log);
@@ -143,6 +145,8 @@ const DefaultLogRow: React.FC<LogRowProps> = ({
 
   if (!log) return null;
 
+  const hasRowActions = itemActionButtons && itemActionButtons.length > 0;
+
   return (
     <LogRowContainer
       severityColor={severityColor}
@@ -160,6 +164,7 @@ const DefaultLogRow: React.FC<LogRowProps> = ({
         onMouseDown={handleRowMouseDown}
         isExpandable={isExpandable}
         isHighlighted={Boolean(anchorEl)}
+        hasRowActions={hasRowActions}
         isSelected={isSelected}
       >
         {isExpandable && (
@@ -223,6 +228,20 @@ const DefaultLogRow: React.FC<LogRowProps> = ({
               )}
             </IconButton>
           </Tooltip>
+          {hasRowActions && (
+            <Box
+              sx={{
+                display: 'flex',
+                gap: '4px',
+                alignItems: 'center',
+                opacity: isHovered || Boolean(anchorEl) ? 1 : 0,
+                pointerEvents: isHovered || Boolean(anchorEl) ? 'auto' : 'none',
+                transition: 'opacity 0.08s ease',
+              }}
+            >
+              {itemActionButtons}
+            </Box>
+          )}
           <Menu
             anchorEl={anchorEl}
             open={Boolean(anchorEl)}

logstable/src/components/LogRow/LogsStyles.tsx

@@ -24,11 +24,14 @@ export const LogRowContainer = styled(Box, {
 }));
 
 export const LogRowContent = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'isExpandable' && prop !== 'isHighlighted' && prop !== 'isSelected',
-})<{ isExpandable: boolean; isHighlighted?: boolean; isSelected?: boolean }>(
-  ({ theme, isExpandable, isHighlighted, isSelected }) => ({
+  shouldForwardProp: (prop) =>
+    prop !== 'isExpandable' && prop !== 'isHighlighted' && prop !== 'isSelected' && prop !== 'hasRowActions',
+})<{ isExpandable: boolean; isHighlighted?: boolean; isSelected?: boolean; hasRowActions?: boolean }>(
+  ({ theme, isExpandable, isHighlighted, isSelected, hasRowActions }) => ({
     display: 'grid',
-    gridTemplateColumns: isExpandable ? '16px minmax(160px, max-content) 1fr' : 'minmax(160px, max-content) 1fr',
+    gridTemplateColumns: isExpandable
+      ? `16px minmax(160px, max-content) 1fr ${hasRowActions ? 'min-content' : ''}`
+      : `minmax(160px, max-content) 1fr ${hasRowActions ? 'min-content' : ''}`,
     alignItems: 'flex-start',
     padding: '4px 8px',
     cursor: 'default',