Merge pull request #1643 from memphisdev/RND-411-async-tasks-refactor…

…-to-background-tasks-with-new-design Async tasks refactor to background tasks with new design
superstreamlabs · Jan 21, 2024 · 28b04be · 28b04be
2 parents 8b3d30c + 740611e
commit 28b04be
Show file tree

Hide file tree

Showing 21 changed files with 694 additions and 529 deletions.
diff --git a/ui_src/src/assets/images/backgroundTasks.svg b/ui_src/src/assets/images/backgroundTasks.svg
diff --git a/ui_src/src/assets/images/backgroundTasksUI.svg b/ui_src/src/assets/images/backgroundTasksUI.svg
diff --git a/ui_src/src/assets/images/bgTasksIcon.svg b/ui_src/src/assets/images/bgTasksIcon.svg
diff --git a/ui_src/src/components/asyncTasks/index.js b/ui_src/src/components/asyncTasks/index.js
@@ -14,21 +14,21 @@ import './style.scss';
 
 import React, { useContext, useEffect, useState } from 'react';
 import { StringCodec, JSONCodec } from 'nats.ws';
-import { Divider, Popover } from 'antd';
+import { Divider, Popover, Badge } from 'antd';
 import { parsingDate } from 'services/valueConvertor';
 import { ApiEndpoints } from 'const/apiEndpoints';
-import { ReactComponent as AsyncIcon } from 'assets/images/asyncIcon.svg';
+import { ReactComponent as BgTasksIcon } from 'assets/images/bgTasksIcon.svg';
 import { ReactComponent as TaskIcon } from 'assets/images/task.svg';
 import { httpRequest } from 'services/http';
-import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg';
 import { Context } from 'hooks/store';
 import OverflowTip from 'components/tooltip/overflowtip';
 
-const AsyncTasks = ({ height, overView }) => {
+const AsyncTasks = ({ overView, children }) => {
     const [state, dispatch] = useContext(Context);
     const [isOpen, setIsOpen] = useState(false);
     const [showMore, setShowMore] = useState(false);
     const [asyncTasks, setAsyncTasks] = useState([]);
+    const [runningTasks, setRunningTasks] = useState([]);
 
     useEffect(() => {
         getAsyncTasks();
@@ -90,6 +90,12 @@ const AsyncTasks = ({ height, overView }) => {
         };
     }, [state.socket]);
 
+    useEffect(() => {
+        const running = asyncTasks?.filter((task) => task?.status === 'running');
+        setRunningTasks(running);
+        dispatch({ type: 'SET_BACKGROUND_TASKS_COUNT', payload: running?.length || 0 });
+    }, [asyncTasks]);
+
     const getAsyncTasks = async () => {
         try {
             const data = await httpRequest('GET', ApiEndpoints.GET_ASYNC_TASKS);
@@ -109,6 +115,11 @@ const AsyncTasks = ({ height, overView }) => {
                         ((!showMore && index < 3) || showMore) && (
                             <div>
                                 <div className="task-item" key={index}>
+                                    {task?.status === 'running' && (
+                                        <span className="task-status">
+                                            <Badge status="success" />
+                                        </span>
+                                    )}
                                     <div>
                                         <TaskIcon alt="taskIcon" />
                                     </div>
@@ -135,39 +146,37 @@ const AsyncTasks = ({ height, overView }) => {
     };
     const getContent = () => {
         return (
-            <div>
-                <div className="async-title">
-                    <span>
-                        <p>Async tasks</p>
-                        <label className="async-number">{asyncTasks.length}</label>
-                    </span>
-                    <Divider />
-                </div>
-                <div className="tasks-container">{getItems()}</div>
-                {asyncTasks.length > 3 && (
-                    <div className="show-more-less-tasks" onClick={() => setShowMore(!showMore)}>
-                        <label> {!showMore ? 'Show more' : 'Show less'}</label>
+            asyncTasks?.length > 0 && (
+                <div>
+                    <div className="async-title">
+                        <span>
+                            <p>Background tasks</p>
+                        </span>
+                        <Divider />
                     </div>
-                )}
-            </div>
+                    <div className="tasks-container">{getItems()}</div>
+                    {asyncTasks.length > 3 && (
+                        <div className="show-more-less-tasks" onClick={() => setShowMore(!showMore)}>
+                            <label> {!showMore ? 'Show more' : 'Show less'}</label>
+                        </div>
+                    )}
+                </div>
+            )
         );
     };
 
     return (
-        asyncTasks?.length > 0 && (
-            <Popover placement="bottomLeft" content={getContent()} trigger="click" onOpenChange={handleOpenChange} open={isOpen}>
-                <div className="async-btn-container">
-                    <div className="async-btn">
-                        <AsyncIcon alt="AsyncIcon" />
-                        <div>
-                            <label className="async-title">Async tasks </label>
-                            <label className="async-number">{asyncTasks.length}</label>
-                        </div>
-                        <CollapseArrowIcon className={isOpen ? 'collapse-arrow open' : 'collapse-arrow'} alt="CollapseArrowIcon" />
+        <Popover placement={overView ? 'bottomRight' : 'bottomLeft'} content={getContent()} trigger="click" onOpenChange={handleOpenChange} open={isOpen}>
+            {overView ? (
+                <span className={asyncTasks?.length > 0 ? 'overview-tasks' : undefined}>{children}</span>
+            ) : (
+                runningTasks?.length > 0 && (
+                    <div className="async-btn-container">
+                        <BgTasksIcon alt="AsyncIcon" />
                     </div>
-                </div>
-            </Popover>
-        )
+                )
+            )}
+        </Popover>
     );
 };
 export default AsyncTasks;
diff --git a/ui_src/src/components/asyncTasks/style.scss b/ui_src/src/components/asyncTasks/style.scss
@@ -20,34 +20,26 @@
     padding: 2px 5px;
     border-radius: 50%;
 }
-
 .async-btn-container {
-    border-radius: 50px;
-    color: rgb(29, 29, 29);
-    background-color: rgb(255, 255, 255);
-    width: 200px;
-    height: 34px;
-    border-color: rgb(255, 255, 255);
-    font-size: 14px;
-    font-weight: bold;
-    font-family: Inter;
-    opacity: 1;
-    box-shadow: rgba(0, 0, 0, 0.21) 0px 1px 2px 0px;
-    line-height: 14px;
+    border-radius: 46px 0px 0px 46px;
+    background: linear-gradient(254deg, #ffc633 -44.11%, #61dfc6 17.78%, #6557ff 83.93%);
+    box-shadow: 0px 1.438px 2.875px 0px rgba(16, 24, 40, 0.05), 0px 2.875px 17.25px 0px rgba(0, 0, 0, 0.1);
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    right: 0;
+    top: 120px;
+    z-index: 9999 !important;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 10px 5px 10px 15px;
+    cursor: pointer;
+}
+.overview-tasks {
     cursor: pointer;
-    .async-btn {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-
-        img {
-            padding: 0px 10px;
-        }
-    }
 }
+
 .async-title {
     color: #737373;
     margin-right: 5px;
@@ -79,6 +71,12 @@
     align-items: center;
     gap: 10px;
     padding: 20px;
+    position: relative;
+    .task-status {
+        position: absolute;
+        left: 8px;
+        top: 18px;
+    }
     p {
         margin-bottom: 0;
     }

diff --git a/ui_src/src/components/datePicker/style.scss b/ui_src/src/components/datePicker/style.scss
@@ -38,7 +38,6 @@
     z-index: 9999;
 }
 
-
-.ant-picker-cell-disabled::before  {
+.ant-picker-cell-disabled::before {
     background-color: white !important;
-}
+}
diff --git a/ui_src/src/components/loader/style.scss b/ui_src/src/components/loader/style.scss
@@ -1,7 +1,6 @@
-
-.loader-container{
+.loader-container {
     .gif-wrapper {
-       background-color: var(--white);
+        background-color: var(--white);
         position: fixed;
         z-index: 5;
         opacity: 0.5;
@@ -10,13 +9,13 @@
     }
     .memphis-gif {
         position: relative;
-       z-index: 999;
-       position: fixed;
-       top: 40%;
-       -ms-transform: translateY(-50%);
-       transform: translateY(-50%);
-       left: 50%;
-       -ms-transform: translateX(-50%);
-       transform: translateX(-50%);
+        z-index: 999;
+        position: fixed;
+        top: 40%;
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+        left: 50%;
+        -ms-transform: translateX(-50%);
+        transform: translateX(-50%);
     }
-}
+}
diff --git a/ui_src/src/components/radioButton/style.scss b/ui_src/src/components/radioButton/style.scss
@@ -1,8 +1,8 @@
 .radio-group {
     display: flex;
-    .radio-wrapper{
+    .radio-wrapper {
         position: relative;
-        .cloud-only-tooltip{
+        .cloud-only-tooltip {
             z-index: 3;
             right: 10px;
             top: -8px;
@@ -45,7 +45,7 @@
             font-size: 14px;
             color: #777777;
         }
-        .ant-radio-wrapper{
+        .ant-radio-wrapper {
             width: 100%;
             height: 100%;
             padding: 10px;

diff --git a/ui_src/src/components/searchInput/style.scss b/ui_src/src/components/searchInput/style.scss
@@ -1,6 +1,6 @@
 .search-input-container {
     position: relative;
-    z-index: 2;
+    // z-index: 2;
     align-self: stretch;
 }
 

diff --git a/ui_src/src/components/sideBar/index.js b/ui_src/src/components/sideBar/index.js
@@ -70,6 +70,7 @@ import Support from './support';
 import LearnMore from 'components/learnMore';
 import GetStarted from 'components/getStartedModal';
 import Modal from 'components/modal';
+import AsyncTasks from 'components/asyncTasks';
 import CreateStationForm from 'components/createStationForm';
 import { ReactComponent as StationIcon } from 'assets/images/stationIcon.svg';
 import CreateUserDetails from 'domain/users/createUserDetails';
@@ -463,6 +464,7 @@ function SideBar() {
 
     return (
         <div className={'sidebar-container ' + (expandSidebar ? 'expand' : 'collapse')}>
+            {state.route !== 'overview' && <AsyncTasks />}
             <div className="upper-icons">
                 <div
                     className={'upper-icons-toggle ' + (expandSidebar ? 'open' : 'close')}