[FEATURE]: add transforms to the logs table

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,12 @@
 
 package model
 
+import ("github.com/perses/shared/cue/common")
+
 kind: "LogsTable"
 spec: close({
 	allowWrap?:     bool
 	enableDetails?: bool
 	showTime?:      bool
+	transforms?: [...common.#transform]
 })

logstable/src/LogsTable.ts

@@ -15,10 +15,14 @@ import { PanelPlugin } from '@perses-dev/plugin-system';
 import { LogsTableComponent } from './LogsTableComponent';
 import { LogsTableOptions, LogsTableProps } from './model';
 import { LogsTableSettingsEditor } from './LogsTableSettingsEditor';
+import { LogsTableTransforms } from './components/LogsTableTransforms';
 
 export const LogsTable: PanelPlugin<LogsTableOptions, LogsTableProps> = {
   PanelComponent: LogsTableComponent,
-  panelOptionsEditorComponents: [{ label: 'Settings', content: LogsTableSettingsEditor }],
+  panelOptionsEditorComponents: [
+    { label: 'Settings', content: LogsTableSettingsEditor },
+    { label: 'Transforms', content: LogsTableTransforms },
+  ],
   supportedQueryTypes: ['LogQuery'],
   createInitialOptions: () => ({
     showTime: true,

logstable/src/LogsTableSettingsEditor.tsx

@@ -17,11 +17,9 @@ import {
   ThresholdsEditor,
   ThresholdsEditorProps,
 } from '@perses-dev/components';
-import { LegendOptionsEditor, LegendOptionsEditorProps, OptionsEditorProps } from '@perses-dev/plugin-system';
+import { LegendOptionsEditor, LegendOptionsEditorProps } from '@perses-dev/plugin-system';
 import { ReactElement } from 'react';
-import { LogsTableOptions } from './model';
-
-type LogsTableSettingsEditorProps = OptionsEditorProps<LogsTableOptions>;
+import { LogsTableSettingsEditorProps } from './model';
 
 export function LogsTableSettingsEditor(props: LogsTableSettingsEditorProps): ReactElement {
   const { onChange, value } = props;

logstable/src/components/LogsTableTransforms.tsx

@@ -0,0 +1,26 @@
+// 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 { TransformsEditor, TransformsEditorProps } from '@perses-dev/components';
+import { ReactElement } from 'react';
+import { LogsTableSettingsEditorProps } from '../model';
+
+export const LogsTableTransforms = (props: LogsTableSettingsEditorProps): ReactElement => {
+  const { onChange, value } = props;
+
+  const handleTransformsChange: TransformsEditorProps['onChange'] = (transforms) => {
+    onChange({ ...value, transforms });
+  };
+
+  return <TransformsEditor value={value.transforms ?? []} onChange={handleTransformsChange} />;
+};

logstable/src/model.ts

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { LogData, ThresholdOptions } from '@perses-dev/core';
-import { PanelProps, LegendSpecOptions } from '@perses-dev/plugin-system';
+import { LogData, ThresholdOptions, Transform } from '@perses-dev/core';
+import { PanelProps, LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';
 
 export type LogsTableProps = PanelProps<LogsTableOptions, LogsQueryData>;
 
@@ -27,4 +27,7 @@ export interface LogsTableOptions {
   enableDetails?: boolean;
   showTime?: boolean;
   showAll?: boolean;
+  transforms?: Transform[];
 }
+
+export type LogsTableSettingsEditorProps = OptionsEditorProps<LogsTableOptions>;