diff --git a/.env.sample b/.env.sample
index 84f2586..637509c 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,7 +1,8 @@
LOG_LEVEL=INFO
REDASH__URL=
REDASH__API_KEY=
+NEXT_PUBLIC_APP__URL=http://localhost:3000
NEXT_PUBLIC_REDASH__URL=${REDASH__URL}
-OPEN_SEARCH__URL=http://opensearch-node-main:9200
+OPEN_SEARCH__URL=http://localhost:9200
OPEN_SEARCH__USERNAME=admin
OPEN_SEARCH__PASSWORD=admin
diff --git a/redash-searcher-web/components/App.tsx b/redash-searcher-web/components/App.tsx
new file mode 100644
index 0000000..b1f283c
--- /dev/null
+++ b/redash-searcher-web/components/App.tsx
@@ -0,0 +1,87 @@
+import { EuiPageTemplate, EuiTitle } from "@elastic/eui";
+import React from "react";
+import {
+ RefinementList,
+ SearchBox,
+ InstantSearch,
+ CurrentRefinements,
+ Stats,
+ InfiniteHits,
+ InstantSearchProps,
+ Hits,
+} from "react-instantsearch-dom";
+import Hit from "../components/Hit";
+
+interface CurrentRefinementItem {
+ id: string;
+ index: string;
+ attribute: string;
+ label: string;
+ currentRefinement: string[];
+}
+
+const reduceDuplicateRefinement = (items: CurrentRefinementItem[]) => {
+ const seen = new Set();
+ return items.filter((item: any) => {
+ if (seen.has(item.label)) {
+ return false;
+ } else {
+ seen.add(item.label);
+ return true;
+ }
+ });
+};
+
+export default function App(props: InstantSearchProps) {
+ return (
+
+
+
+
+
+ Redash Searcher
+
+
+ Data Source
+
+
+
+ User Name
+
+
+
+ User Email
+
+
+
+ Tags
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
")}
- />
-
- )}
-
-
- ))}
-
- );
-};
-
-export default HitsList;
diff --git a/redash-searcher-web/components/Search.tsx b/redash-searcher-web/components/Search.tsx
deleted file mode 100644
index 3341940..0000000
--- a/redash-searcher-web/components/Search.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { gql, useLazyQuery } from "@apollo/client";
-import { useSearchkitVariables } from "@searchkit/client";
-import {
- FacetsList,
- SearchBar,
- Pagination,
- SelectedFilters,
- ResetSearchButton,
-} from "@searchkit/elastic-ui";
-import { useEffect } from "react";
-import {
- EuiPageHeaderSection,
- EuiTitle,
- EuiHorizontalRule,
- EuiFlexGroup,
- EuiPageTemplate,
- EuiSpacer,
-} from "@elastic/eui";
-import HitsList from "./HitList";
-
-export const RESULT_SET_QUERY = gql`
- query resultSet(
- $query: String
- $filters: [SKFiltersSet]
- $page: SKPageInput
- $sortBy: String
- ) {
- results(query: $query, filters: $filters) {
- summary {
- total
- appliedFilters {
- id
- identifier
- display
- label
- ... on DateRangeSelectedFilter {
- dateMin
- dateMax
- }
-
- ... on NumericRangeSelectedFilter {
- min
- max
- }
-
- ... on ValueSelectedFilter {
- value
- }
- }
- sortOptions {
- id
- label
- }
- query
- }
- hits(page: $page, sortBy: $sortBy) {
- page {
- total
- totalPages
- pageNumber
- from
- size
- }
- sortedBy
- items {
- ... on ResultHit {
- id
- fields {
- name
- description
- query
- user_name
- user_email
- tags
- created_at
- updated_at
- data_source_name
- data_source_type
- }
- highlight {
- name
- query
- }
- }
- }
- }
- facets {
- identifier
- type
- label
- display
- entries {
- label
- count
- }
- }
- }
- }
-`;
-
-const Search = () => {
- const variables = useSearchkitVariables();
- const [loadResultSet, { called, loading, data }] = useLazyQuery(
- RESULT_SET_QUERY,
- {
- variables,
- }
- );
- useEffect(() => {
- loadResultSet();
- }, []);
- if (loading) {
- return ;
- }
- const Facets = FacetsList([]);
- return (
-
-
-
-
-
-
-
-
-
- Redash Search
-
-
-
-
-
-
-
-
- {data?.results.summary.total} Results
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Search;
diff --git a/redash-searcher-web/lib/apolloClient.ts b/redash-searcher-web/lib/apolloClient.ts
deleted file mode 100644
index 8c9b78b..0000000
--- a/redash-searcher-web/lib/apolloClient.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { IncomingMessage, ServerResponse } from "http";
-import { useMemo } from "react";
-import {
- ApolloClient,
- HttpLink,
- InMemoryCache,
- NormalizedCacheObject,
-} from "@apollo/client";
-
-let apolloClient: ApolloClient | undefined;
-
-export type ResolverContext = {
- req?: IncomingMessage;
- res?: ServerResponse;
-};
-
-function createApolloClient(context?: ResolverContext) {
- return new ApolloClient({
- ssrMode: typeof window === "undefined",
- link: new HttpLink({
- uri: "/api/graphql",
- credentials: "same-origin",
- }),
- cache: new InMemoryCache(),
- });
-}
-
-export function initializeApollo(
- initialState: any = null,
- // Pages with Next.js data fetching methods, like `getStaticProps`, can send
- // a custom context which will be used by `SchemaLink` to server render pages
- context?: ResolverContext
-) {
- const _apolloClient = apolloClient ?? createApolloClient(context);
-
- // If your page has Next.js data fetching methods that use Apollo Client, the initial state
- // get hydrated here
- if (initialState) {
- _apolloClient.cache.restore(initialState);
- }
- // For SSG and SSR always create a new Apollo Client
- if (typeof window === "undefined") return _apolloClient;
- // Create the Apollo Client once in the client
- if (!apolloClient) apolloClient = _apolloClient;
-
- return _apolloClient;
-}
-
-export function useApollo(initialState: any) {
- const store = useMemo(() => initializeApollo(initialState), [initialState]);
- return store;
-}
diff --git a/redash-searcher-web/package.json b/redash-searcher-web/package.json
index 12cc780..47ffa77 100644
--- a/redash-searcher-web/package.json
+++ b/redash-searcher-web/package.json
@@ -9,33 +9,32 @@
"lint": "next lint"
},
"dependencies": {
- "@apollo/client": "3.3.6",
- "@elastic/datemath": "5.0.3",
+ "@elastic/datemath": "^5.0.3",
"@elastic/eui": "72.0.0",
"@emotion/css": "11.10.5",
"@emotion/react": "11.10.5",
"@emotion/styled": "11.10.5",
- "@googlemaps/google-maps-services-js": "3.1.15",
"@next/font": "13.1.1",
- "@searchkit/client": "3.0.0",
- "@searchkit/elastic-ui": "3.0.0",
- "@searchkit/schema": "3.0.0",
- "@types/micro-cors": "^0.1.2",
- "apollo-server-micro": "3.11.1",
+ "@searchkit/api": "^4.3.0",
+ "@searchkit/instantsearch-client": "^4.3.0",
"debounce": "1.2.0",
"deepmerge": "^4.2.2",
"dompurify": "2.4.1",
"eslint": "8.30.0",
"eslint-config-next": "13.1.1",
- "graphql": "16.6.0",
+ "instantsearch.css": "^8.0.0",
"micro": "^10.0.1",
"micro-cors": "^0.1.1",
"moment": "^2.29.4",
"next": "13.1.1",
"next-with-apollo": "5.1.0",
+ "qs": "^6.11.0",
"react": "18.2.0",
+ "react-code-blocks": "^0.0.9-0",
"react-dom": "18.2.0",
+ "react-instantsearch-dom": "^6.39.0",
"react-syntax-highlighter": "^15.5.0",
+ "searchkit": "4.3.0",
"typescript": "4.9.4"
},
"devDependencies": {
@@ -47,8 +46,10 @@
"@graphql-codegen/typescript-react-apollo": "3.3.7",
"@types/dompurify": "2.4.0",
"@types/node": "18.11.18",
+ "@types/qs": "^6.9.7",
"@types/react": "18.0.26",
"@types/react-dom": "18.0.10",
+ "@types/react-instantsearch-dom": "^6.12.3",
"@types/react-syntax-highlighter": "^15.5.5"
}
}
diff --git a/redash-searcher-web/pages/_app.tsx b/redash-searcher-web/pages/_app.tsx
index 7a5f0d6..cb5c9a0 100644
--- a/redash-searcher-web/pages/_app.tsx
+++ b/redash-searcher-web/pages/_app.tsx
@@ -1,17 +1,6 @@
-import { ApolloProvider } from "@apollo/client";
-import "@elastic/eui/dist/eui_theme_light.css";
-import type { AppProps } from "next/app";
-import { useApollo } from "../lib/apolloClient";
-import { EuiProvider } from "@elastic/eui";
+import "instantsearch.css/themes/satellite-min.css";
+import "../styles.css";
-export default function App({ Component, pageProps }: AppProps) {
- const apolloClient = useApollo(pageProps.initialApolloState);
-
- return (
-
-
-
-
-
- );
+export default function App({ Component, pageProps }: any): JSX.Element {
+ return ;
}
diff --git a/redash-searcher-web/pages/api/graphql.ts b/redash-searcher-web/pages/api/graphql.ts
deleted file mode 100644
index 573e110..0000000
--- a/redash-searcher-web/pages/api/graphql.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { ApolloServer, gql } from "apollo-server-micro";
-import Cors from "micro-cors";
-
-import {
- MultiMatchQuery,
- RefinementSelectFacet,
- SearchkitSchema,
-} from "@searchkit/schema";
-
-const getOpenSearchURI = () => {
- const openSearchURL = process.env.OPEN_SEARCH__URL || "http://localhost:9200";
- const openSearchUsername = process.env.OPEN_SEARCH__USERNAME;
- const openSearchPassword = process.env.OPEN_SEARCH__PASSWORD;
- if (!(openSearchUsername && openSearchPassword)) {
- return openSearchURL;
- }
- return openSearchURL.replace(
- "://",
- `://${openSearchUsername}:${openSearchPassword}@`
- );
-};
-
-const searchkitConfig = {
- host: getOpenSearchURI(),
- credential: {},
- index: "redash",
- hits: {
- fields: [
- "name",
- "query",
- "user_name",
- "user_email",
- "description",
- "tags",
- "created_at",
- "updated_at",
- "data_source_name",
- "data_source_type",
- ],
- highlightedFields: [
- "name",
- {
- field: "query",
- config: {
- pre_tags: [''],
- post_tags: [""],
- },
- },
- ],
- },
- sortOptions: [
- {
- id: "relevance",
- label: "Relevance",
- field: [{ _score: "desc" }],
- defaultOption: true,
- },
- ],
- query: new MultiMatchQuery({ fields: ["name", "query"] }),
- facets: [
- new RefinementSelectFacet({
- field: "data_source_type.keyword",
- identifier: "data_source_type",
- label: "DataSourceType",
- multipleSelect: true,
- }),
- new RefinementSelectFacet({
- field: "data_source_name.keyword",
- identifier: "data_source_name",
- label: "DataSourceName",
- multipleSelect: true,
- }),
- new RefinementSelectFacet({
- field: "user_name.keyword",
- identifier: "user_name",
- label: "UserName",
- multipleSelect: true,
- }),
- new RefinementSelectFacet({
- field: "user_email.keyword",
- identifier: "user_email",
- label: "UserEmail",
- multipleSelect: true,
- }),
- new RefinementSelectFacet({
- field: "tags.keyword",
- identifier: "tags",
- label: "Tag",
- multipleSelect: true,
- }),
- ],
-};
-
-const { typeDefs, withSearchkitResolvers, context } = SearchkitSchema({
- config: searchkitConfig,
- typeName: "ResultSet",
- hitTypeName: "ResultHit",
- addToQueryType: true,
-});
-
-export const config = {
- api: {
- bodyParser: false,
- },
-};
-
-const server = new ApolloServer({
- typeDefs: [
- gql`
- type Query {
- root: String
- }
-
- type HitFields {
- name: String
- description: String
- query: String
- user_name: String
- user_email: String
- created_at: String
- updated_at: String
- crated_date: String
- updated_date: String
- tags: [String]
- data_source_name: String
- data_source_type: String
- }
-
- type HitHighlight {
- name: [String]
- query: [String]
- }
-
- type ResultHit implements SKHit {
- id: ID!
- fields: HitFields
- highlight: HitHighlight
- }
- `,
- ...typeDefs,
- ],
- resolvers: withSearchkitResolvers({}),
- cache: "bounded",
- introspection: true,
- context: {
- ...context,
- },
-});
-
-const startServer = server.start();
-const cors = Cors();
-
-export default cors(async (req: any, res: any): Promise => {
- if (req.method === "OPTIONS") {
- res.end();
- return false;
- }
-
- await startServer;
- await server.createHandler({ path: "/api/graphql" })(req, res);
-});
diff --git a/redash-searcher-web/pages/api/models.ts b/redash-searcher-web/pages/api/models.ts
index acaae55..738480b 100644
--- a/redash-searcher-web/pages/api/models.ts
+++ b/redash-searcher-web/pages/api/models.ts
@@ -1,4 +1,5 @@
export interface IResultHitField {
+ id: number;
name: string;
description: string;
query: string;
@@ -16,9 +17,3 @@ export interface IResultHitHighlight {
name: string[];
query: string[];
}
-
-export interface IResultHitItem {
- id: string;
- fields: IResultHitField;
- highlight: IResultHitHighlight;
-}
diff --git a/redash-searcher-web/pages/api/search.ts b/redash-searcher-web/pages/api/search.ts
new file mode 100644
index 0000000..3f0343a
--- /dev/null
+++ b/redash-searcher-web/pages/api/search.ts
@@ -0,0 +1,72 @@
+import Client from "@searchkit/api";
+import { ConfigConnection } from "searchkit";
+import { NextApiRequest, NextApiResponse } from "next";
+
+const getOpenSearchConnection = (): ConfigConnection => {
+ const openSearchURL = process.env.OPEN_SEARCH__URL || "http://localhost:9200";
+ const openSearchUsername = process.env.OPEN_SEARCH__USERNAME;
+ const openSearchPassword = process.env.OPEN_SEARCH__PASSWORD;
+
+ if (!(openSearchUsername && openSearchPassword)) {
+ return {
+ host: openSearchURL,
+ };
+ }
+ return {
+ host: openSearchURL,
+ auth: {
+ username: openSearchUsername,
+ password: openSearchPassword,
+ },
+ };
+};
+
+const client = Client({
+ connection: getOpenSearchConnection(),
+ search_settings: {
+ highlight_attributes: ["name", "query"],
+ search_attributes: ["name", "query"],
+ result_attributes: [
+ "id",
+ "name",
+ "query",
+ "user_name",
+ "user_email",
+ "description",
+ "tags",
+ "created_at",
+ "updated_at",
+ "data_source_name",
+ "data_source_type",
+ ],
+ facet_attributes: [
+ {
+ attribute: "data_source_type",
+ field: "data_source_type.keyword",
+ type: "string",
+ },
+ {
+ attribute: "data_source_name",
+ field: "data_source_name.keyword",
+ type: "string",
+ },
+ { attribute: "user_name", field: "user_name.keyword", type: "string" },
+ { attribute: "user_email", field: "user_email.keyword", type: "string" },
+ { attribute: "tags", field: "tags.keyword", type: "string" },
+ ],
+ sorting: {
+ default: {
+ field: "_score",
+ order: "desc",
+ },
+ },
+ },
+});
+
+export default async function handler(
+ req: NextApiRequest,
+ res: NextApiResponse
+) {
+ const results = await client.handleRequest(req.body);
+ res.send(results);
+}
diff --git a/redash-searcher-web/pages/index.tsx b/redash-searcher-web/pages/index.tsx
index 7d1b8bc..56d022a 100644
--- a/redash-searcher-web/pages/index.tsx
+++ b/redash-searcher-web/pages/index.tsx
@@ -1,62 +1,85 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import qs from "qs";
+import Client from "@searchkit/instantsearch-client";
import dynamic from "next/dynamic";
-import { withSearchkit, withSearchkitRouting } from "@searchkit/client";
-const Search = dynamic(() => import("../components/Search"), {
+const APP_URL = (process.env.NEXT_PUBLIC_APP__URL || "").replace(/\/$/, "");
+
+const searchClient = Client({
+ url: `${APP_URL}/api/search`,
+});
+
+const urlUpdateAfterMills = 500;
+
+const createURL = (state: any) => `?${qs.stringify(state)}`;
+
+const pathToSearchState = (path: string) =>
+ path.includes("?") ? qs.parse(path.substring(path.indexOf("?") + 1)) : {};
+
+interface ISearchState {
+ page?: number;
+ query?: string;
+ refinementList?: {
+ [key: string]: string[];
+ };
+}
+
+const searchStateToURL = (searchState: ISearchState) => {
+ // filter empty values from url
+ // copy searchState
+ searchState = { ...searchState };
+ !searchState.page && delete searchState.page;
+ !searchState.query && delete searchState.query;
+ for (const key in searchState.refinementList) {
+ if (!searchState.refinementList[key]) {
+ delete searchState.refinementList[key];
+ }
+ }
+ !searchState.refinementList && delete searchState.refinementList;
+
+ return searchState
+ ? `${window.location.pathname}?${qs.stringify(searchState)}`
+ : "";
+};
+
+const App = dynamic(() => import("../components/App"), {
ssr: false,
});
-export default withSearchkit(
- withSearchkitRouting(Search, {
- createURL: ({ qsModule, location, routeState }) => {
- let filters;
- let typeCategoryURL = "all";
- if (routeState.filters) {
- filters = routeState.filters.reduce(
- (sum: any, filter: any) => {
- if (filter.identifier === "type") {
- sum.type.push(filter);
- } else {
- sum.all.push(filter);
- }
- return sum;
- },
- {
- type: [],
- all: [],
- }
- );
- if (filters.type.length > 0) {
- typeCategoryURL = filters.type
- .map((filter: any) => filter.value)
- .join("_");
- }
- }
-
- let newRouteState = {
- ...routeState,
- ...(filters ? { filters: filters.all } : {}),
- };
-
- const queryString = qsModule.stringify(newRouteState, {
- addQueryPrefix: true,
- });
-
- return `/type/${typeCategoryURL}${queryString}`;
- },
- parseURL: ({ qsModule, location }) => {
- const matches = location.pathname.match(/type\/(\w+)/);
- const routeState = qsModule.parse(location.search.slice(1), {
- arrayLimit: 99,
- });
-
- if (matches && matches[1] && matches[1] !== "all") {
- const typeFilters = matches[1]
- .split("_")
- .map((value) => ({ identifier: "type", value }));
- if (!routeState.filters) routeState.filters = [];
- routeState.filters = [...routeState.filters, ...typeFilters];
- }
- return routeState;
- },
- })
-);
+const DEFAULT_PROPS = {
+ searchClient,
+ indexName: "redash",
+};
+
+export default function Page(props: any) {
+ const [searchState, setSearchState] = useState({});
+ const router = useRouter();
+ const debouncedSetState = useRef();
+
+ useEffect(() => {
+ if (router) {
+ setSearchState(pathToSearchState(router.asPath));
+ }
+ }, [router]);
+
+ return (
+
+
{
+ clearTimeout(debouncedSetState.current);
+ debouncedSetState.current = setTimeout(() => {
+ const href = searchStateToURL(nextSearchState);
+
+ router.push(href, href, { shallow: true });
+ }, urlUpdateAfterMills);
+ setSearchState(nextSearchState);
+ }}
+ createURL={createURL}
+ />
+