mirror/kener
1
0
Fork 0
mirror of https://github.com/rajnandan1/kener.git synced 2026-04-23 03:27:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
Raj Nandan Sharma
2023-12-05 23:09:34 +05:30
parent dc2d24c121
commit cd0417cca7
6 changed files with 71 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/startup.js
-14
View File
@@ -10,7 +10,6 @@ import yaml from "js-yaml";
import { Cron } from "croner";
import { MONITOR, SITE, APP_HTML, FOLDER, FOLDER_MONITOR, FOLDER_SITE } from "./constants.js";
import { OneMinuteFetch } from "./cron-minute.js";
import * as cheerio from "cheerio";
let monitors = [];
let site = {};
const envSecrets = [];
@@ -58,19 +57,6 @@ const Startup = async () => {
try {
const fileContent = fs.readFileSync(MONITOR, "utf8");
site = yaml.load(fs.readFileSync(SITE, "utf8"));
const appHTML = fs.readFileSync(APP_HTML, "utf8");
const $ = cheerio.load(appHTML);
if (site.theme !== undefined && site.theme !== null && site.theme === "dark") {
$("#kener-app").attr("class", "dark dark:bg-background");
} else {
$("#kener-app").attr("class", "");
}
if (site.favicon !== undefined && site.favicon !== null && site.favicon === "dark") {
$("#kener-app-favicon").attr("href", site.favicon);
} else {
$("#kener-app-favicon").attr("href", "/kener.png");
}
fs.writeFileSync(APP_HTML, $.html());
monitors = yaml.load(fileContent);
} catch (error) {
console.log(error);
src/app.html
+12 -13
View File
@@ -1,13 +1,12 @@
<!DOCTYPE html><html lang="en" id="kener-app" class="dark dark:bg-background"><head>
<meta charset="utf-8">
<link rel="icon" id="kener-app-favicon" href="/kener.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head><body data-sveltekit-preload-data="hover">%sveltekit.head%
<div style="display: contents">%sveltekit.body%</div>
</body></html>
<!DOCTYPE html>
<html lang="en" class="dark dark:bg-background">
<head>
<meta charset="utf-8" />
<link rel="icon" id="kener-app-favicon" href="/kener.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
src/kener.css
+13 -1
View File
@@ -121,7 +121,7 @@ section {
background-color:#f1f5f8;
}
.dark .bg-api-nodata {
background-color: rgba(100, 100, 100, 0.4);
background-color: rgba(100, 100, 100, .4);
}
.text-api-nodata {
color: #f1f5f8;
@@ -139,6 +139,17 @@ section {
.bgg-api-degraded {
background: linear-gradient(to right, rgba(187, 219, 243, 0) 0%, rgba(255, 184, 76, 0.5) 50%, rgba(187, 219, 243, 0) 100%);
}
.today-sq + .hidden .message {
z-index: 30;
/* float: left; */
/* margin-top: -15px; */
position: absolute;
width: 300px;
}
.today-sq:hover + .hidden {
display: block;
}
.today-sq:hover {
/* transform: scale(1.1); */
box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
@@ -152,6 +163,7 @@ section {
}
.today-sq {
position: relative;
z-index: 0;
}
.today-sq-div .today-sq:last-child {
/* animation: blink 1s linear infinite; */
src/lib/components/monitor.svelte
+24 -18
View File
@@ -8,13 +8,14 @@
import { Button } from "$lib/components/ui/button";
import moment from "moment";
import axios from "axios";
import { ArrowDown, ArrowUp, ArrowRight, BadgeCheck } from "lucide-svelte";
import { ArrowDown, ArrowUp, ArrowRight, BadgeCheck, Dot } from "lucide-svelte";
import { buttonVariants } from "$lib/components/ui/button";
import * as Alert from "$lib/components/ui/alert";
export let monitor;
let loading90 = true;
let todayDD = moment().format("YYYY-MM-DD")
let uptime90Day = "0";
let uptime0Day = "0";
let dailyUps = 0;
@@ -23,7 +24,7 @@
let view = "90day";
let _0Day = {};
let _90Day = {};
const statusObj = {
let statusObj = {
UP: "api-up",
DEGRADED: "api-degraded",
DOWN: "api-down",
@@ -132,9 +133,10 @@
dailyDown = status == "DOWN" ? dailyDown + 1 : dailyDown;
dailyDegraded = status == "DEGRADED" ? dailyDegraded + 1 : dailyDegraded;
}
uptime0Day = parseUptime(dailyUps + dailyDegraded, dailyUps + dailyDown + dailyDegraded);
}
console.log('>>>>2>>---- monitor:136 ', _90Day, todayDD);
loading90 = false;
};
@@ -147,7 +149,7 @@
<Card.Root class="w-full">
<Card.Header>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 relative {!!monitor.image?'pl-11':''}">
<div class="col-span-3 md:col-span-2 relative {!!monitor.image?'pl-11':''}">
{#if monitor.image}
<img src="{monitor.image}" class="w-8 h-8 left-0 top-[1px] absolute" alt="" srcset="">
{/if}
@@ -160,7 +162,7 @@
</Card.Description>
{/if}
</div>
<div class="col-span-1 text-right">
<div class="col-span-3 md:col-span-1 md:text-right">
{#if monitor.hasActiveIncident}
<a href="incident/{monitor.folderName}">
@@ -169,26 +171,22 @@
Ongoing Incident
</a>
</a>
{:else}
<div class="float-right mt-[8px]">
<picture>
<source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f4af/512.webp" class="float-right" type="image/webp">
<img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f4af/512.gif" alt="💯" width="32" height="32">
</picture>
</div>
{:else if _90Day[todayDD] && _90Day[todayDD].cssClass == statusObj.DOWN}
<p class="text-destructive mt-3 text-sm font-semibold">
Down for {_90Day[todayDD].DOWN} minutes
</p>
{/if}
</div>
</div>
</Card.Header>
<Separator class="mb-4 mt-1" />
<Card.Content>
<div class="grid grid-cols-4 gap-4 mb-4">
<div class="col-span-3 text-left">
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="col-span-3 sm:col-span-2 text-left">
<Button class="h-9 px-4 py-2 w-48 rounded-full sm:w-auto" variant="{view != '90day' ? 'ghost' : ''}" on:click="{(e) => {switchView('90day')}}">90 Day</Button>
<Button class="h-9 px-4 py-2 w-48 rounded-full sm:w-auto" variant="{view != '0day' ? 'ghost' : ''}" on:click="{(e) => {switchView('0day')}}">Today</Button>
</div>
<div class="col-span-1 text-right">
<div class="col-span-3 sm:col-span-1 sm:text-right">
<a href="/incident/{monitor.folderName}#past_incident" class={buttonVariants({ variant: "ghost" })}>
Past Incidents <ArrowRight size="{16}" />
@@ -222,8 +220,9 @@
</div>
<div class="flex flex-wrap today-sq-div mt-[45px]">
{#each Object.entries(_0Day) as [ts, bar] }
<div class="h-[10px] bg-{bar.cssClass} w-[10px] today-sq m-[1px]" title="{bar.timestamp} - {bar.status} - {bar.latency} ms">
{#if bar.index == 0}
<div data-index="{bar.index}" class="h-[10px] bg-{bar.cssClass} w-[10px] today-sq m-[1px]" >
{#if bar.index == 0}
<div class="arrow start text-sm">
Midnight
<ArrowDown size="{16}" />
@@ -235,6 +234,13 @@
</div>
{/if}
</div>
<div class="hidden relative">
<div data-index="{bar.index}" class="w-[300px] pb-2 pr-1 pl-1 text-sm text-center rounded font-semibold message bg-indigo-600 text-yellow-50">
<span class="text-{bar.cssClass} text-2xl">•</span> {bar.timestamp} / {bar.status} / {bar.latency} ms
</div>
</div>
{/each}
</div>
{/if}
src/lib/docs/docs.md
+19 -2
View File
@@ -83,6 +83,17 @@ This translates to
```
## theme
It can be set by modifying the `<html>` class in `src/app.html` file
### Dark Theme
```html
<!DOCTYPE html>
<html lang="en" class="dark dark:bg-background">
```
### Light theme
```html
<!DOCTYPE html>
<html lang="en" >
```
Can be `light` or `dark`. Defaults to `light`
## siteURL
@@ -110,11 +121,16 @@ logo: "https://www.example.com/logo.png
```
## favicon
```yaml
It can be set by modifying the `<head>` tag in `src/app.html` file.
Example add a png called `logo.png` file in `static/` and then
```html
...
favicon: "https://www.example.com/favicon.ico
<link rel="icon" href="/logo.png" />
...
```
## github
For incident kener uses github comments. Create an empty [github](https://github.com) public repo and add them to `site.yaml`
```yaml
@@ -193,6 +209,7 @@ Sample
| tag | Required + Unique | This is used to tag incidents created in Github using comments |
| image | Optional | To show a logo before the name |
| cron | Optional | Use cron expression to specify the interval to run the monitors. Defaults to `* * * * *` i.e every minute |
| timeout | Optional | Timeout in milliseconds to cancel HTTP call. Default is 5000 |
| method | Optional | HTTP Method |
| url | Optional | HTTP URL |
| headers | Optional | HTTP headers |
src/routes/docs/+page.svelte
+3 -3
View File
@@ -40,7 +40,7 @@
</script>
<section class="mx-auto container rounded-3xl bg-white mt-32">
<div class="grid grid-cols-5 gap-4">
<div class="col-span-1 border-r-2 border-gray-500">
<div class="col-span-5 md:col-span-1 hidden md:block border-r-2 border-gray-500">
<ul class="w-full sticky top-0 text-sm font-medium text-gray-900 bg-white mt-8 rounded-lg">
{#each sideBar as item}
<li class="w-full px-4 py-2">
@@ -50,8 +50,8 @@
<li class="w-full px-4 py-2 rounded-b-lg">Download</li>
</ul>
</div>
<div class="col-span-4">
<div class="bg-white p-10 md">
<div class="col-span-5 md:col-span-4">
<div class="bg-white pt-6 p-0 md:p-10">
<article
id="markdown"
class="prose prose-stone max-w-none prose-code:bg-gray-200 prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:font-mono prose-code:text-sm prose-code:rounded prose-code:font-mono"