Merge pull request #49 from razorpay/AD-47

[statping-ui] : fix for downtime crop issue

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 = {
@@ -140,16 +144,18 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
           place="bottom"
           backgroundColor="#344A6C"
           html={true}
+          overridePosition={generateTooltipPosition}
         />
         {failureData?.length > 0 ? (
           failureData.map((d, i) => {
             return (
               <div
-                className={`flex-fill service_day ${STATUS_CLASS[d.status]}`}
+                className={`service_day ${STATUS_CLASS[d.status]}`}
                 onMouseOver={() => handleMouseOver(d)}
                 onMouseOut={handleMouseOut}
                 key={i}
-                data-tip={hoverText}>
+                data-tip={hoverText}
+              >
                 {d.status !== 0 && (
                   <span className="d-none d-md-block text-center small"></span>
                 )}
@@ -166,13 +172,8 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
         <div className="no-select">
           <p className="divided justify-content-between">
             <span className="timeline-text font-12">
-              90 {langs("days_ago")}
+              {langs("status_over_the_past")} 90 {langs("days")}
             </span>
-            {/* <span className="timeline-divider"></span> */}
-            {/* <span className="timeline-text font-12">{service_txt()}</span> */}
-            {/* <span className="timeline-text font-12">{uptime}% uptime</span> */}
-            <span className="timeline-divider"></span>
-            <span className="timeline-text font-12">{langs("today")}</span>
           </p>
         </div>
       </div>

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];

react-frontend/src/styles/scss/base.scss

@@ -131,11 +131,12 @@
 }
 
 .block-chart {
+  padding-top: 7px;
+  height: 100%;
   display: flex;
-  justify-content: center;
+  flex-flow: row wrap;
-  margin: 1rem 0;
+  justify-content: flex-start;
-  padding: 0 0.75rem;
+  gap: 1px;
-
   div.service_day:last-child {
     margin-right: 0;
   }
@@ -144,8 +145,9 @@
 .service_day {
   position: relative;
   height: 24px;
-  min-width: 4px;
+  min-width: 6px;
-  margin-right: 2px;
+  margin-right: 1.5px;
+  margin-bottom: 4px;
   cursor: pointer;
 }
 

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;

react-frontend/src/utils/helper.js

@@ -90,3 +90,18 @@ export const generateUUID = (length) => {
     Math.floor(Math.random() * 36).toString(36)
   ).join("");
 };
+
+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,
+      left: place === "left" ? left + offset : left - offset,
+    };
+  }
+  return position;
+};