[FEATURE] Table: embed variables into datalink (#521)

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

Author: shahrokni

table/src/components/TablePanel.test.tsx

@@ -20,6 +20,7 @@ import {
   PluginLoader,
   PluginModuleResource,
   PluginRegistry,
+  VariableStateMap,
 } from '@perses-dev/plugin-system';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as packagejson from '../../package.json';
@@ -31,6 +32,15 @@ import {
 } from '../test/mock-query-results';
 import { TablePanel } from './TablePanel';
 
+/* mock all variables */
+jest.mock('@perses-dev/plugin-system', () => ({
+  ...jest.requireActual('@perses-dev/plugin-system'),
+  useAllVariableValues: (): VariableStateMap => ({
+    myproject: { loading: false, value: 'my_project' },
+    __range: { loading: false, value: '1h' },
+  }),
+}));
+
 const TEST_TIMEOUT = 15000; // Github Actions is slow
 const TEST_TIME_SERIES_TABLE_PROPS: Omit<TimeSeriesTableProps, 'queryResults'> = {
   contentDimensions: {
@@ -81,7 +91,16 @@ describe('TablePanel', () => {
     async () => {
       renderPanel(MOCK_TIME_SERIES_DATA_SINGLEVALUE, {
         columnSettings: [
-          { name: 'value', header: 'Value', headerDescription: 'Timeseries Value' },
+          {
+            name: 'value',
+            header: 'Value',
+            headerDescription: 'Timeseries Value',
+            dataLink: {
+              url: 'https://fakeurl.com/$myproject/$__range',
+              title: 'data link',
+              openNewTab: true,
+            },
+          },
           { name: 'device', width: 200 },
           { name: 'env', hide: true },
           { name: 'fstype', enableSorting: true },
@@ -95,6 +114,8 @@ describe('TablePanel', () => {
       expect(valueHeaderCell).toBeInTheDocument();
       expect(await within(valueHeaderCell).findByLabelText('Timeseries Value')).toBeInTheDocument();
       expect(await screen.findByRole('columnheader', { name: /Value/i })).toBeInTheDocument();
+      // TODO: Add this line of test after the @perses-dev\components is updated
+      // expect(await screen.getByRole('link', { name: /https:\/\/fakeurl\.com\/\$myproject\/\$__range/ }));
 
       const fstypeHeaderCell = await screen.findByRole('columnheader', { name: 'fstype' });
       expect(fstypeHeaderCell).toBeInTheDocument();

table/src/components/TablePanel.tsx

@@ -11,7 +11,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { PanelData, PanelProps } from '@perses-dev/plugin-system';
+import {
+  PanelData,
+  PanelProps,
+  replaceVariablesInString,
+  useAllVariableValues,
+  VariableStateMap,
+} from '@perses-dev/plugin-system';
 import { Table, TableCellConfigs, TableColumnConfig } from '@perses-dev/components';
 import { ReactElement, useEffect, useMemo, useState } from 'react';
 import { formatValue, Labels, QueryDataType, TimeSeries, TimeSeriesData, transformData } from '@perses-dev/core';
@@ -157,22 +163,30 @@ function ColumnFilterDropdown({
  * If column is hidden, return undefined.
  * If column do not have a definition, return a default column config.
  */
-function generateColumnConfig(name: string, columnSettings: ColumnSettings[]): TableColumnConfig<unknown> | undefined {
+function generateColumnConfig(
+  name: string,
+  columnSettings: ColumnSettings[],
+  allVariables: VariableStateMap
+): TableColumnConfig<unknown> | undefined {
   for (const column of columnSettings) {
     if (column.name === name) {
       if (column.hide) {
         return undefined;
       }
 
       const { name, header, headerDescription, enableSorting, width, align, dataLink } = column;
+      const modifiedDataLink = dataLink
+        ? { ...dataLink, url: replaceVariablesInString(dataLink.url, allVariables) }
+        : undefined;
+
       return {
         accessorKey: name,
         header: header ?? name,
         headerDescription,
         enableSorting,
         width,
         align,
-        dataLink,
+        dataLink: modifiedDataLink,
         ...generateCellContentConfig(column),
       };
     }
@@ -195,6 +209,7 @@ export type TableProps = PanelProps<TableOptions, TimeSeriesData>;
 
 export function TablePanel({ contentDimensions, spec, queryResults }: TableProps): ReactElement | null {
   const theme = useTheme();
+  const allVariables = useAllVariableValues();
 
   // TODO: handle other query types
   const queryMode = getTablePanelQueryOptions(spec).mode;
@@ -273,7 +288,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
     for (const columnSetting of spec.columnSettings ?? []) {
       if (customizedColumns.has(columnSetting.name)) continue; // Skip duplicates
 
-      const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? []);
+      const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables);
       if (columnConfig !== undefined) {
         columns.push(columnConfig);
         customizedColumns.add(columnSetting.name);
@@ -284,7 +299,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
     if (!spec.defaultColumnHidden) {
       for (const key of keys) {
         if (!customizedColumns.has(key)) {
-          const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+          const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables);
           if (columnConfig !== undefined) {
             columns.push(columnConfig);
           }
@@ -293,7 +308,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
     }
 
     return columns;
-  }, [keys, spec.columnSettings, spec.defaultColumnHidden]);
+  }, [keys, spec.columnSettings, spec.defaultColumnHidden, allVariables]);
 
   // Generate cell settings that will be used by the table to render cells (text color, background color, ...)
   const cellConfigs: TableCellConfigs = useMemo(() => {