disable source map + status icon fix (#12)

* disable source map + status icon fix

* ui changes

* ui changes vq.0

react-frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start",
-    "build": "rm -rf build && react-scripts build",
+    "build": "rm -rf build && GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

react-frontend/src/components/ContentHeader.jsx

@@ -1,11 +1,26 @@
 import React from "react";
-import { core } from "../utils/data";
 
 const ContentHeader = () => {
   return (
     <div className="header">
-      <h1 className="header-title mt-4 mb-3 font-24 fw-700">{core.name}</h1>
+      <h1 className="header-title mt-4 mb-3 font-24 fw-700">
-      <h5 className="header-description font-12">{core.description}</h5>
+        Razorpay Status Page
+      </h1>
+      <h5 className="header-description font-12">
+        Razorpay status page publishes the most up-to-the-minute information on
+        product availability. Check back here any time to get current
+        status/information on individual products. If you are experiencing a
+        real-time, operational issue with one of our products that is not
+        described below, please reach out to{" "}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://razorpay.com/support/"
+        >
+          our support team
+        </a>{" "}
+        and we will help you out.
+      </h5>
     </div>
   );
 };

react-frontend/src/components/GroupServiceFailures.jsx

@@ -103,7 +103,10 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
   const handleTooltip = (d) => {
     let txt = "";
     if (d.status === "up") {
-      txt = `${d.timeframe} - No Downtime`;
+      txt = `<div style="text-align:center;">
+      <div>${d.timeframe}</div>
+      <div>No Downtime</div>
+      </div>`;
     } else if (d.status === "down" && !isObjectEmpty(d.downtimes)) {
       txt = `<div style="text-align:center;">
       <div>${d.timeframe}</div>

react-frontend/src/components/ServicesPage.jsx

@@ -1,10 +1,6 @@
 import React, { useState, useEffect } from "react";
 // import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faCheckCircle,
-  faExclamationCircle,
-} from "@fortawesome/free-solid-svg-icons";
 import DateUtils from "../utils/DateUtils";
 import Group from "./Group";
 import ContentHeader from "./ContentHeader";
@@ -14,13 +10,13 @@ import ServiceLoader from "./ServiceLoader";
 // import ServiceBlock from "./ServiceBlock";
 // import ServicesList from "./ServicesList";
 import API from "../config/API";
-import { STATUS_COLOR, STATUS_TEXT } from "../utils/constants";
+import { STATUS_COLOR, STATUS_ICON, STATUS_TEXT } from "../utils/constants";
 import { findStatus } from "../utils/helper";
 
 const ServicesPage = () => {
   // const data = messages.filter((m) => inRange(m) && m.service === 0);
   const [services, setServices] = useState([]);
-  const [status, setStatus] = useState(true);
+  const [status, setStatus] = useState("uptime");
   const [loading, setLoading] = useState(true);
   const [poll, setPolling] = useState(1);
   const today = DateUtils.format(new Date(), "d MMMM yyyy, hh:mm aaa");
@@ -57,14 +53,16 @@ const ServicesPage = () => {
           <h2 className="title font-20 fw-700">Razorpay Payments</h2>
           <div className="d-flex align-items-center subtitle font-12 mt-2">
             <FontAwesomeIcon
-              icon={status === "up" ? faCheckCircle : faExclamationCircle}
+              icon={STATUS_ICON[status]}
               style={{
                 fontSize: "16px",
                 color: STATUS_COLOR[status],
               }}
             />
             <span className="mx-1">{STATUS_TEXT[status]}</span>
-            <span className="date">{today}</span>
+          </div>
+          <div>
+            <span className="date font-12">{today}</span>
           </div>
         </div>
 

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

@@ -191,6 +191,15 @@
     line-height: 1rem;
     padding: 0 4.65rem;
     color: rgba($white, 0.8);
+
+    a {
+      text-decoration: underline;
+
+      &:hover,
+      &:focus {
+        color: rgba($white, 0.8);
+      }
+    }
   }
 }
 

react-frontend/src/utils/helper.js

@@ -1,7 +1,5 @@
 // import DateUtils from "./DateUtils";
 
-import DateUtils from "./DateUtils";
-
 export function findStatus(data) {
   if (!Array.isArray(data)) return null;
   if (data.length === 0) return null;
@@ -11,7 +9,7 @@ export function findStatus(data) {
   if (uptime) return "uptime";
   if (downtime) return "downtime";
   if (degraded) return "degraded";
-  return "none";
+  return "";
 }
 
 // export function inRange(message) {