[FEATURE] Add LogExplorer plugin

clickhouse/src/queries/click-house-log-query/ClickHouseLogQuery.tsx

@@ -11,11 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { parseVariables } from '@perses-dev/plugin-system';
+import { parseVariables, LogQueryPlugin } from '@perses-dev/plugin-system';
 import { getClickHouseLogData } from './get-click-house-log-data';
 import { ClickHouseLogQueryEditor } from './ClickHouseLogQueryEditor';
 import { ClickHouseLogQuerySpec } from './click-house-log-query-types';
-import { LogQueryPlugin } from './log-query-plugin-interface';
 
 export const ClickHouseLogQuery: LogQueryPlugin<ClickHouseLogQuerySpec> = {
   getLogData: getClickHouseLogData,
@@ -28,4 +27,6 @@ export const ClickHouseLogQuery: LogQueryPlugin<ClickHouseLogQuerySpec> = {
       variables: allVariables,
     };
   },
+  // TODO: Implement proper SQL parsing for volume queries
+  createVolumeQuery: () => null,
 };

clickhouse/src/queries/click-house-log-query/click-house-log-query-types.test.ts

@@ -11,9 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { LogQueryContext } from '@perses-dev/plugin-system';
 import { ClickHouseDatasource, ClickHouseDatasourceSpec } from '../../datasources/click-house-datasource';
 import { ClickHouseQueryResponse } from '../../model/click-house-client';
-import { ClickHouseQueryContext } from './log-query-plugin-interface';
 import { ClickHouseLogQuery } from './ClickHouseLogQuery';
 
 const datasource: ClickHouseDatasourceSpec = {
@@ -35,8 +35,8 @@ const getDatasourceClient: jest.Mock = jest.fn(() => {
   return clickhouseStubClient;
 });
 
-const createStubContext = (): ClickHouseQueryContext => {
-  const stubLogContext: ClickHouseQueryContext = {
+const createStubContext = (): LogQueryContext => {
+  const stubLogContext: LogQueryContext = {
     datasourceStore: {
       getDatasource: jest.fn(),
       getDatasourceClient: getDatasourceClient,
@@ -51,6 +51,7 @@ const createStubContext = (): ClickHouseQueryContext => {
       start: new Date('01-02-2025'),
     },
     variableState: {},
+    refreshKey: '',
   };
   return stubLogContext;
 };

clickhouse/src/queries/click-house-log-query/get-click-house-log-data.ts

@@ -11,12 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { replaceVariables } from '@perses-dev/plugin-system';
+import { replaceVariables, LogQueryPlugin } from '@perses-dev/plugin-system';
 import { LogEntry, LogData } from '@perses-dev/core';
 import { ClickHouseClient, ClickHouseQueryResponse } from '../../model/click-house-client';
 import { DEFAULT_DATASOURCE } from '../constants';
 import { ClickHouseLogQuerySpec } from './click-house-log-query-types';
-import { LogQueryPlugin } from './log-query-plugin-interface';
 
 function flattenObject(
   obj: Record<string, unknown>,

logexplorer/.cjs.swcrc

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "target": "es2022",
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs"
+  },
+  "exclude": ["\\.(stories|test)\\."]
+}

logexplorer/.gitignore

@@ -0,0 +1,21 @@
+.idea/
+
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# generated archives
+*.tar.gz
+
+# external CUE dependencies
+/*/cue.mod/pkg/

logexplorer/.swcrc

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "target": "es2022",
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": ["\\.(stories|test)\\."]
+}

logexplorer/README.md

@@ -0,0 +1,41 @@
+# Plugin Module: log-explorer 
+
+### How to install
+
+This plugin requires react and react-dom 18
+
+Install peer dependencies:
+
+```bash
+npm install react@18 react-dom@18
+```
+
+Install the plugin:
+
+```bash
+npm install @my-org/log-explorer
+```
+
+## Development
+
+### Setup
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+### Get Started
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+Build the plugin for distribution:
+
+```bash
+npm run build
+```

logexplorer/cue.mod/module.cue

@@ -0,0 +1,7 @@
+module: "github.com/perses-dev/log-explorer@v0"
+language: {
+	version: "v0.12.0"
+}
+source: {
+	kind: "git"
+}

logexplorer/jest.config.ts

@@ -0,0 +1,26 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { Config } from "@jest/types";
+import shared from "../jest.shared";
+
+const jestConfig: Config.InitialOptions = {
+  ...shared,
+
+  setupFilesAfterEnv: [
+    ...(shared.setupFilesAfterEnv ?? []),
+    "<rootDir>/src/setup-tests.ts",
+  ],
+};
+
+export default jestConfig;

logexplorer/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@perses-dev/log-explorer",
+  "version": "0.1.0",
+  "homepage": "https://github.com/perses/plugins/blob/main/README.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/perses/plugins.git"
+  },
+  "bugs": {
+    "url": "https://github.com/perses/plugins/issues"
+  },
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "npm run build-mf && concurrently \"npm:build:*\"",
+    "build-mf": "rsbuild build",
+    "build:cjs": "swc ./src -d dist/lib/cjs --strip-leading-paths --config-file .cjs.swcrc",
+    "build:esm": "swc ./src -d dist/lib --strip-leading-paths --config-file .swcrc",
+    "build:types": "tsc --project tsconfig.build.json",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "cross-env LC_ALL=C TZ=UTC jest --passWithNoTests",
+    "type-check": "tsc --noEmit"
+  },
+  "main": "lib/cjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "devDependencies": {
+    "@types/qs": "^6.9.18"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@hookform/resolvers": "^3.2.0",
+    "@perses-dev/components": "^0.54.0-beta.1",
+    "@perses-dev/core": "^0.53.0",
+    "@perses-dev/dashboards": "^0.54.0-beta.1",
+    "@perses-dev/explore": "^0.54.0-beta.1",
+    "@perses-dev/plugin-system": "^0.54.0-beta.1",
+    "@tanstack/react-query": "^4.39.1",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "echarts": "5.5.0",
+    "immer": "^10.1.1",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
+    "react-hook-form": "^7.52.2",
+    "react-router-dom": "^5 || ^6 || ^7"
+  },
+  "files": [
+    "lib/**/*",
+    "__mf/**/*",
+    "mf-manifest.json",
+    "mf-stats.json"
+  ],
+  "perses": {
+    "moduleName": "LogExplorer",
+    "moduleOrg": "perses.dev",
+    "schemasPath": "schemas",
+    "plugins": [
+      {
+        "kind": "Explore",
+        "spec": {
+          "display": {
+            "name": "Log Explorer"
+          },
+          "name": "LogExplorer"
+        }
+      }
+    ]
+  }
+}

logexplorer/rsbuild.config.ts

@@ -0,0 +1,46 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { pluginReact } from '@rsbuild/plugin-react';
+import { createConfigForPlugin } from '../rsbuild.shared';
+
+export default createConfigForPlugin({
+  name: 'LogExplorer',
+  rsbuildConfig: {
+    server: { port: 3009 },
+    plugins: [pluginReact()],
+  },
+  moduleFederation: {
+    exposes: {
+      './LogExplorer': './src/explore/log-explorer',
+    },
+    shared: {
+      react: { requiredVersion: '18.2.0', singleton: true },
+      'react-dom': { requiredVersion: '18.2.0', singleton: true },
+      echarts: { singleton: true },
+      'date-fns': { singleton: true },
+      'date-fns-tz': { singleton: true },
+      lodash: { singleton: true },
+      '@perses-dev/components': { singleton: true },
+      '@perses-dev/plugin-system': { singleton: true },
+      '@perses-dev/explore': { singleton: true },
+      '@perses-dev/dashboards': { singleton: true },
+      '@emotion/react': { requiredVersion: '^11.11.3', singleton: true },
+      '@emotion/styled': { singleton: true },
+      '@hookform/resolvers': { singleton: true },
+      '@tanstack/react-query': { singleton: true },
+      'react-hook-form': { singleton: true },
+      'react-router-dom': { singleton: true },
+    },
+  },
+});

logexplorer/src/bootstrap.tsx

@@ -0,0 +1,18 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<React.StrictMode></React.StrictMode>);

logexplorer/src/env.d.ts

@@ -0,0 +1,14 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// <reference types="@rsbuild/core/types" />