From 155e7e43314d8c9346e47d1f031a20e89f51c10f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 17 Jan 2022 17:06:01 +0530
Subject: [PATCH 1/6] feat(ui) - custom metrics

---
 frontend/app/api_client.js                    |   5 +-
 .../BugFinder/Attributes/AttributeItem.js     |   7 +-
 .../Attributes/AttributeValueField.js         |  36 +-
 .../BugFinder/AutoComplete/AutoComplete.js    |  45 ++-
 .../BugFinder/AutoComplete/autoComplete.css   |  34 ++
 .../app/components/BugFinder/BugFinder.js     |  12 +-
 .../BugFinder/EventFilter/EventFilter.js      |  60 ++--
 .../BugFinder/filterSelectionButton.css       |   2 +-
 .../app/components/Dashboard/Dashboard.js     |   2 +
 .../CustomMetricForm/CustomMetricForm.tsx     | 118 +++++++
 .../CustomMetrics/CustomMetricForm/index.ts   |   1 +
 .../shared/CustomMetrics/CustomMetrics.tsx    |  41 +++
 .../FilterSeries/FilterSeries.tsx             |  98 ++++++
 .../CustomMetrics/FilterSeries/index.ts       |   1 +
 .../components/shared/CustomMetrics/index.ts  |   1 +
 .../Attributes/AttributeValueField.js         |   6 +-
 .../EventFilter/AutoComplete/AutoComplete.js  |  32 +-
 .../EventFilter/AutoComplete/autoComplete.css |  27 ++
 .../EventSearchInput/EventSearchInput.tsx     |  17 +
 .../shared/EventSearchInput/index.ts          |   1 +
 .../FilterAutoComplete/FilterAutoComplete.css |  62 ++++
 .../FilterAutoComplete/FilterAutoComplete.tsx | 147 +++++++++
 .../Filters/FilterAutoComplete/index.ts       |   1 +
 .../shared/Filters/FilterItem/FilterItem.tsx  |  78 +++++
 .../shared/Filters/FilterItem/index.ts        |   1 +
 .../shared/Filters/FilterList/FilterList.tsx  |  34 ++
 .../shared/Filters/FilterList/index.ts        |   1 +
 .../Filters/FilterModal/FilterModal.tsx       |  34 ++
 .../shared/Filters/FilterModal/index.ts       |   1 +
 .../Filters/FilterOperator/FilterOperator.css |  19 ++
 .../Filters/FilterOperator/FilterOperator.tsx |  29 ++
 .../FilterSelection/FilterSelection.tsx       |  42 +++
 .../shared/Filters/FilterSelection/index.ts   |   1 +
 .../Filters/FilterValue/FilterValue.tsx       |  31 ++
 .../shared/Filters/FilterValue/index.ts       |   1 +
 .../SaveFilterButton/SaveFilterButton.tsx     |  26 ++
 .../shared/SaveFilterButton/index.ts          |   1 +
 .../SaveSearchModal/SaveSearchModal.tsx       |  78 +++++
 .../shared/SaveSearchModal/index.ts           |   1 +
 .../SaveSearchModal/saveSearchModal.css       |  15 +
 .../shared/SavedSearch/SavedSearch.tsx        |  47 +++
 .../SavedSearchDropdown.css                   |   7 +
 .../SavedSearchDropdown.tsx                   |  24 ++
 .../components/SavedSearchDropdown/index.ts   |   1 +
 .../components/shared/SavedSearch/index.ts    |   1 +
 .../SessionSearchField/SessionSearchField.css |  10 +
 .../SessionSearchField/SessionSearchField.tsx |  69 ++++
 .../shared/SessionSearchField/index.ts        |   1 +
 .../ui/SegmentSelection/SegmentSelection.js   |   5 +-
 .../ui/SegmentSelection/segmentSelection.css  |   5 +
 frontend/app/duck/customMetrics.js            | 105 ++++++
 frontend/app/duck/filters.js                  |  55 +++-
 frontend/app/duck/funnels.js                  |   3 +-
 frontend/app/duck/index.js                    |   2 +
 frontend/app/styles/main.css                  |   7 +-
 frontend/app/types/customMetric.js            |  61 ++++
 frontend/app/types/filter/customFilter.js     |  30 +-
 frontend/app/types/filter/event.js            |  36 +-
 frontend/app/types/filter/filter.js           |  41 ++-
 frontend/app/types/filter/index.js            |  28 +-
 frontend/app/types/filter/newFilter.js        | 308 ++++++++++++++++++
 frontend/env.js                               |   4 +-
 62 files changed, 1914 insertions(+), 85 deletions(-)
 create mode 100644 frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
 create mode 100644 frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts
 create mode 100644 frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
 create mode 100644 frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
 create mode 100644 frontend/app/components/shared/CustomMetrics/FilterSeries/index.ts
 create mode 100644 frontend/app/components/shared/CustomMetrics/index.ts
 create mode 100644 frontend/app/components/shared/EventSearchInput/EventSearchInput.tsx
 create mode 100644 frontend/app/components/shared/EventSearchInput/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
 create mode 100644 frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterAutoComplete/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterItem/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterList/FilterList.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterList/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterModal/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterOperator/FilterOperator.css
 create mode 100644 frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterSelection/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterValue/index.ts
 create mode 100644 frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
 create mode 100644 frontend/app/components/shared/SaveFilterButton/index.ts
 create mode 100644 frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
 create mode 100644 frontend/app/components/shared/SaveSearchModal/index.ts
 create mode 100644 frontend/app/components/shared/SaveSearchModal/saveSearchModal.css
 create mode 100644 frontend/app/components/shared/SavedSearch/SavedSearch.tsx
 create mode 100644 frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.css
 create mode 100644 frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
 create mode 100644 frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/index.ts
 create mode 100644 frontend/app/components/shared/SavedSearch/index.ts
 create mode 100644 frontend/app/components/shared/SessionSearchField/SessionSearchField.css
 create mode 100644 frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
 create mode 100644 frontend/app/components/shared/SessionSearchField/index.ts
 create mode 100644 frontend/app/duck/customMetrics.js
 create mode 100644 frontend/app/types/customMetric.js
 create mode 100644 frontend/app/types/filter/newFilter.js

diff --git a/frontend/app/api_client.js b/frontend/app/api_client.js
index 02e575033..28aa2913b 100644
--- a/frontend/app/api_client.js
+++ b/frontend/app/api_client.js
@@ -16,13 +16,14 @@ const siteIdRequiredPaths = [
   '/integration/sources',
   '/issue_types',
   '/sample_rate',
-  '/flows',
+  '/saved_search',
   '/rehydrations',
   '/sourcemaps',
   '/errors',
   '/funnels',
   '/assist',
-  '/heatmaps'
+  '/heatmaps',
+  '/custom_metrics',
 ];
 
 const noStoringFetchPathStarts = [
diff --git a/frontend/app/components/BugFinder/Attributes/AttributeItem.js b/frontend/app/components/BugFinder/Attributes/AttributeItem.js
index bc4e45d41..ad27649dd 100644
--- a/frontend/app/components/BugFinder/Attributes/AttributeItem.js
+++ b/frontend/app/components/BugFinder/Attributes/AttributeItem.js
@@ -27,9 +27,9 @@ class AttributeItem extends React.PureComponent {
   applyFilter = debounce(this.props.applyFilter, 1000)
   fetchFilterOptionsDebounce = debounce(this.props.fetchFilterOptions, 500)
 
-  onFilterChange = (e, { name, value }) => {
+  onFilterChange = (name, value, valueIndex) => {
     const { index } = this.props;
-    this.props.editAttribute(index, name, value);
+    this.props.editAttribute(index, name, value, valueIndex);
     this.applyFilter();
   }
 
@@ -69,13 +69,14 @@ class AttributeItem extends React.PureComponent {
           />
         }
         {
-          !filter.hasNoValue &&
+          // !filter.hasNoValue &&
           <AttributeValueField
             filter={ filter }
             options={ options }            
             onChange={ this.onFilterChange }
             handleSearchChange={this.handleSearchChange}
             loading={loadingFilterOptions}
+            index={index}
           />
         }
         
diff --git a/frontend/app/components/BugFinder/Attributes/AttributeValueField.js b/frontend/app/components/BugFinder/Attributes/AttributeValueField.js
index 440eadec0..9e6b7eb78 100644
--- a/frontend/app/components/BugFinder/Attributes/AttributeValueField.js
+++ b/frontend/app/components/BugFinder/Attributes/AttributeValueField.js
@@ -7,7 +7,7 @@ import { LinkStyledInput, CircularLoader } from 'UI';
 import { KEYS } from 'Types/filter/customFilter';
 import Event, { TYPES } from 'Types/filter/event';
 import CustomFilter from 'Types/filter/customFilter';
-import { setActiveKey, addCustomFilter, removeCustomFilter, applyFilter } from 'Duck/filters';
+import { setActiveKey, addCustomFilter, removeCustomFilter, applyFilter, updateValue } from 'Duck/filters';
 import DurationFilter from '../DurationFilter/DurationFilter';
 import AutoComplete from '../AutoComplete';
 
@@ -24,6 +24,7 @@ const getHeader = (type) => {
   addCustomFilter,
   removeCustomFilter,
   applyFilter,
+  updateValue,
 })
 class AttributeValueField extends React.PureComponent {
   state = {
@@ -134,25 +135,46 @@ class AttributeValueField extends React.PureComponent {
     return params;
   }
 
+  onAddValue = () => {
+    const { index, filter } = this.props;
+    this.props.updateValue('filters', index, filter.value.concat(""));
+  }
+
+  onRemoveValue = (valueIndex) => {
+    const { index, filter } = this.props;
+    this.props.updateValue('filters', index, filter.value.filter((_, i) => i !== valueIndex));
+  }
+
+  onChange = (name, value, valueIndex) => {
+    const { index, filter } = this.props;
+    this.props.updateValue('filters', index, filter.value.map((item, i) => i === valueIndex ? value : item));
+  }
+
   render() {
-    const { filter, onChange, onTargetChange } = this.props;
+    // const { filter, onChange } = this.props;
+    const { filter } = this.props;
     const _showAutoComplete = this.isAutoComplete(filter.type);
     const _params = _showAutoComplete ? this.getParams(filter) : {};    
-    let _optionsEndpoint= '/events/search';    
+    let _optionsEndpoint= '/events/search';
 
     return (
       <React.Fragment>
-        { _showAutoComplete ? 
-          <AutoComplete            
+        { _showAutoComplete ? filter.value.map((v, i) => (
+          <AutoComplete
             name={ 'value' }
             endpoint={ _optionsEndpoint }
-            value={ filter.value }
+            value={ v }
+            index={ i }
             params={ _params }           
             optionMapping={this.optionMapping}            
-            onSelect={ onChange }
+            onSelect={ (e, { name, value }) => onChange(name, value, i) }
             headerText={ <h5 className={ stl.header }>{ getHeader(filter.type) }</h5> }
             fullWidth={ (filter.type === TYPES.CONSOLE || filter.type === TYPES.LOCATION || filter.type === TYPES.CUSTOM) && filter.value }
+            onRemoveValue={() => this.onRemoveValue(i)}
+            onAddValue={this.onAddValue}
+            showCloseButton={i !== filter.value.length - 1}
           />
+        ))
         : this.renderField()
         }
         { filter.type === 'INPUT' &&
diff --git a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js b/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
index 7c22584a9..f902235ed 100644
--- a/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
+++ b/frontend/app/components/BugFinder/AutoComplete/AutoComplete.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import APIClient from 'App/api_client';
 import cn from 'classnames';
-import { Input } from 'UI';
+import { Input, Icon } from 'UI';
 import { debounce } from 'App/utils';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import EventSearchInput from 'Shared/EventSearchInput';
 import stl from './autoComplete.css';
 import FilterItem from '../CustomFilters/FilterItem';
 
@@ -78,7 +79,7 @@ class AutoComplete extends React.PureComponent {
   })
 
 
-  onInputChange = (e, { name, value }) => {
+  onInputChange = ({ target: { value } }) => {
     changed = true;
     this.setState({ query: value, updated: true })
     const _value = value.trim();
@@ -118,23 +119,53 @@ class AutoComplete extends React.PureComponent {
       valueToText = defaultValueToText,
       placeholder = 'Type to search...',
       headerText = '',
-      fullWidth = false
+      fullWidth = false,
+      onRemoveValue = () => {},
+      onAddValue = () => {},
+      showCloseButton = false,
     } = this.props;
 
     const options = optionMapping(values, valueToText)
     
     return (
       <OutsideClickDetectingDiv 
-        className={ cn("relative", { "flex-1" : fullWidth }) } 
+        className={ cn("relative flex items-center", { "flex-1" : fullWidth }) } 
         onClickOutside={this.onClickOutside}
       >
-        <Input
+        {/* <EventSearchInput /> */}
+        <div className={stl.inputWrapper}>
+          <input
+            name="query"
+            // className={cn(stl.input)}
+            onFocus={ () => this.setState({ddOpen: true})}
+            onChange={ this.onInputChange }
+            onBlur={ this.onBlur }
+            onFocus={ () => this.setState({ddOpen: true})}
+            value={ query }
+            autoFocus={ true }
+            type="text"
+            placeholder={ placeholder }
+            onPaste={(e) => {
+              const text = e.clipboardData.getData('Text');
+              this.hiddenInput.value = text;
+              pasted = true; // to use only the hidden input
+            } }
+          />
+          <div className={stl.right} onClick={showCloseButton ? onRemoveValue : onAddValue}>
+            { showCloseButton ? <Icon name="close" size="18" /> : <span className="px-1">or</span>}
+          </div>
+        </div>
+
+        {showCloseButton && <div className='ml-2'>or</div>}
+        {/* <Input
           className={ cn(stl.searchInput, { [ stl.fullWidth] : fullWidth }) }
           onChange={ this.onInputChange }
           onBlur={ this.onBlur }
           onFocus={ () => this.setState({ddOpen: true})}
           value={ query }
-          icon="search"
+          // icon="search"
+          label={{ basic: true, content: <div>test</div> }}
+          labelPosition='right'
           loading={ loading }
           autoFocus={ true }
           type="search"
@@ -144,7 +175,7 @@ class AutoComplete extends React.PureComponent {
             this.hiddenInput.value = text;
             pasted = true; // to use only the hidden input
           } }
-        />
+        /> */}
         <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea>
         { ddOpen && options.length > 0 &&
           <div className={ stl.menu }>
diff --git a/frontend/app/components/BugFinder/AutoComplete/autoComplete.css b/frontend/app/components/BugFinder/AutoComplete/autoComplete.css
index 79439f51c..09a9a6571 100644
--- a/frontend/app/components/BugFinder/AutoComplete/autoComplete.css
+++ b/frontend/app/components/BugFinder/AutoComplete/autoComplete.css
@@ -19,6 +19,13 @@
     color: $gray-darkest !important;
     font-size: 14px !important;
     background-color: rgba(255, 255, 255, 0.8) !important;
+
+    & .label {
+      padding: 0px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
   height: 28px !important;
   width: 280px;
@@ -28,3 +35,30 @@
 .fullWidth {
   width: 100% !important;
 }
+
+.inputWrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  & input {
+    height: 28px;
+    font-size: 13px !important;
+    padding: 0 5px !important;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    background-color: $gray-lightest;
+    border-left: solid thin $gray-light !important;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js
index a71c54cf9..4af7870f2 100644
--- a/frontend/app/components/BugFinder/BugFinder.js
+++ b/frontend/app/components/BugFinder/BugFinder.js
@@ -24,8 +24,10 @@ import SessionFlowList from './SessionFlowList/SessionFlowList';
 import { LAST_7_DAYS } from 'Types/app/period';
 import { resetFunnel } from 'Duck/funnels';
 import { resetFunnelFilters } from 'Duck/funnelFilters'
-import NoSessionsMessage from '../shared/NoSessionsMessage';
-import TrackerUpdateMessage from '../shared/TrackerUpdateMessage';
+import NoSessionsMessage from 'Shared/NoSessionsMessage';
+import TrackerUpdateMessage from 'Shared/TrackerUpdateMessage';
+import SessionSearchField from 'Shared/SessionSearchField'
+import SavedSearch from 'Shared/SavedSearch'
 import LiveSessionList from './LiveSessionList'
 
 const weakEqual = (val1, val2) => {
@@ -170,8 +172,12 @@ export default class BugFinder extends React.PureComponent {
               data-hidden={ activeTab === 'live' || activeTab === 'favorite' }
               className="mb-5"
             >
+              <div className="flex items-center">
+                <div style={{ width: "70%", marginRight: "10px"}}><SessionSearchField /></div>
+                <SavedSearch />
+              </div>
               <EventFilter />
-            </div>            
+            </div>
             { activeFlow && activeFlow.type === 'flows' && <FunnelList /> }
             { activeTab.type !== 'live' && <SessionList onMenuItemClick={this.setActiveTab} /> }
             { activeTab.type === 'live' && <LiveSessionList /> }
diff --git a/frontend/app/components/BugFinder/EventFilter/EventFilter.js b/frontend/app/components/BugFinder/EventFilter/EventFilter.js
index 44fe0bf00..21467c382 100644
--- a/frontend/app/components/BugFinder/EventFilter/EventFilter.js
+++ b/frontend/app/components/BugFinder/EventFilter/EventFilter.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { Input } from 'semantic-ui-react';
 import { DNDContext } from 'Components/hocs/dnd';
 import {
-  addEvent, applyFilter, moveEvent, clearEvents,
+  addEvent, applyFilter, moveEvent, clearEvents, edit,
   addCustomFilter, addAttribute, setSearchQuery, setActiveFlow, setFilterOption
 } from 'Duck/filters';
 import { fetchList as fetchEventList } from 'Duck/events';
@@ -11,7 +11,7 @@ import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import EventEditor from './EventEditor';
 import ListHeader from '../ListHeader';
 import FilterModal from '../CustomFilters/FilterModal';
-import { IconButton } from 'UI';
+import { IconButton, SegmentSelection } from 'UI';
 import stl from './eventFilter.css';
 import Attributes from '../Attributes/Attributes';
 import RandomPlaceholder from './RandomPlaceholder';
@@ -19,6 +19,7 @@ import CustomFilters from '../CustomFilters';
 import ManageFilters from '../ManageFilters';
 import { blink as setBlink }  from 'Duck/funnels';
 import cn from 'classnames';
+import SaveFilterButton from 'Shared/SaveFilterButton';
 
 @connect(state => ({
   events: state.getIn([ 'filters', 'appliedFilter', 'events' ]),
@@ -41,7 +42,8 @@ import cn from 'classnames';
   setSearchQuery,
   setActiveFlow,
   setFilterOption,
-  setBlink
+  setBlink,
+  edit,
 })
 @DNDContext
 export default class EventFilter extends React.PureComponent {
@@ -109,6 +111,10 @@ export default class EventFilter extends React.PureComponent {
     this.props.setActiveFlow(null)
   }
 
+  changeConditionTab = (e, { name, value }) => {
+    this.props.edit({ [ 'condition' ]: value })
+  };
+
   render() {
     const {
       events,
@@ -124,34 +130,6 @@ export default class EventFilter extends React.PureComponent {
 
     return (
       <OutsideClickDetectingDiv className={ stl.wrapper } onClickOutside={ this.closeModal } >
-        { showPlacehoder && !hasFilters &&
-          <div
-            className={ stl.randomElement }
-            onClick={ this.onPlaceholderClick }
-          >
-            { !searchQuery && 
-              <div className={ stl.placeholder }>Search for users, clicks, page visits, requests, errors and more</div>
-              // <RandomPlaceholder onClick={ this.onPlaceholderItemClick } appliedFilterKeys={ appliedFilterKeys } />
-            }
-          </div>
-        }
-        <Input
-          inputProps={ { "data-openreplay-label": "Search", "autocomplete": "off" } }
-          className={stl.searchField}
-          ref={ this.inputRef }
-          onChange={ this.onSearchChange }
-          onKeyUp={this.onKeyUp}
-          value={searchQuery}
-          icon="search"
-          iconPosition="left"
-          placeholder={ hasFilters ? 'Search sessions using any captured event (click, input, page, error...)' : ''}
-          fluid
-          onFocus={ this.onFocus }
-          onBlur={ this.onBlur }
-          id="search"
-          autocomplete="off"
-        />
-
         <FilterModal
           close={ this.closeModal }
           displayed={ showFilterModal }
@@ -161,7 +139,24 @@ export default class EventFilter extends React.PureComponent {
         />
         
         { hasFilters &&
-          <div className={cn("bg-white rounded border-gray-light mt-2 relative", { 'blink-border' : blink })}>            
+            <div className={cn("bg-white rounded border-gray-light mt-2 relative", { 'blink-border' : blink })}>            
+              <div className="absolute right-0 top-0 m-3 z-10 flex items-center">
+              <div className="mr-2">Operator</div>
+              <SegmentSelection
+                primary
+                name="condition"
+                extraSmall={true}
+                // className="my-3"
+                onSelect={ this.changeConditionTab }
+                value={{ value: appliedFilter.condition }}
+                list={ [
+                  { name: 'AND', value: 'and' },
+                  { name: 'OR', value: 'or' },
+                  { name: 'THEN', value: 'then' },
+                ]}
+              />
+            </div>
+            
             { events.size > 0 &&
               <>
                 <div className="py-1"><ListHeader title="Events" /></div>
@@ -189,6 +184,7 @@ export default class EventFilter extends React.PureComponent {
                   showFilters={ true }
                 />
               </div>
+              <SaveFilterButton />
               <div className="flex items-center">
                 <div>
                   <IconButton plain label="CLEAR STEPS" onClick={ this.clearEvents } />
diff --git a/frontend/app/components/BugFinder/filterSelectionButton.css b/frontend/app/components/BugFinder/filterSelectionButton.css
index 1741e7d83..4c51cf3a4 100644
--- a/frontend/app/components/BugFinder/filterSelectionButton.css
+++ b/frontend/app/components/BugFinder/filterSelectionButton.css
@@ -10,7 +10,7 @@
   width: 150px;
   color: $gray-darkest;
   cursor: pointer;
-  background-color: rgba(255, 255, 255, 0.8) !important;
+  background-color: rgba(0, 0, 0, 0.1) !important;
   &:hover {
     background-color: white;
   }
diff --git a/frontend/app/components/Dashboard/Dashboard.js b/frontend/app/components/Dashboard/Dashboard.js
index 2e5cba630..6af004136 100644
--- a/frontend/app/components/Dashboard/Dashboard.js
+++ b/frontend/app/components/Dashboard/Dashboard.js
@@ -5,6 +5,7 @@ import withPermissions from 'HOCs/withPermissions'
 import { setPeriod, setPlatform, fetchMetadataOptions } from 'Duck/dashboard';
 import { NoContent } from 'UI';
 import { WIDGET_KEYS } from 'Types/dashboard';
+import CustomMetrics from 'Shared/CustomMetrics';
 
 import { 
   MissingResources,
@@ -184,6 +185,7 @@ export default class Dashboard extends React.PureComponent {
           <div>
             <div className={ cn(styles.header, "flex items-center w-full") }>            
               <MetricsFilters />
+              <CustomMetrics />
             </div>
             <div className="">
               <NoContent
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
new file mode 100644
index 000000000..20337cbc7
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { Form, SegmentSelection, Button } from 'UI';
+import FilterSeries from '../FilterSeries';
+import { connect } from 'react-redux';
+import { edit as editMetric, save } from 'Duck/customMetrics';
+
+interface Props {
+  metric: any;
+  editMetric: (metric) => void;
+  save: (metric) => void;
+  loading: boolean;
+}
+function CustomMetricForm(props: Props) {
+  const { metric, loading } = props;
+
+  const addSeries = () => {
+    const newSeries = {
+      name: `Series ${metric.series.size + 1}`,
+      type: '',
+      series: [],
+      filter: {
+        type: '',
+        value: '',
+      },
+    };
+    props.editMetric({
+      ...metric,
+      series: [...metric.series, newSeries],
+    });
+  }
+
+  const removeSeries = (index) => {
+    const newSeries = metric.series.filter((_series, i) => {
+      return i !== index;
+    });
+    props.editMetric({
+      ...metric,
+      series: newSeries,
+    });
+  }
+
+  const write = ({ target: { value, name } }) => props.editMetric({ ...metric.toData(), [ name ]: value })
+
+  const changeConditionTab = (e, { name, value }) => {
+    props.editMetric({ ...metric.toData(), [ 'type' ]: value })
+  };
+
+  return (
+    <Form
+      className="relative"
+      onSubmit={() => props.save(metric)}
+    >
+      <div className="p-5" style={{ height: 'calc(100vh - 60px)', overflowY: 'auto' }}>
+        <div className="form-group">
+          <label className="font-medium">Metric Title</label>
+          <input
+            autoFocus={ true }
+            className="text-lg"
+            name="name"
+            style={{ fontSize: '18px', padding: '10px', fontWeight: '600'}}
+            // value={ instance && instance.name }
+            onChange={ write }
+            placeholder="Metric Title"
+            id="name-field"
+          />
+        </div>
+
+        <div className="form-group">
+          <label className="font-medium">Metric Type</label>
+          <div className="flex items-center">
+            <span>Timeseries</span>
+            <span className="mx-2">of</span>
+            <div style={{ width: "250px"}}>
+              <SegmentSelection
+                primary
+                name="condition"
+                extraSmall={true}
+                // className="my-3"
+                onSelect={ changeConditionTab }
+                value={{ value: metric.type }}
+                list={ [
+                  { name: 'Session Count', value: 'session_count' },
+                  { name: 'Session Percentage', value: 'session_percentage' },
+                ]}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="form-group">
+          <label className="font-medium">Sereis</label>
+          {metric.series && metric.series.size > 0 && metric.series.map((series: any, index: number) => (
+            <div className="mb-2">
+              <FilterSeries
+                seriesIndex={index}
+                series={series}
+                onRemoveSeries={() => removeSeries(index)}
+              />
+            </div>
+          ))}
+        </div>
+
+        <Button onClick={addSeries}>Add Series</Button>
+      </div>
+
+      <div className="absolute w-full bottom-0 px-5 py-2 bg-white">
+        <Button loading={loading} primary>
+          Save
+        </Button>
+      </div>
+    </Form>
+  );
+}
+
+export default connect(state => ({
+  metric: state.getIn(['customMetrics', 'instance']),
+  loading: state.getIn(['customMetrics', 'saveRequest', 'loading']),
+}), { editMetric, save })(CustomMetricForm);
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts
new file mode 100644
index 000000000..e6ffb605b
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricForm';
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
new file mode 100644
index 000000000..ae7102202
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { IconButton, SlideModal } from 'UI'
+import CustomMetricForm from './CustomMetricForm';
+
+interface Props {}
+function CustomMetrics(props: Props) {
+  return (
+    <div>
+      <IconButton outline icon="plus" label="CREATE METRIC" />
+
+      <SlideModal
+        title={
+          <div className="flex items-center">
+            <span className="mr-3">{ 'Custom Metric' }</span>
+            {/* <IconButton 
+              circle
+              size="small"
+              icon="plus" 
+              outline
+              id="add-button"
+              // onClick={ () => toggleForm({}, true) }
+            /> */}
+          </div>
+        }
+        isDisplayed={ true }
+        // onClose={ () => {
+        //   toggleForm({}, false);
+        //   setShowAlerts(false);
+        // } }
+        // size="medium"
+        content={
+          <div className="bg-gray-light-shade">
+            <CustomMetricForm />
+          </div>
+        }
+      />
+    </div>
+  );
+}
+
+export default CustomMetrics;
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
new file mode 100644
index 000000000..f29301644
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import FilterList from 'Shared/Filters/FilterList';
+import { edit, updateSeries } from 'Duck/customMetrics';
+import { connect } from 'react-redux';
+import { IconButton, Button, Icon } from 'UI';
+import FilterSelection from '../../Filters/FilterSelection';
+
+interface Props {
+  seriesIndex: number;
+  series: any;
+  edit: typeof edit;
+  updateSeries: typeof updateSeries;
+  onRemoveSeries: (seriesIndex) => void;
+}
+
+function FilterSeries(props: Props) {
+  const { series, seriesIndex } = props;
+
+  const onAddFilter = (filter) => {
+    filter.value = [""]
+    const newFilters = series.filter.filters.concat(filter);
+    props.updateSeries(seriesIndex, {
+      ...series,
+      filter: {
+        ...series.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  const onUpdateFilter = (filterIndex, filter) => {
+    const newFilters = series.filter.filters.map((_filter, i) => {
+      if (i === filterIndex) {
+        return filter;
+      } else {
+        return _filter;
+      }
+    });
+
+    props.updateSeries(seriesIndex, {
+      ...series.toData(),
+      filter: {
+        ...series.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  const onRemoveFilter = (filterIndex) => {
+    const newFilters = series.filter.filters.filter((_filter, i) => {
+      return i !== filterIndex;
+    });
+
+    props.updateSeries(seriesIndex, {
+      ...series,
+      filter: {
+        ...series.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  return (
+    <div className="border rounded bg-white">
+      <div className="border-b px-5 h-12 flex items-center">
+        <span className="mr-auto">{ series.name }</span>
+        <div className="flex items-center cursor-pointer" onClick={props.onRemoveSeries}>
+          <Icon name="trash" size="16" />
+        </div>
+      </div>
+      <div className="p-5">
+        { series.filter.filters.size > 0 ? (
+          <FilterList
+            filters={series.filter.filters.toJS()}
+            onUpdateFilter={onUpdateFilter}
+            onRemoveFilter={onRemoveFilter}
+          />
+        ): (
+          <div>Add user event or filter to build the series.</div>
+        )}
+      </div>
+      <div className="px-5 border-t h-12 flex items-center">
+        <FilterSelection
+          filter={undefined}
+          onFilterClick={onAddFilter}
+        >
+          {/* <Button className="flex items-center">
+            <Icon name="plus" size="16" />
+            <span>Add Step</span>
+          </Button> */}
+          <IconButton primaryText label="ADD STEP" icon="plus" />
+        </FilterSelection>
+      </div>
+    </div>
+  );
+}
+
+export default connect(null, { edit, updateSeries })(FilterSeries);
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/index.ts b/frontend/app/components/shared/CustomMetrics/FilterSeries/index.ts
new file mode 100644
index 000000000..5882e382a
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterSeries'
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/index.ts b/frontend/app/components/shared/CustomMetrics/index.ts
new file mode 100644
index 000000000..ebbb8203c
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetrics';
\ No newline at end of file
diff --git a/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js b/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js
index 176ae2c4a..daee15cc3 100644
--- a/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js
+++ b/frontend/app/components/shared/EventFilter/Attributes/AttributeValueField.js
@@ -137,12 +137,13 @@ class AttributeValueField extends React.PureComponent {
     const { filter, onChange } = this.props;
     const _showAutoComplete = this.isAutoComplete(filter.type);
     const _params = _showAutoComplete ? this.getParams(filter) : {};    
-    let _optionsEndpoint= '/events/search';    
+    let _optionsEndpoint= '/events/search';
+    console.log('value', filter.value)
 
     return (
       <React.Fragment>
         { _showAutoComplete ? 
-          <AutoComplete            
+          <AutoComplete
             name={ 'value' }
             endpoint={ _optionsEndpoint }
             value={ filter.value }
@@ -151,6 +152,7 @@ class AttributeValueField extends React.PureComponent {
             onSelect={ onChange }
             headerText={ <h5 className={ stl.header }>{ getHeader(filter.type) }</h5> }
             fullWidth={ (filter.type === TYPES.CONSOLE || filter.type === TYPES.LOCATION || filter.type === TYPES.CUSTOM) && filter.value }
+            // onAddOrRemove={}
           />
         : this.renderField()
         }
diff --git a/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js b/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js
index 922b7f650..e075b17bd 100644
--- a/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js
+++ b/frontend/app/components/shared/EventFilter/AutoComplete/AutoComplete.js
@@ -77,7 +77,7 @@ class AutoComplete extends React.PureComponent {
     noResultsMessage: SOME_ERROR_MSG,
   })
 
-  onInputChange = (e, { name, value }) => {    
+  onInputChange = ({ target: { value } }) => {    
     changed = true;
     this.setState({ query: value, updated: true })
     const _value = value.trim();
@@ -118,7 +118,8 @@ class AutoComplete extends React.PureComponent {
       valueToText = defaultValueToText,
       placeholder = 'Type to search...',
       headerText = '',
-      fullWidth = false
+      fullWidth = false,
+      onAddOrRemove = () => null,
     } = this.props;
 
     const options = optionMapping(values, valueToText)
@@ -128,7 +129,7 @@ class AutoComplete extends React.PureComponent {
         className={ cn("relative", { "flex-1" : fullWidth }) } 
         onClickOutside={this.onClickOutside}
       >
-        <Input
+        {/* <Input
           className={ cn(stl.searchInput, { [ stl.fullWidth] : fullWidth }) }
           onChange={ this.onInputChange }
           onBlur={ this.onBlur }
@@ -144,7 +145,30 @@ class AutoComplete extends React.PureComponent {
             this.hiddenInput.value = text;
             pasted = true; // to use only the hidden input
           } }
-        />
+        /> */}
+        <div className={stl.inputWrapper}>
+          <input
+            name="query"
+            // className={cn(stl.input)}
+            onFocus={ () => this.setState({ddOpen: true})}
+            onChange={ this.onInputChange }
+            onBlur={ this.onBlur }
+            onFocus={ () => this.setState({ddOpen: true})}
+            value={ query }
+            autoFocus={ true }
+            type="text"
+            placeholder={ placeholder }
+            onPaste={(e) => {
+              const text = e.clipboardData.getData('Text');
+              this.hiddenInput.value = text;
+              pasted = true; // to use only the hidden input
+            } }
+          />
+          <div className={cn(stl.right, 'cursor-pointer')} onLick={onAddOrRemove}>
+            {/* <Icon name="close" size="18" /> */}
+            <span className="px-1">or</span>
+          </div>
+        </div>
         <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea>
         { ddOpen && options.length > 0 &&
           <div className={ stl.menu }>
diff --git a/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css b/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css
index c2c827bfe..b72653c42 100644
--- a/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css
+++ b/frontend/app/components/shared/EventFilter/AutoComplete/autoComplete.css
@@ -28,3 +28,30 @@
 .fullWidth {
   width: 100% !important;
 }
+
+.inputWrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  & input {
+    height: 28px;
+    font-size: 13px !important;
+    padding: 0 5px !important;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    background-color: $gray-lightest;
+    border-left: solid thin $gray-light !important;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/EventSearchInput/EventSearchInput.tsx b/frontend/app/components/shared/EventSearchInput/EventSearchInput.tsx
new file mode 100644
index 000000000..0a7752ccd
--- /dev/null
+++ b/frontend/app/components/shared/EventSearchInput/EventSearchInput.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface Props {
+  
+}
+function EventSearchInput(props) {
+  return (
+    <div>
+      <input
+        className="border rounded p-1"
+        type="text" placeholder="Search for an event"
+      />
+    </div>
+  );
+}
+
+export default EventSearchInput;
\ No newline at end of file
diff --git a/frontend/app/components/shared/EventSearchInput/index.ts b/frontend/app/components/shared/EventSearchInput/index.ts
new file mode 100644
index 000000000..2e4e57078
--- /dev/null
+++ b/frontend/app/components/shared/EventSearchInput/index.ts
@@ -0,0 +1 @@
+export { default } from './EventSearchInput';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
new file mode 100644
index 000000000..ba7359239
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
@@ -0,0 +1,62 @@
+.wrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  & input {
+    height: 28px;
+    font-size: 13px !important;
+    padding: 0 5px !important;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border: solid thin transparent !important;
+  }
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    background-color: $gray-lightest;
+    border-left: solid thin $gray-light !important;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    cursor: pointer;
+  }
+}
+
+.menu {
+  border-radius: 0 0 3px 3px;
+  box-shadow: 0 2px 10px 0 $gray-light;
+  padding: 20px;
+  background-color: white;
+  max-height: 350px;
+  overflow-y: auto;
+  position: absolute;
+  top: 28px;
+  left: 0;  
+  width: 500px;
+  z-index: 99;
+}
+
+.filterItem {
+	display: flex;
+	align-items: center;
+	padding: 8px;
+	cursor: pointer;
+	border-radius: 3px;
+	transition: all 0.4s;
+	margin-bottom: 5px;
+	max-width: 100%;	
+	& .label {		
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:hover {
+		background-color: $gray-lightest;
+		transition: all 0.2s;
+	}
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
new file mode 100644
index 000000000..068b255f7
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { Icon, Loader } from 'UI';
+import APIClient from 'App/api_client';
+import { debounce } from 'App/utils';
+import stl from './FilterAutoComplete.css';
+import cn from 'classnames';
+
+const hiddenStyle = { 
+  whiteSpace: 'pre-wrap',
+  opacity: 0, position: 'fixed', left: '-3000px'
+};
+
+interface Props {
+  showOrButton?: boolean;
+  onRemoveValue?: () => void;
+  onAddValue?: () => void;
+  endpoint?: string;
+  method?: string;
+  params?: any;
+  headerText?: string;
+  placeholder?: string;
+  onSelect: (e, item) => void;
+  value: any;
+}
+
+function FilterAutoComplete(props: Props) {
+  const {
+      placeholder = 'Type to search',
+      method = 'GET',
+      showOrButton = false,
+      onRemoveValue = () => null,
+      onAddValue = () => null,
+      endpoint = '',
+      params = {},
+      headerText = '',
+      value = '',
+  } = props;
+  const [showModal, setShowModal] = useState(true)
+  const [loading, setLoading] = useState(false)
+  const [options, setOptions] = useState<any>([]);
+  const [query, setQuery] = useState(value);
+  
+
+  const requestValues = (q) => {
+    // const { params, method } = props;
+    setLoading(true);
+
+    return new APIClient()[method?.toLowerCase()](endpoint, { ...params, q })
+    .then(response => response.json())
+    .then(({ errors, data }) => {
+      if (errors) {
+        // this.setError();
+      } else {
+        setOptions(data);
+        // this.setState({
+        //   ddOpen: true,
+        //   values: data,
+        //   loading: false,
+        //   noResultsMessage: NO_RESULTS_MSG,
+        // });
+      }
+    }).finally(() => setLoading(false));
+    // .catch(this.setError);
+  }
+
+  const debouncedRequestValues = debounce(requestValues, 1000)
+
+  const onInputChange = ({ target: { value } }) => {
+    setQuery(value);
+  }
+
+  useEffect(() => {
+    if (query === '' || query === ' ') {
+      return 
+    }
+
+    debouncedRequestValues(query)
+  }, [query])
+
+  const onItemClick = (e, item) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // const { onSelect, name } = this.props;
+
+    
+    if (query !== item.value) {
+      setQuery(item.value); 
+    }
+    // this.setState({ query: item.value, ddOpen: false})
+    props.onSelect(e, item);
+    // setTimeout(() => {
+    //   setShowModal(false)
+    // }, 10)
+  }
+
+  return (
+    <div className="relative">
+      <div className={stl.wrapper}>
+        <input
+          name="query"
+          onChange={ onInputChange }
+          onBlur={ () => setTimeout(() => { setShowModal(false) }, 10) }
+          onFocus={ () => setShowModal(true)}
+          value={ query }
+          autoFocus={ true }
+          type="text"
+          placeholder={ placeholder }
+          // onPaste={(e) => {
+          //   const text = e.clipboardData.getData('Text');
+          //   // this.hiddenInput.value = text;
+          //   // pasted = true; // to use only the hidden input
+          // } }
+        />
+        <div
+          className={stl.right}
+          // onClick={showOrButton ? onRemoveValue : onAddValue}
+        >
+          { !showOrButton && <Icon onClick={onRemoveValue} name="close" size="18" /> }
+          { showOrButton && <span onClick={onAddValue} className="px-1">or</span>}
+        </div>
+      </div>
+
+      {/* <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea> */}
+
+      { showModal && (options.length > 0 || loading) &&
+        <div className={ stl.menu }>
+          { headerText && headerText }
+          <Loader loading={loading} size="small">
+            {
+              options.map(item => (
+                <div
+                  className={ cn(stl.filterItem) }
+                  id="filter-item" onClick={ (e) => onItemClick(e, item) }
+                >
+                  { item.icon && <Icon name={ item.icon } size="16" marginRight="8" /> }
+                  <span className={ stl.label }>{ item.value }</span>
+                </div>             
+              ))
+            }
+          </Loader>
+        </div>
+      }
+    </div>
+  );
+}
+
+export default FilterAutoComplete;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/index.ts b/frontend/app/components/shared/Filters/FilterAutoComplete/index.ts
new file mode 100644
index 000000000..8540e6f40
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterAutoComplete';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
new file mode 100644
index 000000000..66aa08ff3
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import FilterOperator from '../FilterOperator/FilterOperator';
+import FilterSelection from '../FilterSelection';
+import FilterValue from '../FilterValue';
+import { Icon } from 'UI';
+
+interface Props {
+  filterIndex: number;
+  filter: any; // event/filter
+  onUpdate: (filter) => void;
+  onRemoveFilter: () => void;
+}
+function FitlerItem(props: Props) {
+  const { filterIndex, filter, onUpdate } = props;
+
+  const replaceFilter = (filter) => {
+    onUpdate(filter);
+  };
+
+  const onAddValue = () => {
+    const newValues = filter.value.concat("")
+    onUpdate({ ...filter, value: newValues })
+  }
+
+  const onRemoveValue = (valueIndex) => {
+    const newValues = filter.value.filter((_, _index) => _index !== valueIndex)
+    onUpdate({ ...filter, value: newValues })
+  }
+
+  const onSelect = (e, item, valueIndex) => {
+    const newValues = filter.value.map((_, _index) => {
+      if (_index === valueIndex) {
+        return item.value;
+      }
+      return _;
+    })
+    onUpdate({ ...filter, value: newValues })
+  }
+
+  console.log('filter', filter);
+
+  const onOperatorChange = (e, { name, value }) => {
+    onUpdate({ ...filter, operator: value })
+  }
+
+  return (
+    <div className="flex items-center mb-3">
+      <div className="flex items-start mr-auto">
+        <div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div>
+        <FilterSelection filter={filter} onFilterClick={replaceFilter} />
+        <FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2"/>
+        <div className="grid grid-cols-3 gap-3">
+          {filter.value && filter.value.map((value, valueIndex) => (
+            <FilterValue
+              showOrButton={valueIndex === filter.value.length - 1}
+              key={valueIndex}
+              value={value}
+              index={valueIndex}
+              onAddValue={onAddValue}
+              onRemoveValue={() => onRemoveValue(valueIndex)}
+              onSelect={(e, item) => onSelect(e, valueIndex, item)}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex">
+        <div
+          className="cursor-pointer"
+          onClick={props.onRemoveFilter}
+        > 
+          <Icon name="close" size="18" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FitlerItem;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterItem/index.ts b/frontend/app/components/shared/Filters/FilterItem/index.ts
new file mode 100644
index 000000000..b09a3e2f1
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterItem/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterItem';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
new file mode 100644
index 000000000..d2e20cff6
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -0,0 +1,34 @@
+import React, { useState} from 'react';
+import FilterItem from '../FilterItem';
+
+interface Props {
+  filters: any[]; // event/filter
+  onUpdateFilter: (filterIndex, filter) => void;
+  onRemoveFilter: (filterIndex) => void;
+}
+function FilterList(props: Props) {
+  const { filters } = props;
+
+  const onRemoveFilter = (filterIndex) => {
+    const newFilters = filters.filter((_filter, i) => {
+      return i !== filterIndex;
+    });
+
+    props.onRemoveFilter(filterIndex);
+  }
+
+  return (
+    <div className="flex flex-col">
+      {filters.map((filter, filterIndex) => (
+        <FilterItem
+          filterIndex={filterIndex}
+          filter={filter}
+          onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+          onRemoveFilter={() => onRemoveFilter(filterIndex) }
+        />
+      ))}
+    </div>
+  );
+}
+
+export default FilterList;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterList/index.ts b/frontend/app/components/shared/Filters/FilterList/index.ts
new file mode 100644
index 000000000..ecf0adf70
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterList/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterList';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
new file mode 100644
index 000000000..4a16b6511
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Icon } from 'UI';
+import { connect } from 'react-redux';
+
+interface Props {
+  filters: any,
+  onFilterClick?: (filter) => void
+}
+function FilterModal(props: Props) {
+  const { filters, onFilterClick = () => null } = props;
+  return (
+    <div className="border p-3" style={{ width: '560px', height: '400px', overflowY: 'auto'}}>
+      <div className="grid grid-flow-row-dense grid-cols-2">
+        {filters && Object.keys(filters).map((key) => (
+          <div className="p-3">
+            <div className="uppercase font-medium mb-1">{key}</div>
+            <div>
+              {filters[key].map((filter: any) => (
+                <div className="flex items-center py-2 cursor-pointer" onClick={() => onFilterClick(filter)}>
+                  <Icon name={filter.icon} size="16"/>
+                  <span className="ml-2">{filter.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default connect(state => ({
+  filters: state.getIn([ 'filters', 'filterList' ])
+}))(FilterModal);
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterModal/index.ts b/frontend/app/components/shared/Filters/FilterModal/index.ts
new file mode 100644
index 000000000..a8ab8d552
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterModal/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterModal';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.css b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.css
new file mode 100644
index 000000000..8a2329dbd
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.css
@@ -0,0 +1,19 @@
+.operatorDropdown {
+  font-weight: 400;
+  height: 30px;
+  min-width: 60px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px !important;
+  font-size: 13px;
+  /* background-color: rgba(255, 255, 255, 0.8) !important; */
+  background-color: $gray-lightest !important;
+  border: solid thin rgba(34, 36, 38, 0.15) !important;
+  border-radius: 4px !important;
+  color: $gray-darkest !important;
+  font-size: 14px !important;
+  &.ui.basic.button {
+    box-shadow: 0 0 0 1px rgba(62, 170, 175,36,38,.35) inset, 0 0 0 0 rgba(62, 170, 175,.15) inset !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
new file mode 100644
index 000000000..8cb6d6bf0
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'classnames';
+import { Dropdown, Icon } from 'UI';
+import stl from './FilterOperator.css';
+
+interface Props {
+  filter: any; // event/filter
+  // options: any[];
+  // value: string;
+  onChange: (e, { name, value }) => void;
+  className?: string;
+}
+function FilterOperator(props: Props) {
+  const { filter, onChange, className = '' } = props;
+  const options = []
+
+  return (
+    <Dropdown
+      className={ cn(stl.operatorDropdown, className) }      
+      options={ filter.operatorOptions }
+      name="operator"
+      value={ filter.operator }
+      onChange={ onChange }
+      icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
+    />
+  );
+}
+
+export default FilterOperator;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
new file mode 100644
index 000000000..e899f6566
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import FilterModal from '../FilterModal';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import { Icon } from 'UI';
+
+interface Props {
+  filter: any; // event/filter
+  onFilterClick: (filter) => void;
+  children?: any;
+}
+function FilterSelection(props: Props) {
+  const { filter, onFilterClick, children } = props;
+  const [showModal, setShowModal] = useState(false)
+  return (
+    <div>
+      <OutsideClickDetectingDiv
+        className="relative"
+        onClickOutside={ () => setTimeout(function() {
+          setShowModal(false)
+        }, 20)}
+      >
+        { children ? React.cloneElement(children, { onClick: () => setShowModal(true)}) : (
+          <div
+            className="rounded border py-1 px-3 flex items-center cursor-pointer bg-gray-lightest text-ellipsis"
+            style={{ width: '140px', height: '30px'}}
+            onClick={() => setShowModal(true)}
+          >
+            <span className="mr-auto truncate">{filter.label}</span>
+            <Icon name="chevron-down" size="14" />
+          </div>
+        ) }
+      </OutsideClickDetectingDiv>
+      {showModal && (
+        <div className="absolute left-0 top-20 border shadow rounded bg-white z-50">
+          <FilterModal onFilterClick={onFilterClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default FilterSelection;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterSelection/index.ts b/frontend/app/components/shared/Filters/FilterSelection/index.ts
new file mode 100644
index 000000000..8c9764781
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterSelection/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterSelection';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
new file mode 100644
index 000000000..65e123ba4
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import FilterAutoComplete from '../FilterAutoComplete';
+
+interface Props {
+  index: number;
+  value: any; // event/filter
+  onRemoveValue?: () => void;
+  onAddValue?: () => void;
+  showOrButton: boolean;
+  onSelect: (e, item) => void;
+}
+function FilterValue(props: Props) {
+  const { index, value, showOrButton, onRemoveValue , onAddValue } = props;
+
+  return (
+    <FilterAutoComplete
+      value={value}
+      showOrButton={showOrButton}
+      onAddValue={onAddValue}
+      onRemoveValue={onRemoveValue}
+      method={'GET'}
+      endpoint='/events/search'
+      params={undefined}
+      headerText={''}
+      placeholder={''}
+      onSelect={props.onSelect}
+    />
+  );
+}
+
+export default FilterValue;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValue/index.ts b/frontend/app/components/shared/Filters/FilterValue/index.ts
new file mode 100644
index 000000000..a4e4a517e
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValue/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterValue';
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
new file mode 100644
index 000000000..82be6101a
--- /dev/null
+++ b/frontend/app/components/shared/SaveFilterButton/SaveFilterButton.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { save } from 'Duck/filters';
+import { Button } from 'UI';
+import SaveSearchModal from 'Shared/SaveSearchModal'
+
+interface Props {
+  filter: any;
+}
+
+function SaveFilterButton(props) {
+  const [showModal, setshowModal] = useState(false)
+  return (
+    <div>
+      <Button onClick={() => setshowModal(true)}>SAVE FILTER</Button>
+      <SaveSearchModal
+        show={showModal}
+        closeHandler={() => setshowModal(false)}
+      />
+    </div>
+  );
+}
+
+export default connect(state => ({
+  filter: state.getIn([ 'filters', 'appliedFilter' ]),
+}), { save })(SaveFilterButton);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveFilterButton/index.ts b/frontend/app/components/shared/SaveFilterButton/index.ts
new file mode 100644
index 000000000..9f22c4ecb
--- /dev/null
+++ b/frontend/app/components/shared/SaveFilterButton/index.ts
@@ -0,0 +1 @@
+export { default } from './SaveFilterButton'
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
new file mode 100644
index 000000000..e609440c2
--- /dev/null
+++ b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { edit, save } from 'Duck/filters';
+import { Button, Modal, Form, Icon, Checkbox } from 'UI';
+import stl from './SaveSearchModal.css';
+
+interface Props {
+  filter: any;
+  loading: boolean;
+  edit: (filter: any) => void;
+  save: (filter: any) => Promise<void>;
+  show: boolean;
+  closeHandler: () => void;
+}
+function SaveSearchModal(props: Props) {
+  const { filter, loading, show, closeHandler } = props;
+  
+  const onNameChange = ({ target: { value } }) => {
+    props.edit({ name: value });
+  };
+
+  const onSave = () => {
+    const { filter, closeHandler } = props;
+    if (filter.name.trim() === '') return;
+    props.save(filter).then(function() {
+      // this.props.fetchFunnelsList();
+      closeHandler();
+    });
+  }
+  console.log('filter', filter);
+  return (
+    <Modal size="tiny" open={ show }>
+      <Modal.Header className={ stl.modalHeader }>
+        <div>{ 'Save Search' }</div>
+        <Icon 
+          role="button"
+          tabIndex="-1"
+          color="gray-dark"
+          size="18"
+          name="close"
+          onClick={ closeHandler }
+        />
+      </Modal.Header>
+
+      <Modal.Content>
+        <Form onSubmit={onSave}>
+          <Form.Field>
+            <label>{'Title:'}</label>
+            <input
+              autoFocus={ true }
+              // className={ stl.name }
+              name="name"
+              value={ filter.name }
+              onChange={ onNameChange }
+              placeholder="Title"
+            />
+          </Form.Field>
+        </Form>
+      </Modal.Content>
+      <Modal.Actions className="">
+        <Button
+          primary
+          onClick={ onSave }
+          loading={ loading }
+        >
+          { filter.exists() ? 'Modify' : 'Save' }
+        </Button>
+        <Button className={ stl.cancelButton } marginRight onClick={ closeHandler }>{ 'Cancel' }</Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+export default connect(state => ({
+  filter: state.getIn(['filters', 'instance']),
+  loading: state.getIn([ 'filters', 'saveRequest', 'loading' ]) || 
+    state.getIn([ 'filters', 'updateRequest', 'loading' ]),
+}), { edit, save })(SaveSearchModal);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveSearchModal/index.ts b/frontend/app/components/shared/SaveSearchModal/index.ts
new file mode 100644
index 000000000..6c5515e82
--- /dev/null
+++ b/frontend/app/components/shared/SaveSearchModal/index.ts
@@ -0,0 +1 @@
+export { default } from './SaveSearchModal'
\ No newline at end of file
diff --git a/frontend/app/components/shared/SaveSearchModal/saveSearchModal.css b/frontend/app/components/shared/SaveSearchModal/saveSearchModal.css
new file mode 100644
index 000000000..ed2600745
--- /dev/null
+++ b/frontend/app/components/shared/SaveSearchModal/saveSearchModal.css
@@ -0,0 +1,15 @@
+@import 'mixins.css';
+
+.modalHeader {
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.cancelButton {
+    @mixin plainButton;
+}
+
+.applyButton {
+    @mixin basicButton;
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/SavedSearch.tsx b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
new file mode 100644
index 000000000..170e90004
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/SavedSearch.tsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Icon } from 'UI';
+import SavedSearchDropdown from './components/SavedSearchDropdown';
+import { connect } from 'react-redux';
+import { fetchList as fetchListSavedSearch } from 'Duck/filters';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+
+interface Props {
+  fetchListSavedSearch: () => void;
+  list: any;
+}
+function SavedSearch(props) {
+  const [showMenu, setShowMenu] = useState(false)
+
+  useEffect(() => {
+    props.fetchListSavedSearch()
+  }, [])
+
+  return (
+    <OutsideClickDetectingDiv 
+      // className={ cn("relative", { "flex-1" : fullWidth }) } 
+      onClickOutside={() => setShowMenu(false)}
+    >
+      <div className="relative">
+        <Button prime outline size="small"
+          className="flex items-center"
+          onClick={() => setShowMenu(true)}
+        >
+          <span className="mr-2">Search Saved</span>
+          <Icon name="ellipsis-v" color="teal" size="14" />
+        </Button>
+        { showMenu && (
+          <div
+            className="absolute right-0 bg-white border rounded z-50"
+            style={{ top: '33px', width: '200px' }}
+          >
+            <SavedSearchDropdown list={props.list}/>
+          </div>
+        )}
+      </div>
+    </OutsideClickDetectingDiv>
+  );
+}
+
+export default connect(state => ({
+  list: state.getIn([ 'filters', 'list' ]),
+}), { fetchListSavedSearch })(SavedSearch);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.css b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.css
new file mode 100644
index 000000000..96609ccae
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.css
@@ -0,0 +1,7 @@
+.wrapper {
+  position: relative;
+  display: inline-block;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
new file mode 100644
index 000000000..92746e78d
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/SavedSearchDropdown.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import stl from './SavedSearchDropdown.css';
+
+interface Props {
+  list: Array<any>
+}
+
+function Row ({ name }) {
+  return (
+    <div className="p-2 cursor-pointer hover:bg-gray-lightest">{name}</div>
+  )
+}
+
+function SavedSearchDropdown(props: Props) {
+  return (
+    <div className={stl.wrapper}>
+      {props.list.map(item => (
+        <Row key={item.searchId} name={item.name} />
+      ))}
+    </div>
+  );
+}
+
+export default SavedSearchDropdown;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/index.ts b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/index.ts
new file mode 100644
index 000000000..2fea67949
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/components/SavedSearchDropdown/index.ts
@@ -0,0 +1 @@
+export { default } from './SavedSearchDropdown';
\ No newline at end of file
diff --git a/frontend/app/components/shared/SavedSearch/index.ts b/frontend/app/components/shared/SavedSearch/index.ts
new file mode 100644
index 000000000..71c14305d
--- /dev/null
+++ b/frontend/app/components/shared/SavedSearch/index.ts
@@ -0,0 +1 @@
+export { default } from './SavedSearch'
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.css b/frontend/app/components/shared/SessionSearchField/SessionSearchField.css
new file mode 100644
index 000000000..6a3a268ba
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.css
@@ -0,0 +1,10 @@
+.searchField {
+  box-shadow: none !important;
+  & input {
+    box-shadow: none !important;
+    border-radius: 3 !important;
+    border: solid thin $gray-light !important;    
+    height: 34px !important;
+    font-size: 16px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
new file mode 100644
index 000000000..76aac5240
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx
@@ -0,0 +1,69 @@
+import React, { useRef, useState } from 'react';
+import { connect } from 'react-redux';
+import stl from './SessionSearchField.css';
+import { Input } from 'UI';
+import FilterModal from 'Shared/EventFilter/FilterModal';
+import { fetchList as fetchEventList } from 'Duck/events';
+import { debounce } from 'App/utils';
+import {
+  addEvent, applyFilter, moveEvent, clearEvents,
+  addCustomFilter, addAttribute, setSearchQuery, setActiveFlow, setFilterOption
+} from 'Duck/filters';
+
+interface Props {
+  setSearchQuery: (query: string) => void;
+  fetchEventList: (query: any) => void;
+  searchQuery: string
+}
+function SessionSearchField(props: Props) {
+  const debounceFetchEventList = debounce(props.fetchEventList, 1000)
+  const [showModal, setShowModal] = useState(false)
+
+  const onSearchChange = (e, { value }) => {
+    // props.setSearchQuery(value)
+    debounceFetchEventList({ q: value });
+  }
+
+  return (
+    <div className="relative">
+      <Input
+        inputProps={ { "data-openreplay-label": "Search", "autocomplete": "off" } }
+        className={stl.searchField}
+        onFocus={ () => setShowModal(true) }
+        onBlur={ () => setTimeout(setShowModal, 100, false) }
+        // ref={ this.inputRef }
+        onChange={ onSearchChange }
+        // onKeyUp={this.onKeyUp}
+        // value={props.searchQuery}
+        icon="search"
+        iconPosition="left"
+        placeholder={ 'Search sessions using any captured event (click, input, page, error...)'}
+        fluid
+        id="search"
+        type="search"
+        autocomplete="off"
+      />
+
+      <FilterModal
+        close={ () => setShowModal(false) }
+        displayed={ showModal }
+        // displayed={ true }
+        // loading={ loading }
+        // searchedEvents={ searchedEvents }
+        searchQuery={ props.searchQuery }
+      />
+    </div>
+  );
+}
+
+export default connect(state => ({
+  events: state.getIn([ 'filters', 'appliedFilter', 'events' ]),
+  appliedFilter: state.getIn([ 'filters', 'appliedFilter' ]),
+  searchQuery: state.getIn([ 'filters', 'searchQuery' ]),
+  appliedFilterKeys: state.getIn([ 'filters', 'appliedFilter', 'filters' ])
+    .map(({type}) => type).toJS(),
+  searchedEvents: state.getIn([ 'events', 'list' ]),
+  loading: state.getIn([ 'events', 'loading' ]),
+  strict: state.getIn([ 'filters', 'appliedFilter', 'strict' ]),
+  blink: state.getIn([ 'funnels', 'blink' ]),
+}), { setSearchQuery, fetchEventList })(SessionSearchField);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearchField/index.ts b/frontend/app/components/shared/SessionSearchField/index.ts
new file mode 100644
index 000000000..1f99e0c0b
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearchField/index.ts
@@ -0,0 +1 @@
+export { default } from './SessionSearchField';
\ No newline at end of file
diff --git a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
index c4d71a93a..d1d3ae6df 100644
--- a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
+++ b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
@@ -9,12 +9,13 @@ class SegmentSelection extends React.Component {
   }
 
   render() {
-    const { className, list, primary = false, size = "normal" } = this.props;
+    const { className, list, small = false, extraSmall = false, primary = false, size = "normal" } = this.props;
 
     return (
       <div className={ cn(styles.wrapper, { 
           [styles.primary] : primary,
-          [styles.small]  : size === 'small'
+          [styles.small]  : size === 'small' || small,
+          [styles.extraSmall]  : extraSmall,
         }, className) }
       >
         { list.map(item => (
diff --git a/frontend/app/components/ui/SegmentSelection/segmentSelection.css b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
index 543016246..a74d7d77b 100644
--- a/frontend/app/components/ui/SegmentSelection/segmentSelection.css
+++ b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
@@ -61,4 +61,9 @@
 
 .small .item {
   padding: 4px 8px;
+}
+
+.extraSmall .item {
+  padding: 2px 4px;
+  font-size: 12px;
 }
\ No newline at end of file
diff --git a/frontend/app/duck/customMetrics.js b/frontend/app/duck/customMetrics.js
new file mode 100644
index 000000000..0909ff3b1
--- /dev/null
+++ b/frontend/app/duck/customMetrics.js
@@ -0,0 +1,105 @@
+import { List, Map } from 'immutable'; 
+import { clean as cleanParams } from 'App/api_client';
+import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED } from 'Types/errorInfo';
+import CustomMetric, { FilterSeries } from 'Types/customMetric'
+import { createFetch, fetchListType, fetchType, saveType, editType, createEdit } from './funcTools/crud';
+// import { createEdit, createInit } from './funcTools/crud';
+import { createRequestReducer, ROOT_KEY } from './funcTools/request';
+import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
+import Filter from 'Types/filter';
+import NewFilter from 'Types/filter/newFilter';
+import Event from 'Types/filter/event';
+// import CustomFilter from 'Types/filter/customFilter';
+
+const name = "custom_metric";
+const idKey = "metricId";
+
+const FETCH_LIST = fetchListType(name);
+const FETCH = fetchType(name);
+const SAVE = saveType(name);
+const EDIT = editType(name);
+const UPDATE_SERIES = `${name}/UPDATE_SERIES`;
+
+function chartWrapper(chart = []) {
+  return chart.map(point => ({ ...point, count: Math.max(point.count, 0) }));
+}
+
+// const updateItemInList = createListUpdater(idKey);
+// const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
+// 	? state.mergeIn([ "instance" ], instance)
+// 	: state;
+
+const initialState = Map({
+	list: List(),
+	instance: CustomMetric({
+    name: 'New',
+    series: List([
+      {
+        name: 'Session Count',
+        filter: new Filter({ filters: [] }),
+      },
+    ])
+  }),
+});
+
+// Metric - Series - [] - filters
+function reducer(state = initialState, action = {}) {
+	switch (action.type) {
+    case EDIT:
+      return state.mergeIn([ 'instance' ], CustomMetric(action.instance));
+    case UPDATE_SERIES:
+      return state.setIn(['instance', 'series', action.index], FilterSeries(action.series));
+    case success(SAVE):
+      return state.set([ 'instance' ], CustomMetric(action.data));
+		case success(FETCH):
+			return state.set("instance", ErrorInfo(action.data)); 
+		case success(FETCH_LIST):
+			const { data } = action;
+			return state
+				.set("totalCount", data ? data.total : 0)
+				.set("list", List(data && data.errors).map(CustomMetric)
+					.filter(e => e.parentErrorId == null)
+					.map(e => e.update("chart", chartWrapper)));
+	}
+	return state;
+}
+
+export default mergeReducers(
+	reducer,
+	createRequestReducer({
+		[ ROOT_KEY ]: FETCH_LIST,
+		fetch: FETCH,
+	}),
+);
+
+export const edit = createEdit(name);
+
+export const updateSeries = (index, series) => ({
+  type: UPDATE_SERIES,
+  index,
+  series,
+});
+
+export function fetch(id) {
+	return {
+		id,
+		types: array(FETCH),
+		call: c => c.get(`/errors/${id}`),
+	}
+}
+
+export function save(instance) {
+  return {
+    types: SAVE.array,
+    call: client => client.post( `/${ name }s`, instance.toData()),
+  };
+}
+
+export function fetchList(params = {}, clear = false) {
+  return {
+    types: array(FETCH_LIST),
+    call: client => client.post('/errors/search', params),
+    clear,
+    params: cleanParams(params),
+  };
+}
\ No newline at end of file
diff --git a/frontend/app/duck/filters.js b/frontend/app/duck/filters.js
index a06a0b6bc..290a4f1cb 100644
--- a/frontend/app/duck/filters.js
+++ b/frontend/app/duck/filters.js
@@ -7,8 +7,33 @@ import CustomFilter, { KEYS } from 'Types/filter/customFilter';
 import withRequestState, { RequestTypes } from './requestStateCreator';
 import { fetchList as fetchSessionList } from './sessions';
 import { fetchList as fetchErrorsList } from './errors';
+import { fetchListType, fetchType, saveType, editType, initType, removeType } from './funcTools/crud/types';
 import logger from 'App/logger';
 
+import { newFiltersList } from 'Types/filter'
+import NewFilter, { filtersMap } from 'Types/filter/newFilter';
+
+const filterOptions = {}
+// newFiltersList.forEach(filter => {
+//   filterOptions[filter.category] = filter
+// })
+
+Object.keys(filtersMap).forEach(key => {
+  const filter = filtersMap[key];
+  if (filterOptions.hasOwnProperty(filter.category)) {
+    filterOptions[filter.category].push(filter);
+  } else {
+    filterOptions[filter.category] = [filter];
+  }
+})
+
+console.log('filterOptions', filterOptions)
+   
+
+// for (var i = 0; i < newFiltersList.length; i++) {
+//   filterOptions[newFiltersList[i].category] = newFiltersList.filter(filter => filter.category === newFiltersList[i].category)
+// }
+
 const ERRORS_ROUTE = errorsRoute();
 
 const FETCH_LIST = new RequestTypes('filters/FETCH_LIST');
@@ -16,6 +41,7 @@ const FETCH_FILTER_OPTIONS = new RequestTypes('filters/FETCH_FILTER_OPTIONS');
 const SET_FILTER_OPTIONS = 'filters/SET_FILTER_OPTIONS';
 const SAVE = new RequestTypes('filters/SAVE');
 const REMOVE = new RequestTypes('filters/REMOVE');
+const EDIT = editType('funnel/EDIT');
 
 const SET_SEARCH_QUERY = 'filters/SET_SEARCH_QUERY';
 const SET_ACTIVE = 'filters/SET_ACTIVE';
@@ -35,7 +61,11 @@ const EDIT_ATTRIBUTE = 'filters/EDIT_ATTRIBUTE';
 const REMOVE_ATTRIBUTE = 'filters/REMOVE_ATTRIBUTE';
 const SET_ACTIVE_FLOW = 'filters/SET_ACTIVE_FLOW';
 
+const UPDATE_VALUE = 'filters/UPDATE_VALUE';
+
 const initialState = Map({
+  filterList: filterOptions,
+  instance: Filter(),
   activeFilter: null,
   list: List(),
   appliedFilter: Filter(),
@@ -71,6 +101,8 @@ const updateList = (state, instance) => state.update('list', (list) => {
 const reducer = (state = initialState, action = {}) => {
   let optionsMap = null;
   switch (action.type) {
+    case EDIT:
+      return state.mergeIn([ 'appliedFilter' ], action.instance);
     case FETCH_FILTER_OPTIONS.SUCCESS:
       optionsMap = state.getIn(['filterOptions', action.key]).map(i => i.value).toJS();
       return state.mergeIn(['filterOptions', action.key], Set(action.data.filter(i => !optionsMap.includes(i.value))));
@@ -177,6 +209,8 @@ const reducer = (state = initialState, action = {}) => {
       return state.removeIn([ 'appliedFilter', 'filters', action.index ]);
     case SET_SEARCH_QUERY:
       return state.set('searchQuery', action.query);
+    case UPDATE_VALUE:
+      return state.setIn([ 'appliedFilter', action.filterType, action.index, 'value' ], action.value);
     default:
       return state;
   }
@@ -234,7 +268,7 @@ export function removeAttribute(index) {
 export function fetchList(range) {
   return {
     types: FETCH_LIST.toArray(),
-    call: client => client.get(`/flows${range ? '?range_value=' + range : ''}`),
+    call: client => client.get(`/saved_search`),
   };
 }
 
@@ -257,7 +291,7 @@ export function setFilterOption(key, filterOption) {
 export function save(instance) {
   return {
     types: SAVE.toArray(),
-    call: client => client.post('/filters', instance.toData()),
+    call: client => client.post('/saved_search', instance.toData()),
     instance,
   };
 }
@@ -367,4 +401,21 @@ export function setSearchQuery(query) {
     type: SET_SEARCH_QUERY,
     query
   }
+}
+
+export const edit = instance => {
+  return {
+    type: EDIT,
+    instance,
+  }
+};
+
+// filterType: 'events' or 'filters'
+export const updateValue  = (filterType, index, value) => {
+  return {
+    type: UPDATE_VALUE,
+    filterType, 
+    index,
+    value
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/duck/funnels.js b/frontend/app/duck/funnels.js
index 4e591237c..7a611dbca 100644
--- a/frontend/app/duck/funnels.js
+++ b/frontend/app/duck/funnels.js
@@ -117,9 +117,8 @@ const reducer = (state = initialState, action = {}) => {
         .set('issueTypesMap', tmpMap);
     case FETCH_INSIGHTS_SUCCESS:
       let stages = [];
-      if (action.isRefresh) {        
+      if (action.isRefresh) {
         const activeStages = state.get('activeStages');
-        console.log('test', activeStages);
         const oldInsights = state.get('insights');
         const lastStage = action.data.stages[action.data.stages.length - 1]
         const lastStageIndex = activeStages.toJS()[1];
diff --git a/frontend/app/duck/index.js b/frontend/app/duck/index.js
index c8d7a7c65..71eb6d0e2 100644
--- a/frontend/app/duck/index.js
+++ b/frontend/app/duck/index.js
@@ -34,6 +34,7 @@ import errors from './errors';
 import funnels from './funnels';
 import config from './config';
 import roles from './roles';
+import customMetrics from './customMetrics';
 
 export default combineReducers({
   jwt,
@@ -68,6 +69,7 @@ export default combineReducers({
   funnels,
   config,
   roles,
+  customMetrics,
   ...integrations,
   ...sources,
 });
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index c77533f3c..077ec9904 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -106,4 +106,9 @@
   opacity: .5;
 }
 
-
+.form-group {
+  margin-bottom: 20px;
+  & label {
+    margin-bottom: 5px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
new file mode 100644
index 000000000..32c4386b6
--- /dev/null
+++ b/frontend/app/types/customMetric.js
@@ -0,0 +1,61 @@
+import Record from 'Types/Record';
+import { List } from 'immutable';
+// import { DateTime } from 'luxon';
+// import { validateEmail, validateName } from 'App/validate';
+import Filter from 'Types/filter';
+import NewFilter from 'Types/filter';
+// import { Event } from 'Types/filter';
+// import CustomFilter from 'Types/filter/customFilter';
+
+export const FilterSeries = Record({
+  seriesId: undefined,
+  index: undefined,
+  name: 'Filter Series',
+  filter: new Filter(),
+}, {
+  idKey: 'seriesId',
+  methods: {
+    toData() {
+      const js = this.toJS();
+      // js.filter = js.filter.toData();
+      return js;
+    },
+  },
+  fromJS: ({ filter, ...rest }) => ({
+    ...rest,
+    filter: new Filter(filter),
+  }),
+});
+
+export default Record({
+  metricId: undefined,
+  name: 'Series',
+  type: 'session_count',
+  series: List(),
+  isPublic: false,
+}, {
+  idKey: 'metricId',
+  methods: {
+    validate() {
+      return validateName(this.name, { diacritics: true });
+    },
+
+    toData() {
+      const js = this.toJS();
+      js.series = js.series.map(series => {
+        series.filter.filters = series.filter.filters.map(filter => {
+          delete filter.operatorOptions
+          delete filter.icon
+          return filter;
+        });
+        return series;
+      });
+
+      return js;
+    },
+  },
+  fromJS: ({ series, ...rest }) => ({
+    ...rest,
+    series: List(series).map(FilterSeries),
+  }),
+});
diff --git a/frontend/app/types/filter/customFilter.js b/frontend/app/types/filter/customFilter.js
index ea7d82af2..59e47d985 100644
--- a/frontend/app/types/filter/customFilter.js
+++ b/frontend/app/types/filter/customFilter.js
@@ -30,6 +30,20 @@ const REVID = 'REVID';
 const USERANONYMOUSID = 'USERANONYMOUSID';
 const USERID = 'USERID';
 
+const ISSUE = 'ISSUE';
+const EVENTS_COUNT = 'EVENTS_COUNT';
+const UTM_SOURCE = 'UTM_SOURCE';
+const UTM_MEDIUM = 'UTM_MEDIUM';
+const UTM_CAMPAIGN = 'UTM_CAMPAIGN';
+
+
+const DOM_COMPLETE = 'DOM_COMPLETE';
+const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
+const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
+const TTFB = 'TTFB';
+const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
+const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
+
 export const KEYS = {
   ERROR,
   MISSING_RESOURCE,
@@ -56,7 +70,19 @@ export const KEYS = {
   STATEACTION,
   REVID,
   USERANONYMOUSID,
-  USERID
+  USERID,
+  ISSUE,
+  EVENTS_COUNT,
+  UTM_SOURCE,
+  UTM_MEDIUM,
+  UTM_CAMPAIGN,
+  
+  DOM_COMPLETE,
+  LARGEST_CONTENTFUL_PAINT_TIME,
+  TIME_BETWEEN_EVENTS,
+  TTFB,
+  AVG_CPU_LOAD,
+  AVG_MEMORY_USAGE,
 };
 
 const getOperatorDefault = (type) => {
@@ -85,7 +111,7 @@ export default Record({
   label: '',
   icon: '',
   type: '',
-  value: '',
+  value: [""],
   custom: '',
   target: Target(),
   level: '',
diff --git a/frontend/app/types/filter/event.js b/frontend/app/types/filter/event.js
index 2a6f54da6..17d6357ff 100644
--- a/frontend/app/types/filter/event.js
+++ b/frontend/app/types/filter/event.js
@@ -17,6 +17,13 @@ const USERANONYMOUSID = 'USERANONYMOUSID';
 const USERID = 'USERID';
 const ERROR = 'ERROR';
 
+const DOM_COMPLETE = 'DOM_COMPLETE';
+const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
+const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
+const TTFB = 'TTFB';
+const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
+const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
+
 export const TYPES = {
   CONSOLE,
   GRAPHQL,
@@ -31,7 +38,14 @@ export const TYPES = {
   METADATA,
   USERANONYMOUSID,
   USERID,
-  ERROR
+  ERROR,
+  
+  DOM_COMPLETE,
+  LARGEST_CONTENTFUL_PAINT_TIME,
+  TIME_BETWEEN_EVENTS,
+  TTFB,
+  AVG_CPU_LOAD,
+  AVG_MEMORY_USAGE,
 };
 
 function getLabelText(type, source) {
@@ -49,11 +63,19 @@ function getLabelText(type, source) {
   if (type === TYPES.USERID) return 'User Id';
   if (type === TYPES.USERANONYMOUSID) return 'User Anonymous Id';
   if (type === TYPES.REVID) return 'Rev ID';
+
+  if (type === TYPES.DOM_COMPLETE) return 'DOM Complete';
+  if (type === TYPES.LARGEST_CONTENTFUL_PAINT_TIME) return 'Largest Contentful Paint Time';
+  if (type === TYPES.TIME_BETWEEN_EVENTS) return 'Time Between Events';
+  if (type === TYPES.TTFB) return 'TTFB';
+  if (type === TYPES.AVG_CPU_LOAD) return 'Avg CPU Load';
+  if (type === TYPES.AVG_MEMORY_USAGE) return 'Avg Memory Usage';
+
   if (type === TYPES.CUSTOM) {
     if (!source) return 'Custom';
 		return source;
   }
-  return '?';
+  return type;
 }
 
 export default Record({
@@ -63,7 +85,7 @@ export default Record({
   operator: 'on',
   type: '',
   searchType: '',
-  value: '',
+  value: [],
   custom: '',
   inputValue: '',
   target: Target(),
@@ -73,16 +95,16 @@ export default Record({
 }, {
   keyKey: "_key",
   fromJS: ({ target, type = "" , ...event }) => {
-    const viewType = type.split('_')[0];
+    // const viewType = type.split('_')[0];
     return {
       ...event,
-      type: viewType,
+      type: type,
       searchType: event.searchType || type,
-      label: getLabelText(viewType, event.source),
+      label: getLabelText(type, event.source),
       target: Target(target),
       operator: event.operator || defaultOperator(event),
       // value: target ? target.label : event.value,
-      icon: event.icon || getEventIcon({...event, type: viewType })
+      icon: event.icon || getEventIcon({...event, type: type })
     };
   }
 })
diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js
index 42637a2fa..41c3421f8 100644
--- a/frontend/app/types/filter/filter.js
+++ b/frontend/app/types/filter/filter.js
@@ -9,7 +9,8 @@ import {
   getDateRangeFromValue
 } from 'App/dateRange';
 import Event from './event';
-import CustomFilter from './customFilter';
+// import CustomFilter from './customFilter';
+import NewFilter from './newFilter';
 
 const rangeValue = DATE_RANGE_VALUES.LAST_7_DAYS;
 const range = getDateRangeFromValue(rangeValue);
@@ -17,8 +18,8 @@ const startDate = range.start.unix() * 1000;
 const endDate = range.end.unix() * 1000;
 
 export default Record({
-  name: undefined,
-  id: undefined,
+  name: '',
+  searchId: undefined,
   referrer: undefined,
   userBrowser: undefined,
   userOs: undefined,
@@ -33,6 +34,7 @@ export default Record({
   rangeValue,
   startDate,
   endDate,
+  condition: 'then',
 
   sort: undefined,
   order: undefined,
@@ -45,6 +47,19 @@ export default Record({
   consoleLevel: undefined,
   strict: false,
 }, {
+  idKey: 'searchId',
+  methods: {
+    toData() {
+      const js = this.toJS();
+      js.filters = js.filters.map(filter => {
+        delete filter.operatorOptions
+        return filter;
+      });
+
+      delete js.createdAt;
+      return js;
+    }
+  },
   fromJS({ filters, events, custom, ...filter }) {
     let startDate;
     let endDate;
@@ -59,7 +74,7 @@ export default Record({
       startDate,
       endDate,
       events: List(events).map(Event),
-      filters: List(filters).map(CustomFilter),
+      filters: List(filters).map(NewFilter),
       custom: Map(custom),
     }
   }
@@ -73,6 +88,12 @@ export const defaultFilters = [
 		type: 'default',
 		keys: [
       { label: 'Click', key: KEYS.CLICK, type: KEYS.CLICK, filterKey: KEYS.CLICK, icon: 'filters/click', isFilter: false },
+      { label: 'DOM Complete', key: KEYS.DOM_COMPLETE, type: KEYS.DOM_COMPLETE, filterKey: KEYS.DOM_COMPLETE, icon: 'filters/click', isFilter: false },
+      { label: 'Largest Contentful Paint Time', key: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, type: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, filterKey: KEYS.LARGEST_CONTENTFUL_PAINT_TIME, icon: 'filters/click', isFilter: false },
+      { label: 'Time Between Events', key: KEYS.TIME_BETWEEN_EVENTS, type: KEYS.TIME_BETWEEN_EVENTS, filterKey: KEYS.TIME_BETWEEN_EVENTS, icon: 'filters/click', isFilter: false },
+      { label: 'Avg CPU Load', key: KEYS.AVG_CPU_LOAD, type: KEYS.AVG_CPU_LOAD, filterKey: KEYS.AVG_CPU_LOAD, icon: 'filters/click', isFilter: false },
+      { label: 'Memory Usage', key: KEYS.AVG_MEMORY_USAGE, type: KEYS.AVG_MEMORY_USAGE, filterKey: KEYS.AVG_MEMORY_USAGE, icon: 'filters/click', isFilter: false },
+
       { label: 'Input', key: KEYS.INPUT, type: KEYS.INPUT, filterKey: KEYS.INPUT, icon: 'event/input', isFilter: false },
       { label: 'Page', key: KEYS.LOCATION, type: KEYS.LOCATION, filterKey: KEYS.LOCATION, icon: 'event/link', isFilter: false },
       // { label: 'View', key: KEYS.VIEW, type: KEYS.VIEW, filterKey: KEYS.VIEW, icon: 'event/view', isFilter: false }
@@ -103,6 +124,11 @@ export const defaultFilters = [
 		type: 'default',
 		keys: [
       { label: 'Errors', key: KEYS.ERROR, type: KEYS.ERROR, filterKey: KEYS.ERROR, icon: 'exclamation-circle', isFilter: false },
+      { label: 'Issues', key: KEYS.ISSUES, type: KEYS.ISSUES, filterKey: KEYS.ISSUES, icon: 'exclamation-circle', isFilter: true },
+      { label: 'UTM Source', key: KEYS.UTM_SOURCE, type: KEYS.UTM_SOURCE, filterKey: KEYS.UTM_SOURCE, icon: 'exclamation-circle', isFilter: true },
+      { label: 'UTM Medium', key: KEYS.UTM_MEDIUM, type: KEYS.UTM_MEDIUM, filterKey: KEYS.UTM_MEDIUM, icon: 'exclamation-circle', isFilter: true },
+      { label: 'UTM Campaign', key: KEYS.UTM_CAMPAIGN, type: KEYS.UTM_CAMPAIGN, filterKey: KEYS.UTM_CAMPAIGN, icon: 'exclamation-circle', isFilter: true },
+      
       { label: 'Fetch Requests', key: KEYS.FETCH, type: KEYS.FETCH, filterKey: KEYS.FETCH, icon: 'fetch', isFilter: false },
       { label: 'GraphQL Queries', key: KEYS.GRAPHQL, type: KEYS.GRAPHQL, filterKey: KEYS.GRAPHQL, icon: 'vendors/graphql', isFilter: false },
       { label: 'Store Actions', key: KEYS.STATEACTION, type: KEYS.STATEACTION, filterKey: KEYS.STATEACTION, icon: 'store', isFilter: false },
@@ -127,6 +153,13 @@ export const getEventIcon = (filter) => {
   if (type === KEYS.USERBROWSER) return 'window';
   if (type === KEYS.PLATFORM) return 'window';
 
+  if (type === TYPES.DOM_COMPLETE) return 'filters/click';
+  if (type === TYPES.LARGEST_CONTENTFUL_PAINT_TIME) return 'filters/click';
+  if (type === TYPES.TIME_BETWEEN_EVENTS) return 'filters/click';
+  if (type === TYPES.TTFB) return 'filters/click';
+  if (type === TYPES.AVG_CPU_LOAD) return 'filters/click';
+  if (type === TYPES.AVG_MEMORY_USAGE) return 'filters/click';
+
   if (type === TYPES.CLICK) return 'filters/click';
   if (type === TYPES.LOCATION) return 'map-marker-alt';
   if (type === TYPES.VIEW) return 'event/view';
diff --git a/frontend/app/types/filter/index.js b/frontend/app/types/filter/index.js
index dba5512db..957e1dfb8 100644
--- a/frontend/app/types/filter/index.js
+++ b/frontend/app/types/filter/index.js
@@ -6,7 +6,7 @@ export * from './filter';
 
 
 const filterKeys = ['is', 'isNot'];
-const stringFilterKeys = ['is', 'isNot', 'contains'];
+const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith'];
 const targetFilterKeys = ['on', 'notOn'];
 const signUpStatusFilterKeys = ['isSignedUp', 'notSignedUp'];
 const rangeFilterKeys = ['before', 'after', 'on', 'inRange', 'notInRange', 'withInLast', 'notWithInLast'];
@@ -209,6 +209,12 @@ export const operatorOptions = (filter) => {
     case TYPES.REVID:
     case 'metadata':
     case KEYS.ERROR:
+    case TYPES.DOM_COMPLETE:
+    case TYPES.LARGEST_CONTENTFUL_PAINT_TIME:
+    case TYPES.TIME_BETWEEN_EVENTS:
+    case TYPES.TTFB:
+    case TYPES.AVG_CPU_LOAD:
+    case TYPES.AVG_MEMORY_USAGE:
       return stringFilterOptions;
     
     case TYPES.INPUT:
@@ -230,4 +236,22 @@ export const operatorOptions = (filter) => {
     case KEYS.CLICK_RAGE:
       return [{ key: 'onAnything', text: 'on anything', value: 'true' }]
   }
-}
\ No newline at end of file
+}
+
+const NewFilterType = (key, category, label, icon, isEvent = false) => {
+  return {
+    key: key,
+    category: category,
+    label: label,
+    icon: icon,
+    isEvent: isEvent,
+    operators: operatorOptions({ key }),
+    value: [""]
+  }
+}
+
+export const newFiltersList = [
+  NewFilterType(TYPES.CLICK, 'Gear', 'Click', 'filters/click', true),
+  NewFilterType(TYPES.CLICK, 'Gear', 'Input', 'filters/click', true),
+  NewFilterType(TYPES.CONSOLE, 'Other', 'Console', 'filters/click', true),
+];
\ No newline at end of file
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
new file mode 100644
index 000000000..2c1a49f48
--- /dev/null
+++ b/frontend/app/types/filter/newFilter.js
@@ -0,0 +1,308 @@
+import Record from 'Types/Record';
+
+const CLICK = 'CLICK';
+const INPUT = 'INPUT';
+const LOCATION = 'LOCATION';
+const VIEW = 'VIEW_IOS';
+const CONSOLE = 'ERROR';
+const METADATA = 'METADATA';
+const CUSTOM = 'CUSTOM';
+const URL = 'URL';
+const CLICK_RAGE = 'CLICKRAGE';
+const USER_BROWSER  = 'USERBROWSER';
+const USER_OS = 'USEROS';
+const USER_COUNTRY  = 'USERCOUNTRY';
+const USER_DEVICE = 'USERDEVICE';
+const PLATFORM = 'PLATFORM';
+const DURATION  = 'DURATION';
+const REFERRER  = 'REFERRER';
+const ERROR = 'ERROR';
+const MISSING_RESOURCE = 'MISSINGRESOURCE';
+const SLOW_SESSION = 'SLOWSESSION';
+const JOURNEY = 'JOUNRNEY';
+const FETCH = 'REQUEST';
+const GRAPHQL = 'GRAPHQL';
+const STATEACTION = 'STATEACTION';
+const REVID = 'REVID';
+const USERANONYMOUSID = 'USERANONYMOUSID';
+const USERID = 'USERID';
+
+const ISSUE = 'ISSUE';
+const EVENTS_COUNT = 'EVENTS_COUNT';
+const UTM_SOURCE = 'UTM_SOURCE';
+const UTM_MEDIUM = 'UTM_MEDIUM';
+const UTM_CAMPAIGN = 'UTM_CAMPAIGN';
+
+
+const DOM_COMPLETE = 'DOM_COMPLETE';
+const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
+const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
+const TTFB = 'TTFB';
+const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
+const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
+
+export const TYPES = {
+  ERROR,
+  MISSING_RESOURCE,
+  SLOW_SESSION,
+  CLICK_RAGE,
+  CLICK,
+  INPUT,
+  LOCATION,
+  VIEW,
+  CONSOLE,
+  METADATA,
+  CUSTOM,
+  URL,
+  USER_BROWSER,
+  USER_OS,
+  USER_DEVICE,
+  PLATFORM,
+  DURATION,
+  REFERRER,
+  USER_COUNTRY,
+  JOURNEY,
+  FETCH,
+  GRAPHQL,
+  STATEACTION,
+  REVID,
+  USERANONYMOUSID,
+  USERID,
+  ISSUE,
+  EVENTS_COUNT,
+  UTM_SOURCE,
+  UTM_MEDIUM,
+  UTM_CAMPAIGN,
+  
+  DOM_COMPLETE,
+  LARGEST_CONTENTFUL_PAINT_TIME,
+  TIME_BETWEEN_EVENTS,
+  TTFB,
+  AVG_CPU_LOAD,
+  AVG_MEMORY_USAGE,
+};
+
+const filterKeys = ['is', 'isNot'];
+const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith'];
+const targetFilterKeys = ['on', 'notOn'];
+const signUpStatusFilterKeys = ['isSignedUp', 'notSignedUp'];
+const rangeFilterKeys = ['before', 'after', 'on', 'inRange', 'notInRange', 'withInLast', 'notWithInLast'];
+
+const options = [
+  {
+    key: 'is',
+    text: 'is',
+    value: 'is'
+  }, {
+    key: 'isNot',
+    text: 'is not',
+    value: 'isNot'
+  }, {
+    key: 'startsWith',
+    text: 'starts with',
+    value: 'startsWith'
+  }, {
+    key: 'endsWith',
+    text: 'ends with',
+    value: 'endsWith'
+  }, {
+    key: 'contains',
+    text: 'contains',
+    value: 'contains'
+  }, {
+    key: 'doesNotContain',
+    text: 'does not contain',
+    value: 'doesNotContain'
+  }, {
+    key: 'hasAnyValue',
+    text: 'has any value',
+    value: 'hasAnyValue'
+  }, {
+    key: 'hasNoValue',
+    text: 'has no value',
+    value: 'hasNoValue'
+  }, 
+  
+
+  {
+    key: 'isSignedUp',
+    text: 'is signed up',
+    value: 'isSignedUp'
+  }, {
+    key: 'notSignedUp',
+    text: 'not signed up',
+    value: 'notSignedUp'
+  },
+  
+  
+  {
+    key: 'before',
+    text: 'before',
+    value: 'before'
+  }, {
+    key: 'after',
+    text: 'after',
+    value: 'after'
+  }, {
+    key: 'on',
+    text: 'on',
+    value: 'on'
+  }, {
+    key: 'notOn',
+    text: 'not on',
+    value: 'notOn'
+  }, {
+    key: 'inRage',
+    text: 'in rage',
+    value: 'inRage'
+  }, {
+    key: 'notInRage',
+    text: 'not in rage',
+    value: 'notInRage'
+  }, {
+    key: 'withinLast',
+    text: 'within last',
+    value: 'withinLast'
+  }, {
+    key: 'notWithinLast',
+    text: 'not within last',
+    value: 'notWithinLast'
+  },
+
+  {
+    key: 'greaterThan',
+    text: 'greater than',
+    value: 'greaterThan'
+  }, {
+    key: 'lessThan',
+    text: 'less than',
+    value: 'lessThan'
+  }, {
+    key: 'equal',
+    text: 'equal',
+    value: 'equal'
+  }, {
+    key: 'not equal',
+    text: 'not equal',
+    value: 'not equal'
+  },
+
+
+  {
+    key: 'onSelector',
+    text: 'on selector',
+    value: 'onSelector'
+  }, {
+    key: 'onText',
+    text: 'on text',
+    value: 'onText'
+  }, {
+    key: 'onComponent',
+    text: 'on component',
+    value: 'onComponent'
+  },
+
+
+  {
+    key: 'onAnything',
+    text: 'on anything',
+    value: 'onAnything'
+  }
+];
+
+export const filterOptions = options.filter(({key}) => filterKeys.includes(key));
+export const stringFilterOptions = options.filter(({key}) => stringFilterKeys.includes(key));
+export const targetFilterOptions = options.filter(({key}) => targetFilterKeys.includes(key));
+export const booleanOptions = [
+  { key: 'true', text: 'true', value: 'true' },
+  { key: 'false', text: 'false', value: 'false' },
+]
+
+export const filtersMap = {
+  [TYPES.CLICK]: { category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click' },
+  [TYPES.INPUT]: { category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.LOCATION]: { category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+
+  [TYPES.USER_OS]: { category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USER_BROWSER]: { category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USER_DEVICE]: { category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.PLATFORM]: { category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.REVID]: { category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+
+  [TYPES.REFERRER]: { category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.DURATION]: { category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USER_COUNTRY]: { category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+
+  [TYPES.CONSOLE]: { category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.ERROR]: { category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.FETCH]: { category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.GRAPHQL]: { category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.STATEACTION]: { category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+
+  [TYPES.USERID]: { category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USERANONYMOUSID]: { category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  
+  [TYPES.DOM_COMPLETE]: { category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.LARGEST_CONTENTFUL_PAINT_TIME]: { category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.TIME_BETWEEN_EVENTS]: { category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.TTFB]: { category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.AVG_CPU_LOAD]: { category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.AVG_MEMORY_USAGE]: { category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.SLOW_SESSION]: { category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
+  [TYPES.MISSING_RESOURCE]: { category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
+  [TYPES.CLICK_RAGE]: { category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
+  // [TYPES.URL]: { category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
+  // [TYPES.CUSTOM]: { category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
+  // [TYPES.METADATA]: { category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
+}
+
+export default Record({
+  timestamp: 0,
+  key: '',
+  label: '',
+  icon: '',
+  type: '',
+  value: [""],
+  
+  custom: '',
+  // target: Target(),
+  level: '',
+  source: null,
+  hasNoValue: false,
+  isFilter: false,
+  actualValue: '',
+  
+  operator: 'is',
+  operatorOptions: [],
+}, {
+  keyKey: "_key",
+  fromJS: ({ ...filter }) => ({
+    ...filter,
+    type: filter.type, // camelCased(filter.type.toLowerCase()),
+    // key: filter.type === METADATA ? filter.label : filter.key || filter.type, // || camelCased(filter.type.toLowerCase()),
+    // label: getLabel(filter),
+    // target: Target(target),
+    // operator: getOperatorDefault(filter.type),
+    // value: target ? target.label : filter.value,
+    // value: typeof value === 'string' ? [value] : value,
+    // icon: filter.type ? getfilterIcon(filter.type) : 'filters/metadata'
+  }),
+})
+
+// const NewFilterType = (key, category, icon, isEvent = false) => {
+//   return {
+//     key: key,
+//     category: category,
+//     label: filterMap[key].label,
+//     icon: icon,
+//     isEvent: isEvent,
+//     operators: filterMap[key].operatorOptions,
+//     value: [""]
+//   }
+// }
+
+// export const newFiltersList = [
+//   NewFilterType(TYPES.CLICK, 'Click', 'filters/click', true),
+//   NewFilterType(TYPES.CLICK, 'Input', 'filters/click', true),
+//   NewFilterType(TYPES.CONSOLE, 'Console', 'filters/click', true),
+// ];
\ No newline at end of file
diff --git a/frontend/env.js b/frontend/env.js
index f7c49c874..ad23c710a 100644
--- a/frontend/env.js
+++ b/frontend/env.js
@@ -5,13 +5,13 @@ require('dotenv').config()
 
 const oss = {
 	name: 'oss',
-	PRODUCTION: true,
+	PRODUCTION: false,
 	SENTRY_ENABLED: false,
 	SENTRY_URL: "",
 	CAPTCHA_ENABLED: process.env.CAPTCHA_ENABLED === 'true',
 	CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY,
 	ORIGIN: () => 'window.location.origin',
-	API_EDP: () => 'window.location.origin + "/api"',
+	API_EDP: "https://dol.openreplay.com/api",
 	ASSETS_HOST: () => 'window.location.origin + "/assets"',
 	VERSION: '1.3.6',
 	SOURCEMAP: true,

From e80293efa4edbce29cbf5d28483ce07ffb3087b3 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 19 Jan 2022 14:49:21 +0530
Subject: [PATCH 2/6] feat(ui) - custom metrics

---
 .../BugFinder/EventFilter/EventFilter.js      | 30 ++++----
 .../app/components/Dashboard/Dashboard.js     |  8 ++
 .../CustomMetricWidget/CustomMetricWidget.tsx | 75 +++++++++++++++++++
 .../CustomMetricWidget/index.ts               |  1 +
 .../CustomMetricsWidgets.tsx                  | 29 +++++++
 .../Widgets/CustomMetricsWidgets/index.ts     |  1 +
 .../CustomMetricWidgetHoc.css                 |  6 ++
 .../CustomMetricWidgetHoc.tsx                 | 25 +++++++
 .../common/CustomMetricWidgetHoc/index.ts     |  1 +
 .../CustomMetricForm/CustomMetricForm.tsx     | 16 ++--
 .../shared/CustomMetrics/CustomMetrics.tsx    | 29 +++----
 .../FilterSeries/FilterSeries.tsx             | 75 ++++++++++++-------
 .../FilterAutoComplete/FilterAutoComplete.css | 30 ++++++--
 .../FilterAutoComplete/FilterAutoComplete.tsx | 10 ++-
 .../shared/Filters/FilterItem/FilterItem.tsx  | 13 ++--
 .../shared/Filters/FilterList/FilterList.tsx  | 32 ++++++++
 .../Filters/FilterModal/FilterModal.tsx       |  4 +-
 .../FilterSelection/FilterSelection.tsx       | 11 +--
 .../Filters/FilterValue/FilterValue.tsx       | 10 ++-
 .../ui/SegmentSelection/segmentSelection.css  |  8 +-
 frontend/app/duck/customMetrics.js            | 13 +---
 frontend/app/duck/filters.js                  |  4 +-
 frontend/app/styles/main.css                  |  3 +-
 frontend/app/types/customMetric.js            |  4 +
 frontend/app/types/filter/filter.js           |  3 +
 frontend/app/types/filter/newFilter.js        | 72 +++++++++---------
 26 files changed, 365 insertions(+), 148 deletions(-)
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/index.ts
 create mode 100644 frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.css
 create mode 100644 frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx
 create mode 100644 frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts

diff --git a/frontend/app/components/BugFinder/EventFilter/EventFilter.js b/frontend/app/components/BugFinder/EventFilter/EventFilter.js
index 21467c382..5bc1d1b32 100644
--- a/frontend/app/components/BugFinder/EventFilter/EventFilter.js
+++ b/frontend/app/components/BugFinder/EventFilter/EventFilter.js
@@ -141,21 +141,21 @@ export default class EventFilter extends React.PureComponent {
         { hasFilters &&
             <div className={cn("bg-white rounded border-gray-light mt-2 relative", { 'blink-border' : blink })}>            
               <div className="absolute right-0 top-0 m-3 z-10 flex items-center">
-              <div className="mr-2">Operator</div>
-              <SegmentSelection
-                primary
-                name="condition"
-                extraSmall={true}
-                // className="my-3"
-                onSelect={ this.changeConditionTab }
-                value={{ value: appliedFilter.condition }}
-                list={ [
-                  { name: 'AND', value: 'and' },
-                  { name: 'OR', value: 'or' },
-                  { name: 'THEN', value: 'then' },
-                ]}
-              />
-            </div>
+                <div className="mr-2">Operator</div>
+                <SegmentSelection
+                  primary
+                  name="condition"
+                  extraSmall={true}
+                  // className="my-3"
+                  onSelect={ this.changeConditionTab }
+                  value={{ value: appliedFilter.condition }}
+                  list={ [
+                    { name: 'AND', value: 'and' },
+                    { name: 'OR', value: 'or' },
+                    { name: 'THEN', value: 'then' },
+                  ]}
+                />
+              </div>
             
             { events.size > 0 &&
               <>
diff --git a/frontend/app/components/Dashboard/Dashboard.js b/frontend/app/components/Dashboard/Dashboard.js
index 6af004136..81d7a1de9 100644
--- a/frontend/app/components/Dashboard/Dashboard.js
+++ b/frontend/app/components/Dashboard/Dashboard.js
@@ -39,6 +39,7 @@ import SideMenuSection from './SideMenu/SideMenuSection';
 import styles from './dashboard.css';
 import WidgetSection from 'Shared/WidgetSection/WidgetSection';
 import OverviewWidgets from './Widgets/OverviewWidgets/OverviewWidgets';
+import CustomMetricsWidgets from './Widgets/CustomMetricsWidgets/CustomMetricsWidgets';
 import WidgetHolder from './WidgetHolder/WidgetHolder';
 import MetricsFilters from 'Shared/MetricsFilters/MetricsFilters';
 import { withRouter } from 'react-router';
@@ -47,6 +48,7 @@ const OVERVIEW = 'overview';
 const PERFORMANCE = 'performance';
 const ERRORS_N_CRASHES = 'errors_n_crashes';
 const RESOURCES = 'resources';
+const CUSTOM_METRICS = 'custom_metrics';
 
 const menuList = [
   {
@@ -201,6 +203,12 @@ export default class Dashboard extends React.PureComponent {
                   </div>
                 </WidgetSection>
 
+                <WidgetSection title="Custom Metrics" type="customMetrics" className="mb-4">
+                  <div className={ cn("gap-4", { 'grid grid-cols-2' : !comparing })} ref={this.list[CUSTOM_METRICS]}>
+                    <CustomMetricsWidgets />
+                  </div>
+                </WidgetSection>
+
                 <WidgetSection title="Errors" className="mb-4" type="errors">
                   <div className={ cn("gap-4", { 'grid grid-cols-2' : !comparing })} ref={this.list[ERRORS_N_CRASHES]}>
                     { dashboardAppearance.impactedSessionsByJsErrors && <WidgetHolder Component={SessionsAffectedByJSErrors} /> }
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
new file mode 100644
index 000000000..9de11f57e
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Loader, NoContent } from 'UI';
+import { widgetHOC, Styles } from '../../common';
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
+import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
+import CustomMetricWidgetHoc from '../../common/CustomMetricWidgetHoc';
+
+const customParams = rangeName => {
+  const params = { density: 70 }
+
+  if (rangeName === LAST_24_HOURS) params.density = 70
+  if (rangeName === LAST_30_MINUTES) params.density = 70
+  if (rangeName === YESTERDAY) params.density = 70
+  if (rangeName === LAST_7_DAYS) params.density = 70
+  
+  return params
+}
+
+interface Period {
+  rangeName: string;
+}
+
+interface Props {
+  widget: any;
+  loading?: boolean;
+  data?: any;
+  showSync?: boolean;
+  compare?: boolean;
+  period?: Period;
+}
+function CustomMetricWidget(props: Props) {
+  const { widget, loading = false, data = { chart: []}, showSync, compare, period = { rangeName: ''} } = props;
+
+  const colors = compare ? Styles.compareColors : Styles.colors;
+  const params = customParams(period.rangeName)
+  const gradientDef = Styles.gradientDef();
+  return (
+    <Loader loading={ loading } size="small">
+      <NoContent
+        size="small"
+        show={ data.chart.length === 0 }
+      >
+        <ResponsiveContainer height={ 240 } width="100%">
+          <AreaChart
+            data={ data.chart }
+            margin={Styles.chartMargins}
+            syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
+          >
+            {gradientDef}
+            <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
+            <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
+            <YAxis
+              {...Styles.yaxis}
+              label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
+              allowDecimals={false}
+            />
+            <Tooltip {...Styles.tooltip} />
+            <Area
+              name="Sessions"
+              type="monotone"
+              dataKey="count"
+              stroke={colors[0]}
+              fillOpacity={ 1 }
+              strokeWidth={ 2 }
+              strokeOpacity={ 0.8 }
+              fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </NoContent>
+    </Loader>
+  );
+}
+
+export default CustomMetricWidgetHoc(CustomMetricWidget);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts
new file mode 100644
index 000000000..4a6d9b653
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricWidget';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
new file mode 100644
index 000000000..3ea473f61
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { fetchList } from 'Duck/customMetrics';
+import { list } from 'App/components/BugFinder/CustomFilters/filterModal.css';
+import CustomMetricWidget from './CustomMetricWidget';
+
+interface Props {
+  fetchList: Function;
+  list: any;
+}
+function CustomMetricsWidgets(props: Props) {
+  const { list } = props;
+
+  useEffect(() => {
+    props.fetchList()
+  }, [])
+
+  return (
+    <>
+      {list.map((item: any) => (
+        <CustomMetricWidget widget={item} />
+      ))}
+    </>
+  );
+}
+
+export default connect(state => ({
+  list: state.getIn(['customMetrics', 'list']),
+}), { fetchList })(CustomMetricsWidgets);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/index.ts
new file mode 100644
index 000000000..54d9a4192
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricsWidgets';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.css b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.css
new file mode 100644
index 000000000..1d1ef3ee4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.css
@@ -0,0 +1,6 @@
+.wrapper {
+  background-color: white;
+  /* border: solid thin $gray-medium; */
+  border-radius: 3px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx
new file mode 100644
index 000000000..ba4a2726a
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/CustomMetricWidgetHoc.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import stl from './CustomMetricWidgetHoc.css';
+import { Icon } from 'UI';
+
+interface Props {
+}
+const CustomMetricWidgetHoc = ({ ...rest }: Props) => BaseComponent => {
+
+  console.log('CustomMetricWidgetHoc', rest);
+  return (
+    <div className={stl.wrapper}>
+      <div className="flex items-center mb-10 p-2">
+        <div className="font-medium">Widget Name</div>
+        <div className="ml-auto">
+          <div className="cursor-pointer">
+            <Icon name="bell-plus" size="16" />
+          </div>
+        </div>
+      </div>
+      {/* <BaseComponent {...rest} /> */}
+    </div>
+  );
+}
+
+export default CustomMetricWidgetHoc;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts
new file mode 100644
index 000000000..0be8a5be5
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/common/CustomMetricWidgetHoc/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricWidgetHoc';
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
index 20337cbc7..243a51ced 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, SegmentSelection, Button } from 'UI';
+import { Form, SegmentSelection, Button, IconButton } from 'UI';
 import FilterSeries from '../FilterSeries';
 import { connect } from 'react-redux';
 import { edit as editMetric, save } from 'Duck/customMetrics';
@@ -68,13 +68,13 @@ function CustomMetricForm(props: Props) {
         <div className="form-group">
           <label className="font-medium">Metric Type</label>
           <div className="flex items-center">
-            <span>Timeseries</span>
-            <span className="mx-2">of</span>
-            <div style={{ width: "250px"}}>
+            <span className="bg-white p-1 px-2 border rounded">Timeseries</span>
+            <span className="mx-2 color-gray-medium">of</span>
+            <div>
               <SegmentSelection
                 primary
                 name="condition"
-                extraSmall={true}
+                small={true}
                 // className="my-3"
                 onSelect={ changeConditionTab }
                 value={{ value: metric.type }}
@@ -88,7 +88,7 @@ function CustomMetricForm(props: Props) {
         </div>
 
         <div className="form-group">
-          <label className="font-medium">Sereis</label>
+          <label className="font-medium">Series</label>
           {metric.series && metric.series.size > 0 && metric.series.map((series: any, index: number) => (
             <div className="mb-2">
               <FilterSeries
@@ -100,7 +100,9 @@ function CustomMetricForm(props: Props) {
           ))}
         </div>
 
-        <Button onClick={addSeries}>Add Series</Button>
+        <div className="flex justify-end">
+          <IconButton onClick={addSeries} primaryText label="SERIES" icon="plus" />
+        </div>
       </div>
 
       <div className="absolute w-full bottom-0 px-5 py-2 bg-white">
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
index ae7102202..c11682513 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
@@ -1,38 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { IconButton, SlideModal } from 'UI'
 import CustomMetricForm from './CustomMetricForm';
 
 interface Props {}
 function CustomMetrics(props: Props) {
+  const [showModal, setShowModal] = useState(true);
+
   return (
-    <div>
-      <IconButton outline icon="plus" label="CREATE METRIC" />
+    <div className="self-start">
+      <IconButton outline icon="plus" label="CREATE METRIC" onClick={() => setShowModal(true)} />
 
       <SlideModal
         title={
           <div className="flex items-center">
             <span className="mr-3">{ 'Custom Metric' }</span>
-            {/* <IconButton 
-              circle
-              size="small"
-              icon="plus" 
-              outline
-              id="add-button"
-              // onClick={ () => toggleForm({}, true) }
-            /> */}
           </div>
         }
-        isDisplayed={ true }
-        // onClose={ () => {
-        //   toggleForm({}, false);
-        //   setShowAlerts(false);
-        // } }
+        isDisplayed={ showModal }
+        onClose={ () => setShowModal(false)}
         // size="medium"
-        content={
-          <div className="bg-gray-light-shade">
+        content={ showModal && (
+          <div style={{ backgroundColor: '#f6f6f6'}}>
             <CustomMetricForm />
           </div>
-        }
+        )}
       />
     </div>
   );
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
index f29301644..69a1637d5 100644
--- a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import FilterList from 'Shared/Filters/FilterList';
 import { edit, updateSeries } from 'Duck/customMetrics';
 import { connect } from 'react-redux';
-import { IconButton, Button, Icon } from 'UI';
+import { IconButton, Button, Icon, SegmentSelection } from 'UI';
 import FilterSelection from '../../Filters/FilterSelection';
 
 interface Props {
@@ -14,6 +14,7 @@ interface Props {
 }
 
 function FilterSeries(props: Props) {
+  const [expanded, setExpanded] = useState(false)
   const { series, seriesIndex } = props;
 
   const onAddFilter = (filter) => {
@@ -46,6 +47,16 @@ function FilterSeries(props: Props) {
     });
   }
 
+  const onChangeEventsOrder = (e, { name, value }) => {
+    props.updateSeries(seriesIndex, {
+      ...series.toData(),
+      filter: {
+        ...series.filter,
+        eventsOrder: value,
+      }
+    });
+  }
+
   const onRemoveFilter = (filterIndex) => {
     const newFilters = series.filter.filters.filter((_filter, i) => {
       return i !== filterIndex;
@@ -62,35 +73,43 @@ function FilterSeries(props: Props) {
 
   return (
     <div className="border rounded bg-white">
-      <div className="border-b px-5 h-12 flex items-center">
-        <span className="mr-auto">{ series.name }</span>
-        <div className="flex items-center cursor-pointer" onClick={props.onRemoveSeries}>
-          <Icon name="trash" size="16" />
+      <div className="border-b px-5 h-12 flex items-center relative">
+        <div className="font-medium">{ series.name }</div>
+        
+        <div className="flex items-center cursor-pointer ml-auto" >
+          <div onClick={props.onRemoveSeries} className="ml-3">
+            <Icon name="trash" size="16" />
+          </div>
+
+          <div onClick={() => setExpanded(!expanded)} className="ml-3">
+            <Icon name="chevron-down" size="16" />
+          </div>
+          
         </div>
       </div>
-      <div className="p-5">
-        { series.filter.filters.size > 0 ? (
-          <FilterList
-            filters={series.filter.filters.toJS()}
-            onUpdateFilter={onUpdateFilter}
-            onRemoveFilter={onRemoveFilter}
-          />
-        ): (
-          <div>Add user event or filter to build the series.</div>
-        )}
-      </div>
-      <div className="px-5 border-t h-12 flex items-center">
-        <FilterSelection
-          filter={undefined}
-          onFilterClick={onAddFilter}
-        >
-          {/* <Button className="flex items-center">
-            <Icon name="plus" size="16" />
-            <span>Add Step</span>
-          </Button> */}
-          <IconButton primaryText label="ADD STEP" icon="plus" />
-        </FilterSelection>
-      </div>
+      { expanded && (
+        <>
+          <div className="p-5">
+            { series.filter.filters.size > 0 ? (
+              <FilterList
+                filters={series.filter.filters.toJS()}
+                onUpdateFilter={onUpdateFilter}
+                onRemoveFilter={onRemoveFilter}
+              />
+            ): (
+              <div className="color-gray-medium">Add user event or filter to build the series.</div>
+            )}
+          </div>
+          <div className="px-5 border-t h-12 flex items-center">
+            <FilterSelection
+              filter={undefined}
+              onFilterClick={onAddFilter}
+            >
+              <IconButton primaryText label="ADD STEP" icon="plus" />
+            </FilterSelection>
+          </div>
+        </>
+      )}
     </div>
   );
 }
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
index ba7359239..e2ce40ac0 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
@@ -16,20 +16,36 @@
   & .right {
     height: 28px;
     display: flex;
-    align-items: center;
-    padding: 0 5px;
+    align-items: stretch;
+    padding: 0;
     background-color: $gray-lightest;
-    border-left: solid thin $gray-light !important;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
-    cursor: pointer;
+
+    & div {
+      /* background-color: red; */
+      border-left: solid thin $gray-light !important;
+      width: 28px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+      &:hover {
+        background-color: $gray-light;
+      }
+    }
   }
 }
 
 .menu {
   border-radius: 0 0 3px 3px;
-  box-shadow: 0 2px 10px 0 $gray-light;
-  padding: 20px;
+  border: solid thin $gray-light !important;
+  /* box-shadow: 0 2px 10px 0 $gray-light; */
+  /* padding: 20px; */
   background-color: white;
   max-height: 350px;
   overflow-y: auto;
@@ -43,7 +59,7 @@
 .filterItem {
 	display: flex;
 	align-items: center;
-	padding: 8px;
+	padding: 8px 10px;
 	cursor: pointer;
 	border-radius: 3px;
 	transition: all 0.4s;
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
index 068b255f7..fd215c11e 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -12,6 +12,7 @@ const hiddenStyle = {
 
 interface Props {
   showOrButton?: boolean;
+  showCloseButton?: boolean;
   onRemoveValue?: () => void;
   onAddValue?: () => void;
   endpoint?: string;
@@ -25,6 +26,7 @@ interface Props {
 
 function FilterAutoComplete(props: Props) {
   const {
+      showCloseButton = false,
       placeholder = 'Type to search',
       method = 'GET',
       showOrButton = false,
@@ -94,7 +96,7 @@ function FilterAutoComplete(props: Props) {
   }
 
   return (
-    <div className="relative">
+    <div className="relative flex items-center">
       <div className={stl.wrapper}>
         <input
           name="query"
@@ -115,11 +117,13 @@ function FilterAutoComplete(props: Props) {
           className={stl.right}
           // onClick={showOrButton ? onRemoveValue : onAddValue}
         >
-          { !showOrButton && <Icon onClick={onRemoveValue} name="close" size="18" /> }
-          { showOrButton && <span onClick={onAddValue} className="px-1">or</span>}
+          { showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="18" /></div> }
+          { showOrButton && <div onClick={onAddValue} className="color-teal"><span className="px-1">or</span></div> }
         </div>
       </div>
 
+      { !showOrButton && <div className="ml-3">or</div> }
+
       {/* <textarea style={hiddenStyle} ref={(ref) => this.hiddenInput = ref }></textarea> */}
 
       { showModal && (options.length > 0 || loading) &&
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index 66aa08ff3..c1e35f250 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -44,26 +44,29 @@ function FitlerItem(props: Props) {
   }
 
   return (
-    <div className="flex items-center mb-3">
+    <div className="flex items-center mb-4">
       <div className="flex items-start mr-auto">
         <div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div>
         <FilterSelection filter={filter} onFilterClick={replaceFilter} />
-        <FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2"/>
+        <FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2 flex-shrink-0"/>
         <div className="grid grid-cols-3 gap-3">
           {filter.value && filter.value.map((value, valueIndex) => (
             <FilterValue
+              showCloseButton={filter.value.length > 1}
               showOrButton={valueIndex === filter.value.length - 1}
-              key={valueIndex}
+              // filter={filter}
+              // key={valueIndex}
               value={value}
+              key={filter.key}
               index={valueIndex}
               onAddValue={onAddValue}
               onRemoveValue={() => onRemoveValue(valueIndex)}
-              onSelect={(e, item) => onSelect(e, valueIndex, item)}
+              onSelect={(e, item) => onSelect(e, item, valueIndex)}
             />
           ))}
         </div>
       </div>
-      <div className="flex">
+      <div className="flex self-start mt-2">
         <div
           className="cursor-pointer"
           onClick={props.onRemoveFilter}
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index d2e20cff6..5bab3e6b4 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -1,5 +1,6 @@
 import React, { useState} from 'react';
 import FilterItem from '../FilterItem';
+import { SegmentSelection } from 'UI';
 
 interface Props {
   filters: any[]; // event/filter
@@ -19,6 +20,27 @@ function FilterList(props: Props) {
 
   return (
     <div className="flex flex-col">
+      <div className="flex items-center mb-2">
+        <div className="mb-2 text-sm color-gray-medium mr-auto">EVENTS</div>
+        <div className="flex items-center">
+          <div className="mr-2 color-gray-medium text-sm">Events Order</div>
+          <SegmentSelection
+            primary
+            name="eventsOrder"
+            extraSmall={true}
+            // className="my-3"
+            // onSelect={onChangeEventsOrder }
+            onSelect={() => null }
+            // value={{ value: series.filter.eventsOrder }}
+            value={{ value: 'and' }}
+            list={ [
+              { name: 'AND', value: 'and' },
+              { name: 'OR', value: 'or' },
+              { name: 'THEN', value: 'then' },
+            ]}
+          />
+        </div>
+      </div>
       {filters.map((filter, filterIndex) => (
         <FilterItem
           filterIndex={filterIndex}
@@ -27,6 +49,16 @@ function FilterList(props: Props) {
           onRemoveFilter={() => onRemoveFilter(filterIndex) }
         />
       ))}
+
+      {/* <div>Filters</div>
+      {filters.filter(f => !f.isEvent).map((filter, filterIndex) => (
+        <FilterItem
+          filterIndex={filter.index}
+          filter={filter}
+          onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+          onRemoveFilter={() => onRemoveFilter(filterIndex) }
+        />
+      ))} */}
     </div>
   );
 }
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index 4a16b6511..b2299b2e2 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -9,14 +9,14 @@ interface Props {
 function FilterModal(props: Props) {
   const { filters, onFilterClick = () => null } = props;
   return (
-    <div className="border p-3" style={{ width: '560px', height: '400px', overflowY: 'auto'}}>
+    <div className="border p-3" style={{ width: '490px', height: '400px', overflowY: 'auto'}}>
       <div className="grid grid-flow-row-dense grid-cols-2">
         {filters && Object.keys(filters).map((key) => (
           <div className="p-3">
             <div className="uppercase font-medium mb-1">{key}</div>
             <div>
               {filters[key].map((filter: any) => (
-                <div className="flex items-center py-2 cursor-pointer" onClick={() => onFilterClick(filter)}>
+                <div className="flex items-center py-2 cursor-pointer hover:bg-gray-lightest -mx-2 px-2" onClick={() => onFilterClick(filter)}>
                   <Icon name={filter.icon} size="16"/>
                   <span className="ml-2">{filter.label}</span>
                 </div>
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index e899f6566..17cc7d288 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -10,19 +10,20 @@ interface Props {
 }
 function FilterSelection(props: Props) {
   const { filter, onFilterClick, children } = props;
-  const [showModal, setShowModal] = useState(false)
+  const [showModal, setShowModal] = useState(false);
+
   return (
-    <div>
+    <div className="relative flex-shrink-0">
       <OutsideClickDetectingDiv
         className="relative"
         onClickOutside={ () => setTimeout(function() {
           setShowModal(false)
-        }, 20)}
+        }, 50)}
       >
         { children ? React.cloneElement(children, { onClick: () => setShowModal(true)}) : (
           <div
-            className="rounded border py-1 px-3 flex items-center cursor-pointer bg-gray-lightest text-ellipsis"
-            style={{ width: '140px', height: '30px'}}
+            className="rounded py-1 px-3 flex items-center cursor-pointer bg-gray-lightest text-ellipsis"
+            style={{ width: '140px', height: '30px', border: 'solid thin rgba(34, 36, 38, 0.15)'}}
             onClick={() => setShowModal(true)}
           >
             <span className="mr-auto truncate">{filter.label}</span>
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 65e123ba4..3483b3340 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -4,25 +4,29 @@ import FilterAutoComplete from '../FilterAutoComplete';
 interface Props {
   index: number;
   value: any; // event/filter
+  // type: string;
+  key: string;
   onRemoveValue?: () => void;
   onAddValue?: () => void;
+  showCloseButton: boolean;
   showOrButton: boolean;
   onSelect: (e, item) => void;
 }
 function FilterValue(props: Props) {
-  const { index, value, showOrButton, onRemoveValue , onAddValue } = props;
+  const { index, value, key, showOrButton, showCloseButton, onRemoveValue , onAddValue } = props;
 
   return (
     <FilterAutoComplete
       value={value}
+      showCloseButton={showCloseButton}
       showOrButton={showOrButton}
       onAddValue={onAddValue}
       onRemoveValue={onRemoveValue}
       method={'GET'}
       endpoint='/events/search'
-      params={undefined}
+      params={{ type: key  }}
       headerText={''}
-      placeholder={''}
+      // placeholder={''}
       onSelect={props.onSelect}
     />
   );
diff --git a/frontend/app/components/ui/SegmentSelection/segmentSelection.css b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
index a74d7d77b..e33ec3b73 100644
--- a/frontend/app/components/ui/SegmentSelection/segmentSelection.css
+++ b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
@@ -3,16 +3,16 @@
   align-items: center;
   justify-content: space-around;
   border: solid thin $gray-light;
-  border-radius: 5px;
+  border-radius: 3px;
   overflow: hidden;
 
   & .item {
     color: $gray-medium;
     font-weight: medium;
     padding: 10px;
-    flex: 1;
+    /* flex: 1; */
     text-align: center;
-    border-right: solid thin $gray-light;
+    border-right: solid thin $teal;
     cursor: pointer;
     background-color: $gray-lightest;
     display: flex;
@@ -64,6 +64,6 @@
 }
 
 .extraSmall .item {
-  padding: 2px 4px;
+  padding: 0 4px;
   font-size: 12px;
 }
\ No newline at end of file
diff --git a/frontend/app/duck/customMetrics.js b/frontend/app/duck/customMetrics.js
index 0909ff3b1..f6a7b0b88 100644
--- a/frontend/app/duck/customMetrics.js
+++ b/frontend/app/duck/customMetrics.js
@@ -48,6 +48,7 @@ function reducer(state = initialState, action = {}) {
     case EDIT:
       return state.mergeIn([ 'instance' ], CustomMetric(action.instance));
     case UPDATE_SERIES:
+      console.log('update series', action.series);
       return state.setIn(['instance', 'series', action.index], FilterSeries(action.series));
     case success(SAVE):
       return state.set([ 'instance' ], CustomMetric(action.data));
@@ -55,11 +56,7 @@ function reducer(state = initialState, action = {}) {
 			return state.set("instance", ErrorInfo(action.data)); 
 		case success(FETCH_LIST):
 			const { data } = action;
-			return state
-				.set("totalCount", data ? data.total : 0)
-				.set("list", List(data && data.errors).map(CustomMetric)
-					.filter(e => e.parentErrorId == null)
-					.map(e => e.update("chart", chartWrapper)));
+			return state.set("list", List(data.map(CustomMetric)));
 	}
 	return state;
 }
@@ -95,11 +92,9 @@ export function save(instance) {
   };
 }
 
-export function fetchList(params = {}, clear = false) {
+export function fetchList() {
   return {
     types: array(FETCH_LIST),
-    call: client => client.post('/errors/search', params),
-    clear,
-    params: cleanParams(params),
+    call: client => client.get(`/${name}s`),
   };
 }
\ No newline at end of file
diff --git a/frontend/app/duck/filters.js b/frontend/app/duck/filters.js
index 290a4f1cb..9122fb9c2 100644
--- a/frontend/app/duck/filters.js
+++ b/frontend/app/duck/filters.js
@@ -14,11 +14,9 @@ import { newFiltersList } from 'Types/filter'
 import NewFilter, { filtersMap } from 'Types/filter/newFilter';
 
 const filterOptions = {}
-// newFiltersList.forEach(filter => {
-//   filterOptions[filter.category] = filter
-// })
 
 Object.keys(filtersMap).forEach(key => {
+  // const filter = NewFilter(filtersMap[key]);
   const filter = filtersMap[key];
   if (filterOptions.hasOwnProperty(filter.category)) {
     filterOptions[filter.category].push(filter);
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 077ec9904..8915fd341 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -107,8 +107,9 @@
 }
 
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 25px;
   & label {
+    display: inline-block;
     margin-bottom: 5px;
   }
 }
\ No newline at end of file
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
index 32c4386b6..1bfaebbd6 100644
--- a/frontend/app/types/customMetric.js
+++ b/frontend/app/types/customMetric.js
@@ -17,6 +17,7 @@ export const FilterSeries = Record({
   methods: {
     toData() {
       const js = this.toJS();
+      delete js.key;
       // js.filter = js.filter.toData();
       return js;
     },
@@ -42,6 +43,7 @@ export default Record({
 
     toData() {
       const js = this.toJS();
+      
       js.series = js.series.map(series => {
         series.filter.filters = series.filter.filters.map(filter => {
           delete filter.operatorOptions
@@ -51,6 +53,8 @@ export default Record({
         return series;
       });
 
+      delete js.key;
+
       return js;
     },
   },
diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js
index 41c3421f8..e3663e860 100644
--- a/frontend/app/types/filter/filter.js
+++ b/frontend/app/types/filter/filter.js
@@ -46,6 +46,7 @@ export default Record({
   suspicious: undefined,
   consoleLevel: undefined,
   strict: false,
+  eventsOrder: 'and',
 }, {
   idKey: 'searchId',
   methods: {
@@ -53,10 +54,12 @@ export default Record({
       const js = this.toJS();
       js.filters = js.filters.map(filter => {
         delete filter.operatorOptions
+        delete filter._key
         return filter;
       });
 
       delete js.createdAt;
+      delete js.key;
       return js;
     }
   },
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 2c1a49f48..091b16277 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -219,41 +219,41 @@ export const booleanOptions = [
 ]
 
 export const filtersMap = {
-  [TYPES.CLICK]: { category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click' },
-  [TYPES.INPUT]: { category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.LOCATION]: { category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.CLICK]: { key: TYPES.CLICK, type: 'multiple', category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
+  [TYPES.INPUT]: { key: TYPES.INPUT, type: 'multiple', category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  [TYPES.LOCATION]: { key: TYPES.LOCATION, type: 'multiple', category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
 
-  [TYPES.USER_OS]: { category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USER_BROWSER]: { category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USER_DEVICE]: { category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.PLATFORM]: { category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.REVID]: { category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USER_OS]: { key: TYPES.USER_OS, type: 'multiple', category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USER_BROWSER]: { key: TYPES.USER_BROWSER, type: 'multiple', category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USER_DEVICE]: { key: TYPES.USER_DEVICE, type: 'multiple', category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.PLATFORM]: { key: TYPES.PLATFORM, type: 'multiple', category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.REVID]: { key: TYPES.REVID, type: 'multiple', category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
 
-  [TYPES.REFERRER]: { category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.DURATION]: { category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USER_COUNTRY]: { category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.REFERRER]: { key: TYPES.REFERRER, type: 'multiple', category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.DURATION]: { key: TYPES.DURATION, type: 'number', category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USER_COUNTRY]: { key: TYPES.USER_COUNTRY, type: 'multiple', category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
 
-  [TYPES.CONSOLE]: { category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.ERROR]: { category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.FETCH]: { category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.GRAPHQL]: { category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.STATEACTION]: { category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.CONSOLE]: { key: TYPES.CONSOLE, type: 'multiple', category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.ERROR]: { key: TYPES.ERROR, type: 'multiple', category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.FETCH]: { key: TYPES.FETCH, type: 'multiple', category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.GRAPHQL]: { key: TYPES.GRAPHQL, type: 'multiple', category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.STATEACTION]: { key: TYPES.STATEACTION, type: 'multiple', category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
 
-  [TYPES.USERID]: { category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USERANONYMOUSID]: { category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USERID]: { key: TYPES.USERID, type: 'multiple', category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.USERANONYMOUSID]: { key: TYPES.USERANONYMOUSID, type: 'multiple', category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
   
-  [TYPES.DOM_COMPLETE]: { category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.LARGEST_CONTENTFUL_PAINT_TIME]: { category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.TIME_BETWEEN_EVENTS]: { category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.TTFB]: { category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.AVG_CPU_LOAD]: { category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.AVG_MEMORY_USAGE]: { category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.SLOW_SESSION]: { category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
-  [TYPES.MISSING_RESOURCE]: { category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
-  [TYPES.CLICK_RAGE]: { category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
-  // [TYPES.URL]: { category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
-  // [TYPES.CUSTOM]: { category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
-  // [TYPES.METADATA]: { category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
+  [TYPES.DOM_COMPLETE]: { key: TYPES.DOM_COMPLETE, type: 'multiple', category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.LARGEST_CONTENTFUL_PAINT_TIME]: { key: TYPES.LARGEST_CONTENTFUL_PAINT_TIME, type: 'number', category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.TIME_BETWEEN_EVENTS]: { key: TYPES.TIME_BETWEEN_EVENTS, type: 'number', category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.TTFB]: { key: TYPES.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.AVG_CPU_LOAD]: { key: TYPES.AVG_CPU_LOAD, type: 'number', category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.AVG_MEMORY_USAGE]: { key: TYPES.AVG_MEMORY_USAGE, type: 'number', category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [TYPES.SLOW_SESSION]: { key: TYPES.SLOW_SESSION, type: 'boolean', category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
+  [TYPES.MISSING_RESOURCE]: { key: TYPES.MISSING_RESOURCE, type: 'boolean', category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
+  [TYPES.CLICK_RAGE]: { key: TYPES.CLICK_RAGE, type: 'boolean', category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
+  // [TYPES.URL]: { / [TYPES,TYPES. category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
+  // [TYPES.CUSTOM]: { / [TYPES,TYPES. category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
+  // [TYPES.METADATA]: { / [TYPES,TYPES. category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
 }
 
 export default Record({
@@ -263,6 +263,7 @@ export default Record({
   icon: '',
   type: '',
   value: [""],
+  category: '',
   
   custom: '',
   // target: Target(),
@@ -274,10 +275,13 @@ export default Record({
   
   operator: 'is',
   operatorOptions: [],
+  isEvent: false,
+  index: 0,
 }, {
   keyKey: "_key",
   fromJS: ({ ...filter }) => ({
     ...filter,
+    key: filter.type,
     type: filter.type, // camelCased(filter.type.toLowerCase()),
     // key: filter.type === METADATA ? filter.label : filter.key || filter.type, // || camelCased(filter.type.toLowerCase()),
     // label: getLabel(filter),
@@ -299,10 +303,4 @@ export default Record({
 //     operators: filterMap[key].operatorOptions,
 //     value: [""]
 //   }
-// }
-
-// export const newFiltersList = [
-//   NewFilterType(TYPES.CLICK, 'Click', 'filters/click', true),
-//   NewFilterType(TYPES.CLICK, 'Input', 'filters/click', true),
-//   NewFilterType(TYPES.CONSOLE, 'Console', 'filters/click', true),
-// ];
\ No newline at end of file
+// }
\ No newline at end of file

From af260a7530deb4d47ba67f9d10fa9ce2505ec866 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sun, 23 Jan 2022 23:25:28 +0530
Subject: [PATCH 3/6] feat(ui) - custom metrics

---
 frontend/app/components/Alerts/AlertForm.js   |  18 +-
 .../Alerts/AlertFormModal/AlertFormModal.tsx  |  91 +++++++
 .../components/Alerts/AlertFormModal/index.ts |   1 +
 .../app/components/Dashboard/Dashboard.js     |   2 +-
 .../CustomMetricWidget/CustomMetricWidget.css |   6 +
 .../CustomMetricWidget/CustomMetricWidget.tsx | 147 ++++++++---
 .../CustomMetricWidgetPreview.css             |   6 +
 .../CustomMetricWidgetPreview.tsx             | 110 ++++++++
 .../CustomMetricWidgetPreview/index.ts        |   1 +
 .../CustomMetricsWidgets.tsx                  |  17 +-
 .../CustomMetricForm/CustomMetricForm.tsx     |   9 +-
 .../shared/CustomMetrics/CustomMetrics.tsx    |  31 ++-
 .../FilterSeries/FilterSeries.tsx             |  15 +-
 .../FilterSeries/SeriesName/SeriesName.tsx    |  46 ++++
 .../FilterSeries/SeriesName/index.ts          |   1 +
 .../FilterAutoComplete/FilterAutoComplete.tsx |   2 +-
 .../Filters/FilterDuration/FilterDuration.css |  24 ++
 .../Filters/FilterDuration/FilterDuration.js  |  66 +++++
 .../shared/Filters/FilterDuration/index.js    |   1 +
 .../shared/Filters/FilterItem/FilterItem.tsx  |  61 ++---
 .../Filters/FilterOperator/FilterOperator.tsx |   4 +-
 .../shared/Filters/FilterOperator/index.ts    |   1 +
 .../Filters/FilterValue/FilterValue.tsx       | 104 ++++++--
 .../FilterValueDropdown.css                   |  19 ++
 .../FilterValueDropdown.tsx                   |  31 +++
 .../Filters/FilterValueDropdown/index.ts      |   1 +
 .../ui/SegmentSelection/segmentSelection.css  |   3 +-
 frontend/app/duck/alerts.js                   |  41 ++-
 frontend/app/duck/customMetrics.js            |  22 +-
 frontend/app/types/customMetric.js            |  13 +-
 frontend/app/types/dashboard/customMetric.js  |  14 +
 frontend/app/types/filter/filter.js           |   4 +-
 frontend/app/types/filter/filterType.ts       |  49 ++++
 frontend/app/types/filter/newFilter.js        | 239 ++++++++++--------
 frontend/env.js                               |   2 +-
 35 files changed, 963 insertions(+), 239 deletions(-)
 create mode 100644 frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
 create mode 100644 frontend/app/components/Alerts/AlertFormModal/index.ts
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.css
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
 create mode 100644 frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts
 create mode 100644 frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
 create mode 100644 frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css
 create mode 100644 frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js
 create mode 100644 frontend/app/components/shared/Filters/FilterDuration/index.js
 create mode 100644 frontend/app/components/shared/Filters/FilterOperator/index.ts
 create mode 100644 frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
 create mode 100644 frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
 create mode 100644 frontend/app/components/shared/Filters/FilterValueDropdown/index.ts
 create mode 100644 frontend/app/types/dashboard/customMetric.js
 create mode 100644 frontend/app/types/filter/filterType.ts

diff --git a/frontend/app/components/Alerts/AlertForm.js b/frontend/app/components/Alerts/AlertForm.js
index deb0fa405..692191c96 100644
--- a/frontend/app/components/Alerts/AlertForm.js
+++ b/frontend/app/components/Alerts/AlertForm.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Button, Dropdown, Form, Input, SegmentSelection, Checkbox, Message, Link, Icon } from 'UI';
 import { alertMetrics as metrics } from 'App/constants';
 import { alertConditions as conditions } from 'App/constants';
@@ -8,6 +8,7 @@ import stl from './alertForm.css';
 import DropdownChips from './DropdownChips';
 import { validateEmail } from 'App/validate';
 import cn from 'classnames';
+import { fetchTriggerOptions } from 'Duck/alerts';
 
 const thresholdOptions = [
   { text: '15 minutes', value: 15 },
@@ -46,11 +47,15 @@ const Section = ({ index, title, description, content }) => (
 const integrationsRoute = client(CLIENT_TABS.INTEGRATIONS);
 
 const AlertForm = props => {
-  const { instance, slackChannels, webhooks, loading, onDelete, deleting } = props;  
+  const { instance, slackChannels, webhooks, loading, onDelete, deleting, triggerOptions } = props;  
   const write = ({ target: { value, name } }) => props.edit({ [ name ]: value })
   const writeOption = (e, { name, value }) => props.edit({ [ name ]: value });
   const onChangeOption = (e, { checked, name }) => props.edit({ [ name ]: checked })
 
+  useEffect(() => {
+    props.fetchTriggerOptions();
+  }, [])
+
   const writeQueryOption = (e, { name, value }) => {
     const { query } = instance;
     props.edit({ query: { ...query, [name] : value } });
@@ -61,10 +66,12 @@ const AlertForm = props => {
     props.edit({ query: { ...query, [name] : value } });
   }
 
-  const metric = (instance && instance.query.left) ? metrics.find(i => i.value === instance.query.left) : null;
+  const metric = (instance && instance.query.left) ? triggerOptions.find(i => i.value === instance.query.left) : null;
   const unit = metric ? metric.unit : '';
   const isThreshold = instance.detectionMethod === 'threshold';
 
+  console.log('triggerOptions', triggerOptions)
+
 
   return (
     <Form className={ cn("p-6", stl.wrapper)} style={{ width: '580px' }} onSubmit={() => props.onSubmit(instance)} id="alert-form">
@@ -135,7 +142,7 @@ const AlertForm = props => {
                   placeholder="Select Metric"
                   selection
                   search
-                  options={ metrics }
+                  options={ triggerOptions }
                   name="left"
                   value={ instance.query.left }
                   onChange={ writeQueryOption }
@@ -327,6 +334,7 @@ const AlertForm = props => {
 
 export default connect(state => ({
   instance: state.getIn(['alerts', 'instance']),
+  triggerOptions: state.getIn(['alerts', 'triggerOptions']),
   loading: state.getIn(['alerts', 'saveRequest', 'loading']),
   deleting: state.getIn(['alerts', 'removeRequest', 'loading'])
-}))(AlertForm)
+}), { fetchTriggerOptions })(AlertForm)
diff --git a/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
new file mode 100644
index 000000000..5cf30c278
--- /dev/null
+++ b/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react'
+import { SlideModal, IconButton } from 'UI';
+import { init, edit, save, remove } from 'Duck/alerts';
+import { fetchList as fetchWebhooks } from 'Duck/webhook';
+import AlertForm from '../AlertForm';
+import { connect } from 'react-redux';
+import { setShowAlerts } from 'Duck/dashboard';
+import { EMAIL, SLACK, WEBHOOK } from 'App/constants/schedule';
+import { confirm } from 'UI/Confirmation';
+
+interface Props {
+  showModal?: boolean;
+  metricId?: number;
+  onClose: () => void;
+}
+function AlertFormModal(props) {
+  const { metricId = null, showModal = false, webhooks, setShowAlerts } = props;
+  const [showForm, setShowForm] = useState(false);
+
+  useEffect(() => {
+    props.fetchWebhooks();
+  }, [])
+
+  const slackChannels = webhooks.filter(hook => hook.type === SLACK).map(({ webhookId, name }) => ({ value: webhookId, text: name })).toJS();
+  const hooks = webhooks.filter(hook => hook.type === WEBHOOK).map(({ webhookId, name }) => ({ value: webhookId, text: name })).toJS();
+
+  const saveAlert = instance => {
+    const wasUpdating = instance.exists();
+    props.save(instance).then(() => {
+      if (!wasUpdating) {
+        toggleForm(null, false);
+      }
+    })
+  }
+
+  const onDelete = async (instance) => {
+    if (await confirm({
+      header: 'Confirm',
+      confirmButton: 'Yes, Delete',
+      confirmation: `Are you sure you want to permanently delete this alert?`
+    })) {
+      props.remove(instance.alertId).then(() => {
+        toggleForm(null, false);
+      });
+    }
+  }
+
+  const toggleForm = (instance, state) => {
+    if (instance) {
+      props.init(instance)
+    }
+    return setShowForm(state ? state : !showForm);
+  }
+
+  return (
+    <SlideModal
+        title={
+          <div className="flex items-center">
+            <span className="mr-3">{ 'Create Alert' }</span>
+            <IconButton 
+              circle
+              size="small"
+              icon="plus" 
+              outline
+              id="add-button"
+              onClick={ () => toggleForm({}, true) }
+            />
+          </div>
+        }
+        isDisplayed={ showModal }
+        onClose={props.onClose}
+        size="medium"
+        content={ showModal &&
+          <AlertForm
+            metricId={ props.metricId }
+            edit={props.edit}
+            slackChannels={slackChannels}
+            webhooks={hooks}
+            onSubmit={saveAlert}
+            onClose={props.onClose}
+            onDelete={onDelete}
+          />
+      }
+      />
+  );
+}
+
+export default connect(state => ({
+  webhooks: state.getIn(['webhooks', 'list']),
+  instance: state.getIn(['alerts', 'instance']),
+}), { init, edit, save, remove, fetchWebhooks, setShowAlerts })(AlertFormModal)
\ No newline at end of file
diff --git a/frontend/app/components/Alerts/AlertFormModal/index.ts b/frontend/app/components/Alerts/AlertFormModal/index.ts
new file mode 100644
index 000000000..6eb4de1f2
--- /dev/null
+++ b/frontend/app/components/Alerts/AlertFormModal/index.ts
@@ -0,0 +1 @@
+export { default } from './AlertFormModal';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Dashboard.js b/frontend/app/components/Dashboard/Dashboard.js
index 81d7a1de9..ecbfc9daa 100644
--- a/frontend/app/components/Dashboard/Dashboard.js
+++ b/frontend/app/components/Dashboard/Dashboard.js
@@ -205,7 +205,7 @@ export default class Dashboard extends React.PureComponent {
 
                 <WidgetSection title="Custom Metrics" type="customMetrics" className="mb-4">
                   <div className={ cn("gap-4", { 'grid grid-cols-2' : !comparing })} ref={this.list[CUSTOM_METRICS]}>
-                    <CustomMetricsWidgets />
+                    <CustomMetricsWidgets onClickEdit={(e) => null}/>
                   </div>
                 </WidgetSection>
 
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.css b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.css
new file mode 100644
index 000000000..1d1ef3ee4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.css
@@ -0,0 +1,6 @@
+.wrapper {
+  background-color: white;
+  /* border: solid thin $gray-medium; */
+  border-radius: 3px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
index 9de11f57e..21b04b809 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@@ -1,9 +1,16 @@
-import React from 'react';
-import { Loader, NoContent } from 'UI';
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Loader, NoContent, Icon } from 'UI';
 import { widgetHOC, Styles } from '../../common';
 import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
 import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
 import CustomMetricWidgetHoc from '../../common/CustomMetricWidgetHoc';
+import stl from './CustomMetricWidget.css';
+import { getChartFormatter } from 'Types/dashboard/helper'; 
+import { remove, setAlertMetricId } from 'Duck/customMetrics';
+import { confirm } from 'UI/Confirmation';
+import APIClient from 'App/api_client';
+import { setShowAlerts } from 'Duck/dashboard';
 
 const customParams = rangeName => {
   const params = { density: 70 }
@@ -21,55 +28,117 @@ interface Period {
 }
 
 interface Props {
-  widget: any;
-  loading?: boolean;
+  metric: any;
+  // loading?: boolean;
   data?: any;
   showSync?: boolean;
   compare?: boolean;
   period?: Period;
+  onClickEdit: (e) => void;
+  remove: (id) => void;
+  setShowAlerts: (showAlerts) => void;
+  setAlertMetricId: (id) => void;
+  onAlertClick: (e) => void;
 }
 function CustomMetricWidget(props: Props) {
-  const { widget, loading = false, data = { chart: []}, showSync, compare, period = { rangeName: ''} } = props;
+  const { metric, showSync, compare, period = { rangeName: LAST_24_HOURS} } = props;
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState<any>({ chart: [] })
 
   const colors = compare ? Styles.compareColors : Styles.colors;
   const params = customParams(period.rangeName)
   const gradientDef = Styles.gradientDef();
+  const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
+
+  useEffect(() => {
+
+    // dataWrapper: (p, period) => SessionsImpactedBySlowRequests({ chart: p})
+		// 	.update("chart", getChartFormatter(period))
+    
+    new APIClient()['post']('/custom_metrics/chart', { ...metricParams, q: metric.name })
+      .then(response => response.json())
+      .then(({ errors, data }) => {
+        if (errors) {
+          console.log('err', errors)
+        } else {
+          // console.log('data', data);
+          // const _data = data[0].map(CustomMetric).update("chart", getChartFormatter(period)).toJS();
+          const _data = getChartFormatter(period)(data[0]);
+          console.log('__data', _data)
+          setData({ chart: _data });
+        }
+      }).finally(() => setLoading(false));
+  }, [])
+
+  const deleteHandler = async () => {
+    if (await confirm({
+      header: 'Custom Metric',
+      confirmButton: 'Delete',
+      confirmation: `Are you sure you want to delete ${metric.name}`
+    })) {
+      props.remove(metric.metricId)
+    }
+  }
+
+  // const onAlertClick = () => {
+  //   props.setShowAlerts(true)
+  //   props.setAlertMetricId(metric.metricId)
+  // }
+
   return (
-    <Loader loading={ loading } size="small">
-      <NoContent
-        size="small"
-        show={ data.chart.length === 0 }
-      >
-        <ResponsiveContainer height={ 240 } width="100%">
-          <AreaChart
-            data={ data.chart }
-            margin={Styles.chartMargins}
-            syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
+    <div className={stl.wrapper}>
+      <div className="flex items-center mb-10 p-2">
+        <div className="font-medium">{metric.name + ' ' + metric.metricId}</div>
+        <div className="ml-auto flex items-center">
+        <div className="cursor-pointer mr-6" onClick={deleteHandler}>
+            <Icon name="trash" size="14" />
+          </div>
+          <div className="cursor-pointer mr-6">
+            <Icon name="pencil" size="14" />
+          </div>
+          <div className="cursor-pointer" onClick={props.onAlertClick}>
+            <Icon name="bell-plus" size="14" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <Loader loading={ loading } size="small">
+          <NoContent
+            size="small"
+            show={ data.chart.length === 0 }
           >
-            {gradientDef}
-            <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
-            <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
-            <YAxis
-              {...Styles.yaxis}
-              label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
-              allowDecimals={false}
-            />
-            <Tooltip {...Styles.tooltip} />
-            <Area
-              name="Sessions"
-              type="monotone"
-              dataKey="count"
-              stroke={colors[0]}
-              fillOpacity={ 1 }
-              strokeWidth={ 2 }
-              strokeOpacity={ 0.8 }
-              fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
-            />
-          </AreaChart>
-        </ResponsiveContainer>
-      </NoContent>
-    </Loader>
+            <ResponsiveContainer height={ 240 } width="100%">
+              <AreaChart
+                data={ data.chart }
+                margin={Styles.chartMargins}
+                syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
+              >
+                {gradientDef}
+                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
+                <YAxis
+                  {...Styles.yaxis}
+                  label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
+                  allowDecimals={false}
+                />
+                <Tooltip {...Styles.tooltip} />
+                <Area
+                  name="Sessions"
+                  type="monotone"
+                  dataKey="count"
+                  stroke={colors[0]}
+                  fillOpacity={ 1 }
+                  strokeWidth={ 2 }
+                  strokeOpacity={ 0.8 }
+                  fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </NoContent>
+        </Loader>
+      </div>
+    </div>
   );
 }
 
-export default CustomMetricWidgetHoc(CustomMetricWidget);
\ No newline at end of file
+export default connect(null, { remove, setShowAlerts, setAlertMetricId })(CustomMetricWidget);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css
new file mode 100644
index 000000000..1d1ef3ee4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.css
@@ -0,0 +1,6 @@
+.wrapper {
+  background-color: white;
+  /* border: solid thin $gray-medium; */
+  border-radius: 3px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
new file mode 100644
index 000000000..8c09ed389
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/CustomMetricWidgetPreview.tsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { Loader, NoContent, Icon } from 'UI';
+import { widgetHOC, Styles } from '../../common';
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
+import { LAST_24_HOURS, LAST_30_MINUTES, YESTERDAY, LAST_7_DAYS } from 'Types/app/period';
+import stl from './CustomMetricWidgetPreview.css';
+import { getChartFormatter } from 'Types/dashboard/helper'; 
+import { remove } from 'Duck/customMetrics';
+import { confirm } from 'UI/Confirmation';
+
+import APIClient from 'App/api_client';
+
+const customParams = rangeName => {
+  const params = { density: 70 }
+
+  if (rangeName === LAST_24_HOURS) params.density = 70
+  if (rangeName === LAST_30_MINUTES) params.density = 70
+  if (rangeName === YESTERDAY) params.density = 70
+  if (rangeName === LAST_7_DAYS) params.density = 70
+  
+  return params
+}
+
+interface Period {
+  rangeName: string;
+}
+
+interface Props {
+  metric: any;
+  // loading?: boolean;
+  data?: any;
+  showSync?: boolean;
+  compare?: boolean;
+  period?: Period;
+  onClickEdit?: (e) => void;
+  remove: (id) => void;
+}
+function CustomMetricWidget(props: Props) {
+  const { metric, showSync, compare, period = { rangeName: LAST_24_HOURS} } = props;
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState<any>({ chart: [{}] })
+
+  const colors = compare ? Styles.compareColors : Styles.colors;
+  const params = customParams(period.rangeName)
+  const gradientDef = Styles.gradientDef();
+  const metricParams = { ...params, metricId: metric.metricId, viewType: 'lineChart' }
+
+  useEffect(() => {
+    new APIClient()['post']('/custom_metrics/try', { ...metricParams, ...metric.toSaveData() })
+      .then(response => response.json())
+      .then(({ errors, data }) => {
+        if (errors) {
+          console.log('err', errors)
+        } else {
+          const _data = getChartFormatter(period)(data[0]);
+          console.log('__data', _data)
+          setData({ chart: _data });
+        }
+      }).finally(() => setLoading(false));
+  }, [metric])
+
+  
+
+  return (
+    <div className={stl.wrapper}>
+      <div className="flex items-center mb-10 p-2">
+        
+      </div>
+      <div>
+        <Loader loading={ loading } size="small">
+          <NoContent
+            size="small"
+            show={ data.chart.length === 0 }
+          >
+            <ResponsiveContainer height={ 240 } width="100%">
+              <AreaChart
+                data={ data.chart }
+                margin={Styles.chartMargins}
+                syncId={ showSync ? "impactedSessionsBySlowPages" : undefined }
+              >
+                {gradientDef}
+                <CartesianGrid strokeDasharray="3 3" vertical={ false } stroke="#EEEEEE" />
+                <XAxis {...Styles.xaxis} dataKey="time" interval={params.density/7} />
+                <YAxis
+                  {...Styles.yaxis}
+                  label={{ ...Styles.axisLabelLeft, value: "Number of Requests" }}
+                  allowDecimals={false}
+                />
+                <Tooltip {...Styles.tooltip} />
+                <Area
+                  name="Sessions"
+                  type="monotone"
+                  dataKey="count"
+                  stroke={colors[0]}
+                  fillOpacity={ 1 }
+                  strokeWidth={ 2 }
+                  strokeOpacity={ 0.8 }
+                  fill={compare ? 'url(#colorCountCompare)' : 'url(#colorCount)'}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </NoContent>
+        </Loader>
+      </div>
+    </div>
+  );
+}
+
+export default connect(null, { remove })(CustomMetricWidget);
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts
new file mode 100644
index 000000000..9595513c4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomMetricWidgetPreview';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
index 3ea473f61..632c7dc22 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricsWidgets.tsx
@@ -1,15 +1,18 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { fetchList } from 'Duck/customMetrics';
 import { list } from 'App/components/BugFinder/CustomFilters/filterModal.css';
 import CustomMetricWidget from './CustomMetricWidget';
+import AlertFormModal from 'App/components/Alerts/AlertFormModal';
 
 interface Props {
   fetchList: Function;
   list: any;
+  onClickEdit: (e) => void;
 }
 function CustomMetricsWidgets(props: Props) {
   const { list } = props;
+  const [activeMetricId, setActiveMetricId] = useState(null);
 
   useEffect(() => {
     props.fetchList()
@@ -18,8 +21,18 @@ function CustomMetricsWidgets(props: Props) {
   return (
     <>
       {list.map((item: any) => (
-        <CustomMetricWidget widget={item} />
+        <CustomMetricWidget
+          metric={item}
+          onClickEdit={props.onClickEdit}
+          onAlertClick={(e) => setActiveMetricId(item.metricId)}
+        />
       ))}
+
+      <AlertFormModal
+        showModal={!!activeMetricId}
+        metricId={activeMetricId}
+        onClose={() => setActiveMetricId(null)}
+      />
     </>
   );
 }
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
index 243a51ced..60bcce7a9 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
@@ -3,6 +3,7 @@ import { Form, SegmentSelection, Button, IconButton } from 'UI';
 import FilterSeries from '../FilterSeries';
 import { connect } from 'react-redux';
 import { edit as editMetric, save } from 'Duck/customMetrics';
+import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview';
 
 interface Props {
   metric: any;
@@ -50,7 +51,7 @@ function CustomMetricForm(props: Props) {
       className="relative"
       onSubmit={() => props.save(metric)}
     >
-      <div className="p-5" style={{ height: 'calc(100vh - 60px)', overflowY: 'auto' }}>
+      <div className="p-5 pb-20" style={{ height: 'calc(100vh - 60px)', overflowY: 'auto' }}>
         <div className="form-group">
           <label className="font-medium">Metric Title</label>
           <input
@@ -103,9 +104,13 @@ function CustomMetricForm(props: Props) {
         <div className="flex justify-end">
           <IconButton onClick={addSeries} primaryText label="SERIES" icon="plus" />
         </div>
+
+        <div className="my-4" />
+
+        <CustomMetricWidgetPreview metric={metric} />
       </div>
 
-      <div className="absolute w-full bottom-0 px-5 py-2 bg-white">
+      <div className="fixed border-t w-full bottom-0 px-5 py-2 bg-white">
         <Button loading={loading} primary>
           Save
         </Button>
diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
index c11682513..158ef73c5 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
+++ b/frontend/app/components/shared/CustomMetrics/CustomMetrics.tsx
@@ -1,14 +1,28 @@
+import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview';
 import React, { useState } from 'react';
 import { IconButton, SlideModal } from 'UI'
 import CustomMetricForm from './CustomMetricForm';
+import { connect } from 'react-redux';
+import { edit } from 'Duck/customMetrics';
 
-interface Props {}
+interface Props {
+  metric: any;
+  edit: (metric) => void;
+}
 function CustomMetrics(props: Props) {
-  const [showModal, setShowModal] = useState(true);
+  const { metric } = props;
+  const [showModal, setShowModal] = useState(false);
+
+  const onClose = () => {
+    setShowModal(false);
+  }
 
   return (
     <div className="self-start">
-      <IconButton outline icon="plus" label="CREATE METRIC" onClick={() => setShowModal(true)} />
+      <IconButton outline icon="plus" label="CREATE METRIC" onClick={() => {
+        setShowModal(true);
+        // props.edit({ name: 'New', series: [{ name: '', filter: {} }], type: '' });
+      }} />
 
       <SlideModal
         title={
@@ -19,9 +33,9 @@ function CustomMetrics(props: Props) {
         isDisplayed={ showModal }
         onClose={ () => setShowModal(false)}
         // size="medium"
-        content={ showModal && (
-          <div style={{ backgroundColor: '#f6f6f6'}}>
-            <CustomMetricForm />
+        content={ (showModal || metric) && (
+          <div style={{ backgroundColor: '#f6f6f6' }}>
+            <CustomMetricForm metric={metric} />
           </div>
         )}
       />
@@ -29,4 +43,7 @@ function CustomMetrics(props: Props) {
   );
 }
 
-export default CustomMetrics;
\ No newline at end of file
+export default connect(state => ({
+  metric: state.getIn(['customMetrics', 'instance']),
+  alertInstance: state.getIn(['alerts', 'instance']),
+}), { edit })(CustomMetrics);
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
index 69a1637d5..2fafe112f 100644
--- a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
@@ -4,6 +4,7 @@ import { edit, updateSeries } from 'Duck/customMetrics';
 import { connect } from 'react-redux';
 import { IconButton, Button, Icon, SegmentSelection } from 'UI';
 import FilterSelection from '../../Filters/FilterSelection';
+import SeriesName from './SeriesName';
 
 interface Props {
   seriesIndex: number;
@@ -14,7 +15,7 @@ interface Props {
 }
 
 function FilterSeries(props: Props) {
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(true)
   const { series, seriesIndex } = props;
 
   const onAddFilter = (filter) => {
@@ -74,9 +75,15 @@ function FilterSeries(props: Props) {
   return (
     <div className="border rounded bg-white">
       <div className="border-b px-5 h-12 flex items-center relative">
-        <div className="font-medium">{ series.name }</div>
-        
-        <div className="flex items-center cursor-pointer ml-auto" >
+        {/* <div className="font-medium flex items-center">
+          { series.name }
+          <div className="ml-3 cursor-pointer"><Icon name="pencil" size="14" /></div>
+        </div> */}
+        <div className="mr-auto">
+          <SeriesName name={series.name} onUpdate={() => null } />
+        </div>    
+    
+        <div className="flex items-center cursor-pointer" >
           <div onClick={props.onRemoveSeries} className="ml-3">
             <Icon name="trash" size="16" />
           </div>
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
new file mode 100644
index 000000000..7be696fd5
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/SeriesName.tsx
@@ -0,0 +1,46 @@
+import { edit } from 'App/components/ui/ItemMenu/itemMenu.css';
+import React, { useState, useRef, useEffect } from 'react';
+import { Icon } from 'UI';
+
+interface Props {
+  name: string;
+  onUpdate: (name) => void;
+}
+function SeriesName(props: Props) {
+  const [editing, setEditing] = useState(false)
+  const [name, setName] = useState(props.name)
+  const ref = useRef<any>(null)
+
+  const write = ({ target: { value, name } }) => {
+    setName(value)
+  }
+
+  const onBlur = () => {
+    setEditing(false)
+    // props.onUpdate(name)
+  }
+
+  useEffect(() => {
+    if (editing) {
+      ref.current.focus()
+    }
+  }, [editing])
+  
+  // const { name } = props;
+  return (
+    <div className="font-medium flex items-center">
+      <input
+        ref={ ref }
+        name="name"
+        className="fluid border-0 -mx-2 px-2"
+        value={name} readOnly={!editing} 
+        onChange={write}
+        onBlur={onBlur}
+        onFocus={() => setEditing(true)}
+      />
+      <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div>
+    </div>
+  );
+}
+
+export default SeriesName;
\ No newline at end of file
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/index.ts b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/index.ts
new file mode 100644
index 000000000..90e63cdb6
--- /dev/null
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/SeriesName/index.ts
@@ -0,0 +1 @@
+export { default }  from './SeriesName';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
index fd215c11e..c313563ec 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -101,7 +101,7 @@ function FilterAutoComplete(props: Props) {
         <input
           name="query"
           onChange={ onInputChange }
-          onBlur={ () => setTimeout(() => { setShowModal(false) }, 10) }
+          onBlur={ () => setTimeout(() => { setShowModal(false) }, 50) }
           onFocus={ () => setShowModal(true)}
           value={ query }
           autoFocus={ true }
diff --git a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css
new file mode 100644
index 000000000..c7a272458
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.css
@@ -0,0 +1,24 @@
+.wrapper {  
+  display: flex;
+  justify-content: space-between;
+
+  & input {
+    max-width: 85px !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    color: $gray-medium !important;
+  }
+  
+  & > div {
+    &:first-child {
+      margin-right: 10px;
+    }
+  }
+}
+
+.label {
+  font-size: 13px !important;
+  font-weight: 400 !important;
+  color: $gray-medium !important;
+}
+
diff --git a/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js
new file mode 100644
index 000000000..8069bf3a8
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterDuration/FilterDuration.js
@@ -0,0 +1,66 @@
+import { Input, Label } from 'semantic-ui-react';
+import styles from './FilterDuration.css';
+
+const fromMs = value => value ? `${ value / 1000 / 60 }` : ''
+const toMs = value => value !== '' ? value * 1000 * 60 : null
+
+export default class FilterDuration extends React.PureComponent {
+  state = { focused: false }
+  onChange = (e, { name, value }) => {
+    const { onChange } = this.props;
+    if (typeof onChange === 'function') {
+      onChange({
+        [ name ]: toMs(value),
+      });
+    }
+  }
+
+  onKeyPress = e => {
+    const { onEnterPress } = this.props;
+    if (e.key === 'Enter' && typeof onEnterPress === 'function') {
+      onEnterPress(e);
+    }
+  }
+
+  render() {
+    const {
+      minDuration,
+      maxDuration,
+    } = this.props;
+
+    return (
+      <div className={ styles.wrapper }>
+        <Input
+          labelPosition="left"
+          type="number"
+          placeholder="0 min"
+          name="minDuration"
+          value={ fromMs(minDuration) }
+          onChange={ this.onChange }
+          className="customInput"
+          onKeyPress={ this.onKeyPress }
+          onFocus={() => this.setState({ focused: true })}
+          onBlur={this.props.onBlur}
+        >
+          <Label basic className={ styles.label }>{ 'Min' }</Label>
+          <input min="1" />
+        </Input>
+        <Input
+          labelPosition="left"
+          type="number"
+          placeholder="∞ min"
+          name="maxDuration"
+          value={ fromMs(maxDuration) }
+          onChange={ this.onChange }
+          className="customInput"
+          onKeyPress={ this.onKeyPress }
+          onFocus={() => this.setState({ focused: true })}
+          onBlur={this.props.onBlur}
+        >
+          <Label basic className={ styles.label }>{ 'Max' }</Label>
+          <input min="1" />
+        </Input>
+      </div>
+    );
+  }
+}
diff --git a/frontend/app/components/shared/Filters/FilterDuration/index.js b/frontend/app/components/shared/Filters/FilterDuration/index.js
new file mode 100644
index 000000000..cbf9296f3
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterDuration/index.js
@@ -0,0 +1 @@
+export { default } from './FilterDuration';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index c1e35f250..c45b7620a 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -17,25 +17,25 @@ function FitlerItem(props: Props) {
     onUpdate(filter);
   };
 
-  const onAddValue = () => {
-    const newValues = filter.value.concat("")
-    onUpdate({ ...filter, value: newValues })
-  }
+  // const onAddValue = () => {
+  //   const newValues = filter.value.concat("")
+  //   onUpdate({ ...filter, value: newValues })
+  // }
 
-  const onRemoveValue = (valueIndex) => {
-    const newValues = filter.value.filter((_, _index) => _index !== valueIndex)
-    onUpdate({ ...filter, value: newValues })
-  }
+  // const onRemoveValue = (valueIndex) => {
+  //   const newValues = filter.value.filter((_, _index) => _index !== valueIndex)
+  //   onUpdate({ ...filter, value: newValues })
+  // }
 
-  const onSelect = (e, item, valueIndex) => {
-    const newValues = filter.value.map((_, _index) => {
-      if (_index === valueIndex) {
-        return item.value;
-      }
-      return _;
-    })
-    onUpdate({ ...filter, value: newValues })
-  }
+  // const onSelect = (e, item, valueIndex) => {
+  //   const newValues = filter.value.map((_, _index) => {
+  //     if (_index === valueIndex) {
+  //       return item.value;
+  //     }
+  //     return _;
+  //   })
+  //   onUpdate({ ...filter, value: newValues })
+  // }
 
   console.log('filter', filter);
 
@@ -49,22 +49,23 @@ function FitlerItem(props: Props) {
         <div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div>
         <FilterSelection filter={filter} onFilterClick={replaceFilter} />
         <FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2 flex-shrink-0"/>
-        <div className="grid grid-cols-3 gap-3">
-          {filter.value && filter.value.map((value, valueIndex) => (
+        {/* <div className="grid grid-cols-3 gap-3"> */}
+          {/* {filter.value && filter.value.map((value, valueIndex) => ( */}
             <FilterValue
-              showCloseButton={filter.value.length > 1}
-              showOrButton={valueIndex === filter.value.length - 1}
-              // filter={filter}
+              // showCloseButton={filter.value.length > 1}
+              // showOrButton={valueIndex === filter.value.length - 1}
+              filter={filter}
+              onUpdate={onUpdate}
               // key={valueIndex}
-              value={value}
-              key={filter.key}
-              index={valueIndex}
-              onAddValue={onAddValue}
-              onRemoveValue={() => onRemoveValue(valueIndex)}
-              onSelect={(e, item) => onSelect(e, item, valueIndex)}
+              // value={value}
+              // key={filter.key}
+              // index={valueIndex}
+              // onAddValue={onAddValue}
+              // onRemoveValue={(valueIndex) => onRemoveValue(valueIndex)}
+              // onSelect={(e, item, valueIndex) => onSelect(e, item, valueIndex)}
             />
-          ))}
-        </div>
+          {/* ))} */}
+        {/* </div> */}
       </div>
       <div className="flex self-start mt-2">
         <div
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
index 8cb6d6bf0..dc1f54148 100644
--- a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@@ -5,14 +5,11 @@ import stl from './FilterOperator.css';
 
 interface Props {
   filter: any; // event/filter
-  // options: any[];
-  // value: string;
   onChange: (e, { name, value }) => void;
   className?: string;
 }
 function FilterOperator(props: Props) {
   const { filter, onChange, className = '' } = props;
-  const options = []
 
   return (
     <Dropdown
@@ -21,6 +18,7 @@ function FilterOperator(props: Props) {
       name="operator"
       value={ filter.operator }
       onChange={ onChange }
+      placeholder="Select operator"
       icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
     />
   );
diff --git a/frontend/app/components/shared/Filters/FilterOperator/index.ts b/frontend/app/components/shared/Filters/FilterOperator/index.ts
new file mode 100644
index 000000000..9345f24f8
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterOperator/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterOperator';
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 3483b3340..95ff92f71 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -1,34 +1,92 @@
 import React from 'react';
 import FilterAutoComplete from '../FilterAutoComplete';
+import { FilterType } from 'Types/filter/filterType';
+import FilterValueDropdown from '../FilterValueDropdown';
+import FilterDuration from '../FilterDuration';
 
 interface Props {
-  index: number;
-  value: any; // event/filter
-  // type: string;
-  key: string;
-  onRemoveValue?: () => void;
-  onAddValue?: () => void;
-  showCloseButton: boolean;
-  showOrButton: boolean;
-  onSelect: (e, item) => void;
+  filter: any;
+  onUpdate: (filter) => void;
 }
 function FilterValue(props: Props) {
-  const { index, value, key, showOrButton, showCloseButton, onRemoveValue , onAddValue } = props;
+  const { filter } = props;
+
+  const onAddValue = () => {
+    const newValues = filter.value.concat("")
+    props.onUpdate({ ...filter, value: newValues })
+  }
+
+  const onRemoveValue = (valueIndex) => {
+    const newValues = filter.value.filter((_, _index) => _index !== valueIndex)
+    props.onUpdate({ ...filter, value: newValues })
+  }
+
+  const onSelect = (e, item, valueIndex) => {
+    const newValues = filter.value.map((_, _index) => {
+      if (_index === valueIndex) {
+        return item.value;
+      }
+      return _;
+    })
+    props.onUpdate({ ...filter, value: newValues })
+  }
+
+  const renderValueFiled = (value, valueIndex) => {
+    switch(filter.type) {
+      case FilterType.ISSUE:
+        return (
+          <FilterValueDropdown
+            value={value}
+            filter={filter}
+            options={filter.options}
+            onChange={(e, { name, value }) => onSelect(e, { value }, valueIndex)}
+          />
+        )
+      case FilterType.DURATION:
+        return (
+          <FilterDuration
+            // onChange={ this.onDurationChange }
+            // onEnterPress={ this.handleClose }
+            // onBlur={this.handleClose}
+            minDuration={ filter.value[0] }
+            maxDuration={ filter.value[1] }
+          />
+        )
+      case FilterType.NUMBER:
+        return (
+          <input
+            className="w-full px-2 py-1 text-sm leading-tight text-gray-700 rounded-lg"
+            type="number"
+            name={`${filter.key}-${valueIndex}`}
+            value={value}
+            onChange={(e) => onSelect(e, { value: e.target.value }, valueIndex)}
+          />
+        )
+      case FilterType.MULTIPLE:
+        return (
+          <FilterAutoComplete
+            value={value}
+            showCloseButton={filter.value.length > 1}
+            showOrButton={valueIndex === filter.value.length - 1}
+            onAddValue={onAddValue}
+            onRemoveValue={() => onRemoveValue(valueIndex)}
+            method={'GET'}
+            endpoint='/events/search'
+            params={{ type: filter.key  }}
+            headerText={''}
+            // placeholder={''}
+            onSelect={(e, item) => onSelect(e, item, valueIndex)}
+          />
+        )
+    }
+  }
 
   return (
-    <FilterAutoComplete
-      value={value}
-      showCloseButton={showCloseButton}
-      showOrButton={showOrButton}
-      onAddValue={onAddValue}
-      onRemoveValue={onRemoveValue}
-      method={'GET'}
-      endpoint='/events/search'
-      params={{ type: key  }}
-      headerText={''}
-      // placeholder={''}
-      onSelect={props.onSelect}
-    />
+    <div className="grid grid-cols-3 gap-3">
+      {filter.value && filter.value.map((value, valueIndex) => (
+        renderValueFiled(value, valueIndex)
+      ))}
+    </div>
   );
 }
 
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
new file mode 100644
index 000000000..8a2329dbd
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
@@ -0,0 +1,19 @@
+.operatorDropdown {
+  font-weight: 400;
+  height: 30px;
+  min-width: 60px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px !important;
+  font-size: 13px;
+  /* background-color: rgba(255, 255, 255, 0.8) !important; */
+  background-color: $gray-lightest !important;
+  border: solid thin rgba(34, 36, 38, 0.15) !important;
+  border-radius: 4px !important;
+  color: $gray-darkest !important;
+  font-size: 14px !important;
+  &.ui.basic.button {
+    box-shadow: 0 0 0 1px rgba(62, 170, 175,36,38,.35) inset, 0 0 0 0 rgba(62, 170, 175,.15) inset !important;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
new file mode 100644
index 000000000..55fc5ee38
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import cn from 'classnames';
+import { Dropdown, Icon } from 'UI';
+import stl from './FilterValueDropdown.css';
+
+interface Props {
+  filter: any; // event/filter
+  // options: any[];
+  value: string;
+  onChange: (e, { name, value }) => void;
+  className?: string;
+  options: any[];
+}
+function FilterValueDropdown(props: Props) {
+  const { options, onChange, value, className = '' } = props;
+  // const options = []
+
+  return (
+    <Dropdown
+      className={ cn(stl.operatorDropdown, className) }      
+      options={ options }
+      name="issue_type"
+      value={ value }
+      onChange={ onChange }
+      placeholder="Select"
+      icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
+    />
+  );
+}
+
+export default FilterValueDropdown;
\ No newline at end of file
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/index.ts b/frontend/app/components/shared/Filters/FilterValueDropdown/index.ts
new file mode 100644
index 000000000..0a0240086
--- /dev/null
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/index.ts
@@ -0,0 +1 @@
+export { default } from './FilterValueDropdown';
\ No newline at end of file
diff --git a/frontend/app/components/ui/SegmentSelection/segmentSelection.css b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
index e33ec3b73..20007b010 100644
--- a/frontend/app/components/ui/SegmentSelection/segmentSelection.css
+++ b/frontend/app/components/ui/SegmentSelection/segmentSelection.css
@@ -10,7 +10,7 @@
     color: $gray-medium;
     font-weight: medium;
     padding: 10px;
-    /* flex: 1; */
+    flex: 1;
     text-align: center;
     border-right: solid thin $teal;
     cursor: pointer;
@@ -18,6 +18,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    white-space: nowrap;
 
     & span svg {
       fill: $gray-medium;
diff --git a/frontend/app/duck/alerts.js b/frontend/app/duck/alerts.js
index b93ff5878..1869db434 100644
--- a/frontend/app/duck/alerts.js
+++ b/frontend/app/duck/alerts.js
@@ -1,9 +1,38 @@
 import Alert from 'Types/alert';
+import { Map } from 'immutable';
 import crudDuckGenerator from './tools/crudDuck';
+import withRequestState, { RequestTypes } from 'Duck/requestStateCreator';
+import { reduceDucks } from 'Duck/tools';
 
+const name = 'alert'
 const idKey = 'alertId';
-const crudDuck = crudDuckGenerator('alert', Alert, { idKey: idKey });
+const crudDuck = crudDuckGenerator(name, Alert, { idKey: idKey });
 export const { fetchList, init, edit, remove } = crudDuck.actions;
+const FETCH_TRIGGER_OPTIONS = new RequestTypes(`${name}/FETCH_TRIGGER_OPTIONS`);
+
+const initialState = Map({
+  definedPercent: 0,
+  triggerOptions: [],
+});
+
+const reducer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    // case GENERATE_LINK.SUCCESS:
+    //   return state.update(
+    //     'list',
+    //     list => list
+    //       .map(member => {
+    //         if(member.id === action.id) {
+    //           return Member({...member.toJS(), invitationLink: action.data.invitationLink })
+    //         }
+    //         return member
+    //       })
+    //   );
+    case FETCH_TRIGGER_OPTIONS.SUCCESS:
+      return state.set('triggerOptions', action.data);
+  }
+  return state;
+};
 
 export function save(instance) {
   return {
@@ -12,4 +41,12 @@ export function save(instance) {
   };
 }
 
-export default crudDuck.reducer;
+export function fetchTriggerOptions() {
+  return {
+    types: FETCH_TRIGGER_OPTIONS.toArray(),
+    call: client => client.get('/alerts/triggers'),
+  };
+}
+
+// export default crudDuck.reducer;
+export default reduceDucks(crudDuck, { initialState, reducer }).reducer;
diff --git a/frontend/app/duck/customMetrics.js b/frontend/app/duck/customMetrics.js
index f6a7b0b88..5842bb851 100644
--- a/frontend/app/duck/customMetrics.js
+++ b/frontend/app/duck/customMetrics.js
@@ -2,7 +2,7 @@ import { List, Map } from 'immutable';
 import { clean as cleanParams } from 'App/api_client';
 import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED } from 'Types/errorInfo';
 import CustomMetric, { FilterSeries } from 'Types/customMetric'
-import { createFetch, fetchListType, fetchType, saveType, editType, createEdit } from './funcTools/crud';
+import { createFetch, fetchListType, fetchType, saveType, removeType, editType, createRemove, createEdit } from './funcTools/crud';
 // import { createEdit, createInit } from './funcTools/crud';
 import { createRequestReducer, ROOT_KEY } from './funcTools/request';
 import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
@@ -18,7 +18,9 @@ const FETCH_LIST = fetchListType(name);
 const FETCH = fetchType(name);
 const SAVE = saveType(name);
 const EDIT = editType(name);
+const REMOVE = removeType(name);
 const UPDATE_SERIES = `${name}/UPDATE_SERIES`;
+const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
 
 function chartWrapper(chart = []) {
   return chart.map(point => ({ ...point, count: Math.max(point.count, 0) }));
@@ -31,6 +33,8 @@ function chartWrapper(chart = []) {
 
 const initialState = Map({
 	list: List(),
+  alertMetricId: null,
+  // instance: null,
 	instance: CustomMetric({
     name: 'New',
     series: List([
@@ -46,14 +50,18 @@ const initialState = Map({
 function reducer(state = initialState, action = {}) {
 	switch (action.type) {
     case EDIT:
+      console.log('EDIT', action);
       return state.mergeIn([ 'instance' ], CustomMetric(action.instance));
     case UPDATE_SERIES:
       console.log('update series', action.series);
       return state.setIn(['instance', 'series', action.index], FilterSeries(action.series));
     case success(SAVE):
       return state.set([ 'instance' ], CustomMetric(action.data));
+    case success(REMOVE):
+      console.log('action', action)
+      return state.update('list', list => list.filter(item => item.metricId !== action.id));
 		case success(FETCH):
-			return state.set("instance", ErrorInfo(action.data)); 
+			return state.set("instance", ErrorInfo(action.data));
 		case success(FETCH_LIST):
 			const { data } = action;
 			return state.set("list", List(data.map(CustomMetric)));
@@ -70,6 +78,7 @@ export default mergeReducers(
 );
 
 export const edit = createEdit(name);
+export const remove = createRemove(name);
 
 export const updateSeries = (index, series) => ({
   type: UPDATE_SERIES,
@@ -88,7 +97,7 @@ export function fetch(id) {
 export function save(instance) {
   return {
     types: SAVE.array,
-    call: client => client.post( `/${ name }s`, instance.toData()),
+    call: client => client.post( `/${ name }s`, instance.toSaveData()),
   };
 }
 
@@ -97,4 +106,11 @@ export function fetchList() {
     types: array(FETCH_LIST),
     call: client => client.get(`/${name}s`),
   };
+}
+
+export function setAlertMetricId(id) {
+  return {
+    type: SET_ALERT_METRIC_ID,
+    id,
+  };
 }
\ No newline at end of file
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
index 1bfaebbd6..e40eddb27 100644
--- a/frontend/app/types/customMetric.js
+++ b/frontend/app/types/customMetric.js
@@ -17,8 +17,6 @@ export const FilterSeries = Record({
   methods: {
     toData() {
       const js = this.toJS();
-      delete js.key;
-      // js.filter = js.filter.toData();
       return js;
     },
   },
@@ -41,15 +39,19 @@ export default Record({
       return validateName(this.name, { diacritics: true });
     },
 
-    toData() {
+    toSaveData() {
       const js = this.toJS();
       
       js.series = js.series.map(series => {
         series.filter.filters = series.filter.filters.map(filter => {
+          filter.type = filter.key
           delete filter.operatorOptions
           delete filter.icon
+          delete filter.key
+          delete filter._key
           return filter;
         });
+        delete series._key
         return series;
       });
 
@@ -57,6 +59,11 @@ export default Record({
 
       return js;
     },
+
+    toData() {
+      const js = this.toJS();
+      return js;
+    },
   },
   fromJS: ({ series, ...rest }) => ({
     ...rest,
diff --git a/frontend/app/types/dashboard/customMetric.js b/frontend/app/types/dashboard/customMetric.js
new file mode 100644
index 000000000..9dd374b56
--- /dev/null
+++ b/frontend/app/types/dashboard/customMetric.js
@@ -0,0 +1,14 @@
+import { Record } from 'immutable';
+
+const CustomMetric = Record({
+  avg: undefined,
+  chart: [],
+});
+
+
+function fromJS(data = {}) {
+  if (data instanceof CustomMetric) return data;
+  return new CustomMetric(data);
+}
+
+export default fromJS;
\ No newline at end of file
diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js
index e3663e860..c7ad79982 100644
--- a/frontend/app/types/filter/filter.js
+++ b/frontend/app/types/filter/filter.js
@@ -53,8 +53,8 @@ export default Record({
     toData() {
       const js = this.toJS();
       js.filters = js.filters.map(filter => {
-        delete filter.operatorOptions
-        delete filter._key
+        // delete filter.operatorOptions
+        // delete filter._key
         return filter;
       });
 
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
new file mode 100644
index 000000000..c39cc1d2f
--- /dev/null
+++ b/frontend/app/types/filter/filterType.ts
@@ -0,0 +1,49 @@
+export enum FilterType {
+  ISSUE = "ISSUE",
+  BOOLEAN = "BOOLEAN",
+  NUMBER = "NUMBER",
+  DURATION = "DURATION",
+  MULTIPLE = "MULTIPLE",
+  COUNTRY = "COUNTRY",
+};
+
+export enum FilterKey {
+  ERROR = "ERROR",
+  MISSING_RESOURCE = "MISSING_RESOURCE",
+  SLOW_SESSION = "SLOW_SESSION",
+  CLICK_RAGE = "CLICK_RAGE",
+  CLICK = "CLICK",
+  INPUT = "INPUT",
+  LOCATION = "LOCATION",
+  VIEW = "VIEW",
+  CONSOLE = "CONSOLE",
+  METADATA = "METADATA",
+  CUSTOM = "CUSTOM",
+  URL = "URL",
+  USER_BROWSER = "USERBROWSER",
+  USER_OS = "USEROS",
+  USER_DEVICE = "USERDEVICE",
+  PLATFORM = "PLATFORM",
+  DURATION = "DURATION",
+  REFERRER = "REFERRER",
+  USER_COUNTRY = "USER_COUNTRY",
+  JOURNEY = "JOURNEY",
+  FETCH = "FETCH",
+  GRAPHQL = "GRAPHQL",
+  STATEACTION = "STATEACTION",
+  REVID = "REVID",
+  USERANONYMOUSID = "USERANONYMOUSID",
+  USERID = "USERID",
+  ISSUE = "ISSUE",
+  EVENTS_COUNT = "EVENTS_COUNT",
+  UTM_SOURCE = "UTM_SOURCE",
+  UTM_MEDIUM = "UTM_MEDIUM",
+  UTM_CAMPAIGN = "UTM_CAMPAIGN",
+  
+  DOM_COMPLETE = "DOM_COMPLETE",
+  LARGEST_CONTENTFUL_PAINT_TIME = "LARGEST_CONTENTFUL_PAINT_TIME",
+  TIME_BETWEEN_EVENTS = "TIME_BETWEEN_EVENTS",
+  TTFB = "TTFB",
+  AVG_CPU_LOAD = "AVG_CPU_LOAD",
+  AVG_MEMORY_USAGE = "AVG_MEMORY_USAGE",
+}
\ No newline at end of file
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 091b16277..40f3c406c 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -1,86 +1,92 @@
 import Record from 'Types/Record';
+import { FilterType, FilterKey } from './filterType'
 
-const CLICK = 'CLICK';
-const INPUT = 'INPUT';
-const LOCATION = 'LOCATION';
-const VIEW = 'VIEW_IOS';
-const CONSOLE = 'ERROR';
-const METADATA = 'METADATA';
-const CUSTOM = 'CUSTOM';
-const URL = 'URL';
-const CLICK_RAGE = 'CLICKRAGE';
-const USER_BROWSER  = 'USERBROWSER';
-const USER_OS = 'USEROS';
-const USER_COUNTRY  = 'USERCOUNTRY';
-const USER_DEVICE = 'USERDEVICE';
-const PLATFORM = 'PLATFORM';
-const DURATION  = 'DURATION';
-const REFERRER  = 'REFERRER';
-const ERROR = 'ERROR';
-const MISSING_RESOURCE = 'MISSINGRESOURCE';
-const SLOW_SESSION = 'SLOWSESSION';
-const JOURNEY = 'JOUNRNEY';
-const FETCH = 'REQUEST';
-const GRAPHQL = 'GRAPHQL';
-const STATEACTION = 'STATEACTION';
-const REVID = 'REVID';
-const USERANONYMOUSID = 'USERANONYMOUSID';
-const USERID = 'USERID';
+export const CLICK = 'CLICK';
+export const INPUT = 'INPUT';
+export const LOCATION = 'LOCATION';
+export const VIEW = 'VIEW_IOS';
+export const CONSOLE = 'ERROR';
+export const METADATA = 'METADATA';
+export const CUSTOM = 'CUSTOM';
+export const URL = 'URL';
+export const CLICK_RAGE = 'CLICKRAGE';
+export const USER_BROWSER  = 'USERBROWSER';
+export const USER_OS = 'USEROS';
+export const USER_COUNTRY  = 'USERCOUNTRY';
+export const USER_DEVICE = 'USERDEVICE';
+export const PLATFORM = 'PLATFORM';
+export const DURATION  = 'DURATION';
+export const REFERRER  = 'REFERRER';
+export const ERROR = 'ERROR';
+export const MISSING_RESOURCE = 'MISSINGRESOURCE';
+export const SLOW_SESSION = 'SLOWSESSION';
+export const JOURNEY = 'JOUNRNEY';
+export const FETCH = 'REQUEST';
+export const GRAPHQL = 'GRAPHQL';
+export const STATEACTION = 'STATEACTION';
+export const REVID = 'REVID';
+export const USERANONYMOUSID = 'USERANONYMOUSID';
+export const USERID = 'USERID';
 
-const ISSUE = 'ISSUE';
-const EVENTS_COUNT = 'EVENTS_COUNT';
-const UTM_SOURCE = 'UTM_SOURCE';
-const UTM_MEDIUM = 'UTM_MEDIUM';
-const UTM_CAMPAIGN = 'UTM_CAMPAIGN';
+export const ISSUE = 'ISSUE';
+export const EVENTS_COUNT = 'EVENTS_COUNT';
+export const UTM_SOURCE = 'UTM_SOURCE';
+export const UTM_MEDIUM = 'UTM_MEDIUM';
+export const UTM_CAMPAIGN = 'UTM_CAMPAIGN';
 
 
-const DOM_COMPLETE = 'DOM_COMPLETE';
-const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
-const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
-const TTFB = 'TTFB';
-const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
-const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
+export const DOM_COMPLETE = 'DOM_COMPLETE';
+export const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
+export const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
+export const TTFB = 'TTFB';
+export const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
+export const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
 
-export const TYPES = {
-  ERROR,
-  MISSING_RESOURCE,
-  SLOW_SESSION,
-  CLICK_RAGE,
-  CLICK,
-  INPUT,
-  LOCATION,
-  VIEW,
-  CONSOLE,
-  METADATA,
-  CUSTOM,
-  URL,
-  USER_BROWSER,
-  USER_OS,
-  USER_DEVICE,
-  PLATFORM,
-  DURATION,
-  REFERRER,
-  USER_COUNTRY,
-  JOURNEY,
-  FETCH,
-  GRAPHQL,
-  STATEACTION,
-  REVID,
-  USERANONYMOUSID,
-  USERID,
-  ISSUE,
-  EVENTS_COUNT,
-  UTM_SOURCE,
-  UTM_MEDIUM,
-  UTM_CAMPAIGN,
+const ISSUE_OPTIONS = [
+  { text: 'Click Range', value: 'click_rage' },
+  { text: 'Dead Click', value: 'dead_click' },
+]
+
+// export const TYPES = {
+//   ERROR,
+//   MISSING_RESOURCE,
+//   SLOW_SESSION,
+//   CLICK_RAGE,
+//   CLICK,
+//   INPUT,
+//   LOCATION,
+//   VIEW,
+//   CONSOLE,
+//   METADATA,
+//   CUSTOM,
+//   URL,
+//   USER_BROWSER,
+//   USER_OS,
+//   USER_DEVICE,
+//   PLATFORM,
+//   DURATION,
+//   REFERRER,
+//   USER_COUNTRY,
+//   JOURNEY,
+//   FETCH,
+//   GRAPHQL,
+//   STATEACTION,
+//   REVID,
+//   USERANONYMOUSID,
+//   USERID,
+//   ISSUE,
+//   EVENTS_COUNT,
+//   UTM_SOURCE,
+//   UTM_MEDIUM,
+//   UTM_CAMPAIGN,
   
-  DOM_COMPLETE,
-  LARGEST_CONTENTFUL_PAINT_TIME,
-  TIME_BETWEEN_EVENTS,
-  TTFB,
-  AVG_CPU_LOAD,
-  AVG_MEMORY_USAGE,
-};
+//   DOM_COMPLETE,
+//   LARGEST_CONTENTFUL_PAINT_TIME,
+//   TIME_BETWEEN_EVENTS,
+//   TTFB,
+//   AVG_CPU_LOAD,
+//   AVG_MEMORY_USAGE,
+// };
 
 const filterKeys = ['is', 'isNot'];
 const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith'];
@@ -219,41 +225,43 @@ export const booleanOptions = [
 ]
 
 export const filtersMap = {
-  [TYPES.CLICK]: { key: TYPES.CLICK, type: 'multiple', category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
-  [TYPES.INPUT]: { key: TYPES.INPUT, type: 'multiple', category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
-  [TYPES.LOCATION]: { key: TYPES.LOCATION, type: 'multiple', category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  [FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
+  [FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  [FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
 
-  [TYPES.USER_OS]: { key: TYPES.USER_OS, type: 'multiple', category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USER_BROWSER]: { key: TYPES.USER_BROWSER, type: 'multiple', category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USER_DEVICE]: { key: TYPES.USER_DEVICE, type: 'multiple', category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.PLATFORM]: { key: TYPES.PLATFORM, type: 'multiple', category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.REVID]: { key: TYPES.REVID, type: 'multiple', category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
 
-  [TYPES.REFERRER]: { key: TYPES.REFERRER, type: 'multiple', category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.DURATION]: { key: TYPES.DURATION, type: 'number', category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USER_COUNTRY]: { key: TYPES.USER_COUNTRY, type: 'multiple', category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.NUMBER, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
 
-  [TYPES.CONSOLE]: { key: TYPES.CONSOLE, type: 'multiple', category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.ERROR]: { key: TYPES.ERROR, type: 'multiple', category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.FETCH]: { key: TYPES.FETCH, type: 'multiple', category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.GRAPHQL]: { key: TYPES.GRAPHQL, type: 'multiple', category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.STATEACTION]: { key: TYPES.STATEACTION, type: 'multiple', category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
 
-  [TYPES.USERID]: { key: TYPES.USERID, type: 'multiple', category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.USERANONYMOUSID]: { key: TYPES.USERANONYMOUSID, type: 'multiple', category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
   
-  [TYPES.DOM_COMPLETE]: { key: TYPES.DOM_COMPLETE, type: 'multiple', category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.LARGEST_CONTENTFUL_PAINT_TIME]: { key: TYPES.LARGEST_CONTENTFUL_PAINT_TIME, type: 'number', category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.TIME_BETWEEN_EVENTS]: { key: TYPES.TIME_BETWEEN_EVENTS, type: 'number', category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.TTFB]: { key: TYPES.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.AVG_CPU_LOAD]: { key: TYPES.AVG_CPU_LOAD, type: 'number', category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.AVG_MEMORY_USAGE]: { key: TYPES.AVG_MEMORY_USAGE, type: 'number', category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [TYPES.SLOW_SESSION]: { key: TYPES.SLOW_SESSION, type: 'boolean', category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
-  [TYPES.MISSING_RESOURCE]: { key: TYPES.MISSING_RESOURCE, type: 'boolean', category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
-  [TYPES.CLICK_RAGE]: { key: TYPES.CLICK_RAGE, type: 'boolean', category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
-  // [TYPES.URL]: { / [TYPES,TYPES. category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
-  // [TYPES.CUSTOM]: { / [TYPES,TYPES. category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
-  // [TYPES.METADATA]: { / [TYPES,TYPES. category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
+  [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.NUMBER, category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.TTFB]: { key: FilterKey.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.NUMBER, category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.NUMBER, category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.SLOW_SESSION]: { key: FilterKey.SLOW_SESSION, type: FilterType.BOOLEAN, category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
+  [FilterKey.MISSING_RESOURCE]: { key: FilterKey.MISSING_RESOURCE, type: FilterType.BOOLEAN, category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
+  // [FilterKey.CLICK_RAGE]: { key: FilterKey.CLICK_RAGE, type: FilterType.BOOLEAN, category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
+  
+  [FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: 'new', label: 'Issue', operator: 'onAnything', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
+  // [FilterKey.URL]: { / [TYPES,TYPES. category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
+  // [FilterKey.CUSTOM]: { / [TYPES,TYPES. category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
+  // [FilterKey.METADATA]: { / [TYPES,TYPES. category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
 }
 
 export default Record({
@@ -277,16 +285,17 @@ export default Record({
   operatorOptions: [],
   isEvent: false,
   index: 0,
+  options: [],
 }, {
   keyKey: "_key",
-  fromJS: ({ ...filter }) => ({
+  fromJS: ({ key, ...filter }) => ({
     ...filter,
-    key: filter.type,
+    key,
     type: filter.type, // camelCased(filter.type.toLowerCase()),
     // key: filter.type === METADATA ? filter.label : filter.key || filter.type, // || camelCased(filter.type.toLowerCase()),
     // label: getLabel(filter),
     // target: Target(target),
-    // operator: getOperatorDefault(filter.type),
+    operator: getOperatorDefault(key),
     // value: target ? target.label : filter.value,
     // value: typeof value === 'string' ? [value] : value,
     // icon: filter.type ? getfilterIcon(filter.type) : 'filters/metadata'
@@ -303,4 +312,14 @@ export default Record({
 //     operators: filterMap[key].operatorOptions,
 //     value: [""]
 //   }
-// }
\ No newline at end of file
+// }
+
+
+const getOperatorDefault = (type) => {
+  if (type === MISSING_RESOURCE) return 'true';
+  if (type === SLOW_SESSION) return 'true';
+  if (type === CLICK_RAGE) return 'true';
+  if (type === CLICK) return 'on';
+  
+  return 'is';
+}
\ No newline at end of file
diff --git a/frontend/env.js b/frontend/env.js
index ad23c710a..549d5ec07 100644
--- a/frontend/env.js
+++ b/frontend/env.js
@@ -11,7 +11,7 @@ const oss = {
 	CAPTCHA_ENABLED: process.env.CAPTCHA_ENABLED === 'true',
 	CAPTCHA_SITE_KEY: process.env.CAPTCHA_SITE_KEY,
 	ORIGIN: () => 'window.location.origin',
-	API_EDP: "https://dol.openreplay.com/api",
+	API_EDP: "https://foss.openreplay.com/api",
 	ASSETS_HOST: () => 'window.location.origin + "/assets"',
 	VERSION: '1.3.6',
 	SOURCEMAP: true,

From 5f958ede9889a1b3029b988f9e7a9f270f375429 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 24 Jan 2022 19:29:27 +0530
Subject: [PATCH 4/6] feat(ui) - custom metrics

---
 .../app/components/BugFinder/BugFinder.js     |   4 +-
 .../shared/FilterDropdown/FilterDropdown.js   |   2 +-
 .../shared/Filters/FilterItem/FilterItem.tsx  |  21 +--
 .../Filters/FilterOperator/FilterOperator.tsx |   2 +
 .../Filters/FilterValue/FilterValue.tsx       |   1 +
 .../FilterValueDropdown.tsx                   |   4 +-
 .../shared/SessionSearch/SessionSearch.tsx    |  93 +++++++++++
 .../components/shared/SessionSearch/index.ts  |   1 +
 frontend/app/duck/index.js                    |   2 +
 frontend/app/duck/search.js                   | 147 ++++++++++++++++++
 frontend/app/svg/icons/filters/browser.svg    |   3 +
 frontend/app/svg/icons/filters/clickrage.svg  |   4 +
 frontend/app/svg/icons/filters/code.svg       |   1 +
 frontend/app/svg/icons/filters/country.svg    |   4 +
 frontend/app/svg/icons/filters/device.svg     |   7 +
 frontend/app/svg/icons/filters/duration.svg   |   1 +
 frontend/app/svg/icons/filters/error.svg      |   4 +
 frontend/app/svg/icons/filters/fetch.svg      |   3 +
 frontend/app/svg/icons/filters/graphql.svg    |   1 +
 frontend/app/svg/icons/filters/i-cursor.svg   |   1 +
 frontend/app/svg/icons/filters/input.svg      |   4 +
 frontend/app/svg/icons/filters/link.svg       |   4 +
 frontend/app/svg/icons/filters/location.svg   |   3 +
 frontend/app/svg/icons/filters/os.svg         |   3 +
 .../{phone-laptop.svg => platform.svg}        |   0
 frontend/app/svg/icons/filters/referrer.svg   |   4 +
 frontend/app/svg/icons/filters/resize.svg     |  10 ++
 .../filters/{border-outer.svg => rev-id.svg}  |   0
 .../app/svg/icons/filters/state-action.svg    |   3 +
 frontend/app/svg/icons/filters/view.svg       |   4 +
 frontend/app/types/filter/filter.js           |   9 +-
 frontend/app/types/filter/filterType.ts       |   1 +
 frontend/app/types/filter/newFilter.js        |  98 ++++--------
 33 files changed, 354 insertions(+), 95 deletions(-)
 create mode 100644 frontend/app/components/shared/SessionSearch/SessionSearch.tsx
 create mode 100644 frontend/app/components/shared/SessionSearch/index.ts
 create mode 100644 frontend/app/duck/search.js
 create mode 100644 frontend/app/svg/icons/filters/browser.svg
 create mode 100644 frontend/app/svg/icons/filters/clickrage.svg
 create mode 100644 frontend/app/svg/icons/filters/code.svg
 create mode 100644 frontend/app/svg/icons/filters/country.svg
 create mode 100644 frontend/app/svg/icons/filters/device.svg
 create mode 100644 frontend/app/svg/icons/filters/duration.svg
 create mode 100644 frontend/app/svg/icons/filters/error.svg
 create mode 100644 frontend/app/svg/icons/filters/fetch.svg
 create mode 100644 frontend/app/svg/icons/filters/graphql.svg
 create mode 100644 frontend/app/svg/icons/filters/i-cursor.svg
 create mode 100644 frontend/app/svg/icons/filters/input.svg
 create mode 100644 frontend/app/svg/icons/filters/link.svg
 create mode 100644 frontend/app/svg/icons/filters/location.svg
 create mode 100644 frontend/app/svg/icons/filters/os.svg
 rename frontend/app/svg/icons/filters/{phone-laptop.svg => platform.svg} (100%)
 create mode 100644 frontend/app/svg/icons/filters/referrer.svg
 create mode 100644 frontend/app/svg/icons/filters/resize.svg
 rename frontend/app/svg/icons/filters/{border-outer.svg => rev-id.svg} (100%)
 create mode 100644 frontend/app/svg/icons/filters/state-action.svg
 create mode 100644 frontend/app/svg/icons/filters/view.svg

diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js
index 4af7870f2..93ad66347 100644
--- a/frontend/app/components/BugFinder/BugFinder.js
+++ b/frontend/app/components/BugFinder/BugFinder.js
@@ -29,6 +29,7 @@ import TrackerUpdateMessage from 'Shared/TrackerUpdateMessage';
 import SessionSearchField from 'Shared/SessionSearchField'
 import SavedSearch from 'Shared/SavedSearch'
 import LiveSessionList from './LiveSessionList'
+import SessionSearch from 'Shared/SessionSearch';
 
 const weakEqual = (val1, val2) => {
   if (!!val1 === false && !!val2 === false) return true;
@@ -176,7 +177,8 @@ export default class BugFinder extends React.PureComponent {
                 <div style={{ width: "70%", marginRight: "10px"}}><SessionSearchField /></div>
                 <SavedSearch />
               </div>
-              <EventFilter />
+              <SessionSearch />
+              {/* <EventFilter /> */}
             </div>
             { activeFlow && activeFlow.type === 'flows' && <FunnelList /> }
             { activeTab.type !== 'live' && <SessionList onMenuItemClick={this.setActiveTab} /> }
diff --git a/frontend/app/components/shared/FilterDropdown/FilterDropdown.js b/frontend/app/components/shared/FilterDropdown/FilterDropdown.js
index 8bf6e5faa..66da1f586 100644
--- a/frontend/app/components/shared/FilterDropdown/FilterDropdown.js
+++ b/frontend/app/components/shared/FilterDropdown/FilterDropdown.js
@@ -27,7 +27,7 @@ const locationOptions = Object.keys(regionLabels).map(k => ({ key: LOCATION, tex
 const _filterKeys = [
   { key: 'userId', name: 'User ID', icon: 'user-alt', placeholder: 'Search for User ID' },
   { key: 'userAnonymousId', name: 'User Anonymous ID', icon: 'filters/userid', placeholder: 'Search for User Anonymous ID' },
-  { key: 'revId', name: 'Rev ID', icon: 'filters/border-outer', placeholder: 'Search for Rev ID' },
+  { key: 'revId', name: 'Rev ID', icon: 'filters/rev-id', placeholder: 'Search for Rev ID' },
   { key: COUNTRY, name: 'Country', icon: 'map-marker-alt', placeholder: 'Search for Country' },
   { key: 'device', name: 'Device', icon: 'device', placeholder: 'Search for Device' },
   { key: 'os', name: 'OS', icon: 'os', placeholder: 'Search for OS' },
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index c45b7620a..2b0231da6 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -37,9 +37,8 @@ function FitlerItem(props: Props) {
   //   onUpdate({ ...filter, value: newValues })
   // }
 
-  console.log('filter', filter);
-
   const onOperatorChange = (e, { name, value }) => {
+    console.log('onOperatorChange', name, value)
     onUpdate({ ...filter, operator: value })
   }
 
@@ -49,23 +48,7 @@ function FitlerItem(props: Props) {
         <div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div>
         <FilterSelection filter={filter} onFilterClick={replaceFilter} />
         <FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2 flex-shrink-0"/>
-        {/* <div className="grid grid-cols-3 gap-3"> */}
-          {/* {filter.value && filter.value.map((value, valueIndex) => ( */}
-            <FilterValue
-              // showCloseButton={filter.value.length > 1}
-              // showOrButton={valueIndex === filter.value.length - 1}
-              filter={filter}
-              onUpdate={onUpdate}
-              // key={valueIndex}
-              // value={value}
-              // key={filter.key}
-              // index={valueIndex}
-              // onAddValue={onAddValue}
-              // onRemoveValue={(valueIndex) => onRemoveValue(valueIndex)}
-              // onSelect={(e, item, valueIndex) => onSelect(e, item, valueIndex)}
-            />
-          {/* ))} */}
-        {/* </div> */}
+        <FilterValue filter={filter} onUpdate={onUpdate} />
       </div>
       <div className="flex self-start mt-2">
         <div
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
index dc1f54148..7399d8e5b 100644
--- a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@@ -11,6 +11,8 @@ interface Props {
 function FilterOperator(props: Props) {
   const { filter, onChange, className = '' } = props;
 
+  console.log('FilterOperator', filter.operator);
+
   return (
     <Dropdown
       className={ cn(stl.operatorDropdown, className) }      
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 95ff92f71..4a129c365 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -34,6 +34,7 @@ function FilterValue(props: Props) {
   const renderValueFiled = (value, valueIndex) => {
     switch(filter.type) {
       case FilterType.ISSUE:
+      case FilterType.DROPDOWN:
         return (
           <FilterValueDropdown
             value={value}
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
index 55fc5ee38..eda66f4ef 100644
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@@ -10,13 +10,15 @@ interface Props {
   onChange: (e, { name, value }) => void;
   className?: string;
   options: any[];
+  search?: boolean;
 }
 function FilterValueDropdown(props: Props) {
-  const { options, onChange, value, className = '' } = props;
+  const { search = false, options, onChange, value, className = '' } = props;
   // const options = []
 
   return (
     <Dropdown
+      search={search}
       className={ cn(stl.operatorDropdown, className) }      
       options={ options }
       name="issue_type"
diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
new file mode 100644
index 000000000..7483e70b6
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import FilterList from 'Shared/Filters/FilterList';
+import FilterSelection from 'Shared/Filters/FilterSelection';
+import SaveFilterButton from 'Shared/SaveFilterButton';
+import { connect } from 'react-redux';
+import { IconButton, Button } from 'UI';
+import { edit } from 'Duck/search';
+
+interface Props {
+  appliedFilter: any;
+  edit: typeof edit;
+}
+function SessionSearch(props) {
+  const { appliedFilter } = props;
+
+  const onAddFilter = (filter) => {
+    filter.value = [""]
+    const newFilters = appliedFilter.filter.filters.concat(filter);
+    props.edit({
+      ...appliedFilter,
+      filter: {
+        ...appliedFilter.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  const onUpdateFilter = (filterIndex, filter) => {
+    const newFilters = appliedFilter.filter.filters.map((_filter, i) => {
+      if (i === filterIndex) {
+        return filter;
+      } else {
+        return _filter;
+      }
+    });
+
+    props.edit({
+      ...appliedFilter.toData(),
+      filter: {
+        ...appliedFilter.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  const onRemoveFilter = (filterIndex) => {
+    const newFilters = appliedFilter.filter.filters.filter((_filter, i) => {
+      return i !== filterIndex;
+    });
+
+    props.edit({
+      ...appliedFilter,
+      filter: {
+        ...appliedFilter.filter,
+        filters: newFilters,
+      }
+    });
+  }
+
+  return (
+    <div className="border bg-white rounded mt-4">
+      <div className="p-3">
+        <FilterList
+          filters={appliedFilter.filter.filters.toJS()}
+          onUpdateFilter={onUpdateFilter}
+          onRemoveFilter={onRemoveFilter}
+        />
+      </div>
+
+      <div className="border-t px-3 py-2 flex items-center">
+        <div>
+          <FilterSelection
+            filter={undefined}
+            onFilterClick={onAddFilter}
+          >
+            <IconButton primaryText label="ADD STEP" icon="plus" />
+          </FilterSelection>
+        </div>
+        <div className="ml-auto flex items-center">
+          <SaveFilterButton />
+          <Button>CLEAR STEPS</Button>
+          <Button plain>SAVE FUNNEL</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default connect(state => ({
+  appliedFilter: state.getIn([ 'search', 'instance' ]),
+}), { edit })(SessionSearch);
+
+// appliedFilter: state.getIn([ 'filters', 'appliedFilter' ]),
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearch/index.ts b/frontend/app/components/shared/SessionSearch/index.ts
new file mode 100644
index 000000000..d9c909f0d
--- /dev/null
+++ b/frontend/app/components/shared/SessionSearch/index.ts
@@ -0,0 +1 @@
+export { default } from './SessionSearch';
\ No newline at end of file
diff --git a/frontend/app/duck/index.js b/frontend/app/duck/index.js
index 71eb6d0e2..ffd0b945d 100644
--- a/frontend/app/duck/index.js
+++ b/frontend/app/duck/index.js
@@ -35,6 +35,7 @@ import funnels from './funnels';
 import config from './config';
 import roles from './roles';
 import customMetrics from './customMetrics';
+import search from './search';
 
 export default combineReducers({
   jwt,
@@ -70,6 +71,7 @@ export default combineReducers({
   config,
   roles,
   customMetrics,
+  search,
   ...integrations,
   ...sources,
 });
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
new file mode 100644
index 000000000..fee81b122
--- /dev/null
+++ b/frontend/app/duck/search.js
@@ -0,0 +1,147 @@
+import { List, Map } from 'immutable'; 
+// import { clean as cleanParams } from 'App/api_client';
+import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED } from 'Types/errorInfo';
+import CustomMetric, { FilterSeries } from 'Types/customMetric'
+import { createFetch, fetchListType, fetchType, saveType, removeType, editType, createRemove, createEdit } from './funcTools/crud';
+// import { createEdit, createInit } from './funcTools/crud';
+import { createRequestReducer, ROOT_KEY } from './funcTools/request';
+import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
+import Filter from 'Types/filter';
+// import filter from 'core-js/fn/array/filter';
+// import NewFilter from 'Types/filter/newFilter';
+// import Event from 'Types/filter/event';
+// import CustomFilter from 'Types/filter/customFilter';
+import { errors as errorsRoute, isRoute } from "App/routes";
+import { fetchList as fetchSessionList } from './sessions';
+import { fetchList as fetchErrorsList } from './errors';
+
+const ERRORS_ROUTE = errorsRoute();
+
+const name = "custom_metric";
+const idKey = "metricId";
+
+const FETCH_LIST = fetchListType(name);
+const FETCH = fetchType(name);
+const SAVE = saveType(name);
+const EDIT = editType(name);
+const REMOVE = removeType(name);
+const UPDATE = `${name}/UPDATE`;
+const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
+
+function chartWrapper(chart = []) {
+  return chart.map(point => ({ ...point, count: Math.max(point.count, 0) }));
+}
+
+// const updateItemInList = createListUpdater(idKey);
+// const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
+// 	? state.mergeIn([ "instance" ], instance)
+// 	: state;
+
+const initialState = Map({
+	list: List(),
+  alertMetricId: null,
+  // instance: null,
+	instance: FilterSeries({ filter: new Filter({ filters: [] }) }),
+});
+
+// Metric - Series - [] - filters
+function reducer(state = initialState, action = {}) {
+	switch (action.type) {
+    case EDIT:
+      return state.set('instance', FilterSeries(action.instance));
+    case success(SAVE):
+      return state.set([ 'instance' ], CustomMetric(action.data));
+    case success(REMOVE):
+      console.log('action', action)
+      return state.update('list', list => list.filter(item => item.metricId !== action.id));
+		case success(FETCH):
+			return state.set("instance", ErrorInfo(action.data));
+		case success(FETCH_LIST):
+			const { data } = action;
+			return state.set("list", List(data.map(CustomMetric)));
+	}
+	return state;
+}
+
+export default mergeReducers(
+	reducer,
+	createRequestReducer({
+		[ ROOT_KEY ]: FETCH_LIST,
+		fetch: FETCH,
+	}),
+);
+
+
+const filterMap = ({value, type, key, operator, source, custom, isEvent }) => ({
+  value: Array.isArray(value) ? value: [value],
+  custom,
+  type: key,
+  key, operator,
+  source,
+  isEvent
+});
+
+const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
+  dispatch(actionCreator(...args));
+  const filter = getState().getIn([ 'search', 'instance', 'filter' ]).toData();
+  filter.filters = filter.filters.map(filterMap);
+  // console.log('filter', filter)
+  
+  // let filter = appliedFilter
+  //   .update('filters', list => list.map(f => f.set('value', f.value || '*'))
+  //   .map(filterMap));
+
+  // const filter.filters = getState().getIn([ 'instance', 'filter' ]).get('filters').map(filterMap).toJS();
+
+  return isRoute(ERRORS_ROUTE, window.location.pathname)
+    ? dispatch(fetchErrorsList(filter))
+    : dispatch(fetchSessionList(filter));
+};
+
+export const edit = reduceThenFetchResource((instance) => ({
+    type: EDIT,
+    instance,
+}));
+
+export const remove = createRemove(name);
+
+// export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
+//   type: APPLY,
+//   filter,
+//   fromUrl,
+// }));
+
+export const updateSeries = (index, series) => ({
+  type: UPDATE,
+  index,
+  series,
+});
+
+export function fetch(id) {
+	return {
+		id,
+		types: array(FETCH),
+		call: c => c.get(`/errors/${id}`),
+	}
+}
+
+export function save(instance) {
+  return {
+    types: SAVE.array,
+    call: client => client.post( `/${ name }s`, instance.toSaveData()),
+  };
+}
+
+export function fetchList() {
+  return {
+    types: array(FETCH_LIST),
+    call: client => client.get(`/${name}s`),
+  };
+}
+
+export function setAlertMetricId(id) {
+  return {
+    type: SET_ALERT_METRIC_ID,
+    id,
+  };
+}
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/browser.svg b/frontend/app/svg/icons/filters/browser.svg
new file mode 100644
index 000000000..9718fa3dc
--- /dev/null
+++ b/frontend/app/svg/icons/filters/browser.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-globe" viewBox="0 0 16 16">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/clickrage.svg b/frontend/app/svg/icons/filters/clickrage.svg
new file mode 100644
index 000000000..3220e339e
--- /dev/null
+++ b/frontend/app/svg/icons/filters/clickrage.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-emoji-angry" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+  <path d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zm6.991-8.38a.5.5 0 1 1 .448.894l-1.009.504c.176.27.285.64.285 1.049 0 .828-.448 1.5-1 1.5s-1-.672-1-1.5c0-.247.04-.48.11-.686a.502.502 0 0 1 .166-.761l2-1zm-6.552 0a.5.5 0 0 0-.448.894l1.009.504A1.94 1.94 0 0 0 5 6.5C5 7.328 5.448 8 6 8s1-.672 1-1.5c0-.247-.04-.48-.11-.686a.502.502 0 0 0-.166-.761l-2-1z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/code.svg b/frontend/app/svg/icons/filters/code.svg
new file mode 100644
index 000000000..c9c41b0d7
--- /dev/null
+++ b/frontend/app/svg/icons/filters/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/country.svg b/frontend/app/svg/icons/filters/country.svg
new file mode 100644
index 000000000..f72a9967b
--- /dev/null
+++ b/frontend/app/svg/icons/filters/country.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-geo-alt" viewBox="0 0 16 16">
+  <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/device.svg b/frontend/app/svg/icons/filters/device.svg
new file mode 100644
index 000000000..b453af4aa
--- /dev/null
+++ b/frontend/app/svg/icons/filters/device.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M702.5,826.7H598V722.1h107.8v-68.6H78.6V157h816.7v277.7h55.5c3.3,0,9.8,0,13.1,3.3V134.1c0-26.1-19.6-45.7-45.7-45.7H55.7C29.6,88.4,10,108,10,134.1v542.3c0,26.1,19.6,45.7,45.7,45.7h323.4v104.5H255c-22.9,0-42.5,19.6-42.5,42.5c0,22.9,19.6,42.5,42.5,42.5h460.6c-6.5-9.8-9.8-19.6-9.8-29.4v-55.5H702.5z"/><path d="M960.6,457.5H767.9c-16.3,0-29.4,13.1-29.4,29.4v392c0,16.3,13.1,29.4,29.4,29.4h192.7c16.3,0,29.4-13.1,29.4-29.4v-392C990,473.9,976.9,457.5,960.6,457.5z M862.6,892c-6.5,0-13.1-6.5-13.1-13.1s6.5-13.1,13.1-13.1c6.5,0,13.1,6.5,13.1,13.1S869.1,892,862.6,892z M970.4,849.5H754.8V522.9h215.6V849.5z"/></g>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/duration.svg b/frontend/app/svg/icons/filters/duration.svg
new file mode 100644
index 000000000..e5ecc83ef
--- /dev/null
+++ b/frontend/app/svg/icons/filters/duration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/error.svg b/frontend/app/svg/icons/filters/error.svg
new file mode 100644
index 000000000..a170d1363
--- /dev/null
+++ b/frontend/app/svg/icons/filters/error.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-exclamation-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/fetch.svg b/frontend/app/svg/icons/filters/fetch.svg
new file mode 100644
index 000000000..40cbbbf86
--- /dev/null
+++ b/frontend/app/svg/icons/filters/fetch.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-arrow-left-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/graphql.svg b/frontend/app/svg/icons/filters/graphql.svg
new file mode 100644
index 000000000..86eafbec1
--- /dev/null
+++ b/frontend/app/svg/icons/filters/graphql.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.52 391.6"><title>graphql</title><path d="M356.7,250.2a35,35,0,0,0-9.2-3.67v-93A34.92,34.92,0,1,0,314,95.57l-80.54-46.5a34.9,34.9,0,1,0-68.35-10A35.24,35.24,0,0,0,166.53,49L86,95.53A35.4,35.4,0,0,0,78.1,89.3a34.92,34.92,0,1,0-25.6,64.19v93a34.93,34.93,0,1,0,33.5,58L166.52,351a34.9,34.9,0,1,0,66.61-1.12l80.05-46.22A34.92,34.92,0,1,0,356.7,250.2Zm-262,22a34.46,34.46,0,0,0-9.81-17L190.28,72.62a34.91,34.91,0,0,0,19.47,0l105.4,182.56a34.81,34.81,0,0,0-9.82,17ZM305.79,110a34.83,34.83,0,0,0,25.11,43.4v93.15l-1.35.36L224.13,64.32c.31-.3.63-.61.93-.92ZM174.9,63.36c.33.33.66.66,1,1L70.47,246.94l-1.37-.37V153.41A34.83,34.83,0,0,0,94.19,110Zm50.91,274a34.92,34.92,0,0,0-50.94-.71l-80.6-46.53c.12-.45.25-.9.36-1.35H305.36c.19.77.4,1.53.64,2.29Z" transform="translate(-25.74 -4.2)"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/i-cursor.svg b/frontend/app/svg/icons/filters/i-cursor.svg
new file mode 100644
index 000000000..ce8709fa8
--- /dev/null
+++ b/frontend/app/svg/icons/filters/i-cursor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M96 38.223C75.091 13.528 39.824 1.336 6.191.005 2.805-.129 0 2.617 0 6.006v20.013c0 3.191 2.498 5.847 5.686 5.989C46.519 33.825 80 55.127 80 80v160H38a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h42v160c0 24.873-33.481 46.175-74.314 47.992-3.188.141-5.686 2.797-5.686 5.989v20.013c0 3.389 2.806 6.135 6.192 6.002C40.03 510.658 75.193 498.351 96 473.777c20.909 24.695 56.176 36.887 89.809 38.218 3.386.134 6.191-2.612 6.191-6.001v-20.013c0-3.191-2.498-5.847-5.686-5.989C145.481 478.175 112 456.873 112 432V272h42a6 6 0 0 0 6-6v-20a6 6 0 0 0-6-6h-42V80c0-24.873 33.481-46.175 74.314-47.992 3.188-.142 5.686-2.798 5.686-5.989V6.006c0-3.389-2.806-6.135-6.192-6.002C151.97 1.342 116.807 13.648 96 38.223z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/input.svg b/frontend/app/svg/icons/filters/input.svg
new file mode 100644
index 000000000..256542f8a
--- /dev/null
+++ b/frontend/app/svg/icons/filters/input.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-input-cursor-text" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 2a.5.5 0 0 1 .5-.5c.862 0 1.573.287 2.06.566.174.099.321.198.44.286.119-.088.266-.187.44-.286A4.165 4.165 0 0 1 10.5 1.5a.5.5 0 0 1 0 1c-.638 0-1.177.213-1.564.434a3.49 3.49 0 0 0-.436.294V7.5H9a.5.5 0 0 1 0 1h-.5v4.272c.1.08.248.187.436.294.387.221.926.434 1.564.434a.5.5 0 0 1 0 1 4.165 4.165 0 0 1-2.06-.566A4.561 4.561 0 0 1 8 13.65a4.561 4.561 0 0 1-.44.285 4.165 4.165 0 0 1-2.06.566.5.5 0 0 1 0-1c.638 0 1.177-.213 1.564-.434.188-.107.335-.214.436-.294V8.5H7a.5.5 0 0 1 0-1h.5V3.228a3.49 3.49 0 0 0-.436-.294A3.166 3.166 0 0 0 5.5 2.5.5.5 0 0 1 5 2z"/>
+  <path d="M10 5h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4v1h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4v1zM6 5V4H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v-1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/link.svg b/frontend/app/svg/icons/filters/link.svg
new file mode 100644
index 000000000..ee908ebd0
--- /dev/null
+++ b/frontend/app/svg/icons/filters/link.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-link-45deg" viewBox="0 0 16 16">
+  <path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/location.svg b/frontend/app/svg/icons/filters/location.svg
new file mode 100644
index 000000000..499378c6b
--- /dev/null
+++ b/frontend/app/svg/icons/filters/location.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-cursor" viewBox="0 0 16 16">
+  <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/os.svg b/frontend/app/svg/icons/filters/os.svg
new file mode 100644
index 000000000..7a2781f28
--- /dev/null
+++ b/frontend/app/svg/icons/filters/os.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1 C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.65234375,8.4375 C7.65234375,9.13281598 7.43424697,9.70898209 6.99804688,10.1660156 C6.56184678,10.6230492 5.99609723,10.8515625 5.30078125,10.8515625 C4.61848617,10.8515625 4.06445525,10.6230492 3.63867188,10.1660156 C3.2128885,9.70898209 3,9.13281598 3,8.4375 L3,7.4140625 C3,6.7213507 3.2128885,6.14583563 3.63867188,5.6875 C4.06445525,5.22916437 4.6171841,5 5.296875,5 C5.99219098,5 6.55859156,5.22916437 6.99609375,5.6875 C7.43359594,6.14583563 7.65234375,6.7213507 7.65234375,7.4140625 L7.65234375,8.4375 Z M6.70703125,7.40625 C6.70703125,6.9322893 6.58007939,6.54297027 6.32617188,6.23828125 C6.07226436,5.93359223 5.72916883,5.78125 5.296875,5.78125 C4.88020625,5.78125 4.55078246,5.93359223 4.30859375,6.23828125 C4.06640504,6.54297027 3.9453125,6.9322893 3.9453125,7.40625 L3.9453125,8.4375 C3.9453125,8.91666906 4.06640504,9.30924326 4.30859375,9.61523438 C4.55078246,9.92122549 4.88150832,10.0742188 5.30078125,10.0742188 C5.73567926,10.0742188 6.07877479,9.92187652 6.33007812,9.6171875 C6.58138146,9.31249848 6.70703125,8.91927324 6.70703125,8.4375 L6.70703125,7.40625 Z M11.7617188,9.30859375 C11.7617188,9.0716134 11.673829,8.87760492 11.4980469,8.7265625 C11.3222647,8.57552008 11.011721,8.44010477 10.5664062,8.3203125 C9.93098641,8.153645 9.442059,7.93294408 9.09960938,7.65820312 C8.75715975,7.38346217 8.5859375,7.02343973 8.5859375,6.578125 C8.5859375,6.11978937 8.77538873,5.74218898 9.15429688,5.4453125 C9.53320502,5.14843602 10.0221324,5 10.6210938,5 C11.2460969,5 11.748045,5.16796707 12.1269531,5.50390625 C12.5058613,5.83984543 12.6888021,6.24348723 12.6757812,6.71484375 L12.6679688,6.73828125 L11.7578125,6.73828125 C11.7578125,6.44661313 11.6588552,6.21028736 11.4609375,6.02929688 C11.2630198,5.84830639 10.9804706,5.7578125 10.6132812,5.7578125 C10.2669254,5.7578125 10.000652,5.83333258 9.81445312,5.984375 C9.62825428,6.13541742 9.53515625,6.33072797 9.53515625,6.5703125 C9.53515625,6.78645941 9.6360667,6.96614512 9.83789062,7.109375 C10.0397146,7.25260488 10.3736956,7.3880202 10.8398438,7.515625 C11.451826,7.67968832 11.9166651,7.90624855 12.234375,8.1953125 C12.5520849,8.48437645 12.7109375,8.85286234 12.7109375,9.30078125 C12.7109375,9.77474195 12.5214863,10.1516913 12.1425781,10.4316406 C11.76367,10.7115899 11.2656281,10.8515625 10.6484375,10.8515625 C10.0546845,10.8515625 9.53385641,10.694663 9.0859375,10.3808594 C8.63801859,10.0670557 8.42057285,9.63672148 8.43359375,9.08984375 L8.44140625,9.06640625 L9.35546875,9.06640625 C9.35546875,9.41276215 9.47525922,9.67122311 9.71484375,9.84179688 C9.95442828,10.0123706 10.2656231,10.0976562 10.6484375,10.0976562 C11.0000018,10.0976562 11.2734365,10.0266934 11.46875,9.88476562 C11.6640635,9.74283783 11.7617188,9.55078246 11.7617188,9.30859375 Z"/>
+</svg>
diff --git a/frontend/app/svg/icons/filters/phone-laptop.svg b/frontend/app/svg/icons/filters/platform.svg
similarity index 100%
rename from frontend/app/svg/icons/filters/phone-laptop.svg
rename to frontend/app/svg/icons/filters/platform.svg
diff --git a/frontend/app/svg/icons/filters/referrer.svg b/frontend/app/svg/icons/filters/referrer.svg
new file mode 100644
index 000000000..daa9f0141
--- /dev/null
+++ b/frontend/app/svg/icons/filters/referrer.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-chat-square-quote" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+  <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/resize.svg b/frontend/app/svg/icons/filters/resize.svg
new file mode 100644
index 000000000..ca5a645f8
--- /dev/null
+++ b/frontend/app/svg/icons/filters/resize.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="icn_resize" stroke="none" stroke-width="1">
+        <g id="Group" transform="translate(0.000000, 4.000000)">
+            <path d="M6.3676531,7.24426522 C6.34293965,7.2140599 6.31488039,7.18662417 6.28398858,7.16245992 C6.0529554,6.98174063 5.71583449,7.01836611 5.53100794,7.24426522 L-0.811179719,14.9958279 C-0.887171026,15.0887062 -0.928571429,15.2041069 -0.928571429,15.3230491 C-0.928571429,15.6123411 -0.688723973,15.8468587 -0.392857143,15.8468587 L12.2915182,15.8468587 C12.4131636,15.8468587 12.5311871,15.8063783 12.6261762,15.7320757 C12.8572094,15.5513564 12.8946673,15.221727 12.7098408,14.9958279 L6.3676531,7.24426522 Z M13.5464859,14.3413855 C14.1009655,15.0190828 13.9885919,16.0079708 13.2954924,16.5501287 C13.010525,16.7730365 12.6564545,16.8944777 12.2915182,16.8944777 L-0.392857143,16.8944777 C-1.28045763,16.8944777 -2,16.1909252 -2,15.3230491 C-2,14.9662225 -1.87579879,14.6200203 -1.64782487,14.3413855 L4.69436279,6.58982279 C5.24884242,5.91212546 6.26020517,5.80224902 6.9533047,6.34440688 C7.04598012,6.41689965 7.13015792,6.49920683 7.20429825,6.58982279 L13.5464859,14.3413855 Z" id="Triangle" fill-rule="nonzero" transform="translate(5.949360, 11.447239) rotate(-90.000000) translate(-5.949360, -11.447239) "></path>
+            <path d="M24.2839886,7.16245992 C24.0529554,6.98174063 23.7158345,7.01836611 23.5310079,7.24426522 L17.1888203,14.9958279 C17.112829,15.0887062 17.0714286,15.2041069 17.0714286,15.3230491 C17.0714286,15.6123411 17.311276,15.8468587 17.6071429,15.8468587 L30.2915182,15.8468587 C30.4131636,15.8468587 30.5311871,15.8063783 30.6261762,15.7320757 C30.8572094,15.5513564 30.8946673,15.221727 30.7098408,14.9958279 L24.3676531,7.24426522 C24.3429397,7.2140599 24.3148804,7.18662417 24.2839886,7.16245992 Z M31.5464859,14.3413855 C32.1009655,15.0190828 31.9885919,16.0079708 31.2954924,16.5501287 C31.010525,16.7730365 30.6564545,16.8944777 30.2915182,16.8944777 L17.6071429,16.8944777 C16.7195424,16.8944777 16,16.1909252 16,15.3230491 C16,14.9662225 16.1242012,14.6200203 16.3521751,14.3413855 L22.6943628,6.58982279 C23.2488424,5.91212546 24.2602052,5.80224902 24.9533047,6.34440688 C25.0459801,6.41689965 25.1301579,6.49920683 25.2042983,6.58982279 L31.5464859,14.3413855 Z" id="Triangle-Copy" fill-rule="nonzero" transform="translate(23.949360, 11.447239) rotate(90.000000) translate(-23.949360, -11.447239) "></path>
+            <rect id="Rectangle" x="14.4136458" y="0" width="1.07142857" height="22"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/border-outer.svg b/frontend/app/svg/icons/filters/rev-id.svg
similarity index 100%
rename from frontend/app/svg/icons/filters/border-outer.svg
rename to frontend/app/svg/icons/filters/rev-id.svg
diff --git a/frontend/app/svg/icons/filters/state-action.svg b/frontend/app/svg/icons/filters/state-action.svg
new file mode 100644
index 000000000..b4a93969f
--- /dev/null
+++ b/frontend/app/svg/icons/filters/state-action.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-grid-3x2-gap" viewBox="0 0 16 16">
+  <path d="M4 4v2H2V4h2zm1 7V9a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm5 5V9a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zM9 4v2H7V4h2zm5 0h-2v2h2V4zM4 9v2H2V9h2zm5 0v2H7V9h2zm5 0v2h-2V9h2zm-3-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-2z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/filters/view.svg b/frontend/app/svg/icons/filters/view.svg
new file mode 100644
index 000000000..8feb3ec07
--- /dev/null
+++ b/frontend/app/svg/icons/filters/view.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  class="bi bi-eye" viewBox="0 0 16 16">
+  <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js
index c7ad79982..3bb9069a5 100644
--- a/frontend/app/types/filter/filter.js
+++ b/frontend/app/types/filter/filter.js
@@ -34,10 +34,9 @@ export default Record({
   rangeValue,
   startDate,
   endDate,
-  condition: 'then',
 
-  sort: undefined,
-  order: undefined,
+  sort: '',
+  order: '',
 
   viewed: undefined,
   consoleLogCount: undefined,
@@ -109,8 +108,8 @@ export const defaultFilters = [
       { label: 'OS', key: KEYS.USER_OS, type: KEYS.USER_OS, filterKey: KEYS.USER_OS, icon: 'os', isFilter: true },
 			{ label: 'Browser', key: KEYS.USER_BROWSER, type: KEYS.USER_BROWSER, filterKey: KEYS.USER_BROWSER, icon: 'window', isFilter: true },
       { label: 'Device', key: KEYS.USER_DEVICE, type: KEYS.USER_DEVICE, filterKey: KEYS.USER_DEVICE, icon: 'device', isFilter: true },
-      { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/border-outer', isFilter: true },
-      { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/phone-laptop', isFilter: true }
+      { label: 'Rev ID', key: KEYS.REVID, type: KEYS.REVID, filterKey: KEYS.REVID, icon: 'filters/rev-id', isFilter: true },
+      { label: 'Platform', key: KEYS.PLATFORM, type: KEYS.PLATFORM, filterKey: KEYS.PLATFORM, icon: 'filters/platform', isFilter: true },
 		]
   },
   {
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
index c39cc1d2f..03722fc09 100644
--- a/frontend/app/types/filter/filterType.ts
+++ b/frontend/app/types/filter/filterType.ts
@@ -5,6 +5,7 @@ export enum FilterType {
   DURATION = "DURATION",
   MULTIPLE = "MULTIPLE",
   COUNTRY = "COUNTRY",
+  DROPDOWN = "DROPDOWN",
 };
 
 export enum FilterKey {
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 40f3c406c..bc706668f 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -1,5 +1,8 @@
 import Record from 'Types/Record';
 import { FilterType, FilterKey } from './filterType'
+import { countries } from 'App/constants';
+
+const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
 
 export const CLICK = 'CLICK';
 export const INPUT = 'INPUT';
@@ -47,47 +50,6 @@ const ISSUE_OPTIONS = [
   { text: 'Dead Click', value: 'dead_click' },
 ]
 
-// export const TYPES = {
-//   ERROR,
-//   MISSING_RESOURCE,
-//   SLOW_SESSION,
-//   CLICK_RAGE,
-//   CLICK,
-//   INPUT,
-//   LOCATION,
-//   VIEW,
-//   CONSOLE,
-//   METADATA,
-//   CUSTOM,
-//   URL,
-//   USER_BROWSER,
-//   USER_OS,
-//   USER_DEVICE,
-//   PLATFORM,
-//   DURATION,
-//   REFERRER,
-//   USER_COUNTRY,
-//   JOURNEY,
-//   FETCH,
-//   GRAPHQL,
-//   STATEACTION,
-//   REVID,
-//   USERANONYMOUSID,
-//   USERID,
-//   ISSUE,
-//   EVENTS_COUNT,
-//   UTM_SOURCE,
-//   UTM_MEDIUM,
-//   UTM_CAMPAIGN,
-  
-//   DOM_COMPLETE,
-//   LARGEST_CONTENTFUL_PAINT_TIME,
-//   TIME_BETWEEN_EVENTS,
-//   TTFB,
-//   AVG_CPU_LOAD,
-//   AVG_MEMORY_USAGE,
-// };
-
 const filterKeys = ['is', 'isNot'];
 const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith'];
 const targetFilterKeys = ['on', 'notOn'];
@@ -226,39 +188,39 @@ export const booleanOptions = [
 
 export const filtersMap = {
   [FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
-  [FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
-  [FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  [FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/input', isEvent: true },
+  [FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/location', isEvent: true },
 
-  [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/os' },
+  [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/browser' },
+  [FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/device' },
+  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/platform' },
+  [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/rev-id' },
 
-  [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.NUMBER, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/referrer' },
+  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.NUMBER, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/duration' },
+  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.DROPDOWN, category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/country', options: countryOptions },
 
-  [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/console' },
+  [FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/error' },
+  [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/fetch' },
+  [FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/graphql' },
+  [FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/state-action' },
 
-  [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
+  [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
   
-  [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.NUMBER, category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.TTFB]: { key: FilterKey.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.NUMBER, category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.NUMBER, category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.NUMBER, category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.TTFB]: { key: FilterKey.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.NUMBER, category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  // [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.NUMBER, category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
   // [FilterKey.SLOW_SESSION]: { key: FilterKey.SLOW_SESSION, type: FilterType.BOOLEAN, category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
-  [FilterKey.MISSING_RESOURCE]: { key: FilterKey.MISSING_RESOURCE, type: FilterType.BOOLEAN, category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
+  // [FilterKey.MISSING_RESOURCE]: { key: FilterKey.MISSING_RESOURCE, type: FilterType.BOOLEAN, category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
   // [FilterKey.CLICK_RAGE]: { key: FilterKey.CLICK_RAGE, type: FilterType.BOOLEAN, category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
   
-  [FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: 'new', label: 'Issue', operator: 'onAnything', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
+  [FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: 'javascript', label: 'Issue', operator: 'onAnything', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
   // [FilterKey.URL]: { / [TYPES,TYPES. category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
   // [FilterKey.CUSTOM]: { / [TYPES,TYPES. category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
   // [FilterKey.METADATA]: { / [TYPES,TYPES. category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
@@ -281,7 +243,7 @@ export default Record({
   isFilter: false,
   actualValue: '',
   
-  operator: 'is',
+  operator: 'notOn',
   operatorOptions: [],
   isEvent: false,
   index: 0,
@@ -295,7 +257,7 @@ export default Record({
     // key: filter.type === METADATA ? filter.label : filter.key || filter.type, // || camelCased(filter.type.toLowerCase()),
     // label: getLabel(filter),
     // target: Target(target),
-    operator: getOperatorDefault(key),
+    // operator: getOperatorDefault(key),
     // value: target ? target.label : filter.value,
     // value: typeof value === 'string' ? [value] : value,
     // icon: filter.type ? getfilterIcon(filter.type) : 'filters/metadata'

From 45db3fa1d4eca40e575abe0270af035d0a583227 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 25 Jan 2022 15:03:53 +0530
Subject: [PATCH 5/6] feat(ui) - custom metrics

---
 .../app/components/BugFinder/DateRange.js     |  4 +-
 .../BugFinder/Filters/SortDropdown.js         |  2 +-
 .../FilterSeries/FilterSeries.tsx             |  4 +-
 .../shared/Filters/FilterItem/FilterItem.tsx  |  9 +-
 .../shared/Filters/FilterList/FilterList.tsx  | 96 +++++++++++--------
 .../Filters/FilterValue/FilterValue.tsx       | 47 +++++++--
 .../FilterValueDropdown.tsx                   |  3 +-
 .../shared/SessionSearch/SessionSearch.tsx    | 31 +++++-
 frontend/app/constants/index.js               |  1 +
 frontend/app/constants/platformOptions.js     |  5 +
 frontend/app/duck/search.js                   | 26 ++---
 frontend/app/types/filter/filterType.ts       |  1 +
 frontend/app/types/filter/newFilter.js        |  6 +-
 13 files changed, 162 insertions(+), 73 deletions(-)
 create mode 100644 frontend/app/constants/platformOptions.js

diff --git a/frontend/app/components/BugFinder/DateRange.js b/frontend/app/components/BugFinder/DateRange.js
index 60e98ffa1..8f16b5207 100644
--- a/frontend/app/components/BugFinder/DateRange.js
+++ b/frontend/app/components/BugFinder/DateRange.js
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { applyFilter } from 'Duck/filters';
+// import { applyFilter } from 'Duck/filters';
+import { applyFilter } from 'Duck/search';
 import { fetchList as fetchFunnelsList } from 'Duck/funnels';
 import DateRangeDropdown from 'Shared/DateRangeDropdown';
 
@@ -12,6 +13,7 @@ import DateRangeDropdown from 'Shared/DateRangeDropdown';
 })
 export default class DateRange extends React.PureComponent {
   onDateChange = (e) => {
+    console.log('onDateChange', e);
     this.props.fetchFunnelsList(e.rangeValue)
     this.props.applyFilter(e)
   }
diff --git a/frontend/app/components/BugFinder/Filters/SortDropdown.js b/frontend/app/components/BugFinder/Filters/SortDropdown.js
index 80f88a0d7..cdcc2e468 100644
--- a/frontend/app/components/BugFinder/Filters/SortDropdown.js
+++ b/frontend/app/components/BugFinder/Filters/SortDropdown.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { Dropdown } from 'semantic-ui-react';
 import { Icon } from 'UI';
 import { sort } from 'Duck/sessions';
-import { applyFilter } from 'Duck/filters';
+import { applyFilter } from 'Duck/search';
 import stl from './sortDropdown.css';
 
 @connect(null, { sort, applyFilter })
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
index 2fafe112f..40214855c 100644
--- a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
@@ -99,9 +99,11 @@ function FilterSeries(props: Props) {
           <div className="p-5">
             { series.filter.filters.size > 0 ? (
               <FilterList
-                filters={series.filter.filters.toJS()}
+                // filters={series.filter.filters.toJS()}
+                filter={series.filter}
                 onUpdateFilter={onUpdateFilter}
                 onRemoveFilter={onRemoveFilter}
+                onChangeEventsOrder={onChangeEventsOrder}
               />
             ): (
               <div className="color-gray-medium">Add user event or filter to build the series.</div>
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index 2b0231da6..97e09d190 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -9,9 +9,10 @@ interface Props {
   filter: any; // event/filter
   onUpdate: (filter) => void;
   onRemoveFilter: () => void;
+  isFilter?: boolean;
 }
 function FitlerItem(props: Props) {
-  const { filterIndex, filter, onUpdate } = props;
+  const { isFilter = false, filterIndex, filter, onUpdate } = props;
 
   const replaceFilter = (filter) => {
     onUpdate(filter);
@@ -45,17 +46,17 @@ function FitlerItem(props: Props) {
   return (
     <div className="flex items-center mb-4">
       <div className="flex items-start mr-auto">
-        <div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div>
+        { !isFilter && <div className="mt-1 w-6 h-6 text-xs flex justify-center rounded-full bg-gray-light-shade mr-2">{filterIndex+1}</div> }
         <FilterSelection filter={filter} onFilterClick={replaceFilter} />
         <FilterOperator filter={filter} onChange={onOperatorChange} className="mx-2 flex-shrink-0"/>
         <FilterValue filter={filter} onUpdate={onUpdate} />
       </div>
       <div className="flex self-start mt-2">
         <div
-          className="cursor-pointer"
+          className="cursor-pointer p-1"
           onClick={props.onRemoveFilter}
         > 
-          <Icon name="close" size="18" />
+          <Icon name="trash" size="16" />
         </div>
       </div>
     </div>
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index 5bab3e6b4..cd775178d 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -3,12 +3,17 @@ import FilterItem from '../FilterItem';
 import { SegmentSelection } from 'UI';
 
 interface Props {
-  filters: any[]; // event/filter
+  // filters: any[]; // event/filter
+  filter?: any; // event/filter
   onUpdateFilter: (filterIndex, filter) => void;
   onRemoveFilter: (filterIndex) => void;
+  onChangeEventsOrder: (e, { name, value }) => void;
 }
 function FilterList(props: Props) {
-  const { filters } = props;
+  const { filter } = props;
+  const filters = filter.filters.toJS()
+  const hasEvents = filter.filters.filter(i => i.isEvent).size > 0;
+  const hasFilters = filter.filters.filter(i => !i.isEvent).size > 0;
 
   const onRemoveFilter = (filterIndex) => {
     const newFilters = filters.filter((_filter, i) => {
@@ -20,45 +25,56 @@ function FilterList(props: Props) {
 
   return (
     <div className="flex flex-col">
-      <div className="flex items-center mb-2">
-        <div className="mb-2 text-sm color-gray-medium mr-auto">EVENTS</div>
-        <div className="flex items-center">
-          <div className="mr-2 color-gray-medium text-sm">Events Order</div>
-          <SegmentSelection
-            primary
-            name="eventsOrder"
-            extraSmall={true}
-            // className="my-3"
-            // onSelect={onChangeEventsOrder }
-            onSelect={() => null }
-            // value={{ value: series.filter.eventsOrder }}
-            value={{ value: 'and' }}
-            list={ [
-              { name: 'AND', value: 'and' },
-              { name: 'OR', value: 'or' },
-              { name: 'THEN', value: 'then' },
-            ]}
-          />
-        </div>
-      </div>
-      {filters.map((filter, filterIndex) => (
-        <FilterItem
-          filterIndex={filterIndex}
-          filter={filter}
-          onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
-          onRemoveFilter={() => onRemoveFilter(filterIndex) }
-        />
-      ))}
+      { hasEvents && (
+        <>
+          <div className="flex items-center mb-2">
+            <div className="mb-2 text-sm color-gray-medium mr-auto">EVENTS</div>
+            <div className="flex items-center">
+              <div className="mr-2 color-gray-medium text-sm">Events Order</div>
+              <SegmentSelection
+                primary
+                name="eventsOrder"
+                extraSmall={true}
+                // className="my-3"
+                onSelect={props.onChangeEventsOrder}
+                // onSelect={() => null }
+                value={{ value: filter.eventsOrder }}
+                // value={{ value: 'and' }}
+                list={ [
+                  { name: 'AND', value: 'and' },
+                  { name: 'OR', value: 'or' },
+                  { name: 'THEN', value: 'then' },
+                ]}
+              />
+            </div>
+          </div>
+          {filters.map((filter, filterIndex) => filter.isEvent ? (
+            <FilterItem
+              filterIndex={filterIndex}
+              filter={filter}
+              onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+              onRemoveFilter={() => onRemoveFilter(filterIndex) }
+            />
+          ): null)}
+          <div className='mb-2' />
+        </>
+      )}
 
-      {/* <div>Filters</div>
-      {filters.filter(f => !f.isEvent).map((filter, filterIndex) => (
-        <FilterItem
-          filterIndex={filter.index}
-          filter={filter}
-          onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
-          onRemoveFilter={() => onRemoveFilter(filterIndex) }
-        />
-      ))} */}
+      {hasFilters && (
+        <>
+          <div className='border-t -mx-5 mb-2' />
+          <div className="mb-2 text-sm color-gray-medium mr-auto">FILTERS</div>
+          {filters.map((filter, filterIndex) => !filter.isEvent ? (
+            <FilterItem
+              isFilter={true}
+              filterIndex={filterIndex}
+              filter={filter}
+              onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
+              onRemoveFilter={() => onRemoveFilter(filterIndex) }
+            />
+          ): null)}
+        </>
+      )}
     </div>
   );
 }
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 4a129c365..2983febc8 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import FilterAutoComplete from '../FilterAutoComplete';
 import { FilterType } from 'Types/filter/filterType';
 import FilterValueDropdown from '../FilterValueDropdown';
@@ -10,6 +10,7 @@ interface Props {
 }
 function FilterValue(props: Props) {
   const { filter } = props;
+  const [durationValues, setDurationValues] = useState({ minDuration: 0, maxDuration: 0 });
 
   const onAddValue = () => {
     const newValues = filter.value.concat("")
@@ -31,6 +32,25 @@ function FilterValue(props: Props) {
     props.onUpdate({ ...filter, value: newValues })
   }
 
+  const onDurationChange = (newValues) => {
+    console.log('durationValues', durationValues)
+    // setDurationValues({ ...durationValues });
+    setDurationValues({ ...durationValues, ...newValues });
+  } 
+
+  const handleBlur = (e) => {
+    // const { filter, onChange } = props;
+    if (filter.type === FilterType.DURATION) {
+      const { maxDuration, minDuration, key } = filter;
+      if (maxDuration || minDuration) return;
+      if (maxDuration !== durationValues.maxDuration || 
+          minDuration !== durationValues.minDuration) {
+        // onChange(e, { name: 'value', value: [this.state.minDuration, this.state.maxDuration] });
+        props.onUpdate({ ...filter, value: [durationValues.minDuration, durationValues.maxDuration] });
+      }
+    }
+  }
+
   const renderValueFiled = (value, valueIndex) => {
     switch(filter.type) {
       case FilterType.ISSUE:
@@ -43,12 +63,22 @@ function FilterValue(props: Props) {
             onChange={(e, { name, value }) => onSelect(e, { value }, valueIndex)}
           />
         )
+      case FilterType.MULTIPLE_DROPDOWN:
+        return (
+          <FilterValueDropdown
+            multiple={true}
+            value={value}
+            filter={filter}
+            options={filter.options}
+            onChange={(e, { name, value }) => onSelect(e, { value }, valueIndex)}
+          />
+        )
       case FilterType.DURATION:
         return (
           <FilterDuration
-            // onChange={ this.onDurationChange }
+            onChange={ onDurationChange }
             // onEnterPress={ this.handleClose }
-            // onBlur={this.handleClose}
+            onBlur={handleBlur}
             minDuration={ filter.value[0] }
             maxDuration={ filter.value[1] }
           />
@@ -81,12 +111,17 @@ function FilterValue(props: Props) {
         )
     }
   }
+  console.log('durationValues', durationValues)
 
   return (
     <div className="grid grid-cols-3 gap-3">
-      {filter.value && filter.value.map((value, valueIndex) => (
-        renderValueFiled(value, valueIndex)
-      ))}
+      { filter.type === FilterType.DURATION ? (
+          renderValueFiled(filter.value, 0)
+      ) : (
+        filter.value && filter.value.map((value, valueIndex) => (
+          renderValueFiled(value, valueIndex)
+        ))
+      )}
     </div>
   );
 }
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
index eda66f4ef..248fcabed 100644
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@@ -11,9 +11,10 @@ interface Props {
   className?: string;
   options: any[];
   search?: boolean;
+  multiple?: boolean;
 }
 function FilterValueDropdown(props: Props) {
-  const { search = false, options, onChange, value, className = '' } = props;
+  const { multiple = false, search = false, options, onChange, value, className = '' } = props;
   // const options = []
 
   return (
diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
index 7483e70b6..4bd50d609 100644
--- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -57,17 +57,40 @@ function SessionSearch(props) {
     });
   }
 
+  const onChangeEventsOrder = (e, { name, value }) => {
+    props.edit({
+      ...appliedFilter.toData(),
+      filter: {
+        ...appliedFilter.filter.toData(),
+        eventsOrder: value,
+      }
+    });
+  }
+
+  const clearSearch = () => {
+    props.edit({
+      ...appliedFilter.toData(),
+      filter: {
+        ...appliedFilter.filter.toData(),
+        filters: [],
+      }
+    });
+  }
+  
+
   return (
     <div className="border bg-white rounded mt-4">
-      <div className="p-3">
+      <div className="p-5">
         <FilterList
-          filters={appliedFilter.filter.filters.toJS()}
+          // filters={appliedFilter.filter.filters.toJS()}
+          filter={appliedFilter.filter}
           onUpdateFilter={onUpdateFilter}
           onRemoveFilter={onRemoveFilter}
+          onChangeEventsOrder={onChangeEventsOrder}
         />
       </div>
 
-      <div className="border-t px-3 py-2 flex items-center">
+      <div className="border-t px-5 py-1 flex items-center -mx-2">
         <div>
           <FilterSelection
             filter={undefined}
@@ -78,7 +101,7 @@ function SessionSearch(props) {
         </div>
         <div className="ml-auto flex items-center">
           <SaveFilterButton />
-          <Button>CLEAR STEPS</Button>
+          <Button onClick={clearSearch}>CLEAR STEPS</Button>
           <Button plain>SAVE FUNNEL</Button>
         </div>
       </div>
diff --git a/frontend/app/constants/index.js b/frontend/app/constants/index.js
index ba6f53cf0..8ba18841a 100644
--- a/frontend/app/constants/index.js
+++ b/frontend/app/constants/index.js
@@ -10,6 +10,7 @@ export { default as alertConditions } from './alertConditions';
 export { default as alertMetrics } from './alertMetrics';
 export { default as regions } from './regions';
 export { default as links } from './links';
+export { default as platformOptions } from './platformOptions';
 export { 
   DAYS as SCHEDULE_DAYS, 
   HOURS as SCHEDULE_HOURS, 
diff --git a/frontend/app/constants/platformOptions.js b/frontend/app/constants/platformOptions.js
new file mode 100644
index 000000000..46747ea2e
--- /dev/null
+++ b/frontend/app/constants/platformOptions.js
@@ -0,0 +1,5 @@
+export default [
+  { value: 'desktop', text: 'Desktop' },
+  { value: 'mobile', text: 'Mobile' },
+  { value: 'tablet', text: 'Tablet' },
+]
\ No newline at end of file
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
index fee81b122..0aa2afe78 100644
--- a/frontend/app/duck/search.js
+++ b/frontend/app/duck/search.js
@@ -26,6 +26,7 @@ const SAVE = saveType(name);
 const EDIT = editType(name);
 const REMOVE = removeType(name);
 const UPDATE = `${name}/UPDATE`;
+const APPLY = `${name}/APPLY`;
 const SET_ALERT_METRIC_ID = `${name}/SET_ALERT_METRIC_ID`;
 
 function chartWrapper(chart = []) {
@@ -49,6 +50,13 @@ function reducer(state = initialState, action = {}) {
 	switch (action.type) {
     case EDIT:
       return state.set('instance', FilterSeries(action.instance));
+    case APPLY:
+      return action.fromUrl 
+        ? state.set('instance', 
+            Filter(action.filter)
+            // .set('events', state.getIn([ 'instance', 'events' ]))
+          )
+        : state.mergeIn([ 'instance', 'filter' ], action.filter);
     case success(SAVE):
       return state.set([ 'instance' ], CustomMetric(action.data));
     case success(REMOVE):
@@ -85,13 +93,7 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat
   dispatch(actionCreator(...args));
   const filter = getState().getIn([ 'search', 'instance', 'filter' ]).toData();
   filter.filters = filter.filters.map(filterMap);
-  // console.log('filter', filter)
-  
-  // let filter = appliedFilter
-  //   .update('filters', list => list.map(f => f.set('value', f.value || '*'))
-  //   .map(filterMap));
-
-  // const filter.filters = getState().getIn([ 'instance', 'filter' ]).get('filters').map(filterMap).toJS();
+  filter.isNew = true  // TODO remove this line
 
   return isRoute(ERRORS_ROUTE, window.location.pathname)
     ? dispatch(fetchErrorsList(filter))
@@ -105,11 +107,11 @@ export const edit = reduceThenFetchResource((instance) => ({
 
 export const remove = createRemove(name);
 
-// export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
-//   type: APPLY,
-//   filter,
-//   fromUrl,
-// }));
+export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({
+  type: APPLY,
+  filter,
+  fromUrl,
+}));
 
 export const updateSeries = (index, series) => ({
   type: UPDATE,
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
index 03722fc09..f1e2c33a9 100644
--- a/frontend/app/types/filter/filterType.ts
+++ b/frontend/app/types/filter/filterType.ts
@@ -6,6 +6,7 @@ export enum FilterType {
   MULTIPLE = "MULTIPLE",
   COUNTRY = "COUNTRY",
   DROPDOWN = "DROPDOWN",
+  MULTIPLE_DROPDOWN = "MULTIPLE_DROPDOWN",
 };
 
 export enum FilterKey {
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index bc706668f..1e27ab5b5 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -1,6 +1,6 @@
 import Record from 'Types/Record';
 import { FilterType, FilterKey } from './filterType'
-import { countries } from 'App/constants';
+import { countries, platformOptions } from 'App/constants';
 
 const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
 
@@ -194,11 +194,11 @@ export const filtersMap = {
   [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/os' },
   [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/browser' },
   [FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/device' },
-  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/platform' },
+  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE_DROPDOWN, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: filterOptions, icon: 'filters/platform', options: platformOptions },
   [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/rev-id' },
 
   [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/referrer' },
-  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.NUMBER, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/duration' },
+  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/duration' },
   [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.DROPDOWN, category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/country', options: countryOptions },
 
   [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/console' },

From 2008d3dc2ff339b66f83ef5bc7c6aaed4e2b5d67 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 26 Jan 2022 00:24:08 +0530
Subject: [PATCH 6/6] feat(ui) - custom metrics

---
 .../app/components/BugFinder/DateRange.js     |  12 +-
 .../shared/Filters/FilterList/FilterList.tsx  |   2 +-
 .../Filters/FilterModal/FilterModal.tsx       |   4 +-
 .../Filters/FilterValue/FilterValue.tsx       |   3 +-
 .../FilterValueDropdown.css                   |  41 ++++-
 .../FilterValueDropdown.tsx                   |  35 +++--
 .../SaveSearchModal/SaveSearchModal.tsx       |   4 +-
 .../shared/SessionSearch/SessionSearch.tsx    |  30 +---
 frontend/app/duck/search.js                   |  30 ++--
 frontend/app/svg/icons/filters/custom.svg     |   1 +
 frontend/app/types/customMetric.js            |   5 -
 frontend/app/types/filter/filter.js           |  22 ++-
 frontend/app/types/filter/filterType.ts       |  11 ++
 frontend/app/types/filter/newFilter.js        | 140 ++++++++----------
 14 files changed, 193 insertions(+), 147 deletions(-)
 create mode 100644 frontend/app/svg/icons/filters/custom.svg

diff --git a/frontend/app/components/BugFinder/DateRange.js b/frontend/app/components/BugFinder/DateRange.js
index 8f16b5207..b9bbd745a 100644
--- a/frontend/app/components/BugFinder/DateRange.js
+++ b/frontend/app/components/BugFinder/DateRange.js
@@ -5,20 +5,24 @@ import { fetchList as fetchFunnelsList } from 'Duck/funnels';
 import DateRangeDropdown from 'Shared/DateRangeDropdown';
 
 @connect(state => ({
-  rangeValue: state.getIn([ 'filters', 'appliedFilter', 'rangeValue' ]),
-  startDate: state.getIn([ 'filters', 'appliedFilter', 'startDate' ]),
-  endDate: state.getIn([ 'filters', 'appliedFilter', 'endDate' ]),
+  filter: state.getIn([ 'search', 'instance' ]),
+  // rangeValue: state.getIn([ 'search', 'instance', 'rangeValue' ]),
+  // startDate: state.getIn([ 'search', 'instance', 'startDate' ]),
+  // endDate: state.getIn([ 'search', 'instance', 'endDate' ]),
 }), {
   applyFilter, fetchFunnelsList
 })
 export default class DateRange extends React.PureComponent {
+
   onDateChange = (e) => {
     console.log('onDateChange', e);
     this.props.fetchFunnelsList(e.rangeValue)
     this.props.applyFilter(e)
   }
   render() {
-    const { startDate, endDate, rangeValue, className } = this.props;
+    const { filter: { rangeValue, startDate, endDate }, className } = this.props;
+    // const { startDate, endDate, rangeValue, className } = this.props;
+    
     return (
       <DateRangeDropdown
         button
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index cd775178d..c2f71fd5d 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -11,7 +11,7 @@ interface Props {
 }
 function FilterList(props: Props) {
   const { filter } = props;
-  const filters = filter.filters.toJS()
+  const filters = filter.filters;
   const hasEvents = filter.filters.filter(i => i.isEvent).size > 0;
   const hasFilters = filter.filters.filter(i => !i.isEvent).size > 0;
 
diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index b2299b2e2..e282ab78f 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -10,9 +10,9 @@ function FilterModal(props: Props) {
   const { filters, onFilterClick = () => null } = props;
   return (
     <div className="border p-3" style={{ width: '490px', height: '400px', overflowY: 'auto'}}>
-      <div className="grid grid-flow-row-dense grid-cols-2">
+      <div className="" style={{ columns: "100px 2" }}>
         {filters && Object.keys(filters).map((key) => (
-          <div className="p-3">
+          <div className="p-3 aspect-w-1">
             <div className="uppercase font-medium mb-1">{key}</div>
             <div>
               {filters[key].map((filter: any) => (
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 2983febc8..ef327eb7f 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -53,7 +53,6 @@ function FilterValue(props: Props) {
 
   const renderValueFiled = (value, valueIndex) => {
     switch(filter.type) {
-      case FilterType.ISSUE:
       case FilterType.DROPDOWN:
         return (
           <FilterValueDropdown
@@ -63,6 +62,7 @@ function FilterValue(props: Props) {
             onChange={(e, { name, value }) => onSelect(e, { value }, valueIndex)}
           />
         )
+      case FilterType.ISSUE:
       case FilterType.MULTIPLE_DROPDOWN:
         return (
           <FilterValueDropdown
@@ -111,7 +111,6 @@ function FilterValue(props: Props) {
         )
     }
   }
-  console.log('durationValues', durationValues)
 
   return (
     <div className="grid grid-cols-3 gap-3">
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
index 8a2329dbd..eb2c457f7 100644
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.css
@@ -1,3 +1,38 @@
+.wrapper {
+  border: solid thin $gray-light !important;
+  border-radius: 3px;
+  background-color: $gray-lightest !important;
+  display: flex;
+  align-items: center;
+  height: 30px;
+
+  & .right {
+    height: 28px;
+    display: flex;
+    align-items: stretch;
+    padding: 0;
+    background-color: $gray-lightest;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    & div {
+      /* background-color: red; */
+      border-left: solid thin $gray-light !important;
+      width: 28px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+      &:hover {
+        background-color: $gray-light;
+      }
+    }
+  }
+}
 .operatorDropdown {
   font-weight: 400;
   height: 30px;
@@ -8,9 +43,9 @@
   padding: 0 8px !important;
   font-size: 13px;
   /* background-color: rgba(255, 255, 255, 0.8) !important; */
-  background-color: $gray-lightest !important;
-  border: solid thin rgba(34, 36, 38, 0.15) !important;
-  border-radius: 4px !important;
+  /* background-color: $gray-lightest !important; */
+  /* border: solid thin rgba(34, 36, 38, 0.15) !important; */
+  /* border-radius: 4px !important; */
   color: $gray-darkest !important;
   font-size: 14px !important;
   &.ui.basic.button {
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
index 248fcabed..f2a54afc8 100644
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@@ -12,22 +12,35 @@ interface Props {
   options: any[];
   search?: boolean;
   multiple?: boolean;
+  showCloseButton?: boolean;
+  showOrButton?: boolean;
+  onRemoveValue?: () => void;
+  onAddValue?: () => void;
 }
 function FilterValueDropdown(props: Props) {
-  const { multiple = false, search = false, options, onChange, value, className = '' } = props;
+  const { multiple = false, search = false, options, onChange, value, className = '', showCloseButton = true, showOrButton = true } = props;
   // const options = []
 
   return (
-    <Dropdown
-      search={search}
-      className={ cn(stl.operatorDropdown, className) }      
-      options={ options }
-      name="issue_type"
-      value={ value }
-      onChange={ onChange }
-      placeholder="Select"
-      icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
-    />
+    <div className={stl.wrapper}>
+      <Dropdown
+        search={search}
+        className={ cn(stl.operatorDropdown, className) }      
+        options={ options }
+        name="issue_type"
+        value={ value }
+        onChange={ onChange }
+        placeholder="Select"
+        icon={ <Icon className="ml-5" name="chevron-down" size="12" /> }
+      />
+      <div
+        className={stl.right}
+        // onClick={showOrButton ? onRemoveValue : onAddValue}
+      >
+        { showCloseButton && <div onClick={props.onRemoveValue}><Icon name="close" size="18" /></div> }
+        { showOrButton && <div onClick={props.onAddValue} className="color-teal"><span className="px-1">or</span></div> }
+      </div>
+    </div>
   );
 }
 
diff --git a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
index e609440c2..29084ec42 100644
--- a/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
+++ b/frontend/app/components/shared/SaveSearchModal/SaveSearchModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { edit, save } from 'Duck/filters';
+import { edit, save } from 'Duck/search';
 import { Button, Modal, Form, Icon, Checkbox } from 'UI';
 import stl from './SaveSearchModal.css';
 
@@ -72,7 +72,7 @@ function SaveSearchModal(props: Props) {
 }
 
 export default connect(state => ({
-  filter: state.getIn(['filters', 'instance']),
+  filter: state.getIn(['search', 'instance']),
   loading: state.getIn([ 'filters', 'saveRequest', 'loading' ]) || 
     state.getIn([ 'filters', 'updateRequest', 'loading' ]),
 }), { edit, save })(SaveSearchModal);
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
index 4bd50d609..caba99eae 100644
--- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -15,18 +15,15 @@ function SessionSearch(props) {
 
   const onAddFilter = (filter) => {
     filter.value = [""]
-    const newFilters = appliedFilter.filter.filters.concat(filter);
+    const newFilters = appliedFilter.filters.concat(filter);
     props.edit({
-      ...appliedFilter,
-      filter: {
         ...appliedFilter.filter,
         filters: newFilters,
-      }
     });
   }
 
   const onUpdateFilter = (filterIndex, filter) => {
-    const newFilters = appliedFilter.filter.filters.map((_filter, i) => {
+    const newFilters = appliedFilter.filters.map((_filter, i) => {
       if (i === filterIndex) {
         return filter;
       } else {
@@ -35,45 +32,30 @@ function SessionSearch(props) {
     });
 
     props.edit({
-      ...appliedFilter.toData(),
-      filter: {
         ...appliedFilter.filter,
         filters: newFilters,
-      }
     });
   }
 
   const onRemoveFilter = (filterIndex) => {
-    const newFilters = appliedFilter.filter.filters.filter((_filter, i) => {
+    const newFilters = appliedFilter.filters.filter((_filter, i) => {
       return i !== filterIndex;
     });
 
     props.edit({
-      ...appliedFilter,
-      filter: {
-        ...appliedFilter.filter,
-        filters: newFilters,
-      }
+      filters: newFilters,
     });
   }
 
   const onChangeEventsOrder = (e, { name, value }) => {
     props.edit({
-      ...appliedFilter.toData(),
-      filter: {
-        ...appliedFilter.filter.toData(),
-        eventsOrder: value,
-      }
+      eventsOrder: value,
     });
   }
 
   const clearSearch = () => {
     props.edit({
-      ...appliedFilter.toData(),
-      filter: {
-        ...appliedFilter.filter.toData(),
         filters: [],
-      }
     });
   }
   
@@ -83,7 +65,7 @@ function SessionSearch(props) {
       <div className="p-5">
         <FilterList
           // filters={appliedFilter.filter.filters.toJS()}
-          filter={appliedFilter.filter}
+          filter={appliedFilter}
           onUpdateFilter={onUpdateFilter}
           onRemoveFilter={onRemoveFilter}
           onChangeEventsOrder={onChangeEventsOrder}
diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js
index 0aa2afe78..0404ca27a 100644
--- a/frontend/app/duck/search.js
+++ b/frontend/app/duck/search.js
@@ -1,16 +1,11 @@
 import { List, Map } from 'immutable'; 
-// import { clean as cleanParams } from 'App/api_client';
 import ErrorInfo, { RESOLVED, UNRESOLVED, IGNORED } from 'Types/errorInfo';
 import CustomMetric, { FilterSeries } from 'Types/customMetric'
 import { createFetch, fetchListType, fetchType, saveType, removeType, editType, createRemove, createEdit } from './funcTools/crud';
-// import { createEdit, createInit } from './funcTools/crud';
 import { createRequestReducer, ROOT_KEY } from './funcTools/request';
 import { array, request, success, failure, createListUpdater, mergeReducers } from './funcTools/tools';
 import Filter from 'Types/filter';
-// import filter from 'core-js/fn/array/filter';
-// import NewFilter from 'Types/filter/newFilter';
-// import Event from 'Types/filter/event';
-// import CustomFilter from 'Types/filter/customFilter';
+import SavedFilter from 'Types/filter/savedFilter';
 import { errors as errorsRoute, isRoute } from "App/routes";
 import { fetchList as fetchSessionList } from './sessions';
 import { fetchList as fetchErrorsList } from './errors';
@@ -41,26 +36,25 @@ function chartWrapper(chart = []) {
 const initialState = Map({
 	list: List(),
   alertMetricId: null,
-  // instance: null,
-	instance: FilterSeries({ filter: new Filter({ filters: [] }) }),
+	instance: new Filter({ filters: [] }),
+  savedFilter: new SavedFilter({ filters: [] }),
 });
 
 // Metric - Series - [] - filters
 function reducer(state = initialState, action = {}) {
 	switch (action.type) {
     case EDIT:
-      return state.set('instance', FilterSeries(action.instance));
+      return state.mergeIn(['instance'], action.instance);
     case APPLY:
       return action.fromUrl 
         ? state.set('instance', 
             Filter(action.filter)
             // .set('events', state.getIn([ 'instance', 'events' ]))
           )
-        : state.mergeIn([ 'instance', 'filter' ], action.filter);
+        : state.mergeIn(['instance'], action.filter);
     case success(SAVE):
-      return state.set([ 'instance' ], CustomMetric(action.data));
+      return state.mergeIn([ 'instance' ], action.data);
     case success(REMOVE):
-      console.log('action', action)
       return state.update('list', list => list.filter(item => item.metricId !== action.id));
 		case success(FETCH):
 			return state.set("instance", ErrorInfo(action.data));
@@ -79,9 +73,9 @@ export default mergeReducers(
 	}),
 );
 
-
 const filterMap = ({value, type, key, operator, source, custom, isEvent }) => ({
-  value: Array.isArray(value) ? value: [value],
+  // value: Array.isArray(value) ? value: [value],
+  value: value.filter(i => i !== '' && i !== null),
   custom,
   type: key,
   key, operator,
@@ -91,7 +85,7 @@ const filterMap = ({value, type, key, operator, source, custom, isEvent }) => ({
 
 const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getState) => {
   dispatch(actionCreator(...args));
-  const filter = getState().getIn([ 'search', 'instance', 'filter' ]).toData();
+  const filter = getState().getIn([ 'search', 'instance']).toData();
   filter.filters = filter.filters.map(filterMap);
   filter.isNew = true  // TODO remove this line
 
@@ -130,7 +124,11 @@ export function fetch(id) {
 export function save(instance) {
   return {
     types: SAVE.array,
-    call: client => client.post( `/${ name }s`, instance.toSaveData()),
+    call: client => client.post('/saved_search', {
+      name: instance.name,
+      filter: instance.filter.toSaveData(),
+    }),
+    instance,
   };
 }
 
diff --git a/frontend/app/svg/icons/filters/custom.svg b/frontend/app/svg/icons/filters/custom.svg
new file mode 100644
index 000000000..c9c41b0d7
--- /dev/null
+++ b/frontend/app/svg/icons/filters/custom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z"/></svg>
\ No newline at end of file
diff --git a/frontend/app/types/customMetric.js b/frontend/app/types/customMetric.js
index e40eddb27..0334ae2e6 100644
--- a/frontend/app/types/customMetric.js
+++ b/frontend/app/types/customMetric.js
@@ -1,11 +1,6 @@
 import Record from 'Types/Record';
 import { List } from 'immutable';
-// import { DateTime } from 'luxon';
-// import { validateEmail, validateName } from 'App/validate';
 import Filter from 'Types/filter';
-import NewFilter from 'Types/filter';
-// import { Event } from 'Types/filter';
-// import CustomFilter from 'Types/filter/customFilter';
 
 export const FilterSeries = Record({
   seriesId: undefined,
diff --git a/frontend/app/types/filter/filter.js b/frontend/app/types/filter/filter.js
index 3bb9069a5..a9871c793 100644
--- a/frontend/app/types/filter/filter.js
+++ b/frontend/app/types/filter/filter.js
@@ -35,8 +35,8 @@ export default Record({
   startDate,
   endDate,
 
-  sort: '',
-  order: '',
+  sort: 'startTs',
+  order: 'desc',
 
   viewed: undefined,
   consoleLogCount: undefined,
@@ -49,6 +49,24 @@ export default Record({
 }, {
   idKey: 'searchId',
   methods: {
+    toSaveData() {
+      const js = this.toJS();
+      js.filters = js.filters.map(filter => {
+        filter.type = filter.key
+        
+        delete filter.category
+        delete filter.icon
+        delete filter.operatorOptions
+        delete filter._key
+        delete filter.key
+        return filter;
+      });
+
+      delete js.createdAt;
+      delete js.key;
+      delete js._key;
+      return js;
+    },
     toData() {
       const js = this.toJS();
       js.filters = js.filters.map(filter => {
diff --git a/frontend/app/types/filter/filterType.ts b/frontend/app/types/filter/filterType.ts
index f1e2c33a9..b5449b161 100644
--- a/frontend/app/types/filter/filterType.ts
+++ b/frontend/app/types/filter/filterType.ts
@@ -1,3 +1,13 @@
+export enum FilterCategory {
+  INTERACTIONS = "Interactions",
+  GEAR = "Gear",
+  RECORDING_ATTRIBUTES = "Recording Attributes",
+  JAVASCRIPT = "Javascript",
+  USER = "User",
+  METADATA = "Metadata",
+  PERFORMANCE = "Performance",
+};
+
 export enum FilterType {
   ISSUE = "ISSUE",
   BOOLEAN = "BOOLEAN",
@@ -48,4 +58,5 @@ export enum FilterKey {
   TTFB = "TTFB",
   AVG_CPU_LOAD = "AVG_CPU_LOAD",
   AVG_MEMORY_USAGE = "AVG_MEMORY_USAGE",
+  FETCH_FAILED = "FETCH_FAILED",
 }
\ No newline at end of file
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 1e27ab5b5..07628ffe2 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -1,58 +1,27 @@
 import Record from 'Types/Record';
-import { FilterType, FilterKey } from './filterType'
+import { FilterType, FilterKey, FilterCategory } from './filterType'
 import { countries, platformOptions } from 'App/constants';
 
 const countryOptions = Object.keys(countries).map(i => ({ text: countries[i], value: i }));
 
-export const CLICK = 'CLICK';
-export const INPUT = 'INPUT';
-export const LOCATION = 'LOCATION';
-export const VIEW = 'VIEW_IOS';
-export const CONSOLE = 'ERROR';
-export const METADATA = 'METADATA';
-export const CUSTOM = 'CUSTOM';
-export const URL = 'URL';
-export const CLICK_RAGE = 'CLICKRAGE';
-export const USER_BROWSER  = 'USERBROWSER';
-export const USER_OS = 'USEROS';
-export const USER_COUNTRY  = 'USERCOUNTRY';
-export const USER_DEVICE = 'USERDEVICE';
-export const PLATFORM = 'PLATFORM';
-export const DURATION  = 'DURATION';
-export const REFERRER  = 'REFERRER';
-export const ERROR = 'ERROR';
-export const MISSING_RESOURCE = 'MISSINGRESOURCE';
-export const SLOW_SESSION = 'SLOWSESSION';
-export const JOURNEY = 'JOUNRNEY';
-export const FETCH = 'REQUEST';
-export const GRAPHQL = 'GRAPHQL';
-export const STATEACTION = 'STATEACTION';
-export const REVID = 'REVID';
-export const USERANONYMOUSID = 'USERANONYMOUSID';
-export const USERID = 'USERID';
-
-export const ISSUE = 'ISSUE';
-export const EVENTS_COUNT = 'EVENTS_COUNT';
-export const UTM_SOURCE = 'UTM_SOURCE';
-export const UTM_MEDIUM = 'UTM_MEDIUM';
-export const UTM_CAMPAIGN = 'UTM_CAMPAIGN';
-
-
-export const DOM_COMPLETE = 'DOM_COMPLETE';
-export const LARGEST_CONTENTFUL_PAINT_TIME = 'LARGEST_CONTENTFUL_PAINT_TIME';
-export const TIME_BETWEEN_EVENTS = 'TIME_BETWEEN_EVENTS';
-export const TTFB = 'TTFB';
-export const AVG_CPU_LOAD = 'AVG_CPU_LOAD';
-export const AVG_MEMORY_USAGE = 'AVG_MEMORY_USAGE';
-
 const ISSUE_OPTIONS = [
   { text: 'Click Range', value: 'click_rage' },
   { text: 'Dead Click', value: 'dead_click' },
+  { text: 'Excessive Scrolling', value: 'excessive_scrolling' },
+  { text: 'Bad Request', value: 'bad_request' },
+  { text: 'Missing Resource', value: 'missing_resource' },
+  { text: 'Memory', value: 'memory' },
+  { text: 'CPU', value: 'cpu' },
+  { text: 'Slow Resource', value: 'slow_resource' },
+  { text: 'Slow Page Load', value: 'slow_page_load' },
+  { text: 'Crash', value: 'crash' },
+  { text: 'Custom', value: 'custom' },
+  { text: 'JS Exception', value: 'js_exception' },
 ]
 
 const filterKeys = ['is', 'isNot'];
-const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith'];
-const targetFilterKeys = ['on', 'notOn'];
+const stringFilterKeys = ['is', 'isNot', 'contains', 'startsWith', 'endsWith', 'notContains'];
+const targetFilterKeys = ['on', 'notOn', 'onAny'];
 const signUpStatusFilterKeys = ['isSignedUp', 'notSignedUp'];
 const rangeFilterKeys = ['before', 'after', 'on', 'inRange', 'notInRange', 'withInLast', 'notWithInLast'];
 
@@ -78,9 +47,9 @@ const options = [
     text: 'contains',
     value: 'contains'
   }, {
-    key: 'doesNotContain',
-    text: 'does not contain',
-    value: 'doesNotContain'
+    key: 'notContains',
+    text: 'not contains',
+    value: 'notContains'
   }, {
     key: 'hasAnyValue',
     text: 'has any value',
@@ -172,9 +141,9 @@ const options = [
 
 
   {
-    key: 'onAnything',
-    text: 'on anything',
-    value: 'onAnything'
+    key: 'onAny',
+    text: 'on any',
+    value: 'onAny'
   }
 ];
 
@@ -186,41 +155,59 @@ export const booleanOptions = [
   { key: 'false', text: 'false', value: 'false' },
 ]
 
+export const customOperators = [
+  { key: '=', text: '=', value: '=' },
+  { key: '<', text: '<', value: '<' },
+  { key: '>', text: '>', value: '>' },
+  { key: '<=', text: '<=', value: '<=' },
+  { key: '>=', text: '>=', value: '>=' },
+]
+
 export const filtersMap = {
-  [FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: 'interactions', label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
-  [FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: 'interactions', label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/input', isEvent: true },
-  [FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: 'interactions', label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/location', isEvent: true },
+  [FilterKey.CLICK]: { key: FilterKey.CLICK, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Click', operator: 'on', operatorOptions: targetFilterOptions, icon: 'filters/click', isEvent: true },
+  [FilterKey.INPUT]: { key: FilterKey.INPUT, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Input', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/input', isEvent: true },
+  [FilterKey.LOCATION]: { key: FilterKey.LOCATION, type: FilterType.MULTIPLE, category: FilterCategory.INTERACTIONS, label: 'Page', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/location', isEvent: true },
+  [FilterKey.CUSTOM]: { key: FilterKey.CUSTOM, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Custom Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/custom', isEvent: true },
+  [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/fetch', isEvent: true },
+  [FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/graphql', isEvent: true },
+  [FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/state-action', isEvent: true },
+  [FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/error', isEvent: true },
+  // [FilterKey.METADATA]: { key: FilterKey.METADATA, type: FilterType.MULTIPLE, category: FilterCategory.METADATA, label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/metadata', isEvent: true },
 
-  [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: 'gear', label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/os' },
-  [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: 'gear', label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/browser' },
-  [FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: 'gear', label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/device' },
-  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE_DROPDOWN, category: 'gear', label: 'Platform', operator: 'is', operatorOptions: filterOptions, icon: 'filters/platform', options: platformOptions },
-  [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: 'gear', label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/rev-id' },
+  [FilterKey.USER_OS]: { key: FilterKey.USER_OS, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User OS', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/os' },
+  [FilterKey.USER_BROWSER]: { key: FilterKey.USER_BROWSER, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Browser', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/browser' },
+  [FilterKey.USER_DEVICE]: { key: FilterKey.USER_DEVICE, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'User Device', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/device' },
+  [FilterKey.PLATFORM]: { key: FilterKey.PLATFORM, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.GEAR, label: 'Platform', operator: 'is', operatorOptions: filterOptions, icon: 'filters/platform', options: platformOptions },
+  [FilterKey.REVID]: { key: FilterKey.REVID, type: FilterType.MULTIPLE, category: FilterCategory.GEAR, label: 'RevId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/rev-id' },
 
-  [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: 'recording_attributes', label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/referrer' },
-  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: 'recording_attributes', label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/duration' },
-  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.DROPDOWN, category: 'recording_attributes', label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/country', options: countryOptions },
+  [FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Referrer', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/referrer' },
+  [FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Duration', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/duration' },
+  [FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.DROPDOWN, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'User Country', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/country', options: countryOptions },
 
-  [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: 'javascript', label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/console' },
-  [FilterKey.ERROR]: { key: FilterKey.ERROR, type: FilterType.MULTIPLE, category: 'javascript', label: 'Error', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/error' },
-  [FilterKey.FETCH]: { key: FilterKey.FETCH, type: FilterType.MULTIPLE, category: 'javascript', label: 'Fetch', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/fetch' },
-  [FilterKey.GRAPHQL]: { key: FilterKey.GRAPHQL, type: FilterType.MULTIPLE, category: 'javascript', label: 'GraphQL', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/graphql' },
-  [FilterKey.STATEACTION]: { key: FilterKey.STATEACTION, type: FilterType.MULTIPLE, category: 'javascript', label: 'StateAction', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/state-action' },
-
-  [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: 'user', label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
-  [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: 'user', label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
+  [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/console' },
+  
+  
+  
+
+  [FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'UserId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
+  [FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'UserAnonymousId', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/userid' },
+  
+  [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, sourcesourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  // [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: FilterCategory.PERFORMANCE, label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
+  [FilterKey.TTFB]: { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'is', operatorOptions: stringFilterOptions, sourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, sourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, sourceOperatorOptions: customOperators, source: [], icon: 'filters/click', isEvent: true },
+  [FilterKey.FETCH_FAILED]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Fetch Failed', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click', isEvent: true },
+  
   
-  // [FilterKey.DOM_COMPLETE]: { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: 'new', label: 'DOM Complete', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  // [FilterKey.LARGEST_CONTENTFUL_PAINT_TIME]: { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.NUMBER, category: 'new', label: 'Largest Contentful Paint Time', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  // [FilterKey.TIME_BETWEEN_EVENTS]: { key: FilterKey.TIME_BETWEEN_EVENTS, type: FilterType.NUMBER, category: 'new', label: 'Time Between Events', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
-  // [FilterKey.TTFB]: { key: FilterKey.TTFB, type: 'time', category: 'new', label: 'TTFB', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
   // [FilterKey.AVG_CPU_LOAD]: { key: FilterKey.AVG_CPU_LOAD, type: FilterType.NUMBER, category: 'new', label: 'Avg CPU Load', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
   // [FilterKey.AVG_MEMORY_USAGE]: { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.NUMBER, category: 'new', label: 'Avg Memory Usage', operator: 'is', operatorOptions: stringFilterOptions, icon: 'filters/click' },
   // [FilterKey.SLOW_SESSION]: { key: FilterKey.SLOW_SESSION, type: FilterType.BOOLEAN, category: 'new', label: 'Slow Session', operator: 'true', operatorOptions: [{ key: 'true', text: 'true', value: 'true' }], icon: 'filters/click' },
   // [FilterKey.MISSING_RESOURCE]: { key: FilterKey.MISSING_RESOURCE, type: FilterType.BOOLEAN, category: 'new', label: 'Missing Resource', operator: 'true', operatorOptions: [{ key: 'inImages', text: 'in images', value: 'true' }], icon: 'filters/click' },
   // [FilterKey.CLICK_RAGE]: { key: FilterKey.CLICK_RAGE, type: FilterType.BOOLEAN, category: 'new', label: 'Click Rage', operator: 'onAnything', operatorOptions: [{ key: 'onAnything', text: 'on anything', value: 'true' }], icon: 'filters/click' },
   
-  [FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: 'javascript', label: 'Issue', operator: 'onAnything', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
+  [FilterKey.ISSUE]: { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions, icon: 'filters/click', options: ISSUE_OPTIONS },
   // [FilterKey.URL]: { / [TYPES,TYPES. category: 'interactions', label: 'URL', operator: 'is', operatorOptions: stringFilterOptions },
   // [FilterKey.CUSTOM]: { / [TYPES,TYPES. category: 'interactions', label: 'Custom', operator: 'is', operatorOptions: stringFilterOptions },
   // [FilterKey.METADATA]: { / [TYPES,TYPES. category: 'interactions', label: 'Metadata', operator: 'is', operatorOptions: stringFilterOptions },
@@ -233,6 +220,7 @@ export default Record({
   icon: '',
   type: '',
   value: [""],
+  source: [""],
   category: '',
   
   custom: '',
@@ -243,8 +231,10 @@ export default Record({
   isFilter: false,
   actualValue: '',
   
-  operator: 'notOn',
+  operator: '',
+  sourceOperator: '=',
   operatorOptions: [],
+  sourceOptions: [],
   isEvent: false,
   index: 0,
   options: [],