Show push example under the detail page (#3739)

This commit is contained in:
Louis Lam 2023-09-25 17:49:00 +08:00 committed by GitHub
parent bef6a7911f
commit 98b93c887a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 249 additions and 23 deletions

View File

@ -1,4 +1,5 @@
#!/bin/bash
# Filename: index.sh
PUSH_URL="https://example.com/api/push/key?status=up&msg=OK&ping="
INTERVAL=60

View File

@ -0,0 +1 @@
docker run -d --restart=always --name uptime-kuma-push louislam/uptime-kuma:push "https://example.com/api/push/key?status=up&msg=OK&ping=" 60

View File

@ -1,3 +1,4 @@
// Supports: Node.js >= 18, Deno, Bun
const pushURL = "https://example.com/api/push/key?status=up&msg=OK&ping=";
const interval = 60;

View File

@ -11,4 +11,3 @@ while (true) {
echo "Pushed!\n";
sleep(interval);
}

View File

@ -1,3 +1,4 @@
# Filename: index.ps1
$pushURL = "https://example.com/api/push/key?status=up&msg=OK&ping="
$interval = 60

View File

@ -8,4 +8,3 @@ while True:
urllib.request.urlopen(push_url)
print("Pushed!\n")
time.sleep(interval)

View File

@ -1,3 +1,4 @@
// Supports: Deno, Bun, Node.js >= 18 (ts-node)
const pushURL : string = "https://example.com/api/push/key?status=up&msg=OK&ping=";
const interval : number = 60;

1
extra/uptime-kuma-push/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
build/*

View File

@ -0,0 +1,18 @@
FROM node AS build
RUN useradd --create-home kuma
USER kuma
WORKDIR /home/kuma
ARG TARGETPLATFORM
COPY --chown=kuma:kuma ./build/ ./build/
COPY --chown=kuma:kuma build.js build.js
RUN node build.js $TARGETPLATFORM
FROM debian:bookworm-slim AS release
RUN useradd --create-home kuma
USER kuma
WORKDIR /home/kuma
COPY --from=build /home/kuma/uptime-kuma-push ./uptime-kuma-push
ENTRYPOINT ["/home/kuma/uptime-kuma-push"]

View File

@ -0,0 +1,48 @@
const fs = require("fs");
const platform = process.argv[2];
if (!platform) {
console.error("No platform??");
process.exit(1);
}
const supportedPlatforms = [
{
name: "linux/amd64",
bin: "./build/uptime-kuma-push-amd64"
},
{
name: "linux/arm64",
bin: "./build/uptime-kuma-push-arm64"
},
{
name: "linux/arm/v7",
bin: "./build/uptime-kuma-push-armv7"
}
];
let platformObj = null;
// Check if the platform is supported
for (let i = 0; i < supportedPlatforms.length; i++) {
if (supportedPlatforms[i].name === platform) {
platformObj = supportedPlatforms[i];
break;
}
}
if (platformObj) {
let filename = platformObj.bin;
if (!fs.existsSync(filename)) {
console.error(`prebuilt: ${filename} is not found, please build it first`);
process.exit(1);
}
fs.renameSync(filename, "./uptime-kuma-push");
process.exit(0);
} else {
console.error("Unsupported platform: " + platform);
process.exit(1);
}

View File

@ -0,0 +1,13 @@
{
"scripts": {
"build-docker": "npm run build-all && docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t louislam/uptime-kuma:push . --push --target release",
"build-all": "npm run build-win && npm run build-linux-amd64 && npm run build-linux-arm64 && npm run build-linux-armv7 && npm run build-linux-armv6 && npm run build-linux-armv5 && npm run build-linux-riscv64",
"build-win": "cross-env GOOS=windows GOARCH=amd64 go build -x -o ./build/uptime-kuma-push.exe uptime-kuma-push.go",
"build-linux-amd64": "cross-env GOOS=linux GOARCH=amd64 go build -x -o ./build/uptime-kuma-push-amd64 uptime-kuma-push.go",
"build-linux-arm64": "cross-env GOOS=linux GOARCH=arm64 go build -x -o ./build/uptime-kuma-push-arm64 uptime-kuma-push.go",
"build-linux-armv7": "cross-env GOOS=linux GOARCH=arm GOARM=7 go build -x -o ./build/uptime-kuma-push-armv7 uptime-kuma-push.go",
"build-linux-armv6": "cross-env GOOS=linux GOARCH=arm GOARM=6 go build -x -o ./build/uptime-kuma-push-armv6 uptime-kuma-push.go",
"build-linux-armv5": "cross-env GOOS=linux GOARCH=arm GOARM=5 go build -x -o ./build/uptime-kuma-push-armv5 uptime-kuma-push.go",
"build-linux-riscv64": "cross-env GOOS=linux GOARCH=riscv64 go build -x -o ./build/uptime-kuma-push-riscv64 uptime-kuma-push.go"
}
}

View File

@ -0,0 +1,44 @@
package main
import (
"fmt"
"net/http"
os "os"
"time"
)
func main() {
if len(os.Args) < 2 {
fmt.Fprintln(os.Stderr, "Usage: uptime-kuma-push <url> [<interval>]")
os.Exit(1)
}
pushURL := os.Args[1]
var interval time.Duration
if len(os.Args) >= 3 {
intervalString, err := time.ParseDuration(os.Args[2] + "s")
interval = intervalString
if err != nil {
fmt.Fprintln(os.Stderr, "Error: Invalid interval", err)
os.Exit(1)
}
} else {
interval = 60 * time.Second
}
for {
_, err := http.Get(pushURL)
if err == nil {
fmt.Print("Pushed!")
} else {
fmt.Print("Error: ", err)
}
fmt.Println(" Sleeping for", interval)
time.Sleep(interval)
}
}

View File

@ -51,11 +51,6 @@ if (! process.env.NODE_ENV) {
log.info("server", "Node Env: " + process.env.NODE_ENV);
log.info("server", "Inside Container: " + (process.env.UPTIME_KUMA_IS_CONTAINER === "1"));
log.info("server", "Importing Node libraries");
const fs = require("fs");
log.info("server", "Importing 3rd-party libraries");
log.debug("server", "Importing express");
const express = require("express");
const expressStaticGzip = require("express-static-gzip");

View File

@ -4,6 +4,8 @@ const { sendInfo } = require("../client");
const { checkLogin } = require("../util-server");
const GameResolver = require("gamedig/lib/GameResolver");
const { testChrome } = require("../monitor-types/real-browser-monitor-type");
const fs = require("fs");
const path = require("path");
let gameResolver = new GameResolver();
let gameList = null;
@ -62,4 +64,29 @@ module.exports.generalSocketHandler = (socket, server) => {
});
});
});
socket.on("getPushExample", (language, callback) => {
try {
let dir = path.join("./extra/push-examples", language);
let files = fs.readdirSync(dir);
for (let file of files) {
if (file.startsWith("index.")) {
callback({
ok: true,
code: fs.readFileSync(path.join(dir, file), "utf8"),
});
return;
}
}
} catch (e) {
}
callback({
ok: false,
msg: "Not found",
});
});
};

View File

@ -584,6 +584,20 @@ h5.settings-subheading::after {
border-bottom: 1px solid $dark-border-color;
}
/* required class */
.code-editor, .css-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
border-radius: 1rem;
padding: 10px 5px;
border: 1px solid #ced4da;
.dark & {
background: $dark-bg2;
border: 1px solid $dark-border-color;
}
}
$shadow-box-padding: 20px;

View File

@ -84,6 +84,9 @@
"Push URL": "Push URL",
"needPushEvery": "You should call this URL every {0} seconds.",
"pushOptionalParams": "Optional parameters: {0}",
"pushViewCode": "View Code",
"pushOthers": "Others",
"programmingLanguages": "Programming Languages",
"Save": "Save",
"Notifications": "Notifications",
"Not available, please setup.": "Not available, please setup.",

View File

@ -76,6 +76,34 @@
</div>
</div>
<!-- Push Examples -->
<div v-if="monitor.type === 'push'" class="shadow-box big-padding">
<a href="#" @click="pushMonitor.showPushExamples = !pushMonitor.showPushExamples">{{ $t("pushViewCode") }}</a>
<transition name="slide-fade" appear>
<div v-if="pushMonitor.showPushExamples" class="mt-3">
<select id="push-current-example" v-model="pushMonitor.currentExample" class="form-select">
<optgroup :label="$t('programmingLanguages')">
<option value="csharp">C#</option>
<option value="go">Go</option>
<option value="java">Java</option>
<option value="javascript-fetch">JavaScript (fetch)</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="typescript-fetch">TypeScript (fetch)</option>
</optgroup>
<optgroup :label="$t('pushOthers')">
<option value="bash-curl">Bash (curl)</option>
<option value="powershell">PowerShell</option>
<option value="docker">Docker</option>
</optgroup>
</select>
<prism-editor v-model="pushMonitor.code" class="css-editor mt-3" :highlight="pushExampleHighlighter" line-numbers readonly></prism-editor>
</div>
</transition>
</div>
<!-- Stats -->
<div class="shadow-box big-padding text-center stats">
<div class="row">
@ -249,6 +277,12 @@ import CertificateInfo from "../components/CertificateInfo.vue";
import { getMonitorRelativeURL } from "../util.ts";
import { URL } from "whatwg-url";
import { getResBaseURL } from "../util-frontend";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-css";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
export default {
components: {
@ -262,6 +296,7 @@ export default {
PingChart,
Tag,
CertificateInfo,
PrismEditor,
},
data() {
return {
@ -277,6 +312,11 @@ export default {
cacheTime: Date.now(),
importantHeartBeatListLength: 0,
displayedRecords: [],
pushMonitor: {
showPushExamples: false,
currentExample: "javascript-fetch",
code: "",
},
};
},
computed: {
@ -361,13 +401,28 @@ export default {
monitor(to) {
this.getImportantHeartbeatListLength();
},
"monitor.type"() {
if (this.monitor && this.monitor.type === "push") {
this.loadPushExample();
}
},
"pushMonitor.currentExample"() {
this.loadPushExample();
},
},
mounted() {
this.getImportantHeartbeatListLength();
this.$root.emitter.on("newImportantHeartbeat", this.onNewImportantHeartbeat);
if (this.monitor && this.monitor.type === "push") {
if (this.lastHeartBeat.status === -1) {
this.pushMonitor.showPushExamples = true;
}
this.loadPushExample();
}
},
beforeUnmount() {
@ -569,6 +624,25 @@ export default {
}
}
},
/**
* Highlight the example code
* @param {string} code Code
* @returns {string} Highlighted code
*/
pushExampleHighlighter(code) {
return highlight(code, languages.js);
},
loadPushExample() {
this.pushMonitor.code = "";
this.$root.getSocket().emit("getPushExample", this.pushMonitor.currentExample, (res) => {
let code = res.code
.replace("60", this.monitor.interval)
.replace("https://example.com/api/push/key?status=up&msg=OK&ping=", this.pushURL);
this.pushMonitor.code = code;
});
}
},
};
</script>

View File

@ -743,7 +743,7 @@ export default {
/**
* Provide syntax highlighting for CSS
* @param {string} code Text to highlight
* @returns {string} Highlighted HTML
* @returns {string} Highlighted CSS
*/
highlighter(code) {
return highlight(code, languages.css);
@ -1243,20 +1243,6 @@ footer {
}
}
/* required class */
.css-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
border-radius: 1rem;
padding: 10px 5px;
border: 1px solid #ced4da;
.dark & {
background: $dark-bg;
border: 1px solid $dark-border-color;
}
}
.bg-maintenance {
.alert-heading {
font-weight: bold;