mirror of https://github.com/statping/statping
feat: added instrumentation for status page
parent
e7bf4c7310
commit
95c6811707
|
@ -1,2 +1,2 @@
|
|||
REACT_APP_LUMBERJACK_API_URL="https://lumberjack.stage.razorpay.in/v1/track"
|
||||
REACT_APP_LUMBERJACK_API_KEY='10pYUm55sa39zgTN1gzNwQzNyQjM54Cg'
|
||||
REACT_APP_LUMBERJACK_API_KEY='UHjKbQGfxNrh9p2Die2vcu06alGtijkj'
|
|
@ -1,2 +1,2 @@
|
|||
REACT_APP_LUMBERJACK_API_URL="https://lumberjack.razorpay.com/v1/track"
|
||||
REACT_APP_LUMBERJACK_API_KEY='10pYUm55sa39zgTN1gzNwQzNyQjM54Cg'
|
||||
REACT_APP_LUMBERJACK_API_KEY='FsXeGGD0S8uVBnfqlgkBXE4Ht2ZH9Y9c'
|
|
@ -28,7 +28,7 @@
|
|||
"react-apexcharts": "^1.3.9",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-tooltip": "^4.2.21"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
@ -48,9 +48,5 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"resolutions": {
|
||||
"babel-loader": "8.1.0",
|
||||
"webpack": "4.44.2"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,6 +9,7 @@ import { initLumberjack } from "../utils/trackers";
|
|||
const App = () => {
|
||||
console.log(`Application running on ${process.env.NODE_ENV} mode.`);
|
||||
useEffect(() => {
|
||||
console.log(navigator);
|
||||
initLumberjack();
|
||||
}, [])
|
||||
|
||||
|
|
|
@ -1,6 +1,15 @@
|
|||
import React from "react";
|
||||
import { analyticsTrack } from "../utils/analytics";
|
||||
|
||||
const ContentHeader = () => {
|
||||
const sendAnalytics = () => {
|
||||
analyticsTrack({
|
||||
objectName: 'Support Page',
|
||||
actionName: 'clicked',
|
||||
screen: 'Home page'
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="header">
|
||||
<h1 className="header-title mt-4 mb-3 font-24 fw-700">
|
||||
|
@ -13,6 +22,7 @@ const ContentHeader = () => {
|
|||
real-time, operational issue with one of our products that is not
|
||||
described below, please reach out to{" "}
|
||||
<a
|
||||
onClick={sendAnalytics}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://razorpay.com/support/"
|
||||
|
|
|
@ -46,7 +46,7 @@ const GroupItem = ({ service, showPlusButton }) => {
|
|||
}
|
||||
|
||||
analyticsTrack({
|
||||
objectName: 'Test object',
|
||||
objectName: 'Service Expand',
|
||||
actionName: 'clicked',
|
||||
screen: 'Home page'
|
||||
})
|
||||
|
@ -54,6 +54,12 @@ const GroupItem = ({ service, showPlusButton }) => {
|
|||
|
||||
const closeCollapse = () => {
|
||||
setCollapse(false);
|
||||
|
||||
analyticsTrack({
|
||||
objectName: 'Service Collapse',
|
||||
actionName: 'clicked',
|
||||
screen: 'Home page'
|
||||
})
|
||||
};
|
||||
|
||||
const handleMouseOver = (service) => {
|
||||
|
|
|
@ -6,10 +6,20 @@ import Button from "../Button";
|
|||
|
||||
import RzpLogo from "../../static/razorpay-logo-white.svg";
|
||||
import indiaFlagSvg from "./images/india-flag.svg";
|
||||
import { analyticsTrack } from "../../utils/analytics";
|
||||
|
||||
const RazorpayLogoLink = () => (
|
||||
<Link
|
||||
const RazorpayLogoLink = () => {
|
||||
const sendAnalytics = () => {
|
||||
analyticsTrack({
|
||||
objectName: 'Home Page',
|
||||
actionName: 'clicked',
|
||||
screen: 'Home page'
|
||||
})
|
||||
}
|
||||
|
||||
return <Link
|
||||
to="https://razorpay.com/"
|
||||
onClick={sendAnalytics}
|
||||
isExternal
|
||||
py={{ xxs: "6", lg: "7" }}
|
||||
paddingRight={{ xxs: "0", lg: "22" }}
|
||||
|
@ -24,7 +34,15 @@ const RazorpayLogoLink = () => (
|
|||
alt="Razorpay Logo"
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const sendAnalytics = (event) => {
|
||||
analyticsTrack({
|
||||
objectName: event.target.name,
|
||||
actionName: 'clicked',
|
||||
screen: 'Home page'
|
||||
})
|
||||
}
|
||||
|
||||
const Navigation = () => {
|
||||
return (
|
||||
|
@ -67,7 +85,10 @@ const Navigation = () => {
|
|||
</Tooltip>
|
||||
<Button
|
||||
as={Link}
|
||||
onClick={sendAnalytics}
|
||||
type="button"
|
||||
size="sm"
|
||||
name="login"
|
||||
colorScheme="link"
|
||||
to="https://dashboard.razorpay.com/#/access/signin"
|
||||
>
|
||||
|
@ -75,9 +96,12 @@ const Navigation = () => {
|
|||
</Button>
|
||||
<Button
|
||||
as={Link}
|
||||
onClick={sendAnalytics}
|
||||
type="button"
|
||||
to="https://dashboard.razorpay.com/signup"
|
||||
marginLeft={{ base: "1", xs: "4" }}
|
||||
size="sm"
|
||||
name="signup"
|
||||
colorScheme="white"
|
||||
display={{ base: "none", xxs: "none", lg: "inline-block" }}
|
||||
>
|
||||
|
|
|
@ -12,6 +12,7 @@ import ServiceLoader from "./ServiceLoader";
|
|||
import API from "../config/API";
|
||||
import { STATUS_COLOR, STATUS_ICON, STATUS_TEXT } from "../utils/constants";
|
||||
import { findStatus } from "../utils/helper";
|
||||
import { analyticsTrack } from "../utils/analytics";
|
||||
|
||||
const ServicesPage = () => {
|
||||
// const data = messages.filter((m) => inRange(m) && m.service === 0);
|
||||
|
@ -21,6 +22,16 @@ const ServicesPage = () => {
|
|||
const [poll, setPolling] = useState(1);
|
||||
const today = DateUtils.format(new Date(), "d MMMM yyyy, hh:mm aaa");
|
||||
|
||||
useEffect(() => {
|
||||
if(!loading) {
|
||||
analyticsTrack({
|
||||
objectName: 'Status Page',
|
||||
actionName: 'displayed',
|
||||
screen: 'Home page'
|
||||
})
|
||||
}
|
||||
}, [loading])
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setPolling((prev) => (prev += 1));
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import errorService from '@razorpay/universe-utils/errorService';
|
||||
import { titleCase } from './helper';
|
||||
import { getCurrentBrowser, isMobile, titleCase } from './helper';
|
||||
|
||||
export const sendToLumberjack = ({ eventName, properties = {} }) => {
|
||||
const body = {
|
||||
|
@ -70,6 +70,7 @@ export const analyticsTrack = ({
|
|||
|
||||
const eventTimestamp = new Date().toISOString();
|
||||
const eventName = titleCase(`${objectName} ${actionName}`);
|
||||
const browser = getCurrentBrowser();
|
||||
|
||||
if (toLumberjack) {
|
||||
sendToLumberjack({
|
||||
|
@ -78,6 +79,8 @@ export const analyticsTrack = ({
|
|||
...properties,
|
||||
screen,
|
||||
eventTimestamp,
|
||||
browser,
|
||||
mobile: isMobile(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
// import DateUtils from "./DateUtils";
|
||||
|
||||
export function findStatus(data) {
|
||||
if (!Array.isArray(data)) return null;
|
||||
if (data.length === 0) return null;
|
||||
const uptime = data.every((d) => d.online === true);
|
||||
const degraded = data.some((d) => d.online === false);
|
||||
const downtime = data.every((d) => d.online === false);
|
||||
if (uptime) return "uptime";
|
||||
if (downtime) return "downtime";
|
||||
if (degraded) return "degraded";
|
||||
return "";
|
||||
if (!Array.isArray(data)) return null;
|
||||
if (data.length === 0) return null;
|
||||
const uptime = data.every((d) => d.online === true);
|
||||
const degraded = data.some((d) => d.online === false);
|
||||
const downtime = data.every((d) => d.online === false);
|
||||
if (uptime) return 'uptime';
|
||||
if (downtime) return 'downtime';
|
||||
if (degraded) return 'degraded';
|
||||
return '';
|
||||
}
|
||||
|
||||
// export function inRange(message) {
|
||||
|
@ -23,23 +23,23 @@ export function findStatus(data) {
|
|||
// }
|
||||
|
||||
export const isObject = (obj) => {
|
||||
if (Object.prototype.toString.call(obj) === "[object Object]") {
|
||||
return true;
|
||||
}
|
||||
if (Object.prototype.toString.call(obj) === '[object Object]') {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
return false;
|
||||
};
|
||||
|
||||
export const isObjectEmpty = (obj) => {
|
||||
if (Object.keys(obj).length === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
if (Object.keys(obj).length === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
export const calcPer = (uptime, downtime) => {
|
||||
const percentage = ((uptime / (uptime + downtime)) * 100).toFixed(2);
|
||||
return percentage;
|
||||
const percentage = ((uptime / (uptime + downtime)) * 100).toFixed(2);
|
||||
return percentage;
|
||||
};
|
||||
|
||||
// export function formatString(arr) {
|
||||
|
@ -60,8 +60,37 @@ export const calcPer = (uptime, downtime) => {
|
|||
|
||||
/* Delimiters are space / underscore */
|
||||
export function titleCase(sentence) {
|
||||
return (sentence || '')
|
||||
.split(/\s+|_/)
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase())
|
||||
.join(' ');
|
||||
return (sentence || '')
|
||||
.split(/\s+|_/)
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.substr(1).toLowerCase())
|
||||
.join(' ');
|
||||
}
|
||||
|
||||
// Check for browser.
|
||||
export function getCurrentBrowser() {
|
||||
const userAgent = navigator.userAgent;
|
||||
let browserName;
|
||||
|
||||
if (userAgent.match(/chrome|chromium|crios/i)) {
|
||||
browserName = 'chrome';
|
||||
} else if (userAgent.match(/firefox|fxios/i)) {
|
||||
browserName = 'firefox';
|
||||
} else if (userAgent.match(/safari/i)) {
|
||||
browserName = 'safari';
|
||||
} else if (userAgent.match(/opr\//i)) {
|
||||
browserName = 'opera';
|
||||
} else if (userAgent.match(/edg/i)) {
|
||||
browserName = 'edge';
|
||||
} else {
|
||||
browserName = 'No browser detection';
|
||||
}
|
||||
|
||||
return browserName;
|
||||
}
|
||||
|
||||
// Check for mobile devices.
|
||||
export function isMobile() {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
navigator.userAgent
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import analyticsService from '@razorpay/universe-utils/analytics';
|
||||
import analyticsService from '@razorpay/universe-utils/analytics';
|
||||
|
||||
export const initLumberjack = () => {
|
||||
analyticsService.init({
|
||||
lumberjackAppName: 'website',
|
||||
lumberjackApiKey: window.LUMBERJACK_API_KEY,
|
||||
lumberjackApiUrl: window.LUMBERJACK_API_URL,
|
||||
});
|
||||
analyticsService.init({
|
||||
lumberjackAppName: 'website',
|
||||
lumberjackApiKey: window.LUMBERJACK_API_KEY,
|
||||
lumberjackApiUrl: window.LUMBERJACK_API_URL,
|
||||
});
|
||||
};
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue