Analytics for litmus portal. (#2065)

Adds Analytics section and fixes for the same to litmus portal.

Signed-off-by: ishangupta-ds <[email protected]>

litmus-portal/frontend/src/components/DateRangeSelector/index.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable react/no-array-index-key */
+import { Popover } from '@material-ui/core';
+import React, { useState } from 'react';
+import { subDays } from 'date-fns';
+import 'react-date-range/dist/styles.css'; // main css file
+import 'react-date-range/dist/theme/default.css'; // theme css file
+import { DateRangePicker } from 'react-date-range';
+import { useTheme } from '@material-ui/core/styles';
+import useStyles from './styles';
+
+interface RangeCallBackType {
+  (selectedStartDate: string, selectedEndDate: string): void;
+}
+
+interface DateRangeSelectorProps {
+  anchorEl: HTMLElement;
+  isOpen: boolean;
+  onClose: () => void;
+  callbackToSetRange: RangeCallBackType;
+}
+
+const DateRangeSelector: React.FC<DateRangeSelectorProps> = ({
+  anchorEl,
+  isOpen,
+  onClose,
+  callbackToSetRange,
+}) => {
+  const classes = useStyles();
+  const { palette } = useTheme();
+  const id = isOpen ? 'profile-popover' : undefined;
+  const [state, setState] = useState([
+    {
+      startDate: subDays(new Date(), 7),
+      endDate: new Date(),
+      key: 'selection',
+    },
+  ]);
+
+  return (
+    <div>
+      <Popover
+        id={id}
+        open={isOpen}
+        anchorEl={anchorEl}
+        onClose={onClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        classes={{
+          paper: classes.popoverDateRangeSelector,
+        }}
+      >
+        <div className={classes.dateRangeSelectorContainer}>
+          <DateRangePicker
+            onChange={(item) => {
+              setState([(item as any).selection]);
+              callbackToSetRange(
+                `${(item as any).selection.startDate}`,
+                `${(item as any).selection.endDate}`
+              );
+            }}
+            showSelectionPreview
+            moveRangeOnFirstSelection={false}
+            months={1}
+            ranges={state}
+            direction="vertical"
+            scroll={{ enabled: true }}
+            editableDateInputs
+            rangeColors={[palette.secondary.dark]}
+            showMonthAndYearPickers
+          />
+        </div>
+      </Popover>
+    </div>
+  );
+};
+
+export default DateRangeSelector;

litmus-portal/frontend/src/components/DateRangeSelector/styles.ts

@@ -0,0 +1,20 @@
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles((theme) => ({
+  popoverDateRangeSelector: {
+    background: theme.palette.secondary.contrastText,
+    borderRadius: theme.shape.borderRadius,
+    width: '100%',
+    maxWidth: '35rem',
+  },
+
+  dateRangeSelectorContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    overflowY: 'auto',
+    maxHeight: '35rem',
+  },
+}));
+
+export default useStyles;

litmus-portal/frontend/src/components/Header/NotificationDropdown.tsx

@@ -38,7 +38,7 @@ const NotificationsDropdown: React.FC<NotificationDropdownProps> = ({
   const { t } = useTranslation();
 
   function handleClick() {
-    // setIsOpen(!isOpen); uncomment to activate notifications.
+    setIsOpen(!isOpen);
   }
 
   function handleClickAway() {
@@ -63,8 +63,7 @@ const NotificationsDropdown: React.FC<NotificationDropdownProps> = ({
         color="inherit"
       >
         <Badge
-          // badgeContent={count === '0' ? messages.length : count}
-          badgeContent={0}
+          badgeContent={count === '0' ? messages.length : count}
           color="secondary"
         >
           <NotificationsOutlinedIcon />

litmus-portal/frontend/src/components/Header/index.tsx

@@ -2,7 +2,7 @@ import { useQuery } from '@apollo/client';
 import { Box, Divider } from '@material-ui/core';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { GET_USER } from '../../graphql';
@@ -12,13 +12,13 @@ import {
   Member,
   Project,
 } from '../../models/graphql/user';
-import { Message, NotificationIds } from '../../models/header';
+// import { Message, NotificationIds } from '../../models/header';
 import useActions from '../../redux/actions';
 import * as UserActions from '../../redux/actions/user';
 import configureStore from '../../redux/configureStore';
 import { RootState } from '../../redux/reducers';
 import CustomBreadCrumbs from '../BreadCrumbs';
-import NotificationsDropdown from './NotificationDropdown';
+// import NotificationsDropdown from './NotificationDropdown';
 import ProfileDropdownSection from './ProfileDropdownSection';
 import useStyles from './styles';
 
@@ -78,6 +78,7 @@ const Header: React.FC = () => {
     });
   };
 
+  /*
   // Fetch and Set Notifications from backend.
 
   const [messages, setMessages] = useState<Message[]>([]);
@@ -131,7 +132,7 @@ const Header: React.FC = () => {
     messages.reverse();
     setMessages(messages);
   }, [setMessages]);
-
+  /*
   const deleteNotification = (notificationIDs: NotificationIds) => {
     for (let i = 0; i < messages.length; i += 1) {
       if (messages[i].sequenceID === notificationIDs.sequenceID) {
@@ -140,16 +141,18 @@ const Header: React.FC = () => {
         }
       }
     }
+    
     // send POST request with #notificationIDs.id to update db with notification
     // id marked as disissed from active or persist it in redux or cookie.
     setMessages(messages);
-    setCountOfMessages(messages.length);
+    //setCountOfMessages(messages.length);
   };
 
   useEffect(() => {
     fetchRandomMessages();
   }, [fetchRandomMessages]);
 
+  */
   useEffect(() => {
     setSelectedProjectDetails({
       selectedProjectID: userData.selectedProjectID,
@@ -168,11 +171,13 @@ const Header: React.FC = () => {
                 <CustomBreadCrumbs location={useLocation().pathname} />
               </Box>
               <Box p={1} className={classes.headerFlexPadded}>
-                <NotificationsDropdown
+                {/* uncomment to activate notifications.
+                  <NotificationsDropdown
                   count={`${countOfMessages}`}
                   messages={messages}
                   CallbackToHeaderOnDeleteNotification={deleteNotification}
                 />
+               */}
               </Box>
               <Box p={1} flexGrow={1} className={classes.headerFlexProfile}>
                 <ProfileDropdownSection

litmus-portal/frontend/src/components/InfoTooltip/index.tsx

@@ -49,7 +49,7 @@ const InfoTooltip: React.FC<InfoTooltipProps> = ({ value }) => {
               onClick={handleTooltipOpen}
             >
               <img
-                src="icons/info.svg"
+                src="/icons/info.svg"
                 className={classes.infoImg}
                 alt="info tooltip"
               />

litmus-portal/frontend/src/models/graphql/scheduleData.ts

@@ -17,6 +17,7 @@ export interface ScheduleWorkflow {
   workflow_name: string;
   cluster_name: string;
   cluster_type: string;
+  regularity?: string;
 }
 
 export interface Schedules {