From db6d0f2fe1391ab6f2ab32e349766b341d385ecf Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Mon, 20 May 2024 09:53:02 +0330 Subject: [PATCH 1/3] adding route for playground --- Client/src/App.jsx | 2 + .../announcementUpdateSubscription.css | 4 + .../announcementsDualButton.css | 4 +- .../announcementsDualButtonWithIcon.css | 2 + .../announcementsMessageBar.css | 2 + Client/src/Pages/PlayGround/PlayGround.jsx | 73 +++++++++++++++++-- 6 files changed, 80 insertions(+), 7 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index b47c3082e..94ef75111 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -5,6 +5,7 @@ import Login from "./Pages/Login"; import Register from "./Pages/Register"; import HomeLayout from "./Layouts/HomeLayout"; import Demo from "./Pages/Demo/Demo"; +import PlayGround from "./Pages/PlayGround/PlayGround"; function App() { return ( @@ -15,6 +16,7 @@ function App() { } /> } /> } /> + } /> ); diff --git a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css index 7974ee799..390a130d4 100644 --- a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css +++ b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css @@ -15,6 +15,10 @@ --spacing-2: 20px; } +.update-subscription { + margin: var(--spacing-2); +} + .update-subscription, .update-subscription-dialog { max-width: 770px; diff --git a/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css index 837fd0bb5..92fbe352a 100644 --- a/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css +++ b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css @@ -2,21 +2,21 @@ --announcement-border-color: #d0d5dd; --announcement-border-radius: 4px; --announcement-border-radius-2: 8px; - /* --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; */ --announcement-font-size-0: 13px; --announcement-font-color-0: #344054; --announcement-font-color-1: #475467; --announcement-font-color-2: #1570ef; --announcement-padding: 16px; --info-icon-frame-color: #eaecf0; + --margin: 20px; } .announcement-without-tile { + margin: var(--margin); max-width: 343px; width: fit-content; display: flex; border: 1px solid var(--announcement-border-color); - /* font-family: var(--announcement-font-family); */ padding: var(--announcement-padding); border-radius: var(--announcement-border-radius); } diff --git a/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css index 80c6ae265..1f1659060 100644 --- a/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css +++ b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css @@ -8,9 +8,11 @@ --announcement-font-color-2: #1570ef; --announcement-padding: 16px; --info-icon-frame-color: #eaecf0; + --tile-margin: 20px; } .announcement-tile { + margin: var(--tile-margin); width: fit-content; display: flex; border: 1px solid var(--announcement-border-color); diff --git a/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css index 2e9f95e83..bc3427302 100644 --- a/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css +++ b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css @@ -1,9 +1,11 @@ :root { --announcement-font-size-0: 13px; --announcement-padding: 16px; + --margin: 20px; } .announcement-messagebar-body { + margin: var(--margin); font-size: var(--announcement-font-size-0); padding: 0 var(--announcement-padding) 0 0; justify-content: center; diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx index 29f4ebe5d..b5e439aed 100644 --- a/Client/src/Pages/PlayGround/PlayGround.jsx +++ b/Client/src/Pages/PlayGround/PlayGround.jsx @@ -4,6 +4,15 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField"; import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField"; +import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton"; +import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; +import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert"; +import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar"; +import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription"; +import PlayGroundCharts from "./PlayGround-Charts"; +import PlayGroundPopupModals from "./PlayGround-Popup-Modals"; +import PlayGroundTooltips from "./PlayGround-Tooltips"; // This Component is just for the development and test // purposes and just to see what my components look like while development @@ -34,20 +43,19 @@ function PlayGround() { icon={} helperText="This is a hint text to help user." /> -
+
{/* Now, illustration of the Website text fields */} -
+ -
-
+
{/* Now, illustration of the Description text fields */} -
+ + + + + } + subject="We’ve just released a new feature" + body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid + pariatur, ipsum dolor." + esc="Dismiss" + primary="View changes" + /> + + } + subject="There was a problem with that action" + body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid + pariatur, ipsum dolor." + esc="Dismiss" + primary="Learn more" + /> + + } + subject="Successfully updated profile" + body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid + pariatur, ipsum dolor." + esc="Dismiss" + primary="Learn more" + /> + + + + + + +
+ +
+ +
+ ); } From b1960e7e58fd74802bcb821204bca333ea1dee96 Mon Sep 17 00:00:00 2001 From: Mohammad Khalilzadeh <140876993+MuhammadKhalilzadeh@users.noreply.github.com> Date: Tue, 21 May 2024 13:49:37 +0330 Subject: [PATCH 2/3] Delete Server/service directory --- Server/service/pingService.js | 123 ---------------------------------- 1 file changed, 123 deletions(-) delete mode 100644 Server/service/pingService.js diff --git a/Server/service/pingService.js b/Server/service/pingService.js deleted file mode 100644 index aeb43cd69..000000000 --- a/Server/service/pingService.js +++ /dev/null @@ -1,123 +0,0 @@ -const { Queue, Worker } = require("bullmq"); -const logger = require("../utils/logger"); -require("dotenv").config(); - -/** - * NOTES - * This code will be resource heavy as we will be creating - * many workers and jobs. Operations should be robust and have good - * error handling and retry functionality. - * There will be a lot of I/O operations as well, so we should be - * aware of asynchronous operations and handle them properly. - */ - -const connection = { - host: process.env.BULL_MQ_HOST || "127.0.0.1", - port: process.env.BULL_MQ_PORT || 6379, -}; - -const JOBS_PER_WORKER = 5; -const MAX_CREATE_WORKER_RETRIES = 3; - -const SERVICE_NAME = "pingService"; -const QUEUE_NAME = "monitors"; - -let queue; -let workers = []; - -const enqueueJob = async (queue, monitor) => { - try { - await queue.add( - QUEUE_NAME, - { monitor }, - { delay: monitor.interval * 1000 } - ); - logger.info("Job enqueued", { service: SERVICE_NAME }); - } catch (error) { - logger.error(error.message, { service: SERVICE_NAME }); - } -}; - -const pingMonitor = (monitor) => { - // TODO Implement pinging the monitor - console.log(`{url: ${monitor.url},`, `interval: ${monitor.interval}}`); -}; - -const createWorker = (queue, retries = 0) => { - try { - const worker = new Worker( - QUEUE_NAME, - async (job) => { - //Ping the monitor and enqueue the job again to constantly monitor - pingMonitor(job.data.monitor); - enqueueJob(queue, job.data.monitor); - }, - { - connection, - } - ); - logger.info("Worker created", { service: SERVICE_NAME }); - return worker; - } catch (error) { - logger.error(error.message, { service: SERVICE_NAME }); - // If creating a worker fails, recursively retry MAX_CREATE_WORKER_RETRIES times - if (retries < MAX_CREATE_WORKER_RETRIES) { - logger.info( - `Retrying to create worker (${ - retries + 1 - }/${MAX_CREATE_WORKER_RETRIES})`, - { service: SERVICE_NAME } - ); - return createWorker(queue, retries + 1); - } - - return null; - } -}; - -const startPingService = async (db) => { - queue = new Queue(QUEUE_NAME, { - connection, - }); - - const monitors = await db.getAllMonitors(); - - for (let i = 0; i < monitors.length; i++) { - if (i % JOBS_PER_WORKER === 0) { - const worker = createWorker(queue); - worker && workers.push(worker); - } - enqueueJob(queue, monitors[i]); - } - - // Make sure a worker was created, none will be created if jobs < JOBS_PER_WORKER - if (workers.length === 0) { - const worker = createWorker(queue); - worker && workers.push(worker); - if (!worker) { - logger.error("Failed to create workers", { service: SERVICE_NAME }); - } - } -}; - -const cleanup = async () => { - try { - logger.info("Cleaning up Ping Service...", { service: SERVICE_NAME }); - - // Clean out the queue - const jobs = await queue.getJobs(["active", "waiting", "delayed"]); - // There could be a great many jobs, handle this asynchronously with Promise.all - await Promise.all(jobs.map((job) => job.remove())); - - // Close workers. Same as jobs, there could be many workers we don't want to wait for each one to close. - await Promise.all(workers.map((worker) => worker.close())); - - // Close the queue - await queue.close(); - logger.info("Ping Service cleaned up", { service: SERVICE_NAME }); - } catch (error) { - logger.error(error.message, { service: SERVICE_NAME }); - } -}; - -module.exports = { startPingService, cleanup }; From 9a22218e45f9b9c8f263b45f141a5a85bf4f12c6 Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Tue, 21 May 2024 13:54:21 +0330 Subject: [PATCH 3/3] service directory deleted --- Server/service/pingService.js | 123 ---------------------------------- 1 file changed, 123 deletions(-) delete mode 100644 Server/service/pingService.js diff --git a/Server/service/pingService.js b/Server/service/pingService.js deleted file mode 100644 index aeb43cd69..000000000 --- a/Server/service/pingService.js +++ /dev/null @@ -1,123 +0,0 @@ -const { Queue, Worker } = require("bullmq"); -const logger = require("../utils/logger"); -require("dotenv").config(); - -/** - * NOTES - * This code will be resource heavy as we will be creating - * many workers and jobs. Operations should be robust and have good - * error handling and retry functionality. - * There will be a lot of I/O operations as well, so we should be - * aware of asynchronous operations and handle them properly. - */ - -const connection = { - host: process.env.BULL_MQ_HOST || "127.0.0.1", - port: process.env.BULL_MQ_PORT || 6379, -}; - -const JOBS_PER_WORKER = 5; -const MAX_CREATE_WORKER_RETRIES = 3; - -const SERVICE_NAME = "pingService"; -const QUEUE_NAME = "monitors"; - -let queue; -let workers = []; - -const enqueueJob = async (queue, monitor) => { - try { - await queue.add( - QUEUE_NAME, - { monitor }, - { delay: monitor.interval * 1000 } - ); - logger.info("Job enqueued", { service: SERVICE_NAME }); - } catch (error) { - logger.error(error.message, { service: SERVICE_NAME }); - } -}; - -const pingMonitor = (monitor) => { - // TODO Implement pinging the monitor - console.log(`{url: ${monitor.url},`, `interval: ${monitor.interval}}`); -}; - -const createWorker = (queue, retries = 0) => { - try { - const worker = new Worker( - QUEUE_NAME, - async (job) => { - //Ping the monitor and enqueue the job again to constantly monitor - pingMonitor(job.data.monitor); - enqueueJob(queue, job.data.monitor); - }, - { - connection, - } - ); - logger.info("Worker created", { service: SERVICE_NAME }); - return worker; - } catch (error) { - logger.error(error.message, { service: SERVICE_NAME }); - // If creating a worker fails, recursively retry MAX_CREATE_WORKER_RETRIES times - if (retries < MAX_CREATE_WORKER_RETRIES) { - logger.info( - `Retrying to create worker (${ - retries + 1 - }/${MAX_CREATE_WORKER_RETRIES})`, - { service: SERVICE_NAME } - ); - return createWorker(queue, retries + 1); - } - - return null; - } -}; - -const startPingService = async (db) => { - queue = new Queue(QUEUE_NAME, { - connection, - }); - - const monitors = await db.getAllMonitors(); - - for (let i = 0; i < monitors.length; i++) { - if (i % JOBS_PER_WORKER === 0) { - const worker = createWorker(queue); - worker && workers.push(worker); - } - enqueueJob(queue, monitors[i]); - } - - // Make sure a worker was created, none will be created if jobs < JOBS_PER_WORKER - if (workers.length === 0) { - const worker = createWorker(queue); - worker && workers.push(worker); - if (!worker) { - logger.error("Failed to create workers", { service: SERVICE_NAME }); - } - } -}; - -const cleanup = async () => { - try { - logger.info("Cleaning up Ping Service...", { service: SERVICE_NAME }); - - // Clean out the queue - const jobs = await queue.getJobs(["active", "waiting", "delayed"]); - // There could be a great many jobs, handle this asynchronously with Promise.all - await Promise.all(jobs.map((job) => job.remove())); - - // Close workers. Same as jobs, there could be many workers we don't want to wait for each one to close. - await Promise.all(workers.map((worker) => worker.close())); - - // Close the queue - await queue.close(); - logger.info("Ping Service cleaned up", { service: SERVICE_NAME }); - } catch (error) { - logger.error(error.message, { service: SERVICE_NAME }); - } -}; - -module.exports = { startPingService, cleanup };