Update
This commit is contained in:
qikaile
commit
aec8744b27
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
build
|
||||||
39
README.md
Normal file
39
README.md
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
# 站点状态监控
|
||||||
|
- 本项目可以直接部署，快速上线，纯静态无需服务器。基于 UptimeRobot api 时时监控主机、网站、端口等在线状态；
|
||||||
|
|
||||||
|
## 在线体验：
|
||||||
|
美化版：<https://tjys.vercel.app>
|
||||||
|
|
||||||
|
|
||||||
|
## 如何复用这个项目？
|
||||||
|
1- fork 一份到你的 github 账号下；
|
||||||
|
2- 修改 `config.js` 文件：
|
||||||
|
（1） `SiteName`: 要显示的网站名称
|
||||||
|
（2）修改配置文件：`ApiKeys`: 从 UptimeRobot 获取的 API Key，支持 Monitor-Specific API Keys 和 Read-Only API Key，**强烈建议使用 Read-Only API key**
|
||||||
|
|
||||||
|
<https://uptimerobot.com/dashboard#mySettings> 如下图；
|
||||||
|
|
||||||
|
（3）`CountDays`: 要显示的日志天数，建议 60 或 90，显示效果比较好
|
||||||
|
（4）`ShowLink`: 是否显示站点链接
|
||||||
|
（5） `Navi`: 导航栏的菜单列表
|
||||||
|
3- 绑定网站域名，恭喜部署完成！
|
||||||
|
可以使用Vercel部署网站，登录vercel官网注册账号并绑定Github,导入新项，选择导入Git存储库，选择个人账号，点击部署。
|
||||||
|
|
||||||
|
## 本地调试
|
||||||
|
### 安装依赖
|
||||||
|
```
|
||||||
|
npm i --unsafe-perm=true
|
||||||
|
```
|
||||||
|
### 运行
|
||||||
|
```
|
||||||
|
npm run start
|
||||||
|
```
|
||||||
|
### 打包
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## 说明：
|
||||||
|
本项目是来自原作的简化版：https://github.com/yb/uptime-status
|
||||||
|
|
||||||
|
本项目来自美化版：https://github.com/imsyy/status
|
||||||
11499
package-lock.json
generated
Normal file
11499
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/background.png
Normal file
BIN
public/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
36
public/config.js
Normal file
36
public/config.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
// 配置
|
||||||
|
window.Config = {
|
||||||
|
|
||||||
|
// 显示标题
|
||||||
|
SiteName: '云生站点监测',
|
||||||
|
|
||||||
|
// UptimeRobot Api Keys
|
||||||
|
// 支持 Monitor-Specific 和 Read-Only
|
||||||
|
ApiKeys: [
|
||||||
|
'ur1078385-b9802a0868414b8a975d5038',
|
||||||
|
],
|
||||||
|
|
||||||
|
// 日志天数
|
||||||
|
// 虽然免费版说仅保存60天日志，但测试好像API可以获取90天的
|
||||||
|
// 不过时间不要设置太长，容易卡，接口请求也容易失败
|
||||||
|
CountDays: 90,
|
||||||
|
|
||||||
|
// 是否显示检测站点的链接
|
||||||
|
ShowLink: true,
|
||||||
|
|
||||||
|
// 导航栏菜单
|
||||||
|
Navi: [
|
||||||
|
{
|
||||||
|
text: '主页',
|
||||||
|
url: 'https://tjys.tk'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '博客',
|
||||||
|
url: 'https://blog.qikaile.tk'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'GitHub',
|
||||||
|
url: 'https://github.com/qikaile/uptime-status'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
4
public/desktop.ini
Normal file
4
public/desktop.ini
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
[ViewState]
|
||||||
|
Mode=
|
||||||
|
Vid=
|
||||||
|
FolderType=Generic
|
||||||
BIN
public/favicon-down.ico
Normal file
BIN
public/favicon-down.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
16
public/index.html
Normal file
16
public/index.html
Normal file
@ -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>云生站点监测</title>
|
||||||
|
<script src="./config.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
443
src/app.scss
Normal file
443
src/app.scss
Normal file
@ -0,0 +1,443 @@
|
|||||||
|
$primary-color: #3bd672;
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f6f8fa url(../public/background.png) top;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
overflow: overlay;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 980px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
background: linear-gradient(53deg, rgba(118, 186, 153, 1) 0%, rgba(81, 226, 155, 1) 100%);
|
||||||
|
padding: 30px 0 60px 0;
|
||||||
|
color: white;
|
||||||
|
width: 101%;
|
||||||
|
height: 400px;
|
||||||
|
padding-right: 1%;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: #ffffff52;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip {
|
||||||
|
position: absolute;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip::after {
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
background: #9bffce;
|
||||||
|
animation: anim 2s ease infinite;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip.down::after {
|
||||||
|
background: #ff9595;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-top {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 980px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-top: 200px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-time {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 80px;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffffb5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-down {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: $primary-color;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 28px;
|
||||||
|
top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #4fd69c;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 28px;
|
||||||
|
top: 28px;
|
||||||
|
animation: anim 1s ease infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes anim {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: .8
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ok::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: $primary-color;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 28px;
|
||||||
|
top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ok::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #4fd69c;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 28px;
|
||||||
|
top: 28px;
|
||||||
|
animation: anim 1s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.down {
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.down::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #de484a;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 56px;
|
||||||
|
top: 28.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.down::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: #de484a;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 56px;
|
||||||
|
top: 28.5px;
|
||||||
|
animation: anim 1s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #969ea8;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: bold;
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
|
||||||
|
background-color: #e2e2e2a3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小于 512px 时 */
|
||||||
|
@media (max-width: 512px) {
|
||||||
|
#header {
|
||||||
|
height: 340px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navi {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-top {
|
||||||
|
margin-top: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 30px;
|
||||||
|
margin-left: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-time {
|
||||||
|
margin-left: 70px;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-now,
|
||||||
|
.summary-day {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小于 370px 时 */
|
||||||
|
@media (max-width: 370px) {
|
||||||
|
#header {
|
||||||
|
height: 300px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-top {
|
||||||
|
margin-top: 90px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 28px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-time {
|
||||||
|
position: initial;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/common/helper.js
Normal file
21
src/common/helper.js
Normal file
@ -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;
|
||||||
|
}
|
||||||
111
src/common/uptimerobot.js
Normal file
111
src/common/uptimerobot.js
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
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') {
|
||||||
|
document.getElementById('status-text').style.display = 'none';
|
||||||
|
document.getElementById('status-down').style.display = 'block';
|
||||||
|
document.getElementById('status-down').innerHTML = '数据获取出错';
|
||||||
|
document.getElementById('status-time-up').innerHTML = '这可能是暂时性的，刷新页面以重试'
|
||||||
|
document.getElementById('header').style = 'background: rgb(228,126,126); background: linear-gradient(53deg, rgba(228,126,126,1) 0%, rgba(238,85,85,1) 100%);';
|
||||||
|
document.getElementById('status-tip').className = 'status-tip down';
|
||||||
|
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',
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var d = new Date();
|
||||||
|
var hour = d.getHours();
|
||||||
|
var minute = d.getMinutes();
|
||||||
|
if (minute >= 0 && minute < 10) {
|
||||||
|
minute = "0" + minute;
|
||||||
|
}
|
||||||
|
document.getElementById('status-last-time').innerHTML = hour + " : " + minute;
|
||||||
|
|
||||||
|
if (monitor.status === 2) {
|
||||||
|
result.status = 'ok';
|
||||||
|
document.getElementById('status-text').innerHTML = "所有站点运行正常";
|
||||||
|
};
|
||||||
|
if (monitor.status === 9) {
|
||||||
|
result.status = 'down';
|
||||||
|
document.getElementById('status-text').style.display = 'none';
|
||||||
|
document.getElementById('status-down').style.display = 'block';
|
||||||
|
document.getElementById('header').style = 'background: rgb(228,126,126); background: linear-gradient(53deg, rgba(228,126,126,1) 0%, rgba(238,85,85,1) 100%);';
|
||||||
|
document.getElementById('status-tip').className = 'status-tip down';
|
||||||
|
var link = document.createElement('link');
|
||||||
|
link.type = 'image/x-icon';
|
||||||
|
link.rel = 'shortcut icon';
|
||||||
|
link.href = '/favicon-down.ico';
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(link);
|
||||||
|
};
|
||||||
|
return result;
|
||||||
|
});
|
||||||
|
}
|
||||||
34
src/components/app.js
Normal file
34
src/components/app.js
Normal file
@ -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 - 2022 © Reach - <Link to='https://www.imsyy.top/' text='墨明' /></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
30
src/components/header.js
Normal file
30
src/components/header.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
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 className='status-top'>
|
||||||
|
<div className='status-tip' id='status-tip'></div>
|
||||||
|
<p className='status-text' id='status-text'>站点状态加载中</p>
|
||||||
|
<p className='status-text' id='status-down'>部分站点无法运行</p>
|
||||||
|
<p className='status-time' id='status-time-up'>上次更新于 <span id='status-last-time'>00 : 00</span> | 检测频率 5 分钟</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
||||||
9
src/components/link.js
Normal file
9
src/components/link.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
function Link(props = { text, to }) {
|
||||||
|
return (
|
||||||
|
<a {...props} href={props.to} target='_blank'>
|
||||||
|
{props.text}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Link;
|
||||||
69
src/components/uptimerobot.js
Normal file
69
src/components/uptimerobot.js
Normal file
@ -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 className='summary-now'>今天</span>
|
||||||
|
<span className='summary-note'>
|
||||||
|
{site.total.times
|
||||||
|
? `最近 ${CountDays} 天内故障 ${site.total.times} 次，累计 ${formatDuration(site.total.duration)}，平均可用率 ${site.average}%`
|
||||||
|
: `最近 ${CountDays} 天内可用率 ${site.average}%`}
|
||||||
|
</span>
|
||||||
|
<span className='summary-day'>{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;
|
||||||
12
src/index.js
Normal file
12
src/index.js
Normal file
@ -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
Block a user