@lensjs/core 1.0.1 → 1.0.2

package/src/ui/src/views/queries/QueryDetails.tsx

@@ -1,58 +0,0 @@
-import { Link } from "react-router-dom";
-import DetailPanel from "../../components/DetailPanel";
-import TabbedDataViewer from "../../components/tabs/TabbedDataViewer";
-import type { QueryEntry } from "../../types";
-import { getRoutesPaths } from "../../router/routes";
-import { useConfig } from "../../utils/context";
-import { formatDateWithTimeAgo } from "../../utils/date";
-import QueryViewer from "../../components/queryFormatters/QueryViewer";
-
-export default function QueryDetails({ query }: { query: QueryEntry }) {
-  const detailItems = [
-    query.lens_entry_id && {
-      label: "Request",
-      value: (
-        <Link
-          to={`${getRoutesPaths(useConfig()).REQUESTS}/${query.lens_entry_id}`}
-          className="text-blue-600 hover:underline font-semibold"
-        >
-          View Request
-        </Link>
-      ),
-      className: "text-gray-900 dark:text-gray-100",
-    },
-    {
-      label: "Time",
-      value: <span>{formatDateWithTimeAgo(query.created_at)}</span>,
-      className: "text-gray-900 dark:text-gray-100",
-    },
-    {
-      label: "Duration",
-      value: <span>{query.data.duration}</span>,
-      className: "text-gray-900 dark:text-gray-100",
-    },
-    {
-      label: "Provider",
-      value: <span>{query.data.type}</span>,
-      className: "text-gray-900 dark:text-gray-100",
-    },
-  ].filter((item) => !!item);
-
-  return (
-    <div className="flex flex-col gap-4">
-      {" "}
-      <DetailPanel title="Request Details" items={detailItems} />
-      <TabbedDataViewer
-        tabs={[
-          {
-            id: "query",
-            data: ["query"],
-            label: "Query",
-            content: <QueryViewer queryPayload={query.data} />,
-          },
-        ]}
-        defaultActiveTab="query"
-      />
-    </div>
-  );
-}

package/src/ui/src/views/queries/QueryTable.tsx

@@ -1,21 +0,0 @@
-import { LoadMoreButton } from "../../components/LoadMore";
-import Table from "../../components/Table";
-import type { HasMoreType, QueryTableRow } from "../../types";
-import getColumns from "./columns";
-
-const QueriesTable = ({
-  hasMoreObject,
-}: {
-  hasMoreObject: HasMoreType<QueryTableRow>;
-}) => {
-  return (
-    <div className="w-full">
-      <div className="overflow-x-auto">
-        <Table columns={getColumns()} data={hasMoreObject.data} />
-      </div>
-      <LoadMoreButton paginatedPage={hasMoreObject} />
-    </div>
-  );
-};
-
-export default QueriesTable;

package/src/ui/src/views/queries/columns.tsx

@@ -1,83 +0,0 @@
-import { CircleArrowRightIcon } from "lucide-react";
-import type { JSX } from "react";
-import { Link } from "react-router-dom";
-import type { TableColumn } from "../../components/Table";
-import { getRoutesPaths } from "../../router/routes";
-import type { QueryTableRow } from "../../types";
-import { useConfig } from "../../utils/context";
-import { humanDifferentDate } from "../../utils/date";
-
-function highlightSQL(query: string): JSX.Element {
-  return (
-    <span className="text-red-600 dark:text-red-400 font-mono">{query}</span>
-  );
-}
-
-const getColumns = (): TableColumn<QueryTableRow>[] => {
-  const paths = getRoutesPaths(useConfig());
-
-  return [
-    {
-      name: "Query",
-      render: (row) => (
-        <div className="col-span-5">
-          <code
-            className="text-sm font-mono text-slate-800 dark:text-slate-300 leading-relaxed line-clamp-1"
-            title={row.data.query}
-          >
-            {highlightSQL(row.data.query)}
-          </code>
-        </div>
-      ),
-    },
-    {
-      name: "Duration",
-      render: (row) => (
-        <div className="col-span-1 text-right">
-          <span className="text-sm text-slate-600 dark:text-slate-400 font-mono">
-            {row.data.duration}
-          </span>
-        </div>
-      ),
-    },
-    {
-      name: "Provider",
-      render: (row) => {
-        return (
-          <div className="col-span-2 text-right">
-            <span className="text-sm text-slate-600 dark:text-slate-400 font-mono">
-              {row.data.type}
-            </span>
-          </div>
-        );
-      },
-    },
-    {
-      name: "Happened",
-      render: (row) => {
-        const { label, exact } = humanDifferentDate(row.data.createdAt);
-        return (
-          <span className="text-nowrap" title={exact}>
-            {label}
-          </span>
-        );
-      },
-      position: "end",
-      class: "min-w-32",
-    },
-    {
-      name: "Actions",
-      render: (row) => (
-        <Link
-          to={`${paths.QUERIES}/${row.id}`}
-          className="transition-colors duration-100 hover:text-white"
-        >
-          <CircleArrowRightIcon size={20} />
-        </Link>
-      ),
-      position: "end",
-    },
-  ];
-};
-
-export default getColumns;

package/src/ui/src/views/requests/BasicRequestDetails.tsx

@@ -1,82 +0,0 @@
-import { useMemo } from "react";
-import DetailPanel, { type DetailItem } from "../../components/DetailPanel";
-import type { OneRequest } from "../../types";
-import { formatDateWithTimeAgo} from "../../utils/date";
-import MethodBadge from "../../components/MethodBadge";
-import StatusCode from "../../components/StatusCode";
-
-const BasicRequestDetails = ({ request }: { request: OneRequest }) => {
-  const formattedTime = useMemo(() => {
-    return formatDateWithTimeAgo(request?.data?.createdAt);
-  }, [request?.data?.createdAt]);
-
-  if (!request || !request.data) {
-    return (
-      <DetailPanel
-        title="Request Details"
-        items={[]}
-        emptyMessage="No request data available"
-      />
-    );
-  }
-
-  const getHostname = () => {
-    return request?.data?.headers?.host || "Unknown";
-  };
-
-  const detailItems = useMemo(
-    (): DetailItem[] => [
-      {
-        label: "Time",
-        value: formattedTime,
-        className: "text-gray-900 dark:text-gray-100",
-      },
-      {
-        label: "Hostname",
-        value: getHostname(),
-        className: "text-gray-900 dark:text-gray-100 font-mono",
-      },
-      {
-        label: "Method",
-        value: request.data.method ? (
-          <MethodBadge method={request.data.method} />
-        ) : (
-          "Unknown"
-        ),
-      },
-      {
-        label: "Request ID",
-        value: request.data.id || "N/A",
-        className: "text-gray-700 dark:text-gray-300 font-mono text-sm",
-      },
-      {
-        label: "Path",
-        value: request.data.path || "N/A",
-        className: "text-gray-900 dark:text-gray-100 font-mono",
-      },
-      {
-        label: "Status",
-        value: request.data.status ? (
-          <StatusCode status={request.data.status} />
-        ) : (
-          "N/A"
-        ),
-      },
-      {
-        label: "Duration",
-        value: request.data.duration || "N/A",
-        className: "text-gray-900 dark:text-gray-100 font-medium",
-      },
-      {
-        label: "IP Address",
-        value: request.data.ip || "N/A",
-        className: "text-gray-900 dark:text-gray-100 font-mono",
-      },
-    ],
-    [request.data, formattedTime],
-  );
-
-  return <DetailPanel title="Request Details" items={detailItems} />;
-};
-
-export default BasicRequestDetails;

package/src/ui/src/views/requests/RequestDetails.tsx

@@ -1,70 +0,0 @@
-import DetailPanel from "../../components/DetailPanel";
-import TabbedDataViewer from "../../components/tabs/TabbedDataViewer";
-import type { OneRequest } from "../../types";
-import BasicRequestDetails from "./BasicRequestDetails";
-
-const RequestDetails = ({ request }: { request: OneRequest }) => {
-  const dynamicTabs = [
-    {
-      id: "payload",
-      label: "Payload",
-      data: request.data.body,
-    },
-    {
-      id: "headers",
-      label: "Headers",
-      data: request.data.headers,
-    },
-  ];
-
-  const responseTabs = [
-    {
-      id: "response-body",
-      label: "Body",
-      data: request.data.response.json,
-    },
-    {
-      id: "response-headers",
-      label: "Headers",
-      data: request.data.response.headers,
-    },
-  ];
-
-  return (
-    <div className="flex flex-col gap-3">
-      <BasicRequestDetails request={request} />
-      {request.data.user && (
-        <DetailPanel
-          title="User"
-          items={[
-            {
-              label: "ID",
-              value: request?.data?.user?.id,
-            },
-            {
-              label: "Email",
-              value: request?.data?.user?.email,
-            },
-            {
-              label: "Name",
-              value: request?.data?.user?.name,
-            },
-          ]}
-        />
-      )}
-
-      <TabbedDataViewer
-        tabs={dynamicTabs}
-        title="Request Data"
-        defaultActiveTab="payload"
-      />
-      <TabbedDataViewer
-        tabs={responseTabs}
-        title="Response Data"
-        defaultActiveTab="response-body"
-      />
-    </div>
-  );
-};
-
-export default RequestDetails;

package/src/ui/src/views/requests/RequetsTable.tsx

@@ -1,19 +0,0 @@
-import { LoadMoreButton } from "../../components/LoadMore";
-import Table from "../../components/Table";
-import type { HasMoreType, RequestTableRow } from "../../types";
-import getColumns from "./columns";
-
-const RequestTable = ({
-  hasMoreObject,
-}: {
-  hasMoreObject: HasMoreType<RequestTableRow>;
-}) => {
-  return (
-    <div>
-      <Table columns={getColumns()} data={hasMoreObject.data} />
-      <LoadMoreButton paginatedPage={hasMoreObject} />
-    </div>
-  );
-};
-
-export default RequestTable;

package/src/ui/src/views/requests/columns.tsx

@@ -1,62 +0,0 @@
-import { CircleArrowRightIcon } from "lucide-react";
-import MethodBadge from "../../components/MethodBadge";
-import StatusCode from "../../components/StatusCode";
-import { getRoutesPaths } from "../../router/routes";
-import type { RequestTableRow } from "../../types";
-import { useConfig } from "../../utils/context";
-import { humanDifferentDate } from "../../utils/date";
-import type { TableColumn } from "../../components/Table";
-import { Link } from "react-router-dom";
-
-const getColumns = (): TableColumn<RequestTableRow>[] => {
-  const paths = getRoutesPaths(useConfig());
-
-  return [
-    {
-      name: "Verb",
-      render: (row) => <MethodBadge method={row.data.method} />,
-    },
-    {
-      name: "Path",
-      render: (row) => (
-        <Link
-          to={`${paths.REQUESTS}/${row.id}`}
-          className="line-clamp-2 max-w-80 min-w-40 text-base text-blue-600 dark:text-neutral-200 hover:underline"
-        >
-          {row.data.path}
-        </Link>
-      ),
-    },
-    {
-      name: "Status",
-      render: (row) => <StatusCode status={row.data.status} />,
-    },
-    {
-      name: "Duration",
-      value: (row) => row.data.duration,
-    },
-    {
-      name: "Happened",
-      render: (row) => {
-        const { label, exact } = humanDifferentDate(row.data.createdAt);
-        return <span title={exact}>{label}</span>;
-      },
-      position: "end",
-      class: "min-w-32",
-    },
-    {
-      name: "Actions",
-      render: (row) => (
-        <Link
-          to={`${paths.REQUESTS}/${row.id}`}
-          className="transition-colors duration-100 hover:text-white"
-        >
-          <CircleArrowRightIcon size={20} />
-        </Link>
-      ),
-      position: "end",
-    },
-  ];
-};
-
-export default getColumns;

package/src/ui/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/src/ui/tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/src/ui/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/src/ui/tsconfig.node.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/src/ui/vite.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import tailwindcss from "@tailwindcss/vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  base: "./",
-  plugins: [react(), tailwindcss()],
-});

package/src/utils/event_emitter.ts

@@ -1,13 +0,0 @@
-import { AsyncResource } from "node:async_hooks";
-import { QueryEntry } from "../types";
-import Emittery from "emittery";
-
-interface CoreEvents {
-  query: { query: QueryEntry["data"] };
-}
-
-export const createEmittery = <T extends Record<string, any>>() => {
-  return new Emittery<T>();
-};
-export const lensResource = new AsyncResource("lens-emitter");
-export const lensEmitter = new Emittery<CoreEvents>();

package/src/watchers/index.ts

@@ -1,2 +0,0 @@
-export { default as QueryWatcher } from "./query_watcher";
-export { default as RequestWatcher } from "./request_watcher";

package/src/watchers/query_watcher.ts

@@ -1,15 +0,0 @@
-import { getStore } from "../context/context";
-import Watcher from "../core/watcher";
-import { WatcherTypeEnum, type QueryEntry } from "../types/index";
-
-export default class QueryWatcher extends Watcher {
-  name = WatcherTypeEnum.QUERY;
-
-  async log(entry: QueryEntry) {
-    await getStore().save({
-      type: this.name,
-      data: entry.data,
-      requestId: entry.requestId ?? "",
-    });
-  }
-}

package/tests/core/lens.test.ts

@@ -1,89 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import Lens from '../../src/core/lens';
-import Store from '../../src/abstracts/store';
-import Adapter from '../../src/abstracts/adapter';
-import Watcher from '../../src/core/watcher';
-import { WatcherTypeEnum } from '../../src/types';
-
-// Mock implementations
-class MockStore extends Store {
-  initialize = vi.fn();
-  save = vi.fn();
-  getAllRequests = vi.fn();
-  getAllQueries = vi.fn();
-  allByRequestId = vi.fn();
-  find = vi.fn();
-  truncate = vi.fn();
-  paginate = vi.fn();
-  count = vi.fn();
-}
-
-class MockAdapter extends Adapter {
-  setup = vi.fn();
-  registerRoutes = vi.fn();
-  serveUI = vi.fn();
-  override setWatchers = vi.fn().mockReturnThis();
-}
-
-class MockWatcher extends Watcher {
-  name = WatcherTypeEnum.QUERY;
-  log = vi.fn();
-}
-
-describe('Lens', () => {
-  let mockStore: MockStore;
-  let mockAdapter: MockAdapter;
-  let mockWatcher: MockWatcher;
-
-  beforeEach(() => {
-    mockStore = new MockStore();
-    mockAdapter = new MockAdapter();
-    mockWatcher = new MockWatcher();
-    
-    // Reset static properties of Lens
-    Lens['watchers'].clear();
-    Lens['store'] = undefined as any;
-    Lens['adapter'] = undefined as any;
-  });
-
-  it('should set and get a store', async () => {
-    Lens.setStore(mockStore);
-    const store = await Lens.getStore();
-    expect(store).toBe(mockStore);
-  });
-
-  it('should set and get an adapter', () => {
-    Lens.setAdapter(mockAdapter);
-    const adapter = Lens.getAdapter();
-    expect(adapter).toBe(mockAdapter);
-  });
-
-  it('should throw an error if adapter is not set', () => {
-    expect(() => Lens.getAdapter()).toThrow('No adapter has been set');
-  });
-
-  it('should add a watcher', () => {
-    Lens.watch(mockWatcher);
-    expect(Lens['watchers'].get(WatcherTypeEnum.QUERY)).toBe(mockWatcher);
-  });
-
-  it('should start and configure the adapter', async () => {
-    Lens.setStore(mockStore);
-    Lens.setAdapter(mockAdapter);
-    Lens.watch(mockWatcher);
-
-    await Lens.start({ basePath: 'test', appName: 'TestApp', enabled: true });
-
-    expect(mockAdapter.setWatchers).toHaveBeenCalledWith([mockWatcher]);
-    expect(mockAdapter.setup).toHaveBeenCalled();
-    expect(mockAdapter.registerRoutes).toHaveBeenCalled();
-    expect(mockAdapter.serveUI).toHaveBeenCalled();
-  });
-
-  it('should not start if not enabled', async () => {
-    Lens.setAdapter(mockAdapter);
-    await Lens.start({ basePath: 'test', appName: 'TestApp', enabled: false });
-
-    expect(mockAdapter.setup).not.toHaveBeenCalled();
-  });
-});