[FEATURE]: add teansform to the logs table

Signed-off-by: Mahmoud <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Author: shahrokni

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/LogsTableComponent.tsx

@@ -17,7 +17,7 @@ import { LogsTableProps } from './model';
 import { LogsList } from './components/LogsList';
 
 export function LogsTableComponent(props: LogsTableProps): ReactElement | null {
-  const { queryResults, spec } = props;
+  const { queryResults, spec, contentDimensions } = props;
 
   // all queries results must be included
   const logs = queryResults
@@ -39,5 +39,5 @@ export function LogsTableComponent(props: LogsTableProps): ReactElement | null {
     );
   }
 
-  return <LogsList logs={logs} spec={spec} />;
+  return <LogsList logs={logs} spec={spec} contentDimensions={contentDimensions} />;
 }

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/LogsList.tsx

@@ -12,23 +12,12 @@
 // limitations under the License.
 
 import React from 'react';
+// import { useExpandedRows } from './hooks/useExpandedRows';
 import { LogEntry } from '@perses-dev/core';
-import { LogsTableOptions } from '../model';
-import { EmptyLogsState } from './EmptyLogsState';
-import { useExpandedRows } from './hooks/useExpandedRows';
+import { LogsTableProps } from '../model';
 import { VirtualizedLogsList } from './VirtualizedLogsList';
 
-interface LogsListProps {
-  logs: LogEntry[];
-  spec: LogsTableOptions;
-}
-
-export const LogsList: React.FC<LogsListProps> = ({ logs, spec }) => {
-  const { expandedRows, toggleExpand } = useExpandedRows();
-
-  if (!logs.length) {
-    return <EmptyLogsState />;
-  }
-
-  return <VirtualizedLogsList logs={logs} spec={spec} expandedRows={expandedRows} onToggleExpand={toggleExpand} />;
+type Props = Pick<LogsTableProps, 'spec' | 'contentDimensions'> & { logs: LogEntry[] };
+export const LogsList: React.FC<Props> = ({ spec, logs, contentDimensions }) => {
+  return <VirtualizedLogsList contentDimensions={contentDimensions} logs={logs} spec={spec} />;
 };

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} />;
+};