basic version

src/components/DynamicSingleStat.res

@@ -109,6 +109,7 @@ let deltaTimeRangeMapper: array<Js.Json.t> => deltaRange = (arrJson: array<Js.Js
 // till here
 @react.component
 let make = (
+  ~index,
   ~entity: entityType<'colType, 't, 't2>,
   ~modeKey=?,
   ~filterKeys,
@@ -126,8 +127,9 @@ let make = (
   ~statThreshold=?,
   ~wrapperClass=?,
 ) => {
+  open FilterUtils
   let fetchApi = AuthHooks.useApiFetcher()
-  let getAllFilter = UrlUtils.useGetFilterDictFromUrl("")
+  let getAllFilter = useFiltersValue(~index)->parseUrlString
   let isMobileView = MatchMedia.useMobileChecker()
   let (showStats, setShowStats) = React.useState(_ => false)
 

src/components/FilterUtils.res

@@ -67,6 +67,19 @@ let parseUrl = url => {
   ->Js.Dict.fromArray
 }
 
+let parseUrlString = url => {
+  url
+  ->Js.Global.decodeURI
+  ->Js.String2.split("&")
+  ->Belt.Array.keepMap(str => {
+    let arr = str->Js.String2.split("=")
+    let key = arr->Belt.Array.get(0)->Belt.Option.getWithDefault("-")
+    let val = arr->Belt.Array.sliceToEnd(1)->Js.Array2.joinWith("=")
+    key === "" || val === "" ? None : Some((key, val->Js.Json.string))
+  })
+  ->Js.Dict.fromArray
+}
+
 let useUpdateFilterObject = (~index: string) => {
   let filters = useFiltersValue(~index)
   let setFilters = useAddFilters(~index)

src/hooks/AnalyticsHooks.res

@@ -64,12 +64,12 @@ let useGetCalendarTime = () => {
   calendarTime
 }
 
-let useGetFiltersData = () => {
+let useGetFiltersData = (~index) => {
   let (filterData, setFilterData) = React.useState(_ => None)
-  let timeFilters = UrlUtils.useGetFilterDictFromUrl("")
-  let startTimeVal = timeFilters->LogicUtils.getString("startTime", "")
-
-  let endTimeVal = timeFilters->LogicUtils.getString("endTime", "")
+  open FilterUtils
+  let timeFilters = useFiltersValue(~index)->parseUrl
+  let startTimeVal = timeFilters->Js.Dict.get("startTime")->Belt.Option.getWithDefault("")
+  let endTimeVal = timeFilters->Js.Dict.get("endTime")->Belt.Option.getWithDefault("")
   let addLogsAroundFetch = EulerAnalyticsLogUtils.useAddLogsAroundFetch()
 
   let fetchApi = AuthHooks.useApiFetcher()

src/screens/HyperSwitch/Analytics/Analytics.res

@@ -119,7 +119,11 @@ module TableWrapper = {
     ~distributionArray=None,
   ) => {
     let customFilter = Recoil.useRecoilValueFromAtom(AnalyticsAtoms.customFilterAtom)
-    let getAllFilter = UrlUtils.useGetFilterDictFromUrl("")
+    let {index} = React.useContext(FilterContext.filterContext)
+    open FilterUtils
+    let filterValueString = useFiltersValue(~index)
+    let filterValueDict = filterValueString->parseUrlString
+    let filterValueDict = filterValueDict
     let fetchDetails = APIUtils.useUpdateMethod()
     let (_, setDefaultFilter) = Recoil.useRecoilState(AnalyticsHooks.defaultFilter)
     let (showTable, setShowTable) = React.useState(_ => false)
@@ -130,7 +134,7 @@ module TableWrapper = {
     let (tableData, setTableData) = React.useState(_ => []->Js.Array2.map(Js.Nullable.return))
 
     let getTopLevelFilter = React.useMemo1(() => {
-      getAllFilter
+      filterValueDict
       ->Js.Dict.entries
       ->Belt.Array.keepMap(item => {
         let (key, value) = item
@@ -143,7 +147,7 @@ module TableWrapper = {
         }
       })
       ->Js.Dict.fromArray
-    }, [getAllFilter])
+    }, [filterValueDict])
 
     let allColumns = allColumns->Belt.Option.getWithDefault([])
     let allFilterKeys = Js.Array2.concat([startTimeFilterKey, endTimeFilterKey], filterKeys)
@@ -539,17 +543,8 @@ let make = (
   | None => None
   }
 
-  let filterValueDict =
-    filterValueString
-    ->parseUrl
-    ->Js.Dict.entries
-    ->Js.Array2.map(item => {
-      let (key, value) = item
-      (key, value->Js.Json.string)
-    })
-    ->Js.Dict.fromArray
-
-  let getFilterData = AnalyticsHooks.useGetFiltersData()
+  let filterValueDict = filterValueString->parseUrlString
+  let getFilterData = AnalyticsHooks.useGetFiltersData(~index)
 
   let (activeTav, setActiveTab) = React.useState(_ =>
     filterValueDict->getStrArrayFromDict(
@@ -729,6 +724,7 @@ let make = (
         <div>
           <div className="mt-5">
             <DynamicSingleStat
+              index
               entity=singleStatEntity
               startTimeFilterKey
               endTimeFilterKey

src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res

@@ -92,7 +92,7 @@ module SystemMetricsInsights = {
   open HSAnalyticsUtils
   open AnalyticsTypes
   @react.component
-  let make = () => {
+  let make = (~index) => {
     let (_totalVolume, setTotalVolume) = React.useState(_ => 0)
 
     let getStatData = (
@@ -183,6 +183,7 @@ module SystemMetricsInsights = {
     let dateDict = HSwitchRemoteFilter.getDateFilteredObject()
 
     <DynamicSingleStat
+      index
       entity={singleStatEntity}
       startTimeFilterKey
       endTimeFilterKey
@@ -255,9 +256,9 @@ let make = () => {
     <p className=headingStyle> {"Overview"->React.string} </p>
     <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-4">
       <ConnectorOverview />
-      <PaymentOverview />
+      <PaymentOverview index="PaymentOverview" />
       <UIUtils.RenderIf condition={systemMetrics}>
-        <SystemMetricsInsights />
+        <SystemMetricsInsights index="SystemMetricsInsights" />
       </UIUtils.RenderIf>
     </div>
     <OverviewInfo />

src/screens/HyperSwitch/Analytics/HomePageOverview/PaymentsOverview/PaymentOverview.res

@@ -1,5 +1,5 @@
 @react.component
-let make = () => {
+let make = (~index) => {
   open HSAnalyticsUtils
   let (_totalVolume, setTotalVolume) = React.useState(_ => 0)
 
@@ -15,6 +15,7 @@ let make = () => {
   let dateDict = HSwitchRemoteFilter.getDateFilteredObject()
 
   <DynamicSingleStat
+    index
     entity={singleStatEntity}
     startTimeFilterKey
     endTimeFilterKey

src/screens/HyperSwitch/Analytics/SystemMetrics/SystemMetricsAnalytics.res

@@ -80,7 +80,7 @@ module ConnectorLatency = {
   open HSAnalyticsUtils
   open AnalyticsTypes
   @react.component
-  let make = () => {
+  let make = (~index) => {
     let (_totalVolume, setTotalVolume) = React.useState(_ => 0)
 
     let getStatData = (
@@ -171,6 +171,7 @@ module ConnectorLatency = {
     let dateDict = HSwitchRemoteFilter.getDateFilteredObject()
 
     <DynamicSingleStat
+      index
       entity={singleStatEntity}
       startTimeFilterKey
       endTimeFilterKey
@@ -329,6 +330,7 @@ module SystemMetricsAnalytics = {
   open LogicUtils
   @react.component
   let make = (
+    ~index,
     ~pageTitle="",
     ~pageSubTitle="",
     ~startTimeFilterKey: string,
@@ -342,7 +344,7 @@ module SystemMetricsAnalytics = {
   ) => {
     let url = RescriptReactRouter.useUrl()
 
-    let getFilterData = AnalyticsHooks.useGetFiltersData()
+    let getFilterData = AnalyticsHooks.useGetFiltersData(~index)
     let getModuleFilters = UrlUtils.useGetFilterDictFromUrl("")
     let startTimeVal = getModuleFilters->getString(startTimeFilterKey, "")
     let endTimeVal = getModuleFilters->getString(endTimeFilterKey, "")
@@ -427,6 +429,7 @@ module SystemMetricsAnalytics = {
           </div>
           <APITableInfo />
           <DynamicSingleStat
+            index
             entity=singleStatEntity
             startTimeFilterKey
             endTimeFilterKey
@@ -476,12 +479,13 @@ let make = () => {
   })
 
   let tabKeys = getStringListFromArrayDict(dimensions)
-
+  let index = "SystemMetrics"
   let title = "System Metrics"
   let subTitle = "Gain Insights, monitor performance and make Informed Decisions with System Metrics."
 
   <PageLoaderWrapper screenState customUI={<NoData title subTitle />}>
     <SystemMetricsAnalytics
+      index
       pageTitle=title
       pageSubTitle=subTitle
       filterUri={`${HSwitchGlobalVars.hyperSwitchApiPrefix}/analytics/v1/filters/${domain}`}

src/screens/analyticsScreens/AnalyticsCommonComponents.res

@@ -63,7 +63,7 @@ module FiltersComponent = {
   ) => {
     open AnalyticsUtils
     let iframe_padding = parent !== window ? "px-5" : ""
-    let getFilterData = AnalyticsHooks.useGetFiltersData()
+    let getFilterData = AnalyticsHooks.useGetFiltersData(~index)
     let {updateExistingKeys, filterValue} = React.useContext(FilterContext.filterContext)
 
     let {