From 3477764962df547442227f4b1d0218a2a22b9131 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 17 Feb 2022 12:12:56 +0100 Subject: [PATCH 1/3] fix(ui) - metadata filter replace issue --- .../FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx | 8 ++++---- .../components/shared/Filters/FilterList/FilterList.tsx | 4 ---- .../components/shared/Filters/FilterValue/FilterValue.tsx | 7 ++++--- frontend/app/duck/liveSearch.js | 2 -- 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx index 7585a009d..3226bac38 100644 --- a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx @@ -1,8 +1,8 @@ import React, { useState, useEffect } from 'react'; import { Icon, Loader } from 'UI'; -import { debounce } from 'App/utils'; +// import { debounce } from 'App/utils'; import stl from './FilterAutoCompleteLocal.css'; -import cn from 'classnames'; +// import cn from 'classnames'; interface Props { showOrButton?: boolean; @@ -27,11 +27,11 @@ function FilterAutoCompleteLocal(props: Props) { } = props; const [showModal, setShowModal] = useState(true) const [query, setQuery] = useState(value); - const debounceOnSelect = React.useCallback(debounce(props.onSelect, 500), []); + // const debounceOnSelect = debounce(props.onSelect, 500); const onInputChange = ({ target: { value } }) => { setQuery(value); - debounceOnSelect(null, { value }); + props.onSelect(null, { value }); } useEffect(() => { diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx index 4355ac7c9..0e62d20e1 100644 --- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx +++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx @@ -18,10 +18,6 @@ function FilterList(props: Props) { let rowIndex = 0; const onRemoveFilter = (filterIndex) => { - const newFilters = filters.filter((_filter, i) => { - return i !== filterIndex; - }); - props.onRemoveFilter(filterIndex); } diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx index 80a1f705a..10f10a428 100644 --- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx +++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx @@ -4,6 +4,7 @@ import FilterAutoCompleteLocal from '../FilterAutoCompleteLocal'; import { FilterKey, FilterCategory, FilterType } from 'Types/filter/filterType'; import FilterValueDropdown from '../FilterValueDropdown'; import FilterDuration from '../FilterDuration'; +import { debounce } from 'App/utils'; interface Props { filter: any; @@ -35,9 +36,9 @@ function FilterValue(props: Props) { props.onUpdate({ ...filter, value: newValues }) } + const debounceOnSelect = React.useCallback(debounce(onChange, 500), [onChange]); + const onDurationChange = (newValues) => { - console.log('durationValues', durationValues) - // setDurationValues({ ...durationValues }); setDurationValues({ ...durationValues, ...newValues }); } @@ -72,7 +73,7 @@ function FilterValue(props: Props) { showOrButton={showOrButton} onAddValue={onAddValue} onRemoveValue={() => onRemoveValue(valueIndex)} - onSelect={(e, item) => onChange(e, item, valueIndex)} + onSelect={(e, item) => debounceOnSelect(e, item, valueIndex)} icon={filter.icon} /> ) diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js index 38f90d35b..6c1b49e31 100644 --- a/frontend/app/duck/liveSearch.js +++ b/frontend/app/duck/liveSearch.js @@ -3,11 +3,9 @@ import { fetchType, editType } from './funcTools/crud'; import { createRequestReducer } from './funcTools/request'; import { mergeReducers } from './funcTools/tools'; import Filter from 'Types/filter'; -import SavedFilter from 'Types/filter/savedFilter'; import { fetchList as fetchSessionList } from './sessions'; import { liveFiltersMap } from 'Types/filter/newFilter'; import { filterMap, checkFilterValue, hasFilterApplied } from './search'; -import { FilterKey } from '../types/filter/filterType'; const name = "liveSearch"; const idKey = "searchId"; From a5c635d91642a14ee0e9040dcd06913bf3691fc7 Mon Sep 17 00:00:00 2001 From: rjshrjndrn Date: Thu, 17 Feb 2022 11:58:26 +0100 Subject: [PATCH 2/3] chore(helm): commit We need to check what is the object store endpoint. There can be 4 options 1. Using minio inside kube clster 2. Using minio managed external cluster, like aws minio offering 3. Using GCP or other object stores compatible with s3 apis 4. Using AWS itself. AWS uses bucketname.endpoint/object while others use endpoint/bucketname/object Signed-off-by: rjshrjndrn --- .../charts/assets/templates/deployment.yaml | 18 +++++++++++++++--- .../charts/http/templates/deployment.yaml | 16 +++++++++++++++- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/scripts/helmcharts/openreplay/charts/assets/templates/deployment.yaml b/scripts/helmcharts/openreplay/charts/assets/templates/deployment.yaml index 1c8216468..d34883b5a 100644 --- a/scripts/helmcharts/openreplay/charts/assets/templates/deployment.yaml +++ b/scripts/helmcharts/openreplay/charts/assets/templates/deployment.yaml @@ -56,13 +56,25 @@ spec: value: '{{ .Values.global.kafka.kafkaHost }}:{{ .Values.global.kafka.kafkaPort }}' - name: KAFKA_USE_SSL value: '{{ .Values.global.kafka.kafkaUseSsl }}' - # Ref: https://stackoverflow.com/questions/53634583/go-template-split-string-by-delimiter - # We need https://bucketname.s3endpoint + # We need to check what is the object store endpoint. + # There can be 4 options + # 1. Using minio inside kube clster + # 2. Using minio managed external cluster, like aws minio offering + # 3. Using GCP or other object stores compatible with s3 apis + # 4. Using AWS itself. + # AWS uses bucketname.endpoint/object while others use endpoint/bucketname/object - name: ASSETS_ORIGIN {{- if eq .Values.global.s3.endpoint "http://minio.db.svc.cluster.local:9000" }} + # Local minio Installation value: 'https://{{ .Values.global.domainName }}/{{.Values.global.s3.assetsBucket}}' - {{- else }} + {{- else if contains "amazonaws.com" .Values.global.s3.endpoint }} + # AWS S3 + # Ref: https://stackoverflow.com/questions/53634583/go-template-split-string-by-delimiter + # We need https://bucketname.s3endpoint value: {{ (split "://" .Values.global.s3.endpoint)._0 }}://{{.Values.global.s3.assetsBucket}}.{{ (split "://" .Values.global.s3.endpoint)._1 }} + {{- else }} + # S3 compatible storage + value: '{{ .Values.global.s3.endpoint }}/{{.Values.global.s3.assetsBucket}}' {{- end }} {{- range $key, $val := .Values.env }} - name: {{ $key }} diff --git a/scripts/helmcharts/openreplay/charts/http/templates/deployment.yaml b/scripts/helmcharts/openreplay/charts/http/templates/deployment.yaml index 875cc3630..0c4399518 100644 --- a/scripts/helmcharts/openreplay/charts/http/templates/deployment.yaml +++ b/scripts/helmcharts/openreplay/charts/http/templates/deployment.yaml @@ -54,11 +54,25 @@ spec: value: '{{ .Values.global.kafka.kafkaUseSsl }}' - name: POSTGRES_STRING value: 'postgres://{{ .Values.global.postgresql.postgresqlUser }}:{{ .Values.global.postgresql.postgresqlPassword }}@{{ .Values.global.postgresql.postgresqlHost }}:{{ .Values.global.postgresql.postgresqlPort }}/{{ .Values.global.postgresql.postgresqlDatabase }}' + # We need to check what is the object store endpoint. + # There can be 4 options + # 1. Using minio inside kube clster + # 2. Using minio managed external cluster, like aws minio offering + # 3. Using GCP or other object stores compatible with s3 apis + # 4. Using AWS itself. + # AWS uses bucketname.endpoint/object while others use endpoint/bucketname/object - name: ASSETS_ORIGIN {{- if eq .Values.global.s3.endpoint "http://minio.db.svc.cluster.local:9000" }} + # Local minio Installation value: 'https://{{ .Values.global.domainName }}/{{.Values.global.s3.assetsBucket}}' - {{- else }} + {{- else if contains "amazonaws.com" .Values.global.s3.endpoint }} + # AWS S3 + # Ref: https://stackoverflow.com/questions/53634583/go-template-split-string-by-delimiter + # We need https://bucketname.s3endpoint value: {{ (split "://" .Values.global.s3.endpoint)._0 }}://{{.Values.global.s3.assetsBucket}}.{{ (split "://" .Values.global.s3.endpoint)._1 }} + {{- else }} + # S3 compatible storage + value: '{{ .Values.global.s3.endpoint }}/{{.Values.global.s3.assetsBucket}}' {{- end }} {{- range $key, $val := .Values.env }} - name: {{ $key }} From e0da7357ce0c5d65a5aa23c97f65d2b96eab3309 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 17 Feb 2022 12:28:12 +0100 Subject: [PATCH 3/3] fix(ui) - do not call api on filter change --- frontend/app/duck/liveSearch.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/app/duck/liveSearch.js b/frontend/app/duck/liveSearch.js index 6c1b49e31..bebdc9a35 100644 --- a/frontend/app/duck/liveSearch.js +++ b/frontend/app/duck/liveSearch.js @@ -49,10 +49,10 @@ const reduceThenFetchResource = actionCreator => (...args) => (dispatch, getStat return dispatch(fetchSessionList(filter)); }; -export const edit = reduceThenFetchResource((instance) => ({ +export const edit = (instance) => ({ type: EDIT, instance, -})); +}); export const applyFilter = reduceThenFetchResource((filter, fromUrl=false) => ({ type: APPLY,