@perses-dev/table-plugin 0.6.0

package/lib/Table.d.ts

@@ -0,0 +1,8 @@
+import { PanelPlugin } from '@perses-dev/plugin-system';
+import { TableOptions } from './table-model';
+import { TableProps } from './TablePanel';
+/**
+ * The core TimeSeriesTable panel plugin for Perses.
+ */
+export declare const Table: PanelPlugin<TableOptions, TableProps>;
+//# sourceMappingURL=Table.d.ts.map

package/lib/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAA6B,YAAY,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAyC,UAAU,EAAE,MAAM,cAAc,CAAC;AAMjF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,UAAU,CAWvD,CAAC"}

package/lib/Table.js

@@ -0,0 +1,48 @@
+// Copyright 2024 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 { createInitialTableOptions } from './table-model';
+import { getTablePanelQueryOptions, TablePanel } from './TablePanel';
+import { TableColumnsEditor } from './TableColumnsEditor';
+import { TableSettingsEditor } from './TableSettingsEditor';
+import { TableCellsEditor } from './TableCellsEditor';
+import { TableTransformsEditor } from './TableTransformsEditor';
+/**
+ * The core TimeSeriesTable panel plugin for Perses.
+ */ export const Table = {
+    PanelComponent: TablePanel,
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ],
+    queryOptions: getTablePanelQueryOptions,
+    panelOptionsEditorComponents: [
+        {
+            label: 'General Settings',
+            content: TableSettingsEditor
+        },
+        {
+            label: 'Column Settings',
+            content: TableColumnsEditor
+        },
+        {
+            label: 'Cell Settings',
+            content: TableCellsEditor
+        },
+        {
+            label: 'Transforms',
+            content: TableTransformsEditor
+        }
+    ],
+    createInitialOptions: createInitialTableOptions
+};
+
+//# sourceMappingURL=Table.js.map

package/lib/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTableOptions, TableOptions } from './table-model';\nimport { getTablePanelQueryOptions, TablePanel, TableProps } from './TablePanel';\nimport { TableColumnsEditor } from './TableColumnsEditor';\nimport { TableSettingsEditor } from './TableSettingsEditor';\nimport { TableCellsEditor } from './TableCellsEditor';\nimport { TableTransformsEditor } from './TableTransformsEditor';\n\n/**\n * The core TimeSeriesTable panel plugin for Perses.\n */\nexport const Table: PanelPlugin<TableOptions, TableProps> = {\n  PanelComponent: TablePanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  queryOptions: getTablePanelQueryOptions,\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TableSettingsEditor },\n    { label: 'Column Settings', content: TableColumnsEditor },\n    { label: 'Cell Settings', content: TableCellsEditor },\n    { label: 'Transforms', content: TableTransformsEditor },\n  ],\n  createInitialOptions: createInitialTableOptions,\n};\n"],"names":["createInitialTableOptions","getTablePanelQueryOptions","TablePanel","TableColumnsEditor","TableSettingsEditor","TableCellsEditor","TableTransformsEditor","Table","PanelComponent","supportedQueryTypes","queryOptions","panelOptionsEditorComponents","label","content","createInitialOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,yBAAyB,QAAsB,gBAAgB;AACxE,SAASC,yBAAyB,EAAEC,UAAU,QAAoB,eAAe;AACjF,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,qBAAqB,QAAQ,0BAA0B;AAEhE;;CAEC,GACD,OAAO,MAAMC,QAA+C;IAC1DC,gBAAgBN;IAChBO,qBAAqB;QAAC;KAAkB;IACxCC,cAAcT;IACdU,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAAST;QAAoB;QAC1D;YAAEQ,OAAO;YAAmBC,SAASV;QAAmB;QACxD;YAAES,OAAO;YAAiBC,SAASR;QAAiB;QACpD;YAAEO,OAAO;YAAcC,SAASP;QAAsB;KACvD;IACDQ,sBAAsBd;AACxB,EAAE"}

package/lib/TableCellsEditor.d.ts

@@ -0,0 +1,6 @@
+import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { TableOptions } from './table-model';
+export type TableCellsEditorProps = OptionsEditorProps<TableOptions>;
+export declare function TableCellsEditor({ onChange, value }: TableCellsEditorProps): ReactElement;
+//# sourceMappingURL=TableCellsEditor.d.ts.map

package/lib/TableCellsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellsEditor.d.ts","sourceRoot":"","sources":["../../src/TableCellsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAgB,YAAY,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAMzF"}

package/lib/TableCellsEditor.js

@@ -0,0 +1,28 @@
+// Copyright 2024 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 { jsx as _jsx } from "react/jsx-runtime";
+import { CellsEditor } from './CellsEditor';
+export function TableCellsEditor({ onChange, value }) {
+    function handleCellsChange(cells) {
+        onChange({
+            ...value,
+            cellSettings: cells
+        });
+    }
+    return /*#__PURE__*/ _jsx(CellsEditor, {
+        cellSettings: value.cellSettings ?? [],
+        onChange: handleCellsChange
+    });
+}
+
+//# sourceMappingURL=TableCellsEditor.js.map

package/lib/TableCellsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TableCellsEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { CellsEditor } from './CellsEditor';\nimport { CellSettings, TableOptions } from './table-model';\n\nexport type TableCellsEditorProps = OptionsEditorProps<TableOptions>;\n\nexport function TableCellsEditor({ onChange, value }: TableCellsEditorProps): ReactElement {\n  function handleCellsChange(cells: CellSettings[]): void {\n    onChange({ ...value, cellSettings: cells });\n  }\n\n  return <CellsEditor cellSettings={value.cellSettings ?? []} onChange={handleCellsChange} />;\n}\n"],"names":["CellsEditor","TableCellsEditor","onChange","value","handleCellsChange","cells","cellSettings"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,WAAW,QAAQ,gBAAgB;AAK5C,OAAO,SAASC,iBAAiB,EAAEC,QAAQ,EAAEC,KAAK,EAAyB;IACzE,SAASC,kBAAkBC,KAAqB;QAC9CH,SAAS;YAAE,GAAGC,KAAK;YAAEG,cAAcD;QAAM;IAC3C;IAEA,qBAAO,KAACL;QAAYM,cAAcH,MAAMG,YAAY,IAAI,EAAE;QAAEJ,UAAUE;;AACxE"}

package/lib/TableColumnsEditor.d.ts

@@ -0,0 +1,6 @@
+import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { TableOptions } from './table-model';
+export type TableColumnsEditorProps = OptionsEditorProps<TableOptions>;
+export declare function TableColumnsEditor({ onChange, value }: TableColumnsEditorProps): ReactElement;
+//# sourceMappingURL=TableColumnsEditor.d.ts.map

package/lib/TableColumnsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnsEditor.d.ts","sourceRoot":"","sources":["../../src/TableColumnsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAkB,YAAY,EAAE,MAAM,eAAe,CAAC;AAG7D,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAEvE,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,uBAAuB,GAAG,YAAY,CAM7F"}

package/lib/TableColumnsEditor.js

@@ -0,0 +1,28 @@
+// Copyright 2024 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 { jsx as _jsx } from "react/jsx-runtime";
+import { ColumnsEditor } from './ColumnsEditor';
+export function TableColumnsEditor({ onChange, value }) {
+    function handleColumnsChange(columns) {
+        onChange({
+            ...value,
+            columnSettings: columns
+        });
+    }
+    return /*#__PURE__*/ _jsx(ColumnsEditor, {
+        columnSettings: value.columnSettings ?? [],
+        onChange: handleColumnsChange
+    });
+}
+
+//# sourceMappingURL=TableColumnsEditor.js.map

package/lib/TableColumnsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TableColumnsEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { ColumnSettings, TableOptions } from './table-model';\nimport { ColumnsEditor } from './ColumnsEditor';\n\nexport type TableColumnsEditorProps = OptionsEditorProps<TableOptions>;\n\nexport function TableColumnsEditor({ onChange, value }: TableColumnsEditorProps): ReactElement {\n  function handleColumnsChange(columns: ColumnSettings[]): void {\n    onChange({ ...value, columnSettings: columns });\n  }\n\n  return <ColumnsEditor columnSettings={value.columnSettings ?? []} onChange={handleColumnsChange} />;\n}\n"],"names":["ColumnsEditor","TableColumnsEditor","onChange","value","handleColumnsChange","columns","columnSettings"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAKjC,SAASA,aAAa,QAAQ,kBAAkB;AAIhD,OAAO,SAASC,mBAAmB,EAAEC,QAAQ,EAAEC,KAAK,EAA2B;IAC7E,SAASC,oBAAoBC,OAAyB;QACpDH,SAAS;YAAE,GAAGC,KAAK;YAAEG,gBAAgBD;QAAQ;IAC/C;IAEA,qBAAO,KAACL;QAAcM,gBAAgBH,MAAMG,cAAc,IAAI,EAAE;QAAEJ,UAAUE;;AAC9E"}

package/lib/TablePanel.d.ts

@@ -0,0 +1,10 @@
+import { PanelProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { TimeSeriesData } from '@perses-dev/core';
+import { TableOptions } from './table-model';
+export declare function getTablePanelQueryOptions(spec: TableOptions): {
+    mode: 'instant' | 'range';
+};
+export type TableProps = PanelProps<TableOptions, TimeSeriesData>;
+export declare function TablePanel({ contentDimensions, spec, queryResults }: TableProps): ReactElement | null;
+//# sourceMappingURL=TablePanel.d.ts.map

package/lib/TablePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePanel.d.ts","sourceRoot":"","sources":["../../src/TablePanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAa,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAkD,cAAc,EAAoB,MAAM,kBAAkB,CAAC;AAEpH,OAAO,EAAgC,YAAY,EAAE,MAAM,eAAe,CAAC;AA+G3E,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,YAAY,GAAG;IAAE,IAAI,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,CAK3F;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAElE,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI,CAuKrG"}

package/lib/TablePanel.js

@@ -0,0 +1,325 @@
+// Copyright 2024 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 { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Table } from '@perses-dev/components';
+import { useEffect, useMemo, useState } from 'react';
+import { formatValue, useTransformData } from '@perses-dev/core';
+import { EmbeddedPanel } from './EmbeddedPanel';
+function generateCellContentConfig(column) {
+    const plugin = column.plugin;
+    if (plugin !== undefined) {
+        return {
+            cell: (ctx)=>{
+                const panelData = ctx.getValue();
+                if (!panelData) return /*#__PURE__*/ _jsx(_Fragment, {});
+                return /*#__PURE__*/ _jsx(EmbeddedPanel, {
+                    kind: plugin.kind,
+                    spec: plugin.spec,
+                    queryResults: [
+                        panelData
+                    ]
+                });
+            },
+            cellDescription: column.cellDescription ? ()=>`${column.cellDescription}` : ()=>''
+        };
+    }
+    return {
+        cell: (ctx)=>{
+            const cellValue = ctx.getValue();
+            return typeof cellValue === 'number' && column.format ? formatValue(cellValue, column.format) : cellValue;
+        },
+        cellDescription: column.cellDescription ? ()=>`${column.cellDescription}` : undefined
+    };
+}
+/*
+ * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.
+ * If column is hidden, return undefined.
+ * If column do not have a definition, return a default column config.
+ */ function generateColumnConfig(name, columnSettings) {
+    for (const column of columnSettings){
+        if (column.name === name) {
+            if (column.hide) {
+                return undefined;
+            }
+            return {
+                accessorKey: name,
+                header: column.header ?? name,
+                headerDescription: column.headerDescription,
+                enableSorting: column.enableSorting,
+                width: column.width,
+                align: column.align,
+                ...generateCellContentConfig(column)
+            };
+        }
+    }
+    return {
+        accessorKey: name,
+        header: name
+    };
+}
+function generateCellConfig(value, settings) {
+    for (const setting of settings){
+        if (setting.condition.kind === 'Value' && setting.condition.spec?.value === String(value)) {
+            return {
+                text: setting.text,
+                textColor: setting.textColor,
+                backgroundColor: setting.backgroundColor
+            };
+        }
+        if (setting.condition.kind === 'Range' && !Number.isNaN(Number(value))) {
+            const numericValue = Number(value);
+            if (setting.condition.spec?.min !== undefined && setting.condition.spec?.max !== undefined && numericValue >= +setting.condition.spec?.min && numericValue <= +setting.condition.spec?.max) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+            if (setting.condition.spec?.min !== undefined && numericValue >= +setting.condition.spec?.min) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+            if (setting.condition.spec?.max !== undefined && numericValue <= +setting.condition.spec?.max) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+        }
+        if (setting.condition.kind === 'Regex' && setting.condition.spec?.expr) {
+            const regex = new RegExp(setting.condition.spec?.expr);
+            if (regex.test(String(value))) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+        }
+        if (setting.condition.kind === 'Misc' && setting.condition.spec?.value) {
+            if (setting.condition.spec?.value === 'empty' && value === '') {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+            if (setting.condition.spec?.value === 'null' && (value === null || value === undefined)) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+            if (setting.condition.spec?.value === 'NaN' && Number.isNaN(value)) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+            if (setting.condition.spec?.value === 'true' && value === true) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+            if (setting.condition.spec?.value === 'false' && value === false) {
+                return {
+                    text: setting.text,
+                    textColor: setting.textColor,
+                    backgroundColor: setting.backgroundColor
+                };
+            }
+        }
+    }
+    return undefined;
+}
+export function getTablePanelQueryOptions(spec) {
+    // if any cell renders a panel plugin, perform a range query instead of an instant query
+    return {
+        mode: (spec.columnSettings ?? []).some((c)=>c.plugin) ? 'range' : 'instant'
+    };
+}
+export function TablePanel({ contentDimensions, spec, queryResults }) {
+    // TODO: handle other query types
+    const queryMode = getTablePanelQueryOptions(spec).mode;
+    const rawData = useMemo(()=>{
+        // Transform query results to a tabular format:
+        // [ { timestamp: 123, value: 456, labelName1: labelValue1 }, ... ]
+        return queryResults.flatMap((data, queryIndex)=>data.data.series.map((ts)=>({
+                    data,
+                    ts,
+                    queryIndex
+                }))).map(({ data, ts, queryIndex })=>{
+            if (ts.values[0] === undefined) {
+                return {
+                    ...ts.labels
+                };
+            }
+            // If there are multiple queries, we need to add the query index to the value key and label key to avoid conflicts
+            const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;
+            const labels = queryResults.length === 1 ? ts.labels : Object.entries(ts.labels ?? {}).reduce((acc, [key, value])=>{
+                if (key) acc[`${key} #${queryIndex + 1}`] = value;
+                return acc;
+            }, {});
+            // If the cell visualization is a panel plugin, filter the data by the current series
+            const columnValue = (spec.columnSettings ?? []).find((x)=>x.name === valueColumnName)?.plugin ? {
+                ...data,
+                data: {
+                    ...data.data,
+                    series: data.data.series.filter((s)=>s === ts)
+                }
+            } : ts.values[0][1];
+            if (queryMode === 'instant') {
+                // Timestamp is not indexed as it will be the same for all queries
+                return {
+                    timestamp: ts.values[0][0],
+                    [valueColumnName]: columnValue,
+                    ...labels
+                };
+            } else {
+                // Don't add a timestamp for range queries
+                return {
+                    [valueColumnName]: columnValue,
+                    ...labels
+                };
+            }
+        });
+    }, [
+        queryResults,
+        queryMode,
+        spec.columnSettings
+    ]);
+    // Transform will be applied by their orders on the original data
+    const data = useTransformData(rawData, spec.transforms ?? []);
+    const keys = useMemo(()=>{
+        const result = [];
+        for (const entry of data){
+            for (const key of Object.keys(entry)){
+                if (!result.includes(key)) {
+                    result.push(key);
+                }
+            }
+        }
+        return result;
+    }, [
+        data
+    ]);
+    const columns = useMemo(()=>{
+        const columns = [];
+        // Taking the customized columns first for the ordering of the columns in the table
+        const customizedColumns = spec.columnSettings?.map((column)=>column.name).filter((name)=>keys.includes(name)) ?? [];
+        const defaultColumns = keys.filter((key)=>!customizedColumns.includes(key));
+        for (const key of customizedColumns){
+            const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+            if (columnConfig !== undefined) {
+                columns.push(columnConfig);
+            }
+        }
+        for (const key of defaultColumns){
+            const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);
+            if (columnConfig !== undefined) {
+                columns.push(columnConfig);
+            }
+        }
+        return columns;
+    }, [
+        keys,
+        spec.columnSettings
+    ]);
+    // Generate cell settings that will be used by the table to render cells (text color, background color, ...)
+    const cellConfigs = useMemo(()=>{
+        // If there is no cell settings, return an empty array
+        if (spec.cellSettings === undefined) {
+            return {};
+        }
+        const result = {};
+        let index = 0;
+        for (const row of data){
+            // Transforming key to object to extend the row with undefined values if the key is not present
+            // for checking the cell config "Misc" condition with "null"
+            const keysAsObj = keys.reduce((acc, key)=>{
+                acc[key] = undefined;
+                return acc;
+            }, {});
+            const extendRow = {
+                ...keysAsObj,
+                ...row
+            };
+            for (const [key, value] of Object.entries(extendRow)){
+                const cellConfig = generateCellConfig(value, spec.cellSettings ?? []);
+                if (cellConfig) {
+                    result[`${index}_${key}`] = cellConfig;
+                }
+            }
+            index++;
+        }
+        return result;
+    }, [
+        data,
+        keys,
+        spec.cellSettings
+    ]);
+    function generateDefaultSortingState() {
+        return spec.columnSettings?.filter((column)=>column.sort !== undefined).map((column)=>{
+            return {
+                id: column.name,
+                desc: column.sort === 'desc'
+            };
+        }) ?? [];
+    }
+    const [sorting, setSorting] = useState(generateDefaultSortingState());
+    const [pagination, setPagination] = useState(spec.pagination ? {
+        pageIndex: 0,
+        pageSize: 10
+    } : undefined);
+    useEffect(()=>{
+        // If the pagination setting changes from no pagination to pagination, but the pagination state is undefined, update the pagination state
+        if (spec.pagination && !pagination) {
+            setPagination({
+                pageIndex: 0,
+                pageSize: 10
+            });
+        } else if (!spec.pagination && pagination) {
+            setPagination(undefined);
+        }
+    }, [
+        spec.pagination,
+        pagination
+    ]);
+    if (contentDimensions === undefined) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Table, {
+        data: data,
+        columns: columns,
+        cellConfigs: cellConfigs,
+        height: contentDimensions.height,
+        width: contentDimensions.width,
+        density: spec.density,
+        defaultColumnWidth: spec.defaultColumnWidth,
+        defaultColumnHeight: spec.defaultColumnHeight,
+        sorting: sorting,
+        onSortingChange: setSorting,
+        pagination: pagination,
+        onPaginationChange: setPagination
+    });
+}
+
+//# sourceMappingURL=TablePanel.js.map

package/lib/TablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TablePanel.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelData, PanelProps } from '@perses-dev/plugin-system';\nimport { Table, TableCellConfig, TableCellConfigs, TableColumnConfig } from '@perses-dev/components';\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { formatValue, Labels, QueryDataType, TimeSeries, TimeSeriesData, useTransformData } from '@perses-dev/core';\nimport { PaginationState, SortingState } from '@tanstack/react-table';\nimport { CellSettings, ColumnSettings, TableOptions } from './table-model';\nimport { EmbeddedPanel } from './EmbeddedPanel';\n\nfunction generateCellContentConfig(\n  column: ColumnSettings\n): Pick<TableColumnConfig<unknown>, 'cellDescription' | 'cell'> {\n  const plugin = column.plugin;\n  if (plugin !== undefined) {\n    return {\n      cell: (ctx) => {\n        const panelData: PanelData<QueryDataType> | undefined = ctx.getValue();\n        if (!panelData) return <></>;\n        return <EmbeddedPanel kind={plugin.kind} spec={plugin.spec} queryResults={[panelData]} />;\n      },\n      cellDescription: column.cellDescription ? () => `${column.cellDescription}` : () => '', // disable hover text\n    };\n  }\n\n  return {\n    cell: (ctx) => {\n      const cellValue = ctx.getValue();\n      return typeof cellValue === 'number' && column.format ? formatValue(cellValue, column.format) : cellValue;\n    },\n    cellDescription: column.cellDescription ? (): string => `${column.cellDescription}` : undefined, // TODO: variable rendering + cell value\n  };\n}\n\n/*\n * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.\n * If column is hidden, return undefined.\n * If column do not have a definition, return a default column config.\n */\nfunction generateColumnConfig(name: string, columnSettings: ColumnSettings[]): TableColumnConfig<unknown> | undefined {\n  for (const column of columnSettings) {\n    if (column.name === name) {\n      if (column.hide) {\n        return undefined;\n      }\n\n      return {\n        accessorKey: name,\n        header: column.header ?? name,\n        headerDescription: column.headerDescription,\n        enableSorting: column.enableSorting,\n        width: column.width,\n        align: column.align,\n        ...generateCellContentConfig(column),\n      };\n    }\n  }\n\n  return {\n    accessorKey: name,\n    header: name,\n  };\n}\n\nfunction generateCellConfig(value: unknown, settings: CellSettings[]): TableCellConfig | undefined {\n  for (const setting of settings) {\n    if (setting.condition.kind === 'Value' && setting.condition.spec?.value === String(value)) {\n      return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n    }\n\n    if (setting.condition.kind === 'Range' && !Number.isNaN(Number(value))) {\n      const numericValue = Number(value);\n      if (\n        setting.condition.spec?.min !== undefined &&\n        setting.condition.spec?.max !== undefined &&\n        numericValue >= +setting.condition.spec?.min &&\n        numericValue <= +setting.condition.spec?.max\n      ) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n\n      if (setting.condition.spec?.min !== undefined && numericValue >= +setting.condition.spec?.min) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n\n      if (setting.condition.spec?.max !== undefined && numericValue <= +setting.condition.spec?.max) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n    }\n\n    if (setting.condition.kind === 'Regex' && setting.condition.spec?.expr) {\n      const regex = new RegExp(setting.condition.spec?.expr);\n      if (regex.test(String(value))) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n    }\n\n    if (setting.condition.kind === 'Misc' && setting.condition.spec?.value) {\n      if (setting.condition.spec?.value === 'empty' && value === '') {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n      if (setting.condition.spec?.value === 'null' && (value === null || value === undefined)) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n      if (setting.condition.spec?.value === 'NaN' && Number.isNaN(value)) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n      if (setting.condition.spec?.value === 'true' && value === true) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n      if (setting.condition.spec?.value === 'false' && value === false) {\n        return { text: setting.text, textColor: setting.textColor, backgroundColor: setting.backgroundColor };\n      }\n    }\n  }\n  return undefined;\n}\n\nexport function getTablePanelQueryOptions(spec: TableOptions): { mode: 'instant' | 'range' } {\n  // if any cell renders a panel plugin, perform a range query instead of an instant query\n  return {\n    mode: (spec.columnSettings ?? []).some((c) => c.plugin) ? 'range' : 'instant',\n  };\n}\n\nexport type TableProps = PanelProps<TableOptions, TimeSeriesData>;\n\nexport function TablePanel({ contentDimensions, spec, queryResults }: TableProps): ReactElement | null {\n  // TODO: handle other query types\n  const queryMode = getTablePanelQueryOptions(spec).mode;\n  const rawData: Array<Record<string, unknown>> = useMemo(() => {\n    // Transform query results to a tabular format:\n    // [ { timestamp: 123, value: 456, labelName1: labelValue1 }, ... ]\n    return queryResults\n      .flatMap((data: PanelData<TimeSeriesData>, queryIndex: number) =>\n        data.data.series.map((ts: TimeSeries) => ({ data, ts, queryIndex }))\n      )\n      .map(({ data, ts, queryIndex }: { data: PanelData<TimeSeriesData>; ts: TimeSeries; queryIndex: number }) => {\n        if (ts.values[0] === undefined) {\n          return { ...ts.labels };\n        }\n\n        // If there are multiple queries, we need to add the query index to the value key and label key to avoid conflicts\n        const valueColumnName = queryResults.length === 1 ? 'value' : `value #${queryIndex + 1}`;\n        const labels =\n          queryResults.length === 1\n            ? ts.labels\n            : Object.entries(ts.labels ?? {}).reduce((acc, [key, value]) => {\n                if (key) acc[`${key} #${queryIndex + 1}`] = value;\n                return acc;\n              }, {} as Labels);\n\n        // If the cell visualization is a panel plugin, filter the data by the current series\n        const columnValue = (spec.columnSettings ?? []).find((x) => x.name === valueColumnName)?.plugin\n          ? { ...data, data: { ...data.data, series: data.data.series.filter((s) => s === ts) } }\n          : ts.values[0][1];\n\n        if (queryMode === 'instant') {\n          // Timestamp is not indexed as it will be the same for all queries\n          return { timestamp: ts.values[0][0], [valueColumnName]: columnValue, ...labels };\n        } else {\n          // Don't add a timestamp for range queries\n          return { [valueColumnName]: columnValue, ...labels };\n        }\n      });\n  }, [queryResults, queryMode, spec.columnSettings]);\n\n  // Transform will be applied by their orders on the original data\n  const data = useTransformData(rawData, spec.transforms ?? []);\n\n  const keys: string[] = useMemo(() => {\n    const result: string[] = [];\n\n    for (const entry of data) {\n      for (const key of Object.keys(entry)) {\n        if (!result.includes(key)) {\n          result.push(key);\n        }\n      }\n    }\n\n    return result;\n  }, [data]);\n\n  const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n    const columns: Array<TableColumnConfig<unknown>> = [];\n\n    // Taking the customized columns first for the ordering of the columns in the table\n    const customizedColumns =\n      spec.columnSettings?.map((column) => column.name).filter((name) => keys.includes(name)) ?? [];\n    const defaultColumns = keys.filter((key) => !customizedColumns.includes(key));\n\n    for (const key of customizedColumns) {\n      const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);\n      if (columnConfig !== undefined) {\n        columns.push(columnConfig);\n      }\n    }\n    for (const key of defaultColumns) {\n      const columnConfig = generateColumnConfig(key, spec.columnSettings ?? []);\n      if (columnConfig !== undefined) {\n        columns.push(columnConfig);\n      }\n    }\n\n    return columns;\n  }, [keys, spec.columnSettings]);\n\n  // Generate cell settings that will be used by the table to render cells (text color, background color, ...)\n  const cellConfigs: TableCellConfigs = useMemo(() => {\n    // If there is no cell settings, return an empty array\n    if (spec.cellSettings === undefined) {\n      return {};\n    }\n\n    const result: TableCellConfigs = {};\n\n    let index = 0;\n    for (const row of data) {\n      // Transforming key to object to extend the row with undefined values if the key is not present\n      // for checking the cell config \"Misc\" condition with \"null\"\n      const keysAsObj = keys.reduce(\n        (acc, key) => {\n          acc[key] = undefined;\n          return acc;\n        },\n        {} as Record<string, undefined>\n      );\n\n      const extendRow = {\n        ...keysAsObj,\n        ...row,\n      };\n\n      for (const [key, value] of Object.entries(extendRow)) {\n        const cellConfig = generateCellConfig(value, spec.cellSettings ?? []);\n        if (cellConfig) {\n          result[`${index}_${key}`] = cellConfig;\n        }\n      }\n      index++;\n    }\n\n    return result;\n  }, [data, keys, spec.cellSettings]);\n\n  function generateDefaultSortingState(): SortingState {\n    return (\n      spec.columnSettings\n        ?.filter((column) => column.sort !== undefined)\n        .map((column) => {\n          return {\n            id: column.name,\n            desc: column.sort === 'desc',\n          };\n        }) ?? []\n    );\n  }\n\n  const [sorting, setSorting] = useState<SortingState>(generateDefaultSortingState());\n\n  const [pagination, setPagination] = useState<PaginationState | undefined>(\n    spec.pagination ? { pageIndex: 0, pageSize: 10 } : undefined\n  );\n\n  useEffect(() => {\n    // If the pagination setting changes from no pagination to pagination, but the pagination state is undefined, update the pagination state\n    if (spec.pagination && !pagination) {\n      setPagination({ pageIndex: 0, pageSize: 10 });\n    } else if (!spec.pagination && pagination) {\n      setPagination(undefined);\n    }\n  }, [spec.pagination, pagination]);\n\n  if (contentDimensions === undefined) {\n    return null;\n  }\n\n  return (\n    <Table\n      data={data}\n      columns={columns}\n      cellConfigs={cellConfigs}\n      height={contentDimensions.height}\n      width={contentDimensions.width}\n      density={spec.density}\n      defaultColumnWidth={spec.defaultColumnWidth}\n      defaultColumnHeight={spec.defaultColumnHeight}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      pagination={pagination}\n      onPaginationChange={setPagination}\n    />\n  );\n}\n"],"names":["Table","useEffect","useMemo","useState","formatValue","useTransformData","EmbeddedPanel","generateCellContentConfig","column","plugin","undefined","cell","ctx","panelData","getValue","kind","spec","queryResults","cellDescription","cellValue","format","generateColumnConfig","name","columnSettings","hide","accessorKey","header","headerDescription","enableSorting","width","align","generateCellConfig","value","settings","setting","condition","String","text","textColor","backgroundColor","Number","isNaN","numericValue","min","max","expr","regex","RegExp","test","getTablePanelQueryOptions","mode","some","c","TablePanel","contentDimensions","queryMode","rawData","flatMap","data","queryIndex","series","map","ts","values","labels","valueColumnName","length","Object","entries","reduce","acc","key","columnValue","find","x","filter","s","timestamp","transforms","keys","result","entry","includes","push","columns","customizedColumns","defaultColumns","columnConfig","cellConfigs","cellSettings","index","row","keysAsObj","extendRow","cellConfig","generateDefaultSortingState","sort","id","desc","sorting","setSorting","pagination","setPagination","pageIndex","pageSize","height","density","defaultColumnWidth","defaultColumnHeight","onSortingChange","onPaginationChange"],"mappings":"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"}

package/lib/TableSettingsEditor.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TableSettingsEditorProps } from './table-model';
+export declare function TableSettingsEditor({ onChange, value }: TableSettingsEditorProps): ReactElement;
+//# sourceMappingURL=TableSettingsEditor.d.ts.map

package/lib/TableSettingsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSettingsEditor.d.ts","sourceRoot":"","sources":["../../src/TableSettingsEditor.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AA6CzD,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,wBAAwB,GAAG,YAAY,CA0C/F"}