PCORE-2213: cosmetic changes on external status page (#40)

* feat: minor cosmetic change in showing dates

* feat: minor cosmetic change in showing dates

* feat: scroll to input when editing incident

* fix: class to classname

* fix: added array check for api data

* feat: used created_at instead of updated_at

* feat: added empty message when no incident updates are there

* feat: added empty message when no incident updates are there

* feat: cosmetic changes

* feat: reverted the status logic

* fix: removed logs

* fix: pr review

frontend/src/forms/Downtime.vue

@@ -196,8 +196,6 @@ const checkFormErrors = (value, id) => {
         errors.failures = 'Enter Valid Positve Number without decimal point';
     } else if (!start && end) {
         errors.start = 'Need to enter Start Date';
-    } else if ( id && startSec && !endSec ) {
-        errors.end = 'Need to enter End Date';
     } else if ( endSec && startSec > endSec ) {
         errors.end = 'End Date should be greater than Start Date';
     } 
@@ -279,7 +277,7 @@ export default {
             const { id } = this.$route.params;
             const { serviceId, subStatus, failures, start, end } = this.downtime;
 
-            return serviceId && subStatus && failures && start && (id ? end : true);
+            return serviceId && subStatus && failures && start;
         },
         saveDowntime: async function () {
             const { id } = this.$route.params;

react-frontend/src/components/GroupItem.jsx

@@ -3,12 +3,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import ReactTooltip from "react-tooltip";
 import API from "../config/API";
-import langs from "../config/langs";
 import GroupServiceFailures from "./GroupServiceFailures";
 import SubServiceCard from "./SubServiceCard";
 import infoIcon from "../static/info.svg";
 import { analyticsTrack } from "../utils/trackers";
 import IncidentsBlock from "./IncidentsBlock";
+import { getServiceStatus } from "../utils/helper";
 
 const GroupItem = ({ service, showPlusButton }) => {
   const [collapse, setCollapse] = useState(false);
@@ -116,12 +116,7 @@ const GroupItem = ({ service, showPlusButton }) => {
         </div>
         {!collapse && (
           <div className="service_item--left">
-            <span
+            {getServiceStatus(service.online)}
-              className={`badge float-right font-12 ${
-                service.online ? "uptime" : "downtime"
-              }`}>
-              {service.online ? langs("online") : langs("offline")}
-            </span>
           </div>
         )}
       </div>

react-frontend/src/components/GroupServiceFailures.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-// import useIntersectionObserver from "../hooks/useIntersectionObserver";
+import { useToast } from "@chakra-ui/react";
 import DateUtils from "../utils/DateUtils";
 import langs from "../config/langs";
 import API from "../config/API";
@@ -7,6 +7,7 @@ import ServiceLoader from "./ServiceLoader";
 import ReactTooltip from "react-tooltip";
 import { STATUS_CLASS } from "../utils/constants";
 import { calcPer, isObjectEmpty } from "../utils/helper";
+import { errorToastConfig } from "../utils/toast";
 
 const STATUS_TEXT = {
   up: "Uptime",
@@ -52,7 +53,7 @@ async function fetchFailureSeries(url) {
     "24h",
     true
   );
-  // console.log(data);
+
   return data;
 }
 
@@ -62,9 +63,12 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
   const [failureData, setFailureData] = useState([]);
   const [uptime, setUptime] = useState(0);
 
+  const toast = useToast();
+
   useEffect(() => {
     async function fetchData() {
       let url = "/services";
+
       try {
         if (group) {
           url += `/${group.id}/sub_services/${service.id}/block_series`;
@@ -72,27 +76,29 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
           url += `/${service.id}/block_series`;
         }
         const { series, downtime, uptime } = await fetchFailureSeries(url);
-        const failureData = [];
+
-        series.forEach((d) => {
+        const failureData = series.map((item) => {
-          let date = DateUtils.parseISO(d.timeframe);
+          let date = DateUtils.parseISO(item.timeframe);
           date = DateUtils.format(date, "dd MMMM yyyy");
-          failureData.push({
+
+          return {
             timeframe: date,
-            status: d.status,
+            status: item.status,
-            downtimes: groupByStatus(d.downtimes),
+            downtimes: groupByStatus(item.downtimes),
-          });
+          };
         });
+
         const percentage = calcPer(uptime, downtime);
         setFailureData(failureData);
         setUptime(percentage);
       } catch (e) {
-        console.log(e.message);
+        toast(errorToastConfig(e.message));
       } finally {
         setLoaded(false);
       }
     }
     fetchData();
-  }, [service, group]);
+  }, [service, group, toast]);
 
   const handleTooltip = (d) => {
     let txt = "";

react-frontend/src/components/IncidentsBlock.jsx

@@ -70,7 +70,10 @@ const IncidentsBlock = ({ service, group }) => {
                   <div className="title-wrapper">
                     <span className="subtitle no-decoration">{title}</span>
                     <span className="d-block small text-dark">
-                      {description}
+                      <span className="font-weight-bold">
+                        Issue Description -{" "}
+                      </span>
+                      <span>{description}</span>
                     </span>
                     <span className="d-block small text-muted">
                       Updated {DateUtils.ago(updatedAt)} ago.{" "}

react-frontend/src/components/SubServiceCard.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import ReactTooltip from "react-tooltip";
-import langs from "../config/langs";
 import GroupServiceFailures from "./GroupServiceFailures";
 import IncidentsBlock from "./IncidentsBlock";
 import infoIcon from "../static/info.svg";
+import { getServiceStatus } from "../utils/helper";
 
 const SubServiceCard = ({ group, service }) => {
   const [hoverText, setHoverText] = useState("");
@@ -20,10 +20,7 @@ const SubServiceCard = ({ group, service }) => {
 
       <div className="service_item--header">
         <div className="service_item--right">
-          <span
+          <span className="subtitle no-decoration font-14 mr-1">
-            className="subtitle no-decoration font-14 mr-1"
-            // to="/service/1"
-          >
             {service.name}
           </span>
           {service?.description && (
@@ -47,16 +44,12 @@ const SubServiceCard = ({ group, service }) => {
           )}
         </div>
         <div className="service_item--left">
-          <span
+          {getServiceStatus(service.online)}
-            className={`badge float-right font-12 ${
-              service.online ? "status-green" : "status-red"
-            }`}>
-            {service.online ? langs("online") : langs("offline")}
-          </span>
         </div>
       </div>
 
       <GroupServiceFailures group={group} service={service} />
+
       <IncidentsBlock group={group} service={service} />
     </div>
   );

react-frontend/src/config/langs.js

@@ -8,6 +8,7 @@ const english = {
   login: "Login",
   logout: "Logout",
   online: "Online",
+  degraded: "Degraded",
   offline: "Offline",
   configs: "Configuration",
   username: "Username",

react-frontend/src/utils/helper.js

@@ -1,3 +1,5 @@
+import langs from "../config/langs";
+
 export function findStatus(data) {
   if (!Array.isArray(data)) return null;
   if (data.length === 0) return null;
@@ -23,6 +25,22 @@ export function getIncidentTextType(type) {
   }
 }
 
+export const getServiceStatus = (status) => {
+  let className = "";
+
+  if (status) {
+    className = " uptime";
+  } else {
+    className = " downtime";
+  }
+
+  return (
+    <span className={`badge float-right font-12${className}`}>
+      {status ? langs("online") : langs("offline")}
+    </span>
+  );
+};
+
 export const isObject = (obj) => {
   if (Object.prototype.toString.call(obj) === "[object Object]") {
     return true;

react-frontend/src/utils/toast.js

@@ -0,0 +1,8 @@
+export const errorToastConfig = (title) => {
+  return {
+    title: title,
+    status: "error",
+    isClosable: true,
+    position: "top-right",
+  };
+};