18 |
36 |
19 |
20 | 
21 | knloop sta
22 |
23 |
24 |
21 | knloop sta
22 |
23 |
25 |
27 | Github
28 |
33 |
34 |
35 |
39 |
40 | 
41 |
42 |
45 |
46 |
41 |
42 | knloop service status
43 |last updated on: Loading...
44 |
47 |
48 |
49 |
76 |
77 |
50 |
51 |
52 |
53 |
54 |
55 |
66 |
56 |
65 |
57 |
64 |
58 |
59 |
62 | $title
60 | 61 |$upTime Uptime within 60 days
63 |
67 |
74 |
75 |
68 |
69 |
70 |
71 |
72 | Data is Loading ...
73 |
78 |
80 |
81 |
90 |
91 |
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/src/js/genReports.js:
--------------------------------------------------------------------------------
1 | import { reslogs } from "./reslogs.js";
2 | import { updateChart } from "./timelapsechart.js";
3 | import { getColor, constructStatusStream } from "./utils.js";
4 | import { normalizeData } from "./dataProcessing.js";
5 | import { create } from "./domManipulation.js";
6 | import { scrolltoright } from "./scroll.js";
7 | import { fetchUrlsConfig } from "./fetchurlsconfig.js";
8 | import { hideLoadingMask } from "./reloadreports.js";
9 |
10 | /**
11 | * 异步函数：根据 urls.cfg 文件，生成所有报告。
12 | * @param {string} urlspath - 配置文件的路径，其中包含需要生成报告的URL列表。
13 | */
14 | export async function genAllReports(useCache = {}) {
15 | try {
16 | const configLines = await fetchUrlsConfig();
17 | for (let ii = 0; ii < configLines.length; ii++) {
18 | const configLine = configLines[ii];
19 | const [key, url] = configLine.split("=");
20 | await genReportLog(document.getElementById("reports"), key, url, useCache);
21 | }
22 |
23 | } catch (error) {
24 | console.error("Error genAllReports :", error);
25 | }
26 |
27 | hideLoadingMask(); // 隐藏loading-mask
28 | scrolltoright(); // 滚动到最右侧
29 | }
30 |
31 |
32 | /**
33 | * 异步生成报告日志。
34 | * @param {HTMLElement} container - 用于装载报告日志的容器元素。
35 | * @param {string} key - 报告日志的唯一标识键。
36 | * @param {string} url - 相关 URL，用于报告中显示。
37 | * @param {string} logspath - 日志文件的路径。
38 | */
39 | async function genReportLog(container, key, url, useCache = {}) {
40 | let statusLines = await reslogs(key, useCache);
41 |
42 | const normalized = normalizeData(statusLines);
43 | const statusStream = constructStatusStream(key, url, normalized);
44 | container.appendChild(statusStream);
45 | // 创建一个 div 来包裹 span 标签
46 | const divWrapper = create("div");
47 | divWrapper.classList.add("span-wrapper"); // 添加一个类以便在 CSS 中定位这个 div
48 | divWrapper.id = "status-prompt"; // 设置 div 的 ID
49 | // 创建并添加两个 span 标签到 divWrapper 中
50 | const spanLeft = create("span", "span-title");
51 | spanLeft.textContent = "响应时间(ms)";
52 | spanLeft.classList.add("align-left");
53 | const spanRight = create("span", "span-text");
54 | spanRight.classList.add("align-right");
55 | divWrapper.appendChild(spanLeft);
56 | divWrapper.appendChild(spanRight);
57 | // 将包含两个 span 的 div 添加到 container 中
58 | container.appendChild(divWrapper);
59 | const canvas = create("canvas", "chart");
60 | canvas.id = "chart_clone_" + key++;
61 | container.appendChild(canvas);
62 | updateChart(canvas, statusLines);
63 | }
64 |
65 |
66 | // 所有服务当天整体状态评估
67 | export async function getLastDayStatus(useCache = {}) {
68 | const configLines = await fetchUrlsConfig();
69 | const statusTexts = []; // 存储 statusText 的数组
70 | for (let ii = 0; ii < configLines.length; ii++) {
71 | const configLine = configLines[ii];
72 | const [key] = configLine.split("=");
73 |
74 | // 根据条件确定是否使用缓存
75 | let statusLines = await reslogs(key, useCache);
76 |
77 | const normalized = normalizeData(statusLines);
78 | // 获取最后一天的状态
79 | const lastDayStatus = normalized[0];
80 | const statusText = getColor(lastDayStatus); // nodata success failure
81 | statusTexts.push(statusText); // 将 statusText 存入数组。
82 | }
83 |
84 | let successCount = 0, failureCount = 0, nodataCount = 0;
85 |
86 | for (const item of statusTexts) {
87 | if (item === 'success') {
88 | successCount++;
89 | } else if (item === 'failure') {
90 | failureCount++;
91 | } else if (item === 'nodata') {
92 | nodataCount++;
93 | }
94 | }
95 |
96 | const totalCount = statusTexts.length; // 总服务数
97 | const failureThreshold = totalCount * 0.2; // 有效服务 Down 20% 即整体报告为Down
98 | const nodateThreshold = totalCount * 0.5; // 有效服务 No Data 50% 即整体报告为No Data
99 |
100 | const conditions = [
101 | { condition: successCount === totalCount, src: './public/check/success.svg', alt: 'UP' },
102 | { condition: nodataCount === totalCount, src: './public/check/nodata.svg', alt: 'No data' },
103 | { condition: failureCount >= failureThreshold || nodataCount >= nodateThreshold, src: './public/check/failure.svg', alt: 'Down' },
104 | { condition: true, src: './public/check/partial.svg', alt: 'Degraded' }
105 | ];
106 |
107 | const img = document.querySelector("#statusImg");
108 |
109 | for (const { condition, src, alt } of conditions) {
110 | if (condition) {
111 | img.src = src;
112 | img.alt = alt;
113 | img.classList.remove('icobeat');
114 | break;
115 | }
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🆙 knloop service status
2 |
3 | **轻量、开源、零依赖的服务状态监控。**
4 | - 功能特点
5 | - 零依赖，无服务器依赖，纯静态页面。
6 | - 支持企业微信和wehook 机器人推送。
7 | - 支持自建服务部署页面和监控节点。
8 | - 本地部署可以实现秒级监控。
9 | - 占用资源少，监控节点仅使在bash环境使用curl。
10 | - GitHub Actions 运行监控脚本
11 | - 最低每 5 分钟，workflows可以利用脚本批量访问你需要监控的网站并获得详细信息
12 | - 手动或者在有新的页面变化的时候才部署GitHub Pages
13 | - 当开启通知功能，当服务状态不可用时，会推送到企业微信或调用指定的webhook。
14 | - GitHub Pages 发布静态页面
15 | - 简洁、美观自适应页面，支持 PWA
16 | - 零依赖，无需任何构建工具
17 | - 使用 GitHub RWA 从仓库访问最新数据
18 |
19 |
20 | ## 👀 查看效果
21 |
22 | 在线演示 : [status.knloop.com](https://status.knloop.com)
23 |
24 | 截图展示 :
25 | 
26 |
27 | ## ⚙️ 部署说明
28 |
29 | ## 方案一、GitHub page + GitHub Actions 最简单方式部署（推荐）
30 | ### 1. [Fork](https://github.com/shadowqcom/knloop-service-status/fork) 本项目 [knloop service status](https://github.com/shadowqcom/knloop-service-status/fork).
31 |
32 | ### 2. 按照下面格式修改 `urls.cfg` 文件中的内容。
33 |
34 | ```cfg
35 | Web=https://knloop.com
36 | Google=https://google.com
37 | ```
38 |
39 | ### 3. 修改个性化信息
40 |
41 | ```html
42 | UA : $uag
79 |
43 | knloop sta
44 | knloop service status
45 | ```
46 |
47 | ### 4. 修改全局配置参数(可选)
48 |
49 | `./src/js/index.js`
50 |
51 | ```js
52 | // 配置参数
53 | export const maxDays = 60; // 日志最大展示天数
54 | export const maxHour = 12; // 报表最大小时数
55 | export const urlspath = "/src/urls.cfg"; // 配置文件路径,不带后/
56 | export const logspath = "./page/logs"; // 日志文件路径,不带后/
57 | export const reloadReportsdata = true; // 是否重新加载报告
58 | export const reloadReportstime = 2.5; // 重载报告的检测间隔时间
59 | ```
60 | 进阶操作：可以把logspath设置为 `https://raw.githubusercontent.com/用户名/仓库名/分支名/logs` 这样可以访问仓库内最新的log文件，而无需等待重新部署页面。弊端就是raw.githubusercontent.com域名在大陆地区访问质量不高。
61 |
62 | ### 5. 配置 GitHub Pages 和 actions权限
63 |
64 | - 转到 `settings --> pages` ，
65 |
66 | - `Build and deployment` 设置为 Deploy from a branch ，
67 |
68 | - `Branch` 设置为 main,
69 |
70 | - `Custom domain` 配置你的自定义域名，
71 |
72 | - `Enforce HTTPS` 强制https 建议勾选上。
73 |
74 | 除此之外 还需要配置 actions 对仓库的读写权限，否则检测的结果无法写回仓库。
75 | - 转到 `settings --> actions ---> General` ，
76 | - `Workflow permissions` 设置为 Read and write permissions .
77 |
78 | 
79 |
80 | 进阶操作：由于每次提交日志都会触发页面部署，造成不必要的免费额度浪费，所以增加了一个 `deploy-status-pages.yml`文件 可以手动触发 也可以通过提交触发，根据需求灵活配置。
81 | 关于GitHub actions的相关配置就不多阐述，请参考官方文件。
82 |
83 | ### 6. 配置自动任务
84 | 修改 `service-status-check.yml` 里面的相关配置
85 | ```conf
86 | - cron: "*/25 * * * *" # 定时任务间隔
87 | ref: page # 默认分支，一般填main
88 | git push origin page # 提交到哪个分支，一般也是main
89 | ```
90 | 然后就是git信息修改，user.name之类的 按照自己的需求修改。
91 |
92 | ### 7. 配置 WECHAT_WEBHOOK_KEY （可选）
93 |
94 | 用作推送失败的url到企业微信机器人。
95 |
96 | - 转到 `settings --> Secrets and variables --> Actions` ，
97 | - 新建一个 `Repository secrets` ，
98 | - `Name` 填 `WECHAT_WEBHOOK_KEY` ，
99 | - `Secret` 填写你的企业微信机器人 Webhook地址 key= 后面的值。
100 |
101 |
102 | ## 方案二、自建服务器本地部署
103 | ### 1、前置条件
104 | 1.1、需要在目标机器上安装git
105 | 1.2、需要配置git密钥,有权限提交仓库。
106 | 1.3、需要支持bash环境，一般Linux发行版都内置了。
107 |
108 | ### 2、必要的配置
109 | 2.1、把 `checkshell/fuse.sh`复制到你个有权限的目录下
110 | 修改fuse.sh里面的仓库地址和分支名为你自己的仓库和默认分支。
111 |
112 | 2.2、修改在仓库`actions-local.sh`里面的uesr.name和user.email ，最好也修改一下commit的消息。
113 | 2.3、设置自动任务，定时运行`fuse.sh`:
114 |
115 | ```sh
116 | crontab -e
117 | ```
118 |
119 | ```sh
120 | */2 * * * * /bin/bash /path/to/fuse.sh > /dev/null 2>&1
121 | ```
122 |
123 | ### 3、发布静态页面
124 | 3.1、你仍然可以使用github pages发布静态页面，但需要更加频繁的更新日志文件的话 就会产生过多提交记录，慎用。
125 |
126 | 3.2、使用nginx部署静态页面, root指向fuse.sh clone下载的本地仓库文件根目录。
127 | 下面试一个简单的例子：
128 | ```conf
129 | server {
130 | listen 80;
131 | root /path/to/page;
132 | server_name yourdomain.com;
133 | location / {
134 | index index.html;
135 | }
136 | }
137 | ```
138 |
139 | ## 🛠️ 工作原理
140 |
141 | 1、默认情况下该项目使用 `GitHub Actions` 根据设定的时间间隔运行 shell 脚本 `servicecheck.sh` ，该脚本读取 `urls.cfg` 配置，使用 curl 测试每个符合要求的 url ，将得到的结果（时间、状态、延迟ms）写入`.log`日志文件。
142 |
143 | 2、通过 `GitHub Actions` 执行 `git push` 提交到本仓库。 如果你是自己服务器或者本地运行监测脚本，则是在 `actions-local.sh` 中执行 `git push` 。
144 |
145 | 3、使用 GitHub Pages 发布0依赖、纯html/js实现的静态页面，在 `index.html` 中使用 JavaScript 动态提取日志文件，经过处理和计算后把Uptime和延迟数据报表以易于阅读的方式展示出来。
146 |
147 | ## ⏱️ 功能规划(TODO)
148 |
149 | - [x] 鼠标悬浮展示详情
150 | - [x] 移动端适配
151 | - [x] 在workflows提交log文件
152 | - [x] 企业微信推送（理论上也支持其他Webhook地址）
153 | - [x] 小屏幕可左右滑动状态条
154 | - [x] 展示日志最后更新时间
155 | - [x] 延迟ms数检测
156 | - [x] 延迟曲线图
157 | - [x] 统计图中没有数据的地方显示虚线
158 | - [x] 所有服务当天总体评估状态
159 | - [x] 自动重载报表和日志数据
160 | - [ ] SSL状态检测
161 | - [ ] SSH 检测
162 | - [ ] 钉钉/飞书/邮箱/telegram 通知
163 | - [ ] 邮箱通知
164 |
165 | ## 🐞 已知问题
166 |
167 | - ~~统计图数据可能延迟~~
168 | - ~~统计数据最新的一个小时可能不准确~~
169 | - 手机浏览器打开页面后如果浏览器在后台运行一段时间，重新打开浏览器则报表消失。
170 |
171 | ## 💡 灵感来自
172 |
173 | - [kener](https://github.com/rajnandan1/kener)
174 | - [statuspage](https://github.com/statsig-io/statuspage/)
175 | - [UptimeFlare](https://github.com/lyc8503/UptimeFlare)
176 | - [statusfy](https://github.com/juliomrqz/statusfy)
177 | - [uptime-status](https://github.com/yb/uptime-status)
--------------------------------------------------------------------------------
/src/js/timelapsechart.js:
--------------------------------------------------------------------------------
1 | import { maxHour } from "../index.js";
2 |
3 |
4 | /**
5 | * 异步函数：更新图表数据
6 | *
7 | * 本函数用于根据给定的日志数据更新图表。它首先确定当前小时的开始时间，
8 | * 然后从日志数据中筛选出该小时内的数据点，最后更新图表以反映这些数据。
9 | *
10 | * @param {HTMLElement} el - 图表元素的引用，用于更新图表的DOM元素。
11 | * @param {Array} logData - 包含日志数据的数组，每个元素代表一个数据点。
12 | * @returns {void}
13 | */
14 |
15 | export async function updateChart(el, logData) {
16 | try {
17 | const now = new Date();
18 | const startOfCurrentHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), 0, 0, 0);
19 | const twelveHoursAgo = new Date(startOfCurrentHour.getTime() - maxHour * 60 * 60 * 1000);
20 |
21 | // 分割日志数据为单独的条目。
22 | const logEntries = logData.split(/\r\n|\n/).filter((entry) => entry !== "");
23 |
24 | // 初始化小时数据对象。
25 | const hourlyData = new Map(); // 使用Map以获得更好的性能
26 |
27 | // 遍历日志条目，提取并汇总每小时的数据。
28 | logEntries.forEach((entry) => {
29 | const parts = entry.split(", ").filter((entry) => entry !== "null");
30 | if (parts.length >= 3) {
31 | const timeStr = parts[0];
32 | const delay = parseInt(parts[2], 10);
33 | const date = new Date(timeStr);
34 |
35 | // 如果日期在过去12小时内，累加从现在到过去12小时的数据。
36 | if (date >= twelveHoursAgo && date <= now) {
37 | const hourKey = `${date.getHours()}:00`;
38 | if (!hourlyData.has(hourKey)) {
39 | hourlyData.set(hourKey, { total: 0, count: 0, values: [] });
40 | }
41 | hourlyData.get(hourKey).total += delay;
42 | hourlyData.get(hourKey).count++;
43 | hourlyData.get(hourKey).values.push(delay);
44 | }
45 | }
46 | });
47 |
48 | // 初始化图表标签、平均数据和中位数数据数组。
49 | const labels = [];
50 | const averageData = [];
51 | const medianData = [];
52 |
53 | // 遍历过去12小时，计算每小时的平均值和中位数。
54 | let currentHour = new Date(startOfCurrentHour);
55 | for (let i = 0; i <= maxHour; i++) {
56 | const hourKey = `${currentHour.getHours()}:00`;
57 | const hourlyDatum = hourlyData.get(hourKey) || { total: 0, count: 0, values: [] };
58 |
59 | const average =
60 | hourlyDatum.count > 0
61 | ? hourlyDatum.total / hourlyDatum.count
62 | : null;
63 |
64 | const median =
65 | hourlyDatum.values.length > 0
66 | ? calculateMedian(hourlyDatum.values)
67 | : null;
68 |
69 | labels.push(hourKey);
70 | averageData.push(average);
71 | medianData.push(median);
72 |
73 | currentHour.setHours(currentHour.getHours() - 1);
74 | }
75 |
76 | // 反转数组，因为Chart.js默认从最新的小时开始绘制。
77 | labels.reverse();
78 | averageData.reverse();
79 | medianData.reverse();
80 |
81 | // 合并平均数和中位数，过滤掉NaN值,然后根据最大值来决定是否设置y轴的最大值
82 | const combinedData = averageData
83 | .concat(medianData)
84 | .filter((value) => !isNaN(value));
85 | let yMaxConfig = {};
86 | if (combinedData.length === 0 || Math.max(...combinedData) <= 14) {
87 | yMaxConfig.max = 15;
88 | }
89 |
90 | // 获取图表上下文并创建新的Chart实例。
91 | const ctx = el.getContext("2d");
92 |
93 | // 如果图表实例已经存在，则更新它，而不是创建一个新的实例。
94 | let chartInstance = el.chartInstance;
95 | if (!chartInstance) {
96 | chartInstance = new Chart(ctx, {
97 | type: "line",
98 | data: {
99 | labels,
100 | datasets: [
101 | {
102 | label: "平均值",
103 | data: averageData,
104 | fill: false,
105 | borderColor: "#4bc0c0",
106 | tension: 0.4,
107 | segment: {
108 | borderDash: (ctx) => skipped(ctx, [4, 6]),
109 | },
110 | spanGaps: true,
111 | },
112 | {
113 | label: "中位数",
114 | data: medianData,
115 | fill: false,
116 | borderColor: "#ff6384",
117 | tension: 0.4,
118 | segment: {
119 | borderDash: (ctx) => skipped(ctx, [4, 6]),
120 | },
121 | spanGaps: true,
122 | },
123 | ],
124 | },
125 | options: {
126 | plugins: {
127 | legend: {
128 | display: false, // 显示图例
129 | },
130 | },
131 | scales: {
132 | x: {
133 | title: {
134 | display: false,
135 | },
136 | ticks: {
137 | autoSkip: true, // 确保每个点都被标记
138 | maxRotation: 65, // 设置最大旋转角度
139 | minRotation: 0, // 设置最小旋转角度
140 | },
141 | },
142 | y: {
143 | title: {
144 | display: false,
145 | },
146 | beginAtZero: true,
147 | ...yMaxConfig, // 使用yMaxConfig来有条件地设置max
148 | },
149 | },
150 | },
151 | });
152 | el.chartInstance = chartInstance;
153 | } else {
154 | chartInstance.data.labels = labels;
155 | chartInstance.data.datasets[0].data = averageData;
156 | chartInstance.data.datasets[1].data = medianData;
157 | chartInstance.options.scales.y = {
158 | title: {
159 | display: false,
160 | },
161 | beginAtZero: true,
162 | ...yMaxConfig,
163 | };
164 | chartInstance.update();
165 | }
166 | } catch (error) {
167 | console.error("Error fetching or processing logs:", error);
168 | }
169 | }
170 |
171 | function calculateMedian(values) {
172 | values.sort((a, b) => a - b);
173 | const middle = Math.floor(values.length / 2);
174 | if (values.length % 2 === 0) {
175 | return (values[middle - 1] + values[middle]) / 2;
176 | } else {
177 | return values[middle];
178 | }
179 | }
180 |
181 | function skipped(ctx, value) {
182 | return ctx.p0.skip || ctx.p1.skip ? value : undefined;
183 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | height: 100vh;
3 | width: 100vw;
4 | display: flex;
5 | flex-direction: column;
6 | }
7 |
8 | header {
9 | position: fixed;
10 | display: flex;
11 | align-items: center;
12 | flex-direction: row;
13 | width: 100vw;
14 | height: 4rem;
15 | transition: transform 0.2s ease;
16 | transform: translateY(0);
17 | }
18 |
19 | header.hidden {
20 | transform: translateY(-4rem);
21 | }
22 |
23 | .headerinner {
24 | display: flex;
25 | justify-content: space-between;
26 | align-items: center;
27 | margin: 0 auto;
28 | max-width: 65rem;
29 | width: 55rem;
30 | padding: 0 1rem 0 1rem;
31 | }
32 |
33 | .headerleft {
34 | display: flex;
35 | align-items: center;
36 | }
37 |
38 | .headerinner img {
39 | width: 2rem;
40 | height: auto;
41 | margin-right: 0.5rem;
42 | }
43 |
44 | .headerinner a {
45 | display: flex;
46 | align-items: center;
47 | color: #000;
48 | font-size: 1.17rem;
49 | }
50 |
51 | .headerinner svg {
52 | margin-left: 0.5rem;
53 | }
54 |
55 | body {
56 | --max-width: 55rem;
57 | --mobile-width: calc(100% - 2rem);
58 | background-color: #f6f8fa;
59 | font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif, "Open Sans", "Segoe UI", "Noto Sans", Helvetica, "Apple Color Emoji", "Segoe UI Emoji";
60 | justify-content: center;
61 | line-height: 20px;
62 | min-width: 300px;
63 | margin: 0;
64 | padding: 0;
65 | text-align: center;
66 | }
67 |
68 | /* 文本样式 */
69 |
70 | h1 {
71 | font-size: 2.3rem;
72 | margin: 1rem auto;
73 | color: #202B36;
74 | font-weight: 700;
75 |
76 | }
77 |
78 | h2 {
79 | font-size: 1rem;
80 | color: #202B36;
81 | }
82 |
83 | a {
84 | color: #3eaf7c;
85 | text-decoration: none;
86 | }
87 |
88 | footer {
89 | color: #9c9c9c;
90 | margin: 40px;
91 | text-align: center;
92 | padding-bottom: 1rem;
93 | }
94 |
95 | .pageContainer {
96 | background-color: #fff;
97 | border-radius: 5px;
98 | max-width: var(--max-width);
99 | margin: 0 auto;
100 | padding-bottom: 0.5rem;
101 | }
102 |
103 | .pageContainer,
104 | .clientInfo {
105 | box-shadow: 0 16px 48px #E3E7EB;
106 | }
107 |
108 | .headline {
109 | display: flex;
110 | flex-direction: column;
111 | align-items: center;
112 | justify-content: center;
113 | margin: 5rem auto 0rem;
114 | }
115 |
116 | .headline span {
117 | padding: 16px;
118 | font-size: 32px;
119 | font-weight: 700;
120 | line-height: normal;
121 | }
122 |
123 | .headline div {
124 | font-size: 14px;
125 | font-weight: 600;
126 | color: #7c7c7c;
127 | }
128 |
129 | .reportContainer {
130 | margin: 30px auto;
131 | width: 100%;
132 | }
133 |
134 | .statusContainer {
135 | border-radius: 5px;
136 | text-align: left;
137 | padding: 24px 24px 12px 24px;
138 | margin-top: 30px;
139 | }
140 |
141 | .statusStreamContainer {
142 | display: flex;
143 | align-items: center;
144 | justify-content: space-between;
145 | width: auto;
146 | max-width: var(--max-width);
147 | }
148 |
149 | .statusSquare {
150 | border-radius: 3px;
151 | height: 30px;
152 | width: 10px;
153 | min-width: 5px;
154 | margin-right: 3px;
155 | }
156 |
157 | .statusSquare:hover {
158 | transform: scaleY(1.2);
159 | overflow: hidden;
160 | }
161 |
162 |
163 | .statusHeader {
164 | display: flex;
165 | flex-direction: row;
166 | align-items: center;
167 | justify-content: space-between;
168 | margin-bottom: 0.7rem;
169 | }
170 |
171 | .statusHeader-left {
172 | display: flex;
173 | flex-direction: row;
174 | align-items: center;
175 | }
176 |
177 | .statusUptime {
178 | text-align: right;
179 | color: #7c7c7c;
180 | font-size: 12px;
181 | }
182 |
183 | .success {
184 | background-color: #00dfa2;
185 | color: #fff;
186 | }
187 |
188 | .failure {
189 | background-color: #ff0060;
190 | color: #fff;
191 | }
192 |
193 | .nodata {
194 | background-color: #dddddd;
195 | color: #7c7c7c;
196 | }
197 |
198 | .partial {
199 | background-color: #ffb84c;
200 | color: #fff;
201 | }
202 |
203 | .statusIcon {
204 | margin-right: 0.5rem;
205 | width: 1.28rem;
206 | }
207 |
208 | canvas {
209 | max-height: 128px;
210 | min-width: 100px;
211 | max-width: var(--max-width);
212 | padding: 0rem 1rem 0rem 1.4rem;
213 | margin-bottom: 3rem;
214 | }
215 |
216 | .span-wrapper {
217 | display: flex;
218 | justify-content: space-between;
219 | padding: 0 2rem 0 1.5rem;
220 | }
221 |
222 | .align-left {
223 | text-align: left;
224 | color: #7c7c7c;
225 | font-size: 12px;
226 | }
227 |
228 | .align-right {
229 | text-align: right;
230 | color: #7c7c7c;
231 | font-size: 12px;
232 | }
233 |
234 | .clientInfo {
235 | box-sizing: border-box;
236 | background-color: #fff;
237 | border-radius: 5px;
238 | padding: 10px;
239 | max-width: var(--max-width);
240 | margin: 2rem auto;
241 | }
242 |
243 | .clientInfo span {
244 | white-space: pre-wrap;
245 | font-size: 13px;
246 | color: #555555;
247 | }
248 |
249 | /* 定义滚动条的整体宽度 */
250 | ::-webkit-scrollbar {
251 | width: 0.4rem;
252 | height: 0.5rem;
253 | }
254 |
255 | /* 定义滚动条滑块的颜色和样式 */
256 | ::-webkit-scrollbar-thumb {
257 | background-color: #a2a2a2;
258 | border-radius: 0.5rem;
259 | }
260 |
261 | /* 鼠标悬停时改变滑块颜色 */
262 | ::-webkit-scrollbar-thumb:hover {
263 | background-color: #7a7a7a;
264 | }
265 |
266 | /* 日志重载时的遮罩 */
267 | .reports-container {
268 | position: relative;
269 | }
270 |
271 | .loading-mask {
272 | box-sizing: border-box;
273 | display: flex;
274 | align-items: center;
275 | height: 25rem;
276 | flex-direction: column;
277 | justify-content: space-evenly;
278 | }
279 |
280 | .hidden {
281 | display: none;
282 | }
283 |
284 | .loading-text {
285 | letter-spacing: 0.2em;
286 | }
287 |
288 | /* 加载动画 */
289 | .loadinger {
290 | width: 60px;
291 | position: relative;
292 | }
293 |
294 | /* 每个矩形 */
295 | .loadinger div {
296 | width: 10px;
297 | height: 30px;
298 | position: absolute;
299 | border-radius: 3px;
300 | }
301 |
302 | .loadinger div:nth-child(1) {
303 | left: 0;
304 | animation: l6 1s infinite linear;
305 | background: linear-gradient(#ff0060 0 0);
306 | }
307 |
308 | .loadinger div:nth-child(2) {
309 | left: 30%;
310 | animation: l6 1s infinite linear 0.33s;
311 | background: linear-gradient(#ffb84c 0 0);
312 | }
313 |
314 | .loadinger div:nth-child(3) {
315 | left: 60%;
316 | animation: l6 1s infinite linear 0.66s;
317 | background: linear-gradient(#00dfa2 0 0);
318 | }
319 |
320 | @keyframes l6 {
321 | 0% {
322 | top: 0;
323 | }
324 |
325 | 25% {
326 | top: 10px;
327 | }
328 |
329 | 50% {
330 | top: 0;
331 | }
332 |
333 | 75% {
334 | top: -10px;
335 | }
336 |
337 | 100% {
338 | top: 0;
339 | }
340 | }
341 |
342 | /* 图片跳动动画 */
343 | .statusImg {
344 | width: 3.5rem;
345 | height: auto;
346 | transition:
347 | transform 0.3s ease-in-out,
348 | box-shadow 0.3s ease-in-out;
349 | }
350 |
351 | .statusImg:hover {
352 | transform: scale(1.1);
353 | }
354 |
355 | .icobeat {
356 | animation: bounce 1s ease-in-out infinite alternate;
357 | }
358 |
359 | @keyframes bounce {
360 |
361 | 0%,
362 | 100% {
363 | transform: translateY(0);
364 | }
365 |
366 | 50% {
367 | transform: translateY(-20px);
368 | }
369 | }
370 |
371 |
372 | /* 响应式设计 */
373 | @media screen and (max-width: 640px) {
374 | .pageContainer {
375 | margin: 2rem auto;
376 | width: var(--mobile-width);
377 | max-width: var(--max-width);
378 | }
379 |
380 | .span-wrapper {
381 | padding: 0 1rem 0 1rem;
382 | }
383 |
384 | .statusUptime {
385 | margin-left: 0;
386 | margin-top: 8px;
387 | text-align: right;
388 | }
389 |
390 | .statusTitle {
391 | display: inline-block;
392 | }
393 |
394 | .statusStreamContainer {
395 | overflow-x: scroll;
396 | height: 37px;
397 | -ms-overflow-style: none;
398 | scrollbar-width: none;
399 | }
400 |
401 | /* 隐藏滚动条 */
402 | .statusStreamContainer::-webkit-scrollbar {
403 | display: none;
404 | }
405 |
406 | .statusSquare {
407 | min-width: 7px;
408 | width: 100%;
409 | margin-right: 1px;
410 | }
411 |
412 |
413 | .statusContainer {
414 | padding: 10px;
415 | margin-top: 15px;
416 | }
417 |
418 | canvas {
419 | padding: 0rem 0.2rem 0rem 0.5rem;
420 | margin-bottom: 2rem;
421 | }
422 |
423 | .clientInfo {
424 | max-width: calc(100% - 2rem);
425 | }
426 |
427 | .loading-mask {
428 | height: 14rem;
429 | }
430 |
431 | /* 每个矩形 */
432 | .loadinger div {
433 | width: 7px;
434 | }
435 |
436 | }
437 |
438 | @media screen and (min-width: 641px) and (max-width: 768px) {
439 | .pageContainer {
440 | margin: 2rem auto;
441 | width: var(--mobile-width);
442 | max-width: var(--max-width);
443 | }
444 |
445 | .span-wrapper {
446 | padding: 0 1rem 0 0.5rem;
447 | }
448 |
449 | .statusUptime {
450 | margin-left: 0;
451 | margin-top: 8px;
452 | text-align: right;
453 | }
454 |
455 | .statusTitle {
456 | display: inline-block;
457 | }
458 |
459 | .statusStreamContainer {
460 | overflow-x: scroll;
461 | height: 37px;
462 | -ms-overflow-style: none;
463 | scrollbar-width: none;
464 | }
465 |
466 | /* 隐藏滚动条 */
467 | .statusStreamContainer::-webkit-scrollbar {
468 | display: none;
469 | }
470 |
471 | .statusSquare {
472 | min-width: 7px;
473 | width: 100%;
474 | margin-right: 2px;
475 | }
476 |
477 | .statusContainer {
478 | padding: 10px;
479 | margin-top: 15px;
480 | }
481 |
482 | canvas {
483 | padding: 0rem 0.2rem 0rem 0.5rem;
484 | margin-bottom: 2rem;
485 | }
486 |
487 | .clientInfo {
488 | max-width: calc(100% - 2rem);
489 | }
490 |
491 | .loading-mask {
492 | height: 14rem;
493 | }
494 |
495 | /* 每个矩形 */
496 | .loadinger div {
497 | width: 8px;
498 | }
499 |
500 | }
501 |
502 | @media screen and (min-width: 769px) and (max-width: 1024px) {
503 | .pageContainer {
504 | margin: 2rem auto;
505 | width: var(--mobile-width);
506 | max-width: var(--max-width);
507 | }
508 |
509 | .reportContainer {
510 | max-width: var(--max-width);
511 | }
512 |
513 | .statusUptime {
514 | margin-left: 0;
515 | margin-top: 3px;
516 | text-align: right;
517 | }
518 |
519 | .statusTitle {
520 | display: inline-block;
521 | }
522 |
523 | .statusStreamContainer {
524 | overflow-x: scroll;
525 | height: 37px;
526 | -ms-overflow-style: none;
527 | scrollbar-width: none;
528 | }
529 |
530 | /* 隐藏滚动条 */
531 | .statusStreamContainer::-webkit-scrollbar {
532 | display: none;
533 | }
534 |
535 | .statusSquare {
536 | min-width: 7px;
537 | margin-right: 1px;
538 | }
539 |
540 | .statusContainer {
541 | margin-top: 15px;
542 | }
543 |
544 | canvas {
545 | margin-bottom: 2rem;
546 | }
547 |
548 | .clientInfo {
549 | max-width: calc(100% - 2rem);
550 | width: var(--max-width);
551 | }
552 |
553 | .loading-mask {
554 | height: 20rem;
555 | }
556 | }
557 |
558 |
559 | @media screen and (min-width: 1280px) {
560 | .pageContainer {
561 | margin: 2rem auto;
562 | width: var(--mobile-width);
563 | max-width: var(--max-width);
564 | }
565 |
566 | .reportContainer {
567 | max-width: var(--max-width);
568 | }
569 |
570 | .statusUptime {
571 | margin-left: 0;
572 | margin-top: 3px;
573 | text-align: right;
574 | }
575 |
576 | .statusTitle {
577 | display: inline-block;
578 | }
579 |
580 | .statusStreamContainer {
581 | overflow-x: scroll;
582 | height: 37px;
583 | -ms-overflow-style: none;
584 | scrollbar-width: none;
585 | }
586 |
587 | /* 隐藏滚动条 */
588 | .statusStreamContainer::-webkit-scrollbar {
589 | display: none;
590 | }
591 |
592 | .statusSquare {
593 | min-width: 7px;
594 | margin-right: 1px;
595 | }
596 |
597 | .statusContainer {
598 | margin-top: 15px;
599 | }
600 |
601 | canvas {
602 | margin-bottom: 2rem;
603 | }
604 |
605 | .loading-mask {
606 | height: 20rem;
607 | }
608 | }
--------------------------------------------------------------------------------
/src/js/scrollreveal.min.js:
--------------------------------------------------------------------------------
1 | /*! @license ScrollReveal v4.0.0
2 |
3 | Copyright 2018 Fisssion LLC.
4 |
5 | Licensed under the GNU General Public License 3.0 for
6 | compatible open source projects and non-commercial use.
7 |
8 | For commercial sites, themes, projects, and applications,
9 | keep your source code private/proprietary by purchasing
10 | a commercial license from https://scrollrevealjs.org/。
11 | */
12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!0,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}},n={clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0