change(ui) - filter series limit to 3, widget drilldown sessions pagination

frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx

@@ -1,5 +1,5 @@
 import { useObserver } from 'mobx-react-lite';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { NoContent, Pagination } from 'UI';
 import { useStore } from 'App/mstore';
 import { getRE } from 'App/utils';
@@ -22,6 +22,10 @@ function MetricsList(props: Props) {
     const list: any = metricsSearch !== '' ? filterList(metrics) : metrics;
     const lenth = list.length;
 
+    useEffect(() => {
+        metricStore.updateKey('sessionsPage', 1);
+    }, [])
+
     return useObserver(() => (
         <NoContent show={lenth === 0} animatedIcon="no-results">
             <div className="mt-3 border rounded bg-white">

frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx

@@ -29,6 +29,7 @@ function WidgetForm(props: Props) {
     const isTable = metric.metricType === 'table';
     const _issueOptions = [{ text: 'All', value: 'all' }].concat(issueOptions);
     const canAddToDashboard = metric.exists() && dashboards.length > 0;
+    const canAddSeries = metric.series.length < 3;
 
     const write = ({ target: { value, name } }) => metricStore.merge({ [ name ]: value });
     const writeOption = (e, { value, name }) => {
@@ -150,16 +151,17 @@ function WidgetForm(props: Props) {
             </div>
 
             <div className="form-group">
-                <label className="font-medium items-center">
+                <div className="font-medium items-center py-2">
                     {`${isTable ? 'Filter by' : 'Chart Series'}`}
                     {!isTable && (
                         <Button
                             className="ml-2"
                             primary plain size="small"
                             onClick={() => metric.addSeries()}
+                            disabled={!canAddSeries}
                         >Add Series</Button>
                     )}
-                </label>
+                </div>
 
                 {metric.series.length > 0 && metric.series.slice(0, isTable ? 1 : metric.series.length).map((series: any, index: number) => (
                     <div className="mb-2">

frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { NoContent, Dropdown, Icon, Loader } from 'UI';
+import { NoContent, Dropdown, Icon, Loader, Pagination } from 'UI';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
 import SessionItem from 'Shared/SessionItem';
@@ -12,6 +12,7 @@ interface Props {
 function WidgetSessions(props: Props) {
     const { className = '' } = props;
     const [data, setData] = useState<any>([]);
+    
     const [loading, setLoading] = useState(false);
     const [seriesOptions, setSeriesOptions] = useState([
         { text: 'All', value: 'all' },
@@ -51,8 +52,8 @@ function WidgetSessions(props: Props) {
 
     const depsString = JSON.stringify(widget.series);
     useEffect(() => {
-        debounceRequest(widget.metricId, { ...filter, series: widget.toJsonDrilldown() });
-    }, [filter.startTimestamp, filter.endTimestamp, filter.filters, depsString]);
+        debounceRequest(widget.metricId, { ...filter, series: widget.toJsonDrilldown(), page: metricStore.sessionsPage, limit: metricStore.sessionsPageSize });
+    }, [filter.startTimestamp, filter.endTimestamp, filter.filters, depsString, metricStore.sessionsPage]);
 
     return useObserver(() => (
         <div className={cn(className)}>
@@ -85,12 +86,22 @@ function WidgetSessions(props: Props) {
                 <Loader loading={loading}>
                     <NoContent
                         title="No recordings found"
-                        show={filteredSessions.length === 0}
+                        show={filteredSessions.sessions.length === 0}
                         animatedIcon="no-results"
                     >
-                        {filteredSessions.map((session: any) => (
+                        {filteredSessions.sessions.map((session: any) => (
                             <SessionItem key={ session.sessionId } session={ session }  />
                         ))}
+
+                        <div className="w-full flex items-center justify-center py-6">
+                            <Pagination
+                                page={metricStore.sessionsPage}
+                                totalPages={filteredSessions.total / metricStore.sessionsPageSize}
+                                onPageChange={(page) => metricStore.updateKey('sessionsPage', page)}
+                                limit={metricStore.sessionsPageSize}
+                                debounceRequest={500}
+                            />
+                        </div>
                     </NoContent>
                 </Loader>
             </div>
@@ -99,14 +110,16 @@ function WidgetSessions(props: Props) {
 }
 
 const getListSessionsBySeries = (data, seriesId) => {
-    const arr: any = []
+    const arr: any = { sessions: [], total: 0 };
     data.forEach(element => {
         if (seriesId === 'all') {
-            const sessionIds = arr.map(i => i.sessionId);
-            arr.push(...element.sessions.filter(i => !sessionIds.includes(i.sessionId)));
+            const sessionIds = arr.sessions.map(i => i.sessionId);
+            arr.sessions.push(...element.sessions.filter(i => !sessionIds.includes(i.sessionId)));
+            arr.total = element.total
         } else {
             if (element.seriesId === seriesId) {
-                arr.push(...element.sessions)
+                arr.sessions.push(...element.sessions)
+                arr.total = element.total
             }
         }
     });

frontend/app/components/ui/Button/Button.js

@@ -23,7 +23,7 @@ export default ({
     className={ classnames(
       className,
       size,
-      { 'disabled' : disabled },
+      { 'btn-disabled' : disabled },
       styles[ plain ? 'plain' : '' ],
       styles[ hover ? 'hover' : '' ],
       styles.button,

frontend/app/mstore/metricStore.ts

@@ -16,6 +16,9 @@ export interface IMetricStore {
     pageSize: number
     metricsSearch: string
     sort: any
+
+    sessionsPage: number
+    sessionsPageSize: number
     
     // State Actions
     init(metric?: IWidget|null): void
@@ -46,6 +49,9 @@ export default class MetricStore implements IMetricStore {
     metricsSearch: string = ""
     sort: any = {}
 
+    sessionsPage: number = 1
+    sessionsPageSize: number = 10
+
     constructor() {
         makeAutoObservable(this, {
             isLoading: observable,