From 33c970fa1d05d3cee0e6f24806b7cb9c22a13c75 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sun, 6 Feb 2022 21:22:27 +0100
Subject: [PATCH] feat(ui) - custom metric widgets session list by series

---
 .../CustomMetricWidget/CustomMetricWidget.tsx |  2 +-
 .../SessionListModal/SessionListModal.tsx     | 43 ++++++++++++++++---
 frontend/app/duck/customMetrics.js            |  4 +-
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
index 261d3fd2c..2e2e8c05b 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@@ -140,7 +140,7 @@ function CustomMetricWidget(props: Props) {
                   allowDecimals={false}
                   label={{  
                     ...Styles.axisLabelLeft,
-                    value: "Number of Errors"
+                    value: "Number of Sessions"
                   }}
                 />
                 <Legend />
diff --git a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
index bcf14c809..4ff591856 100644
--- a/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
+++ b/frontend/app/components/shared/CustomMetrics/SessionListModal/SessionListModal.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { SlideModal, NoContent } from 'UI';
+import React, { useEffect, useState } from 'react';
+import { SlideModal, NoContent, Dropdown } from 'UI';
 import SessionItem from 'Shared/SessionItem';
 import stl from './SessionListModal.css';
 import { connect } from 'react-redux';
@@ -14,6 +14,10 @@ interface Props {
 }
 function SessionListModal(props: Props) {
     const { activeWidget, loading, list } = props;
+    const [seriesOptions, setSeriesOptions] = useState([
+        { text: 'All', value: 'all' },
+    ]);
+    const [activeSeries, setActiveSeries] = useState('all');
     useEffect(() => {
         if (!activeWidget || !activeWidget.widget) return;
         props.fetchSessionList({ 
@@ -23,25 +27,50 @@ function SessionListModal(props: Props) {
         });
     }, [activeWidget]);
 
-    console.log('SessionListModal', activeWidget);
+    useEffect(() => {
+        if (!list) return;
+        const seriesOptions = list.map(item => ({
+            text: item.seriesName,
+            value: item.seriesId,
+        }));
+        setSeriesOptions([
+            { text: 'All', value: 'all' },
+            ...seriesOptions,
+        ]);
+    }, [list]);
+
+    const writeOption = (e, { name, value }) => setActiveSeries(value);
+
+    const filteredSessions = activeSeries === 'all' ? list.reduce((a, b) => a.concat(b.sessions), []) : list.filter(item => item.seriesId === activeSeries).reduce((a, b) => a.concat(b.sessions), []);
     return (
         <SlideModal
             title={ activeWidget && (
                 <div className="flex items-center">
-                    <span className="mr-3">{ 'Custom Metric: ' + activeWidget.widget.name } </span>
+                    <div className="mr-auto">{ 'Custom Metric: ' + activeWidget.widget.name } </div>
+                    <div className="text-base">
+                        <Dropdown
+                            className="w-4/6"
+                            placeholder="change"
+                            selection
+                            options={ seriesOptions }
+                            name="change"
+                            value={ activeSeries }
+                            onChange={ writeOption }
+                            id="change-dropdown"
+                        />
+                    </div>
                 </div>
             )}
             isDisplayed={ !!activeWidget }
             onClose={ () => props.setActiveWidget(null)}
-            // size="medium"
             content={ activeWidget && (
                 <div className="">
                     <NoContent 
-                        show={ !loading && (list.length === 0 || list.size === 0 )}
+                        show={ !loading && (filteredSessions.length === 0 || filteredSessions.size === 0 )}
                         title="No recordings found."
                     >
                         <div className={ stl.wrapper }>
-                            { list && list.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
+                            { filteredSessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
                         </div>
                     </NoContent> 
                 </div>
diff --git a/frontend/app/duck/customMetrics.js b/frontend/app/duck/customMetrics.js
index 52815bd83..26aed2f07 100644
--- a/frontend/app/duck/customMetrics.js
+++ b/frontend/app/duck/customMetrics.js
@@ -73,9 +73,9 @@ function reducer(state = initialState, action = {}) {
 			const { data } = action;
 			return state.set("list", List(data.map(CustomMetric)));
     case success(FETCH_SESSION_LIST):
-      return state.set("sessionList", List(action.data[0].sessions).map(Session));
+      return state.set("sessionList", List(action.data.map(item => ({ ...item, sessions: item.sessions.map(Session) }))));
     case SET_ACTIVE_WIDGET:
-      return state.set("activeWidget", action.widget);
+      return state.set("activeWidget", action.widget).set('sessionList', List());
 	}
 	return state;
 }