mirror of https://github.com/yb/uptime-status
Version 2.0.0
yb
parent
5a4546f5db
commit
063ac372ab
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
build
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "uptime-status",
|
||||
"version": "2.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.27.2",
|
||||
"dayjs": "^1.11.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-tooltip": "^4.2.21",
|
||||
"sass": "^1.53.0"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
window.Config = {
|
||||
|
||||
// 显示标题
|
||||
SiteName: 'Public Status',
|
||||
|
||||
// UptimeRobot Api Keys
|
||||
// 支持 Monitor-Specific 和 Read-Only
|
||||
ApiKeys: [
|
||||
'm784488775-dd1ad84b209c05f8e185c33e',
|
||||
'm784490063-7b5da437e7f1e0d67613714d',
|
||||
'm784497419-de55aa09902ccb3ab22d548a',
|
||||
'm784496436-71a4bf7b1e3bdf7756be131b',
|
||||
],
|
||||
|
||||
// 日志天数
|
||||
CountDays: 90,
|
||||
|
||||
// 是否显示检测站点的链接
|
||||
ShowLink: true,
|
||||
|
||||
// 导航栏菜单
|
||||
Navi: [
|
||||
{
|
||||
text: 'Homepage',
|
||||
url: 'https://status.org.cn/'
|
||||
},
|
||||
{
|
||||
text: 'GitHub',
|
||||
url: 'https://github.com/yb/uptime-status'
|
||||
},
|
||||
{
|
||||
text: 'Blog',
|
||||
url: 'https://abo.xyz/'
|
||||
},
|
||||
],
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
|
||||
<title>Uptime Status</title>
|
||||
<script src="./config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
$primary-color: #3bd672;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #131a26;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#app {
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: #121a26;
|
||||
padding: 30px 0 60px 0;
|
||||
color: $primary-color;
|
||||
width: 100%;
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.navi {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
a {
|
||||
margin-left: 20px;
|
||||
transition: color ease 150ms;
|
||||
}
|
||||
a:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#uptime {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
margin-top: -30px;
|
||||
margin-bottom: 40px;
|
||||
padding: 15px 0;
|
||||
overflow: hidden;
|
||||
.site {
|
||||
border-bottom: 1px solid #e6e7e8;
|
||||
margin: 0 30px;
|
||||
padding: 25px 0;
|
||||
.loading {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23D6D8D8' d='M19.52 42.712c9.897 2.916 20.285-2.743 23.201-12.64l-3.902-1.15c-2.281 7.742-10.407 12.17-18.15 9.888l-1.15 3.902z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.link {
|
||||
background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1036 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M600.818 697.6c-70.4 0-134.4-25.6-192-76.8-25.6-25.6-25.6-64-6.4-89.6 25.6-25.6 64-25.6 89.6-6.4 57.6 51.2 147.2 51.2 198.4 0l166.4-166.4c25.6-25.6 38.4-64 38.4-102.4 0-25.6-6.4-64-38.4-96-57.6-51.2-147.2-51.2-198.4 0l-64 76.8c-25.6 25.6-64 25.6-89.6 0-25.6-25.6-25.6-64 0-89.6l70.4-70.4c102.4-102.4 268.8-102.4 377.6 0 51.2 51.2 83.2 115.2 83.2 192 0 70.4-25.6 134.4-76.8 192l-166.4 166.4c-57.6 44.8-121.6 70.4-192 70.4z' fill='%238492A6'/%3E%3Cpath d='M274.418 1024c-70.4 0-134.4-25.6-192-76.8-108.8-96-108.8-262.4-6.4-377.6l166.4-166.4c108.8-102.4 275.2-102.4 377.6 0 25.6 25.6 25.6 64 0 89.6s-64 25.6-89.6 0c-51.2-51.2-140.8-51.2-198.4 0l-166.4 166.4c-44.8 51.2-64 140.8 0 198.4 57.6 51.2 147.2 51.2 198.4 0l70.4-70.4c25.6-25.6 64-25.6 89.6 0s25.6 64 0 89.6l-70.4 70.4c-44.8 51.2-108.8 76.8-179.2 76.8z' fill='%238492A6'/%3E%3C/svg%3E");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
text-indent: -99999px;
|
||||
margin-left: 8px;
|
||||
opacity: 0.6;
|
||||
transition: opacity ease 150ms;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
background-position: left center;
|
||||
background-size: 14px auto;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 20px;
|
||||
margin-left: auto;
|
||||
&.ok {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2l-8 8-4-4 1.5-1.5L4 7 10.5.5 12 2z' fill='%233bd672'/%3E%3C/svg%3E");
|
||||
color: $primary-color;
|
||||
}
|
||||
&.fail {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1064 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M205.09 959.373l327.82-327.83 327.827 327.83L981.31 838.79 653.49 510.97l327.82-327.814L860.737 62.58 532.91 390.4 205.09 62.581 84.527 183.155l327.82 327.814-327.82 327.82z' fill='%23DE484A'/%3E%3C/svg%3E");
|
||||
color: #de484a;
|
||||
}
|
||||
&.unknow {
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M521.216 164.864c161.792 0 199.68 149.504 106.496 242.688C523.264 512 441.344 532.48 441.344 749.568h158.72c1.024-123.904 62.464-182.272 125.952-239.616 58.368-53.248 120.832-99.328 120.832-206.848 0-171.008-159.744-292.864-325.632-292.864-187.392 0-344.064 132.096-344.064 316.416h158.72c0-92.16 92.16-161.792 185.344-161.792M441.344 855.04h158.72v158.72h-158.72V855.04z' fill='%23969ea8'/%3E%3C/svg%3E");
|
||||
color: #969ea8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0 10px 0;
|
||||
i {
|
||||
flex-grow: 1;
|
||||
margin: 0 1px;
|
||||
height: 25px;
|
||||
border-radius: 5px;
|
||||
transition: opacity ease 150ms;
|
||||
&.ok {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
&.down {
|
||||
background-color: #de484a;
|
||||
}
|
||||
&.none {
|
||||
background-color: #e5e8eb;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: #9aa2af;
|
||||
}
|
||||
.tooltip {
|
||||
padding: 6px 9px !important;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
}
|
||||
.site:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
color: #969ea8;
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
export function formatNumber(value) {
|
||||
return (Math.floor(value * 100) / 100).toString();
|
||||
}
|
||||
|
||||
export function formatDuration(seconds) {
|
||||
let s = parseInt(seconds);
|
||||
let m = 0;
|
||||
let h = 0;
|
||||
if (s >= 60) {
|
||||
m = parseInt(s / 60);
|
||||
s = parseInt(s % 60);
|
||||
if (m >= 60) {
|
||||
h = parseInt(m / 60);
|
||||
m = parseInt(m % 60);
|
||||
}
|
||||
}
|
||||
let text = `${s} 秒`;
|
||||
if (m > 0) text = `${m} 分 ${text}`;
|
||||
if (h > 0) text = `${h} 小时 ${text}`;
|
||||
return text;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import axios from 'axios';
|
||||
import dayjs from 'dayjs';
|
||||
import { formatNumber } from './helper';
|
||||
|
||||
export async function GetMonitors(apikey, days) {
|
||||
|
||||
const dates = [];
|
||||
const today = dayjs(new Date().setHours(0, 0, 0, 0));
|
||||
for (let d = 0; d < days; d++) {
|
||||
dates.push(today.subtract(d, 'day'));
|
||||
}
|
||||
|
||||
const ranges = dates.map((date) => `${date.unix()}_${date.add(1, 'day').unix()}`);
|
||||
const start = dates[dates.length - 1].unix();
|
||||
const end = dates[0].add(1, 'day').unix();
|
||||
ranges.push(`${start}_${end}`);
|
||||
|
||||
const postdata = {
|
||||
api_key: apikey,
|
||||
format: 'json',
|
||||
logs: 1,
|
||||
log_types: '1-2',
|
||||
logs_start_date: start,
|
||||
logs_end_date: end,
|
||||
custom_uptime_ranges: ranges.join('-'),
|
||||
};
|
||||
|
||||
const response = await axios.post('https://cors.status.org.cn/uptimerobot/v2/getMonitors', postdata, { timeout: 10000 });
|
||||
if (response.data.stat !== 'ok') throw response.data.error;
|
||||
return response.data.monitors.map((monitor) => {
|
||||
|
||||
const ranges = monitor.custom_uptime_ranges.split('-');
|
||||
const average = formatNumber(ranges.pop());
|
||||
const daily = [];
|
||||
const map = [];
|
||||
dates.forEach((date, index) => {
|
||||
map[date.format('YYYYMMDD')] = index;
|
||||
daily[index] = {
|
||||
date: date,
|
||||
uptime: formatNumber(ranges[index]),
|
||||
down: { times: 0, duration: 0 },
|
||||
}
|
||||
});
|
||||
|
||||
const total = monitor.logs.reduce((total, log) => {
|
||||
if (log.type === 1) {
|
||||
const date = dayjs.unix(log.datetime).format('YYYYMMDD');
|
||||
total.duration += log.duration;
|
||||
total.times += 1;
|
||||
daily[map[date]].down.duration += log.duration;
|
||||
daily[map[date]].down.times += 1;
|
||||
}
|
||||
return total;
|
||||
}, { times: 0, duration: 0 });
|
||||
|
||||
const result = {
|
||||
id: monitor.id,
|
||||
name: monitor.friendly_name,
|
||||
url: monitor.url,
|
||||
average: average,
|
||||
daily: daily,
|
||||
total: total,
|
||||
status: 'unknow',
|
||||
};
|
||||
|
||||
if (monitor.status === 2) result.status = 'ok';
|
||||
if (monitor.status === 9) result.status = 'down';
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { useMemo } from 'react';
|
||||
import Link from './link';
|
||||
import Header from './header';
|
||||
import UptimeRobot from './uptimerobot';
|
||||
import Package from '../../package.json';
|
||||
|
||||
function App() {
|
||||
|
||||
const apikeys = useMemo(() => {
|
||||
const { ApiKeys } = window.Config;
|
||||
if (Array.isArray(ApiKeys)) return ApiKeys;
|
||||
if (typeof ApiKeys === 'string') return [ApiKeys];
|
||||
return [];
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<div className='container'>
|
||||
<div id='uptime'>
|
||||
{apikeys.map((key) => (
|
||||
<UptimeRobot key={key} apikey={key} />
|
||||
))}
|
||||
</div>
|
||||
<div id='footer'>
|
||||
<p>基于 <Link to='https://uptimerobot.com/' text='UptimeRobot' /> 接口制作，检测频率 5 分钟</p>
|
||||
<p>© 2020 <Link to='https://status.org.cn/' text='STATUS.ORG.CN' />, Version {Package.version}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { useEffect } from 'react';
|
||||
import Link from './link';
|
||||
|
||||
function Header() {
|
||||
|
||||
useEffect(() => {
|
||||
document.title = window.Config.SiteName;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id='header'>
|
||||
<div className='container'>
|
||||
<h1 className='logo'>{window.Config.SiteName}</h1>
|
||||
<div className='navi'>
|
||||
{window.Config.Navi.map((item, index) => (
|
||||
<Link key={index} to={item.url} text={item.text} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
function Link(props = { text, to }) {
|
||||
return (
|
||||
<a {...props} href={props.to} target='_blank'>
|
||||
{props.text}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export default Link;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import ReactTooltip from 'react-tooltip';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { GetMonitors } from '../common/uptimerobot';
|
||||
import { formatDuration, formatNumber } from '../common/helper';
|
||||
import Link from './link';
|
||||
|
||||
function UptimeRobot({ apikey }) {
|
||||
|
||||
const status = {
|
||||
ok: '正常',
|
||||
down: '无法访问',
|
||||
unknow: '未知'
|
||||
};
|
||||
|
||||
const { CountDays, ShowLink } = window.Config;
|
||||
|
||||
const [monitors, setMonitors] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
GetMonitors(apikey, CountDays).then(setMonitors);
|
||||
}, [apikey, CountDays]);
|
||||
|
||||
if (monitors) return monitors.map((site) => (
|
||||
<div key={site.id} className='site'>
|
||||
<div className='meta'>
|
||||
<span className='name' dangerouslySetInnerHTML={{ __html: site.name }} />
|
||||
{ShowLink && <Link className='link' to={site.url} text={site.name} />}
|
||||
<span className={'status ' + site.status}>{status[site.status]}</span>
|
||||
</div>
|
||||
<div className='timeline'>
|
||||
{site.daily.map((data, index) => {
|
||||
let status = '';
|
||||
let text = data.date.format('YYYY-MM-DD ');
|
||||
if (data.uptime >= 100) {
|
||||
status = 'ok';
|
||||
text += `可用率 ${formatNumber(data.uptime)}%`;
|
||||
}
|
||||
else if (data.uptime <= 0 && data.down.times === 0) {
|
||||
status = 'none';
|
||||
text += '无数据';
|
||||
}
|
||||
else {
|
||||
status = 'down';
|
||||
text += `故障 ${data.down.times} 次，累计 ${formatDuration(data.down.duration)}，可用率 ${formatNumber(data.uptime)}%`;
|
||||
}
|
||||
return (<i key={index} className={status} data-tip={text} />)
|
||||
})}
|
||||
</div>
|
||||
<div className='summary'>
|
||||
<span>今天</span>
|
||||
<span>
|
||||
{site.total.times
|
||||
? `最近 ${CountDays} 天故障 ${site.total.times} 次，累计 ${formatDuration(site.total.duration)}，平均可用率 ${site.average}%`
|
||||
: `最近 ${CountDays} 天可用率 ${site.average}%`}
|
||||
</span>
|
||||
<span>{site.daily[site.daily.length - 1].date.format('YYYY-MM-DD')}</span>
|
||||
</div>
|
||||
<ReactTooltip className='tooltip' place='top' type='dark' effect='solid' />
|
||||
</div>
|
||||
));
|
||||
|
||||
else return (
|
||||
<div className='site'>
|
||||
<div className='loading' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UptimeRobot;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './components/app';
|
||||
import './app.scss';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('app'));
|
||||
root.render(<App />);
|
||||
// root.render(
|
||||
// <React.StrictMode>
|
||||
// <App />
|
||||
// </React.StrictMode>
|
||||
// );
|
||||
Loading…
Reference in New Issue