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

fix(ui) - metadata query

Browse source
This commit is contained in:
Shekar Siri 2022-02-05 11:08:05 +01:00
parent 46cbd11c2d
commit 1cde82e27a
5 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
View file

@ -47,7 +47,7 @@
.menu {
border-radius: 0 0 3px 3px;
border: solid thin $gray-light !important;
/* box-shadow: 0 2px 10px 0 $gray-light; */
box-shadow: 0 2px 2px 0 $gray-light;
/* padding: 20px; */
background-color: white;
max-height: 350px;

4
frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
View file

@ -22,6 +22,7 @@ interface Props {
placeholder?: string;
onSelect: (e, item) => void;
value: any;
icon?: string;
}
function FilterAutoComplete(props: Props) {
@ -36,6 +37,7 @@ function FilterAutoComplete(props: Props) {
params = {},
headerText = '',
value = '',
icon = null,
} = props;
const [showModal, setShowModal] = useState(true)
const [loading, setLoading] = useState(false)
@ -136,7 +138,7 @@ function FilterAutoComplete(props: Props) {
className={ cn(stl.filterItem) }
id="filter-item" onClick={ (e) => onItemClick(e, item) }
>
{ item.icon && <Icon name={ item.icon } size="16" marginRight="8" /> }
{ icon && <Icon name={ icon } size="16" marginRight="8" /> }
<span className={ stl.label }>{ item.value }</span>
</div>
))

1
frontend/app/components/shared/Filters/FilterModal/FilterModal.css
View file

@ -4,6 +4,7 @@
padding: 20px;
overflow: hidden;
overflow-y: auto;
box-shadow: 0 2px 2px 0 $gray-light;
}
.optionItem {
white-space: nowrap;

1
frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
View file

@ -45,6 +45,7 @@ function FilterModal(props: Props) {
_filter.value = [filter.value];
onFilterClick(_filter);
}
return (
<div className={stl.wrapper} style={{ width: '490px', maxHeight: '400px', overflowY: 'auto'}}>
{ showSearchList && (

14
frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import FilterAutoComplete from '../FilterAutoComplete';
import { FilterType } from 'Types/filter/filterType';
import { FilterKey, FilterCategory, FilterType } from 'Types/filter/filterType';
import FilterValueDropdown from '../FilterValueDropdown';
import FilterDuration from '../FilterDuration';
@ -55,6 +55,15 @@ function FilterValue(props: Props) {
}
}
const getParms = (key) => {
switch (filter.category) {
case FilterCategory.METADATA:
return { type: FilterKey.METADATA, key: key };
default:
return { type: filter.key };
}
}
const renderValueFiled = (value, valueIndex) => {
const showCloseButton = filter.value.length > 1;
const showOrButton = valueIndex === filter.value.length - 1;
@ -115,10 +124,11 @@ function FilterValue(props: Props) {
onRemoveValue={() => onRemoveValue(valueIndex)}
method={'GET'}
endpoint='/events/search'
params={{ type: filter.key }}
params={getParms(filter.key)}
headerText={''}
// placeholder={''}
onSelect={(e, item) => onChange(e, item, valueIndex)}
icon={filter.icon}
/>
)
}