\n
\n );\n }\n}\n\nexport default withRouter(TopLevelStatus);\n","import * as React from \"react\"\n\nfunction SvgComponent(props) {\n return (\n \n
\n \n {title}\n {hasOngoingIncident && \n \n \n Read more →\n \n }\n {!hasOngoingIncident && !!topLevelStatus.lastIncidentDate && \n Last incident {getTimeAgo(topLevelStatus.lastIncidentDate)} →\n }\n {!hasOngoingIncident && !topLevelStatus.lastIncidentDate && No recent incident}\n
\n Last update: {formatDateAndTime(incident.lastUpdateDate)}
\n }\n {!this.isIncidentView() && hasOngoingIncident && \n \n this.buttonRef = buttonRef}\n onClick={this.toggle}\n className=\"subscribe\"\n style={{\n color: this.isOriginalCoverColor() ? null : this.props.coverColor,\n backgroundColor: this.isOriginalCoverColor() ? null : \"#FFF\",\n }}\n >Subscribe to updates\n {isOpened &&
\n \n )\n }\n}\n\nexport default Subscribe;\n","module.exports = __webpack_public_path__ + \"static/media/red-check.de170854.svg\";","import React, { Component } from 'react';\nimport Subscribe from '../Subscribe';\nimport TopLevelStatus from '../TopLevelStatus';\nimport './header.scss';\nimport { ReactComponent as ExternalLink } from './assets/external-link.svg';\n\nclass Header extends Component {\n constructor(props) {\n super(props);\n\n const baseUrl = !!process && !!process.env && process.env.REACT_APP_STAGE === 'dev'\n ? 'http://localhost:3200'\n : 'https://assets.hyperping.io';\n this.state = {\n baseUrl,\n }\n }\n\n hasSubscriberFeature = () => {\n const { statuspage } = this.props;\n\n return !!statuspage.features\n && !!statuspage.features.subscribers\n && statuspage.features.subscribers === true;\n }\n \n hasSubscriberPhoneFeature = () => {\n const { statuspage } = this.props;\n\n return !!statuspage.features\n && !!statuspage.features.subscribersPhone\n && statuspage.features.subscribersPhone === true;\n }\n \n hasSubscriberSlackFeature = () => {\n const { statuspage } = this.props;\n\n return !!statuspage.features\n && !!statuspage.features.subscribersSlack\n && statuspage.features.subscribersSlack === true;\n }\n\n isOriginalCoverColor = () => this.props.statuspage.coverColor.toLowerCase().includes('fafbfc');\n\n render() {\n const { statuspage, incident, topLevelStatus, hasLoaded } = this.props;\n const hasStatuspageLoaded = !!statuspage;\n\n return(\n this.dropdownRef = dropdownRef}>\n {(hasSubscriberPhoneFeature || hasSubscriberSlackFeature) && this.setState({ countryCode: option.value })}\n styles={{\n marginTop: '5em'\n }}\n />}\n {this.isSelected('phone') && }\n {this.isSelected('mail') && Subscribe via email}\n {this.isSelected('phone') && Subscribe via SMS}\n {this.isSelected('slack') && Subscribe via Slack}\n
}\n \n
}\n Subscribe to receive {this.getChannel()} everytime {this.props.statuspageName} publishes an update.\n {this.isSelected('mail') && }\n {this.isSelected('phone') && this.selectType('mail')}>\n 
\n
\n {hasSubscriberPhoneFeature && this.selectType('phone')}>\n 
\n
}\n {hasSubscriberSlackFeature && this.selectType('slack')}>\n
}\n \n {hasStatuspageLoaded &&
\n )\n }\n}\n\nexport default Header;\n","import * as React from \"react\"\n\nfunction SvgComponent(props) {\n return (\n \n \n {!!statuspage.image && !!statuspage.image.length &&\n 
\n }\n \n \n {!!statuspage.homepage && \n \n
}\n {hasLoaded && \n }\n \n \n {!!statuspage.homepage && \n {service.isGroup && \n {isExpanded &&
\n {!isExpanded && \n {(service.status === 'up' || service.status === 'available') && 
}\n {(service.status === 'incident' || service.status === 'partialoutage') && }\n {service.status === 'maintenance' &&
}\n \n);\n\nconst getIndex = (services, index) => {\n if (index === 0 && services.length > 1) {\n return 'first';\n } else if ((index + 1) === services.length) {\n return 'last';\n } else {\n return '';\n }\n}\n\nconst GetServices = ({ services, onClick, collapsed }) => (\n services.map((service, index) => (\n \n service.isGroup && onClick(index)} isExpanded={collapsed.includes(index)} /> \n {collapsed.includes(index) && service.isGroup && service.services.map(s =>
\n ))\n)\n\nconst WhiteBoxHeader = ({ services }) => {\n const [collapsed, setCollapsed] = React.useState([]);\n\n const toggleGroup = (index) => {\n const indexRemove = collapsed.findIndex(c => c === index);\n\n if (indexRemove === -1) {\n setCollapsed([...collapsed, index]);\n } else {\n const newCollapsed = collapsed;\n newCollapsed.splice(indexRemove, 1);\n setCollapsed([...newCollapsed]);\n }\n }\n\n return(\n
\n )\n }\n\n render() {\n const { data, labels } = this.props;\n const dataset = data.map((row, index) => {\n if (data.length === index + 1) {\n if (labels === 'day' && row.skeleton === true) {\n row.uptime = data[index - 1].uptime;\n row.elapsedTime = data[index - 1].elapsedTime;\n }\n }\n if (labels === 'hours') {\n row.time = getHourAndMinute(row.date);\n }\n return row;\n });\n\n return(\n {(this.props.labels === 'hours') ? getTimeLabel(date) : getHumanDate(hour)}
\n {!!payload.payload.length && {valueName} {payload.payload[0].value}{valueFormat}
}\n \n {graph.hasUptime && (
;\n\n return (\n\n {\"Artboard\"} \n \n {\"Artboard\"} \n \n \n \n \n \n )\n}\n\nexport default SvgComponent\n","import React from 'react';\nimport { Link, withRouter } from 'react-router-dom';\nimport * as moment from 'moment-timezone';\n\nimport {\n getEstimatedDuration,\n getMaintenanceStatus,\n formatText,\n getDateRange } from '../utils/index.js';\n\nimport './styles.scss';\nimport Cone from '../TopLevelStatus/assets/cone'\nimport NotOk from '../TopLevelStatus/assets/notok-empty'\nimport Wrench from '../TopLevelStatus/assets/wrench';\n\nconst GetSpan = ({ children }) => ({children});\n\nconst isJSON = (str) => {\n try {\n JSON.parse(str);\n } catch (e) {\n return false;\n }\n return true;\n}\n\nconst getText = (text) => {\n if (isJSON(text)) {\n text = JSON.parse(text);\n if (!!text.en) return text.en;\n const [first] = Object.keys(text)\n return first;\n }\n return text;\n}\n\nclass Incidents extends React.Component {\n getBackLink = () => {\n const { isIncidentPage } = this.props;\n const backlink = isIncidentPage ? `/history` : '/';\n\n return backlink;\n }\n\n goToIncidentPage(incidentId) {\n if (this.props.isIncidentPage) {\n return;\n }\n\n const { pathname } = this.props.location;\n\n if (pathname.includes('/history')) {\n this.props.history.push(`${pathname}/${incidentId}`)\n }\n }\n\n capitalize(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n }\n\n render() {\n let { incidents, statuspage } = this.props;\n const { isIncidentPage } = this.props;\n const Tag = isIncidentPage ? GetSpan : Link;\n\n return(\n \n \n \n \n);\n\nReactDOM.render(routing, document.getElementById('root'));\nunregister();\n","import React from 'react';\n\nimport './styles.scss';\n\nclass Notification extends React.Component {\n componentDidMount() {\n setTimeout(() => {\n this.props.closeNotification();\n }, 4500);\n }\n\n render() {\n return(\n \n {\"Artboard\"} \n \n \n \n \n \n )\n}\n\nexport default SvgComponent\n","import * as React from 'react';\nimport * as moment from 'moment-timezone';\n\nexport const formatDate = (rawDate) => {\n const date = new Date(rawDate);\n const formatted = moment(date).format('DD MMM YYYY');\n return formatted;\n}\n\nexport const formatDateAndTime = (rawDate) => {\n const date = new Date(rawDate);\n const formatted = moment(date).format('D MMM YYYY H:mm A');\n return formatted;\n}\n\nexport const getHourAndMinute = (rawDate) => {\n // 20:50\n const date = new Date(rawDate);\n const formatted = moment(date).format('HH:mm');\n return formatted;\n}\n\nexport const getTimeAgo = rawDate => moment(new Date(rawDate), 'YYYYMMDD').fromNow();\n\nexport const formatText = text => !!text && text.split('\\n').join('
');\n\nconst areDatesOnSameMonth = (latestDateRaw, oldestDateRaw) => {\n const latestDate = new Date(latestDateRaw);\n const oldestDate = new Date(oldestDateRaw);\n\n const formattedLatestDate = moment(latestDate).format('MMM');\n const formattedOldestDate = moment(oldestDate).format('MMM');\n return formattedLatestDate === formattedOldestDate;\n}\n\nconst areDatesOnSameDay = (latestDateRaw, oldestDateRaw) => {\n const latestDate = new Date(latestDateRaw);\n const oldestDate = new Date(oldestDateRaw);\n\n const latestDay = moment(latestDate).format('DD');\n const oldestDay = moment(oldestDate).format('DD');\n return { latestDay, oldestDay };\n}\n\nexport const getDateRange = (incident) => {\n const { updates } = incident;\n\n const latest = updates[0];\n if (!latest) {\n return moment(incident.date).format('DD MMM YYYY');\n }\n const oldest = updates[updates.length - 1];\n const aresameMonth = areDatesOnSameMonth(latest.UTCTime, oldest.UTCTime);\n const { latestDay, oldestDay } = areDatesOnSameDay(latest.UTCTime, oldest.UTCTime);\n if (aresameMonth && (latestDay === oldestDay)) {\n return formatDate(latest.UTCTime);\n }\n\n if (aresameMonth && (latestDay !== oldestDay)) {\n return `${oldestDay} - ${latestDay} ${moment(latest.UTCTime).format('MMM YYYY')}`;\n }\n\n if (!aresameMonth) {\n return `${oldestDay} ${moment(new Date(oldest.UTCTime)).format('MMM')} - ${latestDay} ${moment(new Date(latest.UTCTime)).format('MMM YYYY')}`;\n }\n}\n\nexport const isWithin24Hours = (dateRaw) => {\n const now = new Date();\n const hours = Math.abs(dateRaw - now) / 36e5;\n return hours <= 24;\n}\n\nexport const isUpcoming = (dateRaw) => {\n const now = new Date();\n return moment(dateRaw).isAfter(now);\n}\n\nconst getTimezone = () => moment.tz(moment.tz.guess()).format('z');\n\nconst getHourGrammar = (hour) => {\n if (hour > 1) {\n return ' hours';\n } else {\n return ' hour'\n }\n}\n\nconst getMinuteGrammar = (minute) => {\n if (minute > 1) {\n return 'minutes';\n } else {\n return 'minute'\n }\n}\n\nexport const getEstimatedDuration = (maintenance) => {\n const startDate = moment(maintenance.date);\n const startHumanDate = moment(maintenance.date).format('DD MMM h:mm A');\n const endDate = moment(maintenance.endDate);\n const endHumanDate = moment(maintenance.endDate).format('DD MMM h:mm A');\n\n const duration = moment.duration(endDate.diff(startDate));\n const hours = parseInt(duration.asHours());\n const minutes = parseInt(duration.asMinutes()) % 60;\n const timezone = getTimezone();\n\n const hasMinutes = minutes !== 0;\n const hasHours = hours !== 0;\n let humanDuration = `${hasHours ? (hours + getHourGrammar(hours)) : ''}`;\n if (hasHours && hasMinutes) {\n humanDuration += ` and ${minutes} ${getMinuteGrammar(minutes)}`\n } else if (hasMinutes) {\n humanDuration += `${minutes} ${getMinuteGrammar(minutes)}`\n }\n \n return (\n <>\n Estimated duration: {humanDuration}
\n{startHumanDate} {timezone} - {endHumanDate} {timezone}\n \n );\n}\n\nexport const getMaintenanceStatus = (startDate, endDate, index) => {\n if (index !== 0) {\n return;\n }\n\n const date = new Date();\n if (moment(date).isBetween(startDate, endDate)) {\n return 'In Progress';\n } else if (moment(date).isBefore(startDate)) {\n return 'Upcoming';\n } else if (moment(date).isAfter(endDate)) {\n return 'Completed'\n }\n}\n\nconst { hostname, protocol } = window.location;\n\nconst getProtocol = () => {\n // Only *.hyperping.io domains can be accessible without https\n // status.* domains are being redirected to https\n if (hostname.includes('.hyperping.io') && protocol === 'http:') {\n return 'https://';\n }\n if (!!process && !!process.env && process.env.REACT_APP_STAGE === 'dev') {\n return 'http://';\n }\n return 'https://';\n}\n\nconst devUrl = window.location.hostname;\n\nexport const getBaseUrl = () => !!process && !!process.env && process.env.REACT_APP_STAGE === 'dev'\n ? `http://${devUrl}:3011`\n : `${getProtocol()}api.hyperping.io`;\n\nexport const getHostname = () => process.env.REACT_APP_STAGE === 'dev' ? encodeURIComponent(`http://${devUrl}:3011`) : window.location.hostname;\n\nconst getIcon = (indicator) => {\n if (indicator === 'up') return '/static/media/check-ok.svg';\n if (indicator === 'down' || indicator === 'outage') return '/static/media/incident.svg';\n if (indicator === 'maintenance') return '/static/media/gear.svg';\n if (indicator === 'partialoutage') return '/static/media/incident.svg';\n if (indicator === 'incident') return '/static/media/incident.svg';\n}\n\nexport const setFavicon = (statuspage) => {\n if (!statuspage) {\n return;\n }\n const { favicon } = statuspage;\n if (!!statuspage && !!statuspage.name) document.title = statuspage.name + ' - System status';\n \n if (!!favicon && favicon.length) {\n document.querySelector(\"link[rel='shortcut icon']\").href = favicon;\n } else if (!!statuspage && !!statuspage.topLevelStatus) {\n document.querySelector(\"link[rel='shortcut icon']\").href = getIcon(statuspage.topLevelStatus.indicator);\n }\n}\n"],"sourceRoot":""}
\n
\n );\n }\n\n render() {\n const { selectedTimeline } = this.props;\n\n return(\n !!this.state.color.length && this.getStats(selectedTimeline)\n );\n }\n}\n\nexport default WhiteBoxStats;\n","import React, { Component } from 'react';\n\nclass TimelineSelector extends Component {\n constructor(props) {\n super(props);\n\n const items = props.items;\n items.reverse();\n\n this.state = {\n items\n }\n }\n render() {\n const { selected, onClick, hasSnapshots } = this.props;\n\n return(\n \n
\n {graph.name} Uptime
\n {graph.uptime}%
\n }\n
)\n }\n\n {graph.hasResponseTime && (\n
)\n }\n \n
\n {graph.name} Response time
\n {graph.responseTime}ms
\n \n {this.state.items.map(item => {\n if (!hasSnapshots && item.value > 1) {\n return null;\n }\n return(\n onClick(item.value)}\n >\n {item.name}\n )\n }\n )}\n
\n )\n }\n}\n\nexport default TimelineSelector;\n","import React, { Component } from 'react';\nimport './styles.scss';\nimport Notification from '../Notification';\nimport { getBaseUrl } from '../utils';\n\nconst baseUrl = getBaseUrl();\n\nclass ProtectedPage extends Component {\n constructor(props) {\n super(props);\n this.state = {\n password: '',\n wrongPassword: false,\n image: '',\n showNotification: false,\n isLoading: false\n }\n }\n\n componentDidMount() {\n this.setFavicon();\n this.setTabName();\n }\n\n setFavicon() {\n const { favicon } = this.props.data;\n\n if (!!favicon) {\n document.querySelector(\"link[rel='shortcut icon']\").href = favicon;\n }\n }\n\n setTabName() {\n document.title = (this.props.data.name || 'System') + ' Status';\n }\n\n onChangePassword = (e) => {\n this.setState({ password: e.target.value });\n }\n\n submit = (e) => {\n e.preventDefault();\n this.setState({ isLoading: true });\n fetch(`${baseUrl}/v1/public/statuspage/authenticate`, {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n credentials: 'include',\n body: JSON.stringify({\n password: this.state.password,\n hostname: window.location.hostname\n })\n }).then(response => response.json())\n .then(response => {\n this.setState({ isLoading: false });\n if (response.message === 'Wrong password') {\n this.setState({ showNotification: true });\n } else {\n window.location.reload();\n }\n });\n }\n \n closeNotification = () => {\n this.setState({ showNotification: false });\n }\n\n render() {\n const { password, isLoading } = this.state;\n const { image, name } = this.props.data;\n\n return(\n \n \n {this.state.showNotification &&\n
\n );\n }\n}\n\nexport default ProtectedPage;\n","import React, { Component } from 'react';\n\nclass PoweredBy extends Component {\n getHostname() {\n const { hostname } = window.location;\n return hostname;\n }\n\n render() {\n const hostname = this.getHostname();\n\n if (hostname === 'status.mysocket.io') return <>;\n\n return (\n
\n Powered by Hyperping\n
\n )\n }\n}\n\nexport default PoweredBy;","import { getBaseUrl } from '../utils';\n\nconst fetchWrapper = (endpoint, method = 'GET', params) => {\n const urlParams = { hostname: window.location.hostname, ...params };\n return fetch(getBaseUrl() + endpoint + '?' + new URLSearchParams(urlParams), {\n method,\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n },\n credentials: 'include'\n })\n .then((response) => response.json());\n}\n\nconst getIncidents = () => fetchWrapper('/v2/statuspages/incidents');\nconst getIncident = (uuid) => fetchWrapper('/v2/statuspages/incident', 'GET', { uuid });\nconst getSnapshots = () => fetchWrapper('/v2/services-snapshots');\nconst getPings = () => fetchWrapper('/v2/services-pings');\nconst getStatuspage = () => fetchWrapper('/v2/services');\n\nexport default {\n getIncidents,\n getIncident,\n getSnapshots,\n getPings,\n getStatuspage\n}\n","import React, { Component } from 'react';\nimport Header from './Header';\nimport WhiteBoxHeader from './WhiteBoxHeader';\nimport WhiteBoxStats from './WhiteBoxStats';\nimport TimelineSelector from './TimelineSelector';\nimport Notification from './Notification';\nimport ProtectedPage from './ProtectedPage';\nimport './App.scss';\nimport { getBaseUrl, setFavicon } from './utils';\nimport { Link, withRouter } from 'react-router-dom';\nimport PoweredBy from './PoweredBy';\nimport API from './API';\n\nconst baseUrl = getBaseUrl();\n \nclass App extends Component {\n constructor(props) {\n super(props);\n\n let showNotification = false;\n let notificationMessage = '';\n if (!!this.props.location.search) {\n const { search } = this.props.location;\n showNotification = search.includes('confirm=true') || search.includes('unsubscribe=true');\n \n if (search.includes('confirm=true')) {\n notificationMessage = 'You successfully confirmed your subscription to this status page';\n } else if (search.includes('unsubscribe=true')) {\n notificationMessage = 'You successfully unsubscribed to this status page';\n }\n }\n\n this.state = {\n statusPageId: null,\n environment: '',\n loading: false,\n services: [],\n statuspage: {},\n timelineItems: [\n { value: 1, name: '24 hours'},\n { value: 8, name: '1 week'},\n { value: 31, name: '1 month'},\n { value: 91, name: '3 months'},\n { value: 365, name: '12 months'},\n ],\n selectedTimeline: 1,\n baseUrl,\n color: '',\n showNotification,\n notificationMessage,\n protected: false,\n protectedPageData: {},\n incidents: [],\n incident: {},\n topLevelStatus: {},\n hasLoaded: false,\n hasLoadedPings: false,\n hasLoadedSnapshots: false\n };\n }\n\n componentDidMount() {\n this.fetchStatuspage(this.props.history.location.response);\n }\n\n setTabName() {\n document.title = (this.state.statuspage.name || 'System') + ' Status';\n }\n\n fetchSnapshots() {\n if (this.state.protected) return;\n API.getSnapshots()\n .then((response) => {\n const services = this.state.services;\n\n response.forEach(service => {\n if (!!service && !!service.alias && service.snapshots && service.snapshots.length > 0) {\n const index = services.findIndex(s => s.alias === service.alias);\n if (index !== -1) {\n if (!!services[index]) {\n services[index].snapshots = service.snapshots;\n }\n } else {\n let groupIndex = -1;\n let serviceIndex = -1;\n services.forEach((s, i) => {\n if (s.isGroup) {\n const indexGroup = s.services.findIndex(sr => sr.alias === service.alias);\n if (indexGroup !== -1) {\n groupIndex = indexGroup;\n serviceIndex = i;\n }\n }\n });\n if (!!services[serviceIndex]) {\n services[serviceIndex].services[groupIndex].snapshots = service.snapshots;\n }\n }\n }\n if (!service.snapshots) {\n service.snapshots = [];\n }\n });\n this.setState({ services, hasLoadedSnapshots: true });\n });\n }\n\n fetchPings() {\n if (this.state.protected) return;\n API.getPings()\n .then((response) => {\n if (response.message === 'Unauthorized') {\n this.setState({ protected: true, protectedPageData: response.data });\n return Promise.reject();\n }\n const services = this.state.services;\n\n response.forEach(service => {\n if (service.pings.length > 0) {\n const index = this.state.services.findIndex(s => s.alias === service.alias);\n if (index !== -1) {\n if (!!services[index] && !!services[index].pings) {\n services[index].pings = service.pings;\n }\n } else {\n let groupIndex = -1;\n let serviceIndex = -1;\n services.forEach((s, i) => {\n if (s.isGroup) {\n const indexGroup = s.services.findIndex(sr => sr.alias === service.alias);\n if (indexGroup !== -1) {\n groupIndex = indexGroup;\n serviceIndex = i;\n }\n }\n });\n if (!!services[serviceIndex]) {\n services[serviceIndex].services[groupIndex].pings = service.pings;\n }\n }\n }\n });\n this.setState({ services, hasLoadedPings: true });\n this.fetchSnapshots();\n });\n }\n\n fetchStatuspage(response) {\n if (!!response) {\n setFavicon(response);\n this.setState({\n services: response.services,\n incident: response.ongoingIncident,\n statuspage: response.statuspage,\n topLevelStatus: response.topLevelStatus,\n hasLoaded: true\n });\n this.fetchPings();\n } else {\n this.setState({ loading: true });\n API.getStatuspage()\n .then((response) => {\n setFavicon(response);\n if (response.message === 'Unauthorized') {\n this.setState({ protected: true, protectedPageData: response.data });\n return Promise.reject();\n }\n return response;\n })\n .then((response) => {\n this.setState({\n services: response.services,\n incident: response.ongoingIncident,\n statuspage: response.statuspage,\n topLevelStatus: response.topLevelStatus,\n hasLoaded: true\n }, () => setFavicon(response.statuspage));\n this.fetchPings();\n });\n }\n }\n\n handleTimelineSelector = (value) => {\n const selectedTimeline = parseInt(value, 10);\n this.setState({ selectedTimeline });\n }\n\n hasSnapshotsLoaded() {\n const services = this.state.services;\n const servicesWithGraphs = services.filter(service => service.isResponseTimeSelected || service.isUptimeSelected);\n const hasSnapshots = servicesWithGraphs.every(service => !!service.snapshots);\n if (!hasSnapshots) {\n return false;\n }\n const hasLoaded = servicesWithGraphs.every(service => !!service.snapshots.length);\n return hasLoaded;\n }\n\n closeNotification = () => {\n this.setState({ showNotification: false });\n }\n\n hasAtLeastOneMetric = () => {\n let hasAtLeastOne = false;\n\n for (const service of this.state.services) {\n if (service.showUptime || service.showResponseTime) {\n hasAtLeastOne = true;\n }\n\n if (!!service.services && service.services.length) {\n for (const s of service.services) {\n if (s.showUptime || s.showResponseTime) {\n hasAtLeastOne = true;\n }\n }\n }\n }\n\n return hasAtLeastOne;\n }\n\n render() {\n if (this.state.protected) {\n return (\n \n {this.state.showNotification && this.handleTimelineSelector(event)}\n selected={this.state.selectedTimeline}\n hasSnapshots={this.hasSnapshotsLoaded()}\n />\n }\n\n {this.state.hasLoadedPings && !!this.state.services.length && !!statuspage &&\n
\n );\n }\n}\n\nexport default withRouter(App);\n","import * as React from \"react\"\n\nfunction SvgComponent(props) {\n return (\n See incident history →
}\n\n {!!this.state.services.length &&\n \n
\n }\n \n {!isIncidentPage && History}\n {isIncidentPage === true && Updates}\n \n ← Back\n \n \n\n {incidents.length <= 0 && \n \n ))}\n
\n );\n }\n}\n\nexport default withRouter(Incidents);\n","import React from 'react';\nimport IncidentsComponent from './Incidents/index.jsx';\nimport ProtectedPage from './ProtectedPage';\nimport { withRouter } from 'react-router-dom';\nimport Header from './Header';\nimport PoweredBy from './PoweredBy';\nimport './App.scss';\nimport API from './API';\nimport { setFavicon } from './utils/index.js';\n\nclass Incidents extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n incident: props.history.location.incident,\n incidents: [],\n statuspage: props.history.location.statuspage,\n protected: false,\n protectedPageData: {},\n topLevelStatus: props.history.location.topLevelStatus,\n response: {},\n hasLoaded: !!props.history.location.incident\n }\n }\n\n componentDidMount() {\n this.fetchStatuspage();\n }\n\n fetchStatuspage = () => {\n API.getStatuspage()\n .then((response) => {\n if (response.message === 'Unauthorized') {\n this.setState({ protected: true, protectedPageData: response.data });\n return Promise.reject();\n }\n return response;\n })\n .then((response) => {\n this.setState({\n incident: response.ongoingIncident,\n statuspage: response.statuspage,\n topLevelStatus: response.topLevelStatus,\n hasLoaded: true,\n response\n }, () => setFavicon(response.statuspage));\n });\n\n API.getIncidents()\n .then((response) => {\n if (response.message === 'Unauthorized') {\n this.setState({ protected: true, protectedPageData: response.data });\n return Promise.reject();\n }\n return response;\n })\n .then((incidents) => {\n this.setState({ incidents });\n });\n }\n\n setTabName() {\n document.title = (this.state.statuspage.name || 'System') + ' Incidents';\n }\n\n hasFavicon() {\n return !!this.state.statuspage.favicon && this.state.statuspage.favicon.length\n }\n\n render() {\n if (this.state.protected) {\n return (\n No incidents reported.
}\n {incidents.map((incident, index) => (\n \n
\n {getDateRange(incident)}
\n \n
\n {!!incident.affectedComponents && !!incident.affectedComponents.length > 0 && \n {!!incident.type && incident.type === 'incident' &&
\n {(incident.type === 'maintenance') && {getEstimatedDuration(incident)}
}\n {incident.updates.map((update, index) => (\n \n {!!update && !!update.text &&\n <>\n
\n ))}\n \n {incident.type === 'maintenance' ? getMaintenanceStatus(incident.date, incident.endDate, index) : update.type}
\n \n \n }\n {moment(update.UTCTime).format('MMM DD, h:mm A')}
\n \n Affected services: {incident.affectedComponents.map((c, index) => ({c.name}))}\n
}\n \n
\n );\n }\n}\n\nexport default withRouter(Incidents);\n","import React from 'react';\nimport IncidentsComponent from './Incidents/index.jsx';\nimport Header from './Header';\nimport './App.scss';\nimport ProtectedPage from './ProtectedPage';\nimport { setFavicon } from './utils';\nimport { withRouter } from 'react-router-dom';\nimport PoweredBy from './PoweredBy';\nimport API from './API';\n\n\nclass Incident extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n incident: props.history.location.incident,\n statuspage: props.history.location.statuspage,\n incidentId: props.match.params.incidentId,\n protected: false,\n protectedPageData: {}\n }\n }\n\n componentDidMount() {\n this.fetchStatuspage();\n this.fetchIncident();\n }\n\n fetchStatuspage = () => {\n if (!!this.state.statuspage) {\n this.setTabName();\n return null;\n }\n\n API.getStatuspage()\n .then((response) => {\n if (response.message === 'Unauthorized') {\n this.setState({ protected: true, protectedPageData: response.data });\n return Promise.reject();\n }\n return response;\n })\n .then((response) => {\n this.setState({\n statuspage: response.statuspage,\n response\n }, () => setFavicon(response.statuspage));\n });\n }\n\n\n fetchIncident() {\n if (!!this.state.incident) {\n return;\n }\n\n API.getIncident(this.state.incidentId)\n .then((response) => {\n if (response.message === 'Unauthorized') {\n this.setState({ protected: true, protectedPageData: response.data });\n return Promise.reject();\n }\n return response;\n })\n .then((response) => {\n this.setState({ incident: response.incident, });\n });\n }\n\n setTabName() {\n document.title = this.state.statuspage.name + ' Incidents';\n }\n\n hasFavicon() {\n return !!this.state.statuspage.favicon && this.state.statuspage.favicon.length;\n }\n\n render() {\n if (this.state.protected) {\n return (\n
\n );\n }\n}\n\nexport default withRouter(Incident);\n","import React from 'react';\nimport { Redirect } from 'react-router-dom';\nimport { getBaseUrl } from './utils';\nimport './App.scss';\n\nconst baseUrl = getBaseUrl();\n\nclass ConfirmSubscription extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n token: null,\n isConfirmed: false,\n redirect: false\n }\n }\n\n componentDidMount() {\n const { token } = this.props.match.params;\n\n this.setState({ token }, () => {\n this.confirmSusbcription();\n });\n }\n\n confirmSusbcription = () => {\n fetch(`${baseUrl}/v1/confirm-subscription?token=${this.state.token}`, {\n method: 'GET',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n credentials: 'include'\n })\n .then(response => response.json())\n .then((response) => {\n this.setState({ isConfirmed: true, redirect: true });\n });\n }\n\n renderRedirect = () => {\n const { pathname } = this.props.location;\n let pathnameDestination = '/';\n if (pathname.includes('/public/')) {\n pathnameDestination = pathname.split('/confirm/')[0];\n }\n if (this.state.redirect) {\n return \n
\n \n {this.renderRedirect()}\n {!this.isConfirmed && Confirming your subscription}\n
\n );\n }\n}\n\nexport default ConfirmSubscription;\n","import React from 'react';\nimport { Redirect } from 'react-router-dom';\nimport { getBaseUrl } from './utils';\nimport './App.scss';\n\nconst baseUrl = getBaseUrl();\n\nclass Unsubscribe extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n token: null,\n isUnsubscribed: false,\n redirect: false\n }\n }\n\n componentDidMount() {\n const { token } = this.props.match.params;\n\n this.setState({ token }, () => {\n this.confirmSusbcription();\n });\n }\n\n confirmSusbcription = () => {\n fetch(`${baseUrl}/v1/unsubscribe?token=${this.state.token}`)\n .then(response => response.json())\n .then((response) => {\n this.setState({ isUnsubscribed: true, redirect: true });\n });\n }\n\n renderRedirect = () => {\n const { pathname } = this.props.location;\n let pathnameDestination = '/';\n if (pathname.includes('/public/')) {\n pathnameDestination = pathname.split('/unsubscribe/')[0];\n }\n if (this.state.redirect) {\n return \n {this.renderRedirect()}\n {!this.isUnsubscribed && Unsubscribing}\n
\n );\n }\n}\n\nexport default Unsubscribe;\n","// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register() {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://goo.gl/SC7cgQ'\n );\n });\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Route, BrowserRouter as Router, Switch } from 'react-router-dom';\nimport './index.scss';\nimport App from './App';\nimport Incidents from './IncidentsPage';\nimport Incident from './IncidentPage';\nimport ConfirmSubscription from './ConfirmSubscriptionPage';\nimport Unsubscribe from './UnsubscribePage';\nimport { unregister } from './registerServiceWorker';\n\nconst routing = (\n {this.props.message}
\n );\n }\n}\n\nexport default Notification;\n","import * as React from \"react\"\n\nfunction SvgComponent(props) {\n return (\n ');\n\nconst areDatesOnSameMonth = (latestDateRaw, oldestDateRaw) => {\n const latestDate = new Date(latestDateRaw);\n const oldestDate = new Date(oldestDateRaw);\n\n const formattedLatestDate = moment(latestDate).format('MMM');\n const formattedOldestDate = moment(oldestDate).format('MMM');\n return formattedLatestDate === formattedOldestDate;\n}\n\nconst areDatesOnSameDay = (latestDateRaw, oldestDateRaw) => {\n const latestDate = new Date(latestDateRaw);\n const oldestDate = new Date(oldestDateRaw);\n\n const latestDay = moment(latestDate).format('DD');\n const oldestDay = moment(oldestDate).format('DD');\n return { latestDay, oldestDay };\n}\n\nexport const getDateRange = (incident) => {\n const { updates } = incident;\n\n const latest = updates[0];\n if (!latest) {\n return moment(incident.date).format('DD MMM YYYY');\n }\n const oldest = updates[updates.length - 1];\n const aresameMonth = areDatesOnSameMonth(latest.UTCTime, oldest.UTCTime);\n const { latestDay, oldestDay } = areDatesOnSameDay(latest.UTCTime, oldest.UTCTime);\n if (aresameMonth && (latestDay === oldestDay)) {\n return formatDate(latest.UTCTime);\n }\n\n if (aresameMonth && (latestDay !== oldestDay)) {\n return `${oldestDay} - ${latestDay} ${moment(latest.UTCTime).format('MMM YYYY')}`;\n }\n\n if (!aresameMonth) {\n return `${oldestDay} ${moment(new Date(oldest.UTCTime)).format('MMM')} - ${latestDay} ${moment(new Date(latest.UTCTime)).format('MMM YYYY')}`;\n }\n}\n\nexport const isWithin24Hours = (dateRaw) => {\n const now = new Date();\n const hours = Math.abs(dateRaw - now) / 36e5;\n return hours <= 24;\n}\n\nexport const isUpcoming = (dateRaw) => {\n const now = new Date();\n return moment(dateRaw).isAfter(now);\n}\n\nconst getTimezone = () => moment.tz(moment.tz.guess()).format('z');\n\nconst getHourGrammar = (hour) => {\n if (hour > 1) {\n return ' hours';\n } else {\n return ' hour'\n }\n}\n\nconst getMinuteGrammar = (minute) => {\n if (minute > 1) {\n return 'minutes';\n } else {\n return 'minute'\n }\n}\n\nexport const getEstimatedDuration = (maintenance) => {\n const startDate = moment(maintenance.date);\n const startHumanDate = moment(maintenance.date).format('DD MMM h:mm A');\n const endDate = moment(maintenance.endDate);\n const endHumanDate = moment(maintenance.endDate).format('DD MMM h:mm A');\n\n const duration = moment.duration(endDate.diff(startDate));\n const hours = parseInt(duration.asHours());\n const minutes = parseInt(duration.asMinutes()) % 60;\n const timezone = getTimezone();\n\n const hasMinutes = minutes !== 0;\n const hasHours = hours !== 0;\n let humanDuration = `${hasHours ? (hours + getHourGrammar(hours)) : ''}`;\n if (hasHours && hasMinutes) {\n humanDuration += ` and ${minutes} ${getMinuteGrammar(minutes)}`\n } else if (hasMinutes) {\n humanDuration += `${minutes} ${getMinuteGrammar(minutes)}`\n }\n \n return (\n <>\n Estimated duration: {humanDuration}
\n{startHumanDate} {timezone} - {endHumanDate} {timezone}\n \n );\n}\n\nexport const getMaintenanceStatus = (startDate, endDate, index) => {\n if (index !== 0) {\n return;\n }\n\n const date = new Date();\n if (moment(date).isBetween(startDate, endDate)) {\n return 'In Progress';\n } else if (moment(date).isBefore(startDate)) {\n return 'Upcoming';\n } else if (moment(date).isAfter(endDate)) {\n return 'Completed'\n }\n}\n\nconst { hostname, protocol } = window.location;\n\nconst getProtocol = () => {\n // Only *.hyperping.io domains can be accessible without https\n // status.* domains are being redirected to https\n if (hostname.includes('.hyperping.io') && protocol === 'http:') {\n return 'https://';\n }\n if (!!process && !!process.env && process.env.REACT_APP_STAGE === 'dev') {\n return 'http://';\n }\n return 'https://';\n}\n\nconst devUrl = window.location.hostname;\n\nexport const getBaseUrl = () => !!process && !!process.env && process.env.REACT_APP_STAGE === 'dev'\n ? `http://${devUrl}:3011`\n : `${getProtocol()}api.hyperping.io`;\n\nexport const getHostname = () => process.env.REACT_APP_STAGE === 'dev' ? encodeURIComponent(`http://${devUrl}:3011`) : window.location.hostname;\n\nconst getIcon = (indicator) => {\n if (indicator === 'up') return '/static/media/check-ok.svg';\n if (indicator === 'down' || indicator === 'outage') return '/static/media/incident.svg';\n if (indicator === 'maintenance') return '/static/media/gear.svg';\n if (indicator === 'partialoutage') return '/static/media/incident.svg';\n if (indicator === 'incident') return '/static/media/incident.svg';\n}\n\nexport const setFavicon = (statuspage) => {\n if (!statuspage) {\n return;\n }\n const { favicon } = statuspage;\n if (!!statuspage && !!statuspage.name) document.title = statuspage.name + ' - System status';\n \n if (!!favicon && favicon.length) {\n document.querySelector(\"link[rel='shortcut icon']\").href = favicon;\n } else if (!!statuspage && !!statuspage.topLevelStatus) {\n document.querySelector(\"link[rel='shortcut icon']\").href = getIcon(statuspage.topLevelStatus.indicator);\n }\n}\n"],"sourceRoot":""}