jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - custom metrics session list timezone and other changes

Browse source
This commit is contained in:
Shekar Siri 2022-02-07 00:07:43 +01:00
parent c9169f5cdb
commit a372269a5d
4 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { SlideModal, NoContent, Dropdown, Icon } from 'UI';
import { SlideModal, NoContent, Dropdown, Icon, TimezoneDropdown } from 'UI';
import SessionItem from 'Shared/SessionItem';
import stl from './SessionListModal.css';
import { connect } from 'react-redux';
@ -59,18 +59,25 @@ function SessionListModal(props: Props) {
<div className="mb-6 flex items-center">
<div className="mr-auto">Showing all sessions between <span className="font-medium">{startTime}</span> and <span className="font-medium">{endTime}</span> </div>
<div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">Series: </span>
<Dropdown
className={stl.dropdown}
direction="left"
options={ seriesOptions }
name="change"
value={ activeSeries }
onChange={ writeOption }
id="change-dropdown"
// icon={null}
icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
/>
<div className="flex items-center">
<span className="mr-2 color-gray-medium">Timezone</span>
<TimezoneDropdown />
</div>
<div className="flex items-center ml-6">
<span className="mr-2 color-gray-medium">Sort By</span>
<Dropdown
className={stl.dropdown}
direction="left"
options={ seriesOptions }
name="change"
value={ activeSeries }
onChange={ writeOption }
id="change-dropdown"
// icon={null}
icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
/>
</div>
{/* <span className="mr-2 color-gray-medium">Series</span> */}
</div>
</div>
<NoContent

4
frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx
View file

@ -11,8 +11,8 @@ interface Props {
const MainSearchBar = (props: Props) => {
return (
<div className="flex items-center">
<div style={{ width: "65%", marginRight: "10px"}}><SessionSearchField /></div>
<div className="flex items-center" style={{ width: "35%"}}>
<div style={{ width: "60%", marginRight: "10px"}}><SessionSearchField /></div>
<div className="flex items-center" style={{ width: "40%"}}>
<SavedSearch />
<Popup
trigger={

2
frontend/app/components/shared/SavedSearch/SavedSearch.tsx
View file

@ -40,7 +40,7 @@ function SavedSearch(props) {
<div className="flex items-center ml-2">
<Icon name="search" size="14" />
<span className="color-gray-medium px-1">Viewing:</span>
<span className="font-medium">{savedSearch.name}</span>
<span className="font-medium" style={{ whiteSpace: 'nowrap', width: '30%'}}>{savedSearch.name}</span>
</div>
)}
</div>

2
frontend/app/types/filter/newFilter.js
View file

@ -42,7 +42,7 @@ export const filtersMap = {
[FilterKey.REFERRER]: { key: FilterKey.REFERRER, type: FilterType.MULTIPLE, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Referrer', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/referrer' },
[FilterKey.DURATION]: { key: FilterKey.DURATION, type: FilterType.DURATION, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'Duration', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/duration' },
[FilterKey.USER_COUNTRY]: { key: FilterKey.USER_COUNTRY, type: FilterType.MULTIPLE_DROPDOWN, category: FilterCategory.RECORDING_ATTRIBUTES, label: 'User Country', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/country', options: countryOptions },
[FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/console' },
// [FilterKey.CONSOLE]: { key: FilterKey.CONSOLE, type: FilterType.MULTIPLE, category: FilterCategory.JAVASCRIPT, label: 'Console', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/console' },
[FilterKey.USERID]: { key: FilterKey.USERID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User Id', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },
[FilterKey.USERANONYMOUSID]: { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },