From 248888245cf77b5d12c697cce0de86985986cbbe Mon Sep 17 00:00:00 2001
From: Ernest Iliiasov <ernestii@users.noreply.github.com>
Date: Wed, 1 May 2024 14:21:39 -0700
Subject: [PATCH] feat: Add option to search only logs or spans (#388)

---
 .changeset/rich-scissors-grin.md              |  6 ++
 .../api/src/clickhouse/searchQueryParser.ts   |  2 +
 packages/app/src/SearchPage.tsx               | 69 +++++++++++++++++++
 packages/app/styles/SearchPage.module.scss    | 41 +++++++++++
 4 files changed, 118 insertions(+)
 create mode 100644 .changeset/rich-scissors-grin.md
 create mode 100644 packages/app/styles/SearchPage.module.scss

diff --git a/.changeset/rich-scissors-grin.md b/.changeset/rich-scissors-grin.md
new file mode 100644
index 000000000..4e27c4458
--- /dev/null
+++ b/.changeset/rich-scissors-grin.md
@@ -0,0 +1,6 @@
+---
+'@hyperdx/api': minor
+'@hyperdx/app': minor
+---
+
+Allow to filter search results by event type (log or span)
diff --git a/packages/api/src/clickhouse/searchQueryParser.ts b/packages/api/src/clickhouse/searchQueryParser.ts
index 5340d61e9..09d0a690b 100644
--- a/packages/api/src/clickhouse/searchQueryParser.ts
+++ b/packages/api/src/clickhouse/searchQueryParser.ts
@@ -42,6 +42,7 @@ const customColumnMap: { [level: string]: string } = {
   end_timestamp: 'end_timestamp',
   host: '_host',
   hyperdx_event_size: '_hyperdx_event_size',
+  hyperdx_event_type: 'type',
   hyperdx_platform: '_platform',
   level: 'severity_text',
   parent_span_id: 'parent_span_id',
@@ -69,6 +70,7 @@ export const customColumnMapType: {
   host: 'string',
   hyperdx_event_size: 'number',
   hyperdx_platform: 'string',
+  hyperdx_event_type: 'string',
   level: 'string',
   parent_span_id: 'string',
   rum_session_id: 'string',
diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx
index 1235d6f82..97a483c53 100644
--- a/packages/app/src/SearchPage.tsx
+++ b/packages/app/src/SearchPage.tsx
@@ -11,6 +11,7 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import cx from 'classnames';
 import { clamp, format, sub } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
 import { Button } from 'react-bootstrap';
@@ -49,6 +50,7 @@ import { useTimeQuery } from './timeQuery';
 import { useDisplayedColumns } from './useDisplayedColumns';
 
 import 'react-modern-drawer/dist/index.css';
+import styles from '../styles/SearchPage.module.scss';
 
 const formatDate = (
   date: Date,
@@ -597,6 +599,42 @@ function SearchPage() {
     [setDisplayedSearchQuery],
   );
 
+  const searchedTypes = useMemo(() => {
+    if (searchedQuery.includes('hyperdx_event_type:"span"')) {
+      return ['span'];
+    } else if (searchedQuery.includes('hyperdx_event_type:"log"')) {
+      return ['log'];
+    }
+    return ['log', 'span'];
+  }, [searchedQuery]);
+
+  const handleToggleType = useCallback(
+    (type: 'log' | 'span') => {
+      let newQuery = displayedSearchQuery;
+
+      if (displayedSearchQuery.includes(`hyperdx_event_type:"${type}"`)) {
+        return; // Do nothing if the query already contains the type
+      }
+
+      newQuery = newQuery
+        .replaceAll('hyperdx_event_type:"log"', '')
+        .replaceAll('hyperdx_event_type:"span"', '')
+        .trim();
+
+      if (!displayedSearchQuery.includes('hyperdx_event_type:')) {
+        newQuery =
+          newQuery +
+          (newQuery.length ? ' ' : '') +
+          `hyperdx_event_type:"${type === 'log' ? 'span' : 'log'}"`;
+      }
+
+      if (newQuery !== displayedSearchQuery) {
+        doSearch(newQuery, displayedTimeInputValue);
+      }
+    },
+    [displayedSearchQuery, displayedTimeInputValue, doSearch],
+  );
+
   const chartsConfig = useMemo(() => {
     return {
       where: searchedQuery,
@@ -750,6 +788,36 @@ function SearchPage() {
       />
       <div className="d-flex flex-column flex-grow-1 bg-hdx-dark h-100">
         <div className="bg-body pb-3 pt-3 d-flex px-3 align-items-center">
+          <div className={styles.eventTypeSwitch}>
+            <div
+              className={cx(styles.eventTypeSwitchItem, {
+                [styles.eventTypeSwitchItemActive]:
+                  searchedTypes.includes('log'),
+              })}
+              onClick={() => handleToggleType('log')}
+            >
+              {searchedTypes.includes('log') ? (
+                <i className="bi bi-check" />
+              ) : (
+                <i />
+              )}
+              Logs
+            </div>
+            <div
+              className={cx(styles.eventTypeSwitchItem, {
+                [styles.eventTypeSwitchItemActive]:
+                  searchedTypes.includes('span'),
+              })}
+              onClick={() => handleToggleType('span')}
+            >
+              {searchedTypes.includes('span') ? (
+                <i className="bi bi-check" />
+              ) : (
+                <i />
+              )}
+              Spans
+            </div>
+          </div>
           <form onSubmit={onSearchSubmit} className="d-flex flex-grow-1">
             <SearchInput
               inputRef={searchInput}
@@ -786,6 +854,7 @@ function SearchPage() {
               }}
             />
           </form>
+
           <SearchPageActionBar
             key={`${savedSearchId}`}
             onClickConfigAlert={onClickConfigAlert}
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
new file mode 100644
index 000000000..44d54da72
--- /dev/null
+++ b/packages/app/styles/SearchPage.module.scss
@@ -0,0 +1,41 @@
+@import './variables';
+
+.eventTypeSwitch {
+  border-radius: 4px;
+  border: 1px solid $slate-900;
+  height: 36px;
+  margin-right: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.eventTypeSwitchItem {
+  border-bottom: 1px solid $slate-900;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  flex: 1;
+  border-bottom: 1px solid $slate-700;
+  display: flex;
+  padding: 0 6px 0 4px;
+  align-items: center;
+  cursor: pointer;
+  color: $slate-300;
+  i {
+    width: 14px;
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+  &:hover {
+    background-color: $slate-800;
+  }
+  &:active {
+    background-color: #000;
+  }
+}
+
+.eventTypeSwitchItemActive {
+  color: #fff;
+  background-color: $slate-950;
+}