@perses-dev/clickhouse-plugin 0.1.0

package/lib/model/click-house-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/model/click-house-client.ts"],"sourcesContent":["// Copyright 2025 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 { RequestHeaders } from '@perses-dev/core';\n\nexport interface ClickHouseQueryParams {\n  query: string;\n  database?: string;\n}\n\nexport interface ClickHouseQueryOptions {\n  datasourceUrl: string;\n  headers?: RequestHeaders;\n}\n\nexport interface ClickHouseQueryResponse {\n  status: 'success' | 'error';\n  data: any;\n}\n\nexport interface ClickHouseClient {\n  query: (params: { start: string; end: string; query: string }) => Promise<ClickHouseQueryResponse>;\n}\n\nexport async function query(\n  params: ClickHouseQueryParams,\n  queryOptions: ClickHouseQueryOptions\n): Promise<ClickHouseQueryResponse> {\n  const { datasourceUrl, headers } = queryOptions;\n\n  const url = urlBuilder(datasourceUrl);\n  if (!params.query) {\n    throw new Error('No query provided in params');\n  }\n\n  let finalQuery = params.query.trim();\n  if (!finalQuery.toUpperCase().includes('FORMAT')) {\n    finalQuery += ' FORMAT JSON';\n  }\n\n  url.searchParams.set('query', finalQuery);\n  url.searchParams.set('database', params.database || 'default');\n\n  const init = {\n    method: 'GET',\n    headers: {\n      ...headers,\n    },\n  };\n\n  try {\n    const response = await fetch(url.toString(), init);\n\n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error('ClickHouse error response:', errorText);\n      return {\n        status: 'error',\n        data: [],\n      };\n    }\n\n    const body = await response.json();\n\n    return {\n      status: 'success',\n      data: body.data || body,\n    };\n  } catch (e) {\n    throw new Error(`ClickHouse query failed: ${e}`);\n  }\n}\n\nfunction urlBuilder(datasourceUrl: string): URL {\n  if (datasourceUrl.startsWith('http://') || datasourceUrl.startsWith('https://')) {\n    return new URL(datasourceUrl);\n  }\n  // if relative path (e.g. proxy url), resolve against window.location.origin\n  return new URL(datasourceUrl, window.location.origin);\n}\n"],"names":["query","params","queryOptions","datasourceUrl","headers","url","urlBuilder","Error","finalQuery","trim","toUpperCase","includes","searchParams","set","database","init","method","response","fetch","toString","ok","errorText","text","console","error","status","data","body","json","e","startsWith","URL","window","location","origin"],"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;AAuBjC,OAAO,eAAeA,MACpBC,MAA6B,EAC7BC,YAAoC;IAEpC,MAAM,EAAEC,aAAa,EAAEC,OAAO,EAAE,GAAGF;IAEnC,MAAMG,MAAMC,WAAWH;IACvB,IAAI,CAACF,OAAOD,KAAK,EAAE;QACjB,MAAM,IAAIO,MAAM;IAClB;IAEA,IAAIC,aAAaP,OAAOD,KAAK,CAACS,IAAI;IAClC,IAAI,CAACD,WAAWE,WAAW,GAAGC,QAAQ,CAAC,WAAW;QAChDH,cAAc;IAChB;IAEAH,IAAIO,YAAY,CAACC,GAAG,CAAC,SAASL;IAC9BH,IAAIO,YAAY,CAACC,GAAG,CAAC,YAAYZ,OAAOa,QAAQ,IAAI;IAEpD,MAAMC,OAAO;QACXC,QAAQ;QACRZ,SAAS;YACP,GAAGA,OAAO;QACZ;IACF;IAEA,IAAI;QACF,MAAMa,WAAW,MAAMC,MAAMb,IAAIc,QAAQ,IAAIJ;QAE7C,IAAI,CAACE,SAASG,EAAE,EAAE;YAChB,MAAMC,YAAY,MAAMJ,SAASK,IAAI;YACrCC,QAAQC,KAAK,CAAC,8BAA8BH;YAC5C,OAAO;gBACLI,QAAQ;gBACRC,MAAM,EAAE;YACV;QACF;QAEA,MAAMC,OAAO,MAAMV,SAASW,IAAI;QAEhC,OAAO;YACLH,QAAQ;YACRC,MAAMC,KAAKD,IAAI,IAAIC;QACrB;IACF,EAAE,OAAOE,GAAG;QACV,MAAM,IAAItB,MAAM,CAAC,yBAAyB,EAAEsB,GAAG;IACjD;AACF;AAEA,SAASvB,WAAWH,aAAqB;IACvC,IAAIA,cAAc2B,UAAU,CAAC,cAAc3B,cAAc2B,UAAU,CAAC,aAAa;QAC/E,OAAO,IAAIC,IAAI5B;IACjB;IACA,4EAA4E;IAC5E,OAAO,IAAI4B,IAAI5B,eAAe6B,OAAOC,QAAQ,CAACC,MAAM;AACtD"}

package/lib/model/click-house-data-types.d.ts

@@ -0,0 +1,22 @@
+import { TimeSeriesData } from '@perses-dev/core';
+export interface LogLabels {
+    [key: string]: any;
+}
+export interface LogEntry {
+    timestamp: number;
+    labels: LogLabels;
+    line?: string;
+}
+export interface LogsData {
+    entries: LogEntry[];
+    totalCount: number;
+    hasMore?: boolean;
+}
+export interface ClickHouseTimeSeriesData extends TimeSeriesData {
+    logs?: LogsData;
+}
+export interface TimeSeriesEntry {
+    time: string;
+    log_count: number | string;
+}
+//# sourceMappingURL=click-house-data-types.d.ts.map

package/lib/model/click-house-data-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-house-data-types.d.ts","sourceRoot":"","sources":["../../../src/model/click-house-data-types.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B"}

package/lib/model/click-house-data-types.js

@@ -0,0 +1,15 @@
+// Copyright 2025 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.
+export { };
+
+//# sourceMappingURL=click-house-data-types.js.map

package/lib/model/click-house-data-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/model/click-house-data-types.ts"],"sourcesContent":["// Copyright 2025 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 { TimeSeriesData } from '@perses-dev/core';\n\nexport interface LogLabels {\n  [key: string]: any;\n}\n\nexport interface LogEntry {\n  timestamp: number;\n  labels: LogLabels;\n  line?: string;\n}\n\nexport interface LogsData {\n  entries: LogEntry[];\n  totalCount: number;\n  hasMore?: boolean;\n}\n\nexport interface ClickHouseTimeSeriesData extends TimeSeriesData {\n  logs?: LogsData;\n}\n\nexport interface TimeSeriesEntry {\n  time: string;\n  log_count: number | string;\n}\n"],"names":[],"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;AAwBjC,WAGC"}

package/lib/panels/index.d.ts

@@ -0,0 +1,2 @@
+export * from './logs';
+//# sourceMappingURL=index.d.ts.map

package/lib/panels/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/index.ts"],"names":[],"mappings":"AAaA,cAAc,QAAQ,CAAC"}

package/lib/panels/index.js

@@ -0,0 +1,15 @@
+// Copyright 2025 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.
+export * from './logs';
+
+//# sourceMappingURL=index.js.map

package/lib/panels/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/panels/index.ts"],"sourcesContent":["// Copyright 2025 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\nexport * from './logs';\n"],"names":[],"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;AAEjC,cAAc,SAAS"}

package/lib/panels/logs/Logs.d.ts

@@ -0,0 +1,4 @@
+import { LogsOptions, LogsProps } from './logs-types';
+import { PanelPlugin } from '@perses-dev/plugin-system';
+export declare const Logs: PanelPlugin<LogsOptions, LogsProps>;
+//# sourceMappingURL=Logs.d.ts.map

package/lib/panels/logs/Logs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logs.d.ts","sourceRoot":"","sources":["../../../../src/panels/logs/Logs.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,eAAO,MAAM,IAAI,EAAE,WAAW,CAAC,WAAW,EAAE,SAAS,CAKpD,CAAC"}

package/lib/panels/logs/Logs.js

@@ -0,0 +1,29 @@
+// Copyright 2025 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 { LogsComponent } from './LogsComponent';
+import { LogsSettingsEditor } from './LogsSettingsEditor';
+export const Logs = {
+    PanelComponent: LogsComponent,
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: LogsSettingsEditor
+        }
+    ],
+    supportedQueryTypes: [
+        'LogQuery'
+    ],
+    createInitialOptions: ()=>({})
+};
+
+//# sourceMappingURL=Logs.js.map

package/lib/panels/logs/Logs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/panels/logs/Logs.tsx"],"sourcesContent":["// Copyright 2025 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 { LogsComponent } from './LogsComponent';\nimport { LogsOptions, LogsProps } from './logs-types';\nimport { PanelPlugin } from '@perses-dev/plugin-system';\nimport { LogsSettingsEditor } from './LogsSettingsEditor';\n\nexport const Logs: PanelPlugin<LogsOptions, LogsProps> = {\n  PanelComponent: LogsComponent,\n  panelOptionsEditorComponents: [{ label: 'Settings', content: LogsSettingsEditor }],\n  supportedQueryTypes: ['LogQuery'],\n  createInitialOptions: () => ({}),\n};\n"],"names":["LogsComponent","LogsSettingsEditor","Logs","PanelComponent","panelOptionsEditorComponents","label","content","supportedQueryTypes","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;AAEjC,SAASA,aAAa,QAAQ,kBAAkB;AAGhD,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,OAAO,MAAMC,OAA4C;IACvDC,gBAAgBH;IAChBI,8BAA8B;QAAC;YAAEC,OAAO;YAAYC,SAASL;QAAmB;KAAE;IAClFM,qBAAqB;QAAC;KAAW;IACjCC,sBAAsB,IAAO,CAAA,CAAC,CAAA;AAChC,EAAE"}

package/lib/panels/logs/LogsComponent.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { LogsProps } from './logs-types';
+export declare function LogsComponent(props: LogsProps): ReactElement | null;
+//# sourceMappingURL=LogsComponent.d.ts.map

package/lib/panels/logs/LogsComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsComponent.d.ts","sourceRoot":"","sources":["../../../../src/panels/logs/LogsComponent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,GAAG,IAAI,CAmBnE"}

package/lib/panels/logs/LogsComponent.js

@@ -0,0 +1,34 @@
+// Copyright 2025 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 { Typography } from '@mui/material';
+import LogsList from './components/LogsList';
+export function LogsComponent(props) {
+    const { queryResults, spec } = props;
+    if (queryResults[0]?.data.logs === undefined) {
+        return /*#__PURE__*/ _jsx(Typography, {
+            variant: "h3",
+            sx: {
+                textAlign: 'center',
+                marginTop: 4
+            },
+            children: "No logs to display"
+        });
+    }
+    const logs = queryResults[0]?.data.logs.entries;
+    return /*#__PURE__*/ _jsx(LogsList, {
+        logs: logs
+    });
+}
+
+//# sourceMappingURL=LogsComponent.js.map

package/lib/panels/logs/LogsComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/panels/logs/LogsComponent.tsx"],"sourcesContent":["// Copyright 2025 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 { ReactElement } from 'react';\nimport { LogsProps } from './logs-types';\nimport { Typography } from '@mui/material';\nimport LogsList from './components/LogsList';\n\nexport function LogsComponent(props: LogsProps): ReactElement | null {\n  const { queryResults, spec } = props;\n\n  if (queryResults[0]?.data.logs === undefined) {\n    return (\n      <Typography\n        variant=\"h3\"\n        sx={{\n          textAlign: 'center',\n          marginTop: 4,\n        }}\n      >\n        No logs to display\n      </Typography>\n    );\n  }\n  const logs = queryResults[0]?.data.logs.entries;\n\n  return <LogsList logs={logs} />;\n}\n"],"names":["Typography","LogsList","LogsComponent","props","queryResults","spec","data","logs","undefined","variant","sx","textAlign","marginTop","entries"],"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,UAAU,QAAQ,gBAAgB;AAC3C,OAAOC,cAAc,wBAAwB;AAE7C,OAAO,SAASC,cAAcC,KAAgB;IAC5C,MAAM,EAAEC,YAAY,EAAEC,IAAI,EAAE,GAAGF;IAE/B,IAAIC,YAAY,CAAC,EAAE,EAAEE,KAAKC,SAASC,WAAW;QAC5C,qBACE,KAACR;YACCS,SAAQ;YACRC,IAAI;gBACFC,WAAW;gBACXC,WAAW;YACb;sBACD;;IAIL;IACA,MAAML,OAAOH,YAAY,CAAC,EAAE,EAAEE,KAAKC,KAAKM;IAExC,qBAAO,KAACZ;QAASM,MAAMA;;AACzB"}

package/lib/panels/logs/LogsSettingsEditor.d.ts

@@ -0,0 +1,7 @@
+import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { LogsOptions } from './logs-types';
+type LogsSettingsEditorProps = OptionsEditorProps<LogsOptions>;
+export declare function LogsSettingsEditor(props: LogsSettingsEditorProps): ReactElement;
+export {};
+//# sourceMappingURL=LogsSettingsEditor.d.ts.map

package/lib/panels/logs/LogsSettingsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsSettingsEditor.d.ts","sourceRoot":"","sources":["../../../../src/panels/logs/LogsSettingsEditor.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAiD,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC9G,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,KAAK,uBAAuB,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;AAE/D,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CAqB/E"}

package/lib/panels/logs/LogsSettingsEditor.js

@@ -0,0 +1,49 @@
+// Copyright 2025 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { OptionsEditorGrid, OptionsEditorColumn, ThresholdsEditor } from '@perses-dev/components';
+import { LegendOptionsEditor } from '@perses-dev/plugin-system';
+export function LogsSettingsEditor(props) {
+    const { onChange, value } = props;
+    const handleLegendChange = (newLegend)=>{
+        onChange({
+            ...value,
+            legend: newLegend
+        });
+    };
+    const handleThresholdsChange = (thresholds)=>{
+        onChange({
+            ...value,
+            thresholds
+        });
+    };
+    return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsx(LegendOptionsEditor, {
+                    value: value.legend,
+                    onChange: handleLegendChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsx(ThresholdsEditor, {
+                    hideDefault: true,
+                    thresholds: value.thresholds,
+                    onChange: handleThresholdsChange
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=LogsSettingsEditor.js.map

package/lib/panels/logs/LogsSettingsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/panels/logs/LogsSettingsEditor.tsx"],"sourcesContent":["// Copyright 2025 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 {\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  ThresholdsEditor,\n  ThresholdsEditorProps,\n} from '@perses-dev/components';\nimport { LegendOptionsEditor, LegendOptionsEditorProps, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { LogsOptions } from './logs-types';\n\ntype LogsSettingsEditorProps = OptionsEditorProps<LogsOptions>;\n\nexport function LogsSettingsEditor(props: LogsSettingsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleLegendChange: LegendOptionsEditorProps['onChange'] = (newLegend) => {\n    onChange({ ...value, legend: newLegend });\n  };\n\n  const handleThresholdsChange: ThresholdsEditorProps['onChange'] = (thresholds) => {\n    onChange({ ...value, thresholds });\n  };\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <LegendOptionsEditor value={value.legend} onChange={handleLegendChange} />\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <ThresholdsEditor hideDefault thresholds={value.thresholds} onChange={handleThresholdsChange} />\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["OptionsEditorGrid","OptionsEditorColumn","ThresholdsEditor","LegendOptionsEditor","LogsSettingsEditor","props","onChange","value","handleLegendChange","newLegend","legend","handleThresholdsChange","thresholds","hideDefault"],"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;;AAEjC,SACEA,iBAAiB,EACjBC,mBAAmB,EACnBC,gBAAgB,QAEX,yBAAyB;AAChC,SAASC,mBAAmB,QAAsD,4BAA4B;AAM9G,OAAO,SAASC,mBAAmBC,KAA8B;IAC/D,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,qBAA2D,CAACC;QAChEH,SAAS;YAAE,GAAGC,KAAK;YAAEG,QAAQD;QAAU;IACzC;IAEA,MAAME,yBAA4D,CAACC;QACjEN,SAAS;YAAE,GAAGC,KAAK;YAAEK;QAAW;IAClC;IAEA,qBACE,MAACZ;;0BACC,KAACC;0BACC,cAAA,KAACE;oBAAoBI,OAAOA,MAAMG,MAAM;oBAAEJ,UAAUE;;;0BAEtD,KAACP;0BACC,cAAA,KAACC;oBAAiBW,WAAW;oBAACD,YAAYL,MAAMK,UAAU;oBAAEN,UAAUK;;;;;AAI9E"}

package/lib/panels/logs/components/EmptyLogsState.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EmptyLogsStateProps {
+    message?: string;
+}
+export declare const EmptyLogsState: React.FC<EmptyLogsStateProps>;
+export {};
+//# sourceMappingURL=EmptyLogsState.d.ts.map

package/lib/panels/logs/components/EmptyLogsState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyLogsState.d.ts","sourceRoot":"","sources":["../../../../../src/panels/logs/components/EmptyLogsState.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuBxD,CAAC"}

package/lib/panels/logs/components/EmptyLogsState.js

@@ -0,0 +1,36 @@
+// Copyright 2025 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 React from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+export const EmptyLogsState = ({ message = 'No logs to display' })=>{
+    const theme = useTheme();
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '200px'
+        },
+        children: /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            sx: {
+                color: theme.palette.text.secondary,
+                fontSize: '14px'
+            },
+            children: message
+        })
+    });
+};
+
+//# sourceMappingURL=EmptyLogsState.js.map

package/lib/panels/logs/components/EmptyLogsState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/panels/logs/components/EmptyLogsState.tsx"],"sourcesContent":["// Copyright 2025 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 React from 'react';\nimport { Box, Typography, useTheme } from '@mui/material';\n\ninterface EmptyLogsStateProps {\n  message?: string;\n}\n\nexport const EmptyLogsState: React.FC<EmptyLogsStateProps> = ({ message = 'No logs to display' }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '200px',\n      }}\n    >\n      <Typography\n        variant=\"body2\"\n        sx={{\n          color: theme.palette.text.secondary,\n          fontSize: '14px',\n        }}\n      >\n        {message}\n      </Typography>\n    </Box>\n  );\n};\n"],"names":["React","Box","Typography","useTheme","EmptyLogsState","message","theme","sx","display","alignItems","justifyContent","height","variant","color","palette","text","secondary","fontSize"],"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;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,GAAG,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,gBAAgB;AAM1D,OAAO,MAAMC,iBAAgD,CAAC,EAAEC,UAAU,oBAAoB,EAAE;IAC9F,MAAMC,QAAQH;IAEd,qBACE,KAACF;QACCM,IAAI;YACFC,SAAS;YACTC,YAAY;YACZC,gBAAgB;YAChBC,QAAQ;QACV;kBAEA,cAAA,KAACT;YACCU,SAAQ;YACRL,IAAI;gBACFM,OAAOP,MAAMQ,OAAO,CAACC,IAAI,CAACC,SAAS;gBACnCC,UAAU;YACZ;sBAECZ;;;AAIT,EAAE"}

package/lib/panels/logs/components/LogRow/LogDetailsTable.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LogLabels } from '../../../../model/click-house-data-types';
+interface LogDetailsTableProps {
+    log: LogLabels;
+}
+export declare const LogDetailsTable: React.FC<LogDetailsTableProps>;
+export {};
+//# sourceMappingURL=LogDetailsTable.d.ts.map

package/lib/panels/logs/components/LogRow/LogDetailsTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogDetailsTable.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/logs/components/LogRow/LogDetailsTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAErE,UAAU,oBAAoB;IAC5B,GAAG,EAAE,SAAS,CAAC;CAChB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgD1D,CAAC"}

package/lib/panels/logs/components/LogRow/LogDetailsTable.js

@@ -0,0 +1,58 @@
+// Copyright 2025 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, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Table, TableBody, TableRow, TableCell, useTheme, alpha } from '@mui/material';
+export const LogDetailsTable = ({ log })=>{
+    const theme = useTheme();
+    return /*#__PURE__*/ _jsx(Table, {
+        size: "small",
+        sx: {
+            border: `1px solid ${theme.palette.divider}`,
+            '& .MuiTableCell-root': {
+                border: 'none',
+                padding: '6px 8px',
+                fontSize: '12px'
+            }
+        },
+        children: /*#__PURE__*/ _jsx(TableBody, {
+            children: Object.entries(log).map(([key, value])=>/*#__PURE__*/ _jsxs(TableRow, {
+                    sx: {
+                        '&:hover': {
+                            backgroundColor: alpha(theme.palette.action.hover, 0.04)
+                        }
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(TableCell, {
+                            sx: {
+                                color: theme.palette.text.secondary,
+                                fontWeight: 500,
+                                width: '33%'
+                            },
+                            children: key
+                        }),
+                        /*#__PURE__*/ _jsx(TableCell, {
+                            sx: {
+                                color: theme.palette.text.primary,
+                                wordBreak: 'break-word',
+                                width: '67%'
+                            },
+                            children: value !== undefined && value !== null && value !== '' ? value : '--'
+                        })
+                    ]
+                }, key))
+        })
+    });
+};
+
+//# sourceMappingURL=LogDetailsTable.js.map

package/lib/panels/logs/components/LogRow/LogDetailsTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/panels/logs/components/LogRow/LogDetailsTable.tsx"],"sourcesContent":["// Copyright 2025 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 React from 'react';\nimport { Table, TableBody, TableRow, TableCell, useTheme, alpha } from '@mui/material';\nimport { LogLabels } from '../../../../model/click-house-data-types';\n\ninterface LogDetailsTableProps {\n  log: LogLabels;\n}\n\nexport const LogDetailsTable: React.FC<LogDetailsTableProps> = ({ log }) => {\n  const theme = useTheme();\n\n  return (\n    <Table\n      size=\"small\"\n      sx={{\n        border: `1px solid ${theme.palette.divider}`,\n        '& .MuiTableCell-root': {\n          border: 'none',\n          padding: '6px 8px',\n          fontSize: '12px',\n        },\n      }}\n    >\n      <TableBody>\n        {Object.entries(log).map(([key, value]) => (\n          <TableRow\n            key={key}\n            sx={{\n              '&:hover': {\n                backgroundColor: alpha(theme.palette.action.hover, 0.04),\n              },\n            }}\n          >\n            <TableCell\n              sx={{\n                color: theme.palette.text.secondary,\n                fontWeight: 500,\n                width: '33%',\n              }}\n            >\n              {key}\n            </TableCell>\n            <TableCell\n              sx={{\n                color: theme.palette.text.primary,\n                wordBreak: 'break-word',\n                width: '67%',\n              }}\n            >\n              {value !== undefined && value !== null && value !== '' ? value : '--'}\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n};\n"],"names":["React","Table","TableBody","TableRow","TableCell","useTheme","alpha","LogDetailsTable","log","theme","size","sx","border","palette","divider","padding","fontSize","Object","entries","map","key","value","backgroundColor","action","hover","color","text","secondary","fontWeight","width","primary","wordBreak","undefined"],"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;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,QAAQ,gBAAgB;AAOvF,OAAO,MAAMC,kBAAkD,CAAC,EAAEC,GAAG,EAAE;IACrE,MAAMC,QAAQJ;IAEd,qBACE,KAACJ;QACCS,MAAK;QACLC,IAAI;YACFC,QAAQ,CAAC,UAAU,EAAEH,MAAMI,OAAO,CAACC,OAAO,EAAE;YAC5C,wBAAwB;gBACtBF,QAAQ;gBACRG,SAAS;gBACTC,UAAU;YACZ;QACF;kBAEA,cAAA,KAACd;sBACEe,OAAOC,OAAO,CAACV,KAAKW,GAAG,CAAC,CAAC,CAACC,KAAKC,MAAM,iBACpC,MAAClB;oBAECQ,IAAI;wBACF,WAAW;4BACTW,iBAAiBhB,MAAMG,MAAMI,OAAO,CAACU,MAAM,CAACC,KAAK,EAAE;wBACrD;oBACF;;sCAEA,KAACpB;4BACCO,IAAI;gCACFc,OAAOhB,MAAMI,OAAO,CAACa,IAAI,CAACC,SAAS;gCACnCC,YAAY;gCACZC,OAAO;4BACT;sCAECT;;sCAEH,KAAChB;4BACCO,IAAI;gCACFc,OAAOhB,MAAMI,OAAO,CAACa,IAAI,CAACI,OAAO;gCACjCC,WAAW;gCACXF,OAAO;4BACT;sCAECR,UAAUW,aAAaX,UAAU,QAAQA,UAAU,KAAKA,QAAQ;;;mBAvB9DD;;;AA8BjB,EAAE"}

package/lib/panels/logs/components/LogRow/LogRow.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LogEntry } from '../../../../model/click-house-data-types';
+interface LogRowProps {
+    log?: LogEntry;
+    index: number;
+    isExpanded: boolean;
+    onToggle: (index: number) => void;
+    isExpandable?: boolean;
+    time?: boolean;
+    wrap?: boolean;
+}
+export declare const LogRow: React.FC<LogRowProps>;
+export {};
+//# sourceMappingURL=LogRow.d.ts.map

package/lib/panels/logs/components/LogRow/LogRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogRow.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/logs/components/LogRow/LogRow.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAEpE,UAAU,WAAW;IACnB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsExC,CAAC"}

package/lib/panels/logs/components/LogRow/LogRow.js

@@ -0,0 +1,109 @@
+// Copyright 2025 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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { memo, useCallback } from 'react';
+import { Box, Collapse, useTheme } from '@mui/material';
+import ChevronRight from 'mdi-material-ui/ChevronRight';
+import { LogTimestamp } from './LogTimestamp';
+import { LogRowContainer, LogRowContent, ExpandButton, LogText } from './LogsStyles';
+import { LogDetailsTable } from './LogDetailsTable';
+export const LogRow = /*#__PURE__*/ memo(({ log, isExpanded, index, onToggle, isExpandable = true, time = false, wrap = false })=>{
+    const theme = useTheme();
+    const severityColor = theme.palette.text.secondary;
+    const handleToggle = useCallback(()=>{
+        if (isExpandable) {
+            onToggle(index);
+        }
+    }, [
+        isExpandable,
+        onToggle,
+        index
+    ]);
+    if (!log) return null;
+    return /*#__PURE__*/ _jsxs(LogRowContainer, {
+        severityColor: severityColor,
+        children: [
+            /*#__PURE__*/ _jsxs(LogRowContent, {
+                onClick: handleToggle,
+                isExpandable: isExpandable,
+                time: time,
+                children: [
+                    isExpandable && /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            width: '16px',
+                            justifyContent: 'center'
+                        },
+                        children: /*#__PURE__*/ _jsx(ExpandButton, {
+                            size: "small",
+                            isExpanded: isExpanded,
+                            children: /*#__PURE__*/ _jsx(ChevronRight, {
+                                sx: {
+                                    fontSize: '12px'
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(LogTimestamp, {
+                        timestamp: log?.timestamp
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            display: 'flex',
+                            gap: '10px',
+                            marginLeft: '36px'
+                        },
+                        children: /*#__PURE__*/ _jsx(LogText, {
+                            variant: "body2",
+                            wrap: wrap,
+                            children: log?.line
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Collapse, {
+                in: isExpanded,
+                timeout: 200,
+                children: /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        padding: '8px'
+                    },
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'grid',
+                            gridTemplateColumns: !time ? '1fr' : '8px minmax(160px, max-content) 1fr',
+                            gap: '12px'
+                        },
+                        children: [
+                            time && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {}),
+                                    /*#__PURE__*/ _jsx(Box, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                children: /*#__PURE__*/ _jsx(LogDetailsTable, {
+                                    log: log.labels
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+});
+LogRow.displayName = 'LogRow';
+
+//# sourceMappingURL=LogRow.js.map

package/lib/panels/logs/components/LogRow/LogRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/panels/logs/components/LogRow/LogRow.tsx"],"sourcesContent":["// Copyright 2025 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 React, { memo, useCallback } from 'react';\nimport { Box, Collapse, useTheme } from '@mui/material';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { LogTimestamp } from './LogTimestamp';\nimport { LogRowContainer, LogRowContent, ExpandButton, LogText } from './LogsStyles';\nimport { LogDetailsTable } from './LogDetailsTable';\nimport { LogEntry } from '../../../../model/click-house-data-types';\n\ninterface LogRowProps {\n  log?: LogEntry;\n  index: number;\n  isExpanded: boolean;\n  onToggle: (index: number) => void;\n  isExpandable?: boolean;\n  time?: boolean;\n  wrap?: boolean;\n}\n\nexport const LogRow: React.FC<LogRowProps> = memo(\n  ({ log, isExpanded, index, onToggle, isExpandable = true, time = false, wrap = false }) => {\n    const theme = useTheme();\n    const severityColor = theme.palette.text.secondary;\n\n    const handleToggle = useCallback(() => {\n      if (isExpandable) {\n        onToggle(index);\n      }\n    }, [isExpandable, onToggle, index]);\n\n    if (!log) return null;\n\n    return (\n      <LogRowContainer severityColor={severityColor}>\n        <LogRowContent onClick={handleToggle} isExpandable={isExpandable} time={time}>\n          {isExpandable && (\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                width: '16px',\n                justifyContent: 'center',\n              }}\n            >\n              <ExpandButton size=\"small\" isExpanded={isExpanded}>\n                <ChevronRight sx={{ fontSize: '12px' }} />\n              </ExpandButton>\n            </Box>\n          )}\n\n          <LogTimestamp timestamp={log?.timestamp} />\n\n          <Box\n            sx={{\n              display: 'flex',\n              gap: '10px',\n              marginLeft: '36px',\n            }}\n          >\n            <LogText variant=\"body2\" wrap={wrap}>\n              {log?.line}\n            </LogText>\n          </Box>\n        </LogRowContent>\n\n        <Collapse in={isExpanded} timeout={200}>\n          <Box sx={{ padding: '8px' }}>\n            <Box\n              sx={{\n                display: 'grid',\n                gridTemplateColumns: !time ? '1fr' : '8px minmax(160px, max-content) 1fr',\n                gap: '12px',\n              }}\n            >\n              {time && (\n                <>\n                  <Box />\n                  <Box />\n                </>\n              )}\n              <Box>\n                <LogDetailsTable log={log.labels} />\n              </Box>\n            </Box>\n          </Box>\n        </Collapse>\n      </LogRowContainer>\n    );\n  }\n);\n\nLogRow.displayName = 'LogRow';\n"],"names":["React","memo","useCallback","Box","Collapse","useTheme","ChevronRight","LogTimestamp","LogRowContainer","LogRowContent","ExpandButton","LogText","LogDetailsTable","LogRow","log","isExpanded","index","onToggle","isExpandable","time","wrap","theme","severityColor","palette","text","secondary","handleToggle","onClick","sx","display","alignItems","width","justifyContent","size","fontSize","timestamp","gap","marginLeft","variant","line","in","timeout","padding","gridTemplateColumns","labels","displayName"],"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;;AAEjC,OAAOA,SAASC,IAAI,EAAEC,WAAW,QAAQ,QAAQ;AACjD,SAASC,GAAG,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,gBAAgB;AACxD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,eAAe,EAAEC,aAAa,EAAEC,YAAY,EAAEC,OAAO,QAAQ,eAAe;AACrF,SAASC,eAAe,QAAQ,oBAAoB;AAapD,OAAO,MAAMC,uBAAgCZ,KAC3C,CAAC,EAAEa,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,eAAe,IAAI,EAAEC,OAAO,KAAK,EAAEC,OAAO,KAAK,EAAE;IACpF,MAAMC,QAAQhB;IACd,MAAMiB,gBAAgBD,MAAME,OAAO,CAACC,IAAI,CAACC,SAAS;IAElD,MAAMC,eAAexB,YAAY;QAC/B,IAAIgB,cAAc;YAChBD,SAASD;QACX;IACF,GAAG;QAACE;QAAcD;QAAUD;KAAM;IAElC,IAAI,CAACF,KAAK,OAAO;IAEjB,qBACE,MAACN;QAAgBc,eAAeA;;0BAC9B,MAACb;gBAAckB,SAASD;gBAAcR,cAAcA;gBAAcC,MAAMA;;oBACrED,8BACC,KAACf;wBACCyB,IAAI;4BACFC,SAAS;4BACTC,YAAY;4BACZC,OAAO;4BACPC,gBAAgB;wBAClB;kCAEA,cAAA,KAACtB;4BAAauB,MAAK;4BAAQlB,YAAYA;sCACrC,cAAA,KAACT;gCAAasB,IAAI;oCAAEM,UAAU;gCAAO;;;;kCAK3C,KAAC3B;wBAAa4B,WAAWrB,KAAKqB;;kCAE9B,KAAChC;wBACCyB,IAAI;4BACFC,SAAS;4BACTO,KAAK;4BACLC,YAAY;wBACd;kCAEA,cAAA,KAAC1B;4BAAQ2B,SAAQ;4BAAQlB,MAAMA;sCAC5BN,KAAKyB;;;;;0BAKZ,KAACnC;gBAASoC,IAAIzB;gBAAY0B,SAAS;0BACjC,cAAA,KAACtC;oBAAIyB,IAAI;wBAAEc,SAAS;oBAAM;8BACxB,cAAA,MAACvC;wBACCyB,IAAI;4BACFC,SAAS;4BACTc,qBAAqB,CAACxB,OAAO,QAAQ;4BACrCiB,KAAK;wBACP;;4BAECjB,sBACC;;kDACE,KAAChB;kDACD,KAACA;;;0CAGL,KAACA;0CACC,cAAA,KAACS;oCAAgBE,KAAKA,IAAI8B,MAAM;;;;;;;;;AAO9C,GACA;AAEF/B,OAAOgC,WAAW,GAAG"}

package/lib/panels/logs/components/LogRow/LogTimestamp.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LogTimestampProps {
+    timestamp: number;
+}
+export declare const LogTimestamp: React.FC<LogTimestampProps>;
+export {};
+//# sourceMappingURL=LogTimestamp.d.ts.map

package/lib/panels/logs/components/LogRow/LogTimestamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogTimestamp.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/logs/components/LogRow/LogTimestamp.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkBpD,CAAC"}

package/lib/panels/logs/components/LogRow/LogTimestamp.js

@@ -0,0 +1,32 @@
+// Copyright 2025 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 React from 'react';
+import { Typography, useTheme } from '@mui/material';
+export const LogTimestamp = ({ timestamp })=>{
+    const theme = useTheme();
+    const isDarkMode = theme.palette.mode === 'dark';
+    return /*#__PURE__*/ _jsx(Typography, {
+        variant: "caption",
+        sx: {
+            color: isDarkMode ? '#000000' : theme.palette.text.secondary,
+            fontSize: '12px',
+            whiteSpace: 'nowrap',
+            minWidth: 'max-content',
+            backgroundColor: '#FFF3E0'
+        },
+        children: timestamp
+    });
+};
+
+//# sourceMappingURL=LogTimestamp.js.map

package/lib/panels/logs/components/LogRow/LogTimestamp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/panels/logs/components/LogRow/LogTimestamp.tsx"],"sourcesContent":["// Copyright 2025 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 React from 'react';\nimport { Typography, useTheme } from '@mui/material';\n\ninterface LogTimestampProps {\n  timestamp: number;\n}\n\nexport const LogTimestamp: React.FC<LogTimestampProps> = ({ timestamp }) => {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  return (\n    <Typography\n      variant=\"caption\"\n      sx={{\n        color: isDarkMode ? '#000000' : theme.palette.text.secondary,\n        fontSize: '12px',\n        whiteSpace: 'nowrap',\n        minWidth: 'max-content',\n        backgroundColor: '#FFF3E0',\n      }}\n    >\n      {timestamp}\n    </Typography>\n  );\n};\n"],"names":["React","Typography","useTheme","LogTimestamp","timestamp","theme","isDarkMode","palette","mode","variant","sx","color","text","secondary","fontSize","whiteSpace","minWidth","backgroundColor"],"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;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,UAAU,EAAEC,QAAQ,QAAQ,gBAAgB;AAMrD,OAAO,MAAMC,eAA4C,CAAC,EAAEC,SAAS,EAAE;IACrE,MAAMC,QAAQH;IACd,MAAMI,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,qBACE,KAACP;QACCQ,SAAQ;QACRC,IAAI;YACFC,OAAOL,aAAa,YAAYD,MAAME,OAAO,CAACK,IAAI,CAACC,SAAS;YAC5DC,UAAU;YACVC,YAAY;YACZC,UAAU;YACVC,iBAAiB;QACnB;kBAECb;;AAGP,EAAE"}