From 87ee195de4d89067e9192b7e72c9f3443609018d Mon Sep 17 00:00:00 2001 From: amitabhRazorpay Date: Tue, 10 Jan 2023 14:19:04 +0530 Subject: [PATCH 1/5] [statping-ui] : fix for downtime crop issue --- .../src/components/GroupServiceFailures.jsx | 28 +++++++++++++------ react-frontend/src/config/langs.js | 1 + react-frontend/src/styles/scss/base.scss | 14 ++++++---- react-frontend/src/styles/scss/variables.scss | 2 +- 4 files changed, 30 insertions(+), 15 deletions(-) diff --git a/react-frontend/src/components/GroupServiceFailures.jsx b/react-frontend/src/components/GroupServiceFailures.jsx index 3114cb3e..0ab46a59 100644 --- a/react-frontend/src/components/GroupServiceFailures.jsx +++ b/react-frontend/src/components/GroupServiceFailures.jsx @@ -132,6 +132,21 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => { if (loaded) return ; + const generateTooltipPosition = (...args) => { + const position = args?.[0]; //tooltip default position + const place = args?.[4]; // tooltip placement + const offset = 6; + + if (place === "left" || place === "right") { + return { + top: position.top, + left: + place === "left" ? position.left + offset : position.left - offset, + }; + } + return position; + }; + return (
@@ -140,16 +155,18 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => { place="bottom" backgroundColor="#344A6C" html={true} + overridePosition={generateTooltipPosition} /> {failureData?.length > 0 ? ( failureData.map((d, i) => { return (
handleMouseOver(d)} onMouseOut={handleMouseOut} key={i} - data-tip={hoverText}> + data-tip={hoverText} + > {d.status !== 0 && ( )} @@ -166,13 +183,8 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {

- 90 {langs("days_ago")} + {langs("status_over_the_past")} 90 {langs("days")} - {/* */} - {/* {service_txt()} */} - {/* {uptime}% uptime */} - - {langs("today")}

diff --git a/react-frontend/src/config/langs.js b/react-frontend/src/config/langs.js index 7abfa66c..6c90794a 100644 --- a/react-frontend/src/config/langs.js +++ b/react-frontend/src/config/langs.js @@ -141,6 +141,7 @@ const english = { notify_all: "Notify All Changes", service_update: "Update Service", service_create: "Create Service", + status_over_the_past: "Status over the past", }; const langs = (v) => english[v]; diff --git a/react-frontend/src/styles/scss/base.scss b/react-frontend/src/styles/scss/base.scss index 3144d87f..4d8345db 100644 --- a/react-frontend/src/styles/scss/base.scss +++ b/react-frontend/src/styles/scss/base.scss @@ -131,11 +131,12 @@ } .block-chart { + padding-top: 7px; + height: 100%; display: flex; - justify-content: center; - margin: 1rem 0; - padding: 0 0.75rem; - + flex-flow: row wrap; + justify-content: flex-start; + gap: 1px; div.service_day:last-child { margin-right: 0; } @@ -144,8 +145,9 @@ .service_day { position: relative; height: 24px; - min-width: 4px; - margin-right: 2px; + min-width: 6px; + margin-right: 1.5px; + margin-bottom: 4px; cursor: pointer; } diff --git a/react-frontend/src/styles/scss/variables.scss b/react-frontend/src/styles/scss/variables.scss index 9006f0d7..5655612b 100644 --- a/react-frontend/src/styles/scss/variables.scss +++ b/react-frontend/src/styles/scss/variables.scss @@ -3,7 +3,7 @@ $background-color: #f5f8ff; $primary-bg: linear-gradient(314deg, #54a5ff -40%, #03299c); $container-color: #ffffff; $text-color: #2a2a2a; -$max-width: 775px; +$max-width: 824px; /* colors */ $base-color: #1f2849; From ee3f8bcd638403458960522e0c7abc62d2fd0cab Mon Sep 17 00:00:00 2001 From: amitabhRazorpay Date: Tue, 10 Jan 2023 14:54:25 +0530 Subject: [PATCH 2/5] [statping-ui] : moved generateTooltipPosition to util --- .../src/components/GroupServiceFailures.jsx | 21 +++++-------------- react-frontend/src/utils/helper.js | 14 +++++++++++++ 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/react-frontend/src/components/GroupServiceFailures.jsx b/react-frontend/src/components/GroupServiceFailures.jsx index 0ab46a59..78875e87 100644 --- a/react-frontend/src/components/GroupServiceFailures.jsx +++ b/react-frontend/src/components/GroupServiceFailures.jsx @@ -6,7 +6,11 @@ import API from "../config/API"; import ServiceLoader from "./ServiceLoader"; import ReactTooltip from "react-tooltip"; import { STATUS_CLASS } from "../utils/constants"; -import { calcPer, isObjectEmpty } from "../utils/helper"; +import { + calcPer, + generateTooltipPosition, + isObjectEmpty, +} from "../utils/helper"; import { errorToastConfig } from "../utils/toast"; const STATUS_TEXT = { @@ -132,21 +136,6 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => { if (loaded) return ; - const generateTooltipPosition = (...args) => { - const position = args?.[0]; //tooltip default position - const place = args?.[4]; // tooltip placement - const offset = 6; - - if (place === "left" || place === "right") { - return { - top: position.top, - left: - place === "left" ? position.left + offset : position.left - offset, - }; - } - return position; - }; - return (
diff --git a/react-frontend/src/utils/helper.js b/react-frontend/src/utils/helper.js index 59e91d25..ae5290e0 100644 --- a/react-frontend/src/utils/helper.js +++ b/react-frontend/src/utils/helper.js @@ -90,3 +90,17 @@ export const generateUUID = (length) => { Math.floor(Math.random() * 36).toString(36) ).join(""); }; + +export const generateTooltipPosition = (...args) => { + const position = args?.[0]; //tooltip default position + const place = args?.[4]; // tooltip placement + const offset = 6; + + if (place === "left" || place === "right") { + return { + top: position.top, + left: place === "left" ? position.left + offset : position.left - offset, + }; + } + return position; +}; From 7e315458379ce129c252410de358dfb81c22f317 Mon Sep 17 00:00:00 2001 From: amitabhRazorpay Date: Tue, 10 Jan 2023 15:52:14 +0530 Subject: [PATCH 3/5] [statping-ui] : generateTooltipPosition refactored --- react-frontend/src/utils/helper.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/react-frontend/src/utils/helper.js b/react-frontend/src/utils/helper.js index ae5290e0..a46f3b5b 100644 --- a/react-frontend/src/utils/helper.js +++ b/react-frontend/src/utils/helper.js @@ -93,13 +93,14 @@ export const generateUUID = (length) => { export const generateTooltipPosition = (...args) => { const position = args?.[0]; //tooltip default position + const { top, left } = position; const place = args?.[4]; // tooltip placement const offset = 6; if (place === "left" || place === "right") { return { - top: position.top, - left: place === "left" ? position.left + offset : position.left - offset, + top: top, + left: place === "left" ? left + offset : left - offset, }; } return position; From 22edf1dd6d402e4053ea2fcbe1d1b06c72d3df93 Mon Sep 17 00:00:00 2001 From: amitabhRazorpay Date: Tue, 10 Jan 2023 16:11:35 +0530 Subject: [PATCH 4/5] [statping-ui] : null checks added in generateTooltipPosition --- react-frontend/src/utils/helper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-frontend/src/utils/helper.js b/react-frontend/src/utils/helper.js index a46f3b5b..9ea13b79 100644 --- a/react-frontend/src/utils/helper.js +++ b/react-frontend/src/utils/helper.js @@ -93,7 +93,7 @@ export const generateUUID = (length) => { export const generateTooltipPosition = (...args) => { const position = args?.[0]; //tooltip default position - const { top, left } = position; + const { top, left } = position || {}; const place = args?.[4]; // tooltip placement const offset = 6; From 6274c66aa52cf91e884186fd997d60e18dc55cb9 Mon Sep 17 00:00:00 2001 From: amitabhRazorpay Date: Tue, 10 Jan 2023 16:17:25 +0530 Subject: [PATCH 5/5] [statping-ui] : generateTooltipPosition refactor --- react-frontend/src/utils/helper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-frontend/src/utils/helper.js b/react-frontend/src/utils/helper.js index 9ea13b79..16365078 100644 --- a/react-frontend/src/utils/helper.js +++ b/react-frontend/src/utils/helper.js @@ -99,7 +99,7 @@ export const generateTooltipPosition = (...args) => { if (place === "left" || place === "right") { return { - top: top, + top, left: place === "left" ? left + offset : left - offset, }; }