Merge branch 'develop' of https://codeberg.org/calckey/calckey into upstream/develop

This commit is contained in:
Freeplay 2023-05-29 18:29:55 -04:00
commit 209fbf3759
15 changed files with 214 additions and 614 deletions

View file

@ -1,6 +1,6 @@
{
"name": "calckey",
"version": "14.0.0-dev33",
"version": "14.0.0-dev35",
"codename": "aqua",
"repository": {
"type": "git",

View file

@ -1,9 +1,18 @@
<template>
<div v-if="visible" class="info" :class="{ warn, card }">
<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
<i v-else class="ph-bold ph-lg" :class="icon ? `ph-${icon}` : 'ph-info'"></i>
<i
v-else
class="ph-bold ph-lg"
:class="icon ? `ph-${icon}` : 'ph-info'"
></i>
<slot></slot>
<button v-if="closeable" v-tooltip="i18n.ts.close" class="_button close" @click.stop="close">
<button
v-if="closeable"
v-tooltip="i18n.ts.close"
class="_button close"
@click.stop="close"
>
<i class="ph-x ph-bold ph-lg"></i>
</button>
</div>
@ -30,7 +39,6 @@ function close() {
visible.value = false;
emit("close");
}
</script>
<style lang="scss" scoped>

View file

@ -1,8 +1,11 @@
<template>
<MkInfo v-if="tlHint && !tlHintClosed" :closeable="true" class="_gap" @close="closeHint">
<I18n
:src="tlHint"
>
<MkInfo
v-if="tlHint && !tlHintClosed"
:closeable="true"
class="_gap"
@close="closeHint"
>
<I18n :src="tlHint">
<template #icon></template>
</I18n>
</MkInfo>
@ -165,19 +168,19 @@ if (props.src === "antenna") {
function closeHint() {
switch (props.src) {
case 'home':
case "home":
defaultStore.set("tlHomeHintClosed", true);
break;
case 'local':
case "local":
defaultStore.set("tlLocalHintClosed", true);
break;
case 'recommended':
case "recommended":
defaultStore.set("tlRecommendedHintClosed", true);
break;
case 'social':
case "social":
defaultStore.set("tlSocialHintClosed", true);
break;
case 'global':
case "global":
defaultStore.set("tlGlobalHintClosed", true);
break;
}

View file

@ -1,554 +0,0 @@
<template>
<div class="_debobigegoItem">
<div class="_debobigegoLabel">
<i class="ph-microchip ph-bold ph-lg"></i>
{{ i18n.ts.cpuAndMemory }}
</div>
<div class="_debobigegoPanel xhexznfu">
<div>
<canvas :ref="cpumem"></canvas>
</div>
<div v-if="serverInfo">
<div class="_table">
<div class="_row">
<div class="_cell">
<div class="_label">MEM total</div>
{{ bytes(serverInfo.mem.total) }}
</div>
<div class="_cell">
<div class="_label">MEM used</div>
{{ bytes(memUsage) }} ({{
(
(memUsage / serverInfo.mem.total) *
100
).toFixed(0)
}}%)
</div>
<div class="_cell">
<div class="_label">MEM free</div>
{{ bytes(serverInfo.mem.total - memUsage) }} ({{
(
((serverInfo.mem.total - memUsage) /
serverInfo.mem.total) *
100
).toFixed(0)
}}%)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="_debobigegoItem">
<div class="_debobigegoLabel">
<i class="ph-hard-drives ph-bold ph-lg"></i> {{ i18n.ts.disk }}
</div>
<div class="_debobigegoPanel xhexznfu">
<div>
<canvas :ref="disk"></canvas>
</div>
<div v-if="serverInfo">
<div class="_table">
<div class="_row">
<div class="_cell">
<div class="_label">Disk total</div>
{{ bytes(serverInfo.fs.total) }}
</div>
<div class="_cell">
<div class="_label">Disk used</div>
{{ bytes(serverInfo.fs.used) }} ({{
(
(serverInfo.fs.used / serverInfo.fs.total) *
100
).toFixed(0)
}}%)
</div>
<div class="_cell">
<div class="_label">Disk free</div>
{{
bytes(serverInfo.fs.total - serverInfo.fs.used)
}}
({{
(
((serverInfo.fs.total -
serverInfo.fs.used) /
serverInfo.fs.total) *
100
).toFixed(0)
}}%)
</div>
</div>
</div>
</div>
</div>
</div>
<div class="_debobigegoItem">
<div class="_debobigegoLabel">
<i class="ph-swap ph-bold ph-lg"></i> {{ i18n.ts.network }}
</div>
<div class="_debobigegoPanel xhexznfu">
<div>
<canvas :ref="net"></canvas>
</div>
<div v-if="serverInfo">
<div class="_table">
<div class="_row">
<div class="_cell">
<div class="_label">Interface</div>
{{ serverInfo.net.interface }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, markRaw } from "vue";
import {
Chart,
ArcElement,
LineElement,
BarElement,
PointElement,
BarController,
LineController,
CategoryScale,
LinearScale,
Legend,
Title,
Tooltip,
SubTitle,
} from "chart.js";
import MkwFederation from "../../widgets/federation.vue";
import MkButton from "@/components/MkButton.vue";
import MkSelect from "@/components/form/select.vue";
import MkInput from "@/components/form/input.vue";
import MkContainer from "@/components/MkContainer.vue";
import MkFolder from "@/components/MkFolder.vue";
import { version, url } from "@/config";
import bytes from "@/filters/bytes";
import number from "@/filters/number";
import { i18n } from "@/i18n";
Chart.register(
ArcElement,
LineElement,
BarElement,
PointElement,
BarController,
LineController,
CategoryScale,
LinearScale,
Legend,
Title,
Tooltip,
SubTitle
);
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
import * as os from "@/os";
import { stream } from "@/stream";
export default defineComponent({
components: {
MkButton,
MkSelect,
MkInput,
MkContainer,
MkFolder,
MkwFederation,
},
data() {
return {
version,
url,
stats: null,
serverInfo: null,
connection: null,
queueConnection: markRaw(stream.useChannel("queueStats")),
memUsage: 0,
chartCpuMem: null,
chartNet: null,
jobs: [],
logs: [],
logLevel: "all",
logDomain: "",
modLogs: [],
dbInfo: null,
overviewHeight: "1fr",
queueHeight: "1fr",
paused: false,
i18n,
};
},
computed: {
gridColor() {
// TODO: var(--panel)
return this.$store.state.darkMode
? "rgba(255, 255, 255, 0.1)"
: "rgba(0, 0, 0, 0.1)";
},
},
mounted() {
this.fetchJobs();
Chart.defaults.color = getComputedStyle(
document.documentElement
).getPropertyValue("--fg");
os.api("admin/server-info", {}).then((res) => {
this.serverInfo = res;
this.connection = markRaw(stream.useChannel("serverStats"));
this.connection.on("stats", this.onStats);
this.connection.on("statsLog", this.onStatsLog);
this.connection.send("requestLog", {
id: Math.random().toString().substr(2, 8),
length: 150,
});
this.$nextTick(() => {
this.queueConnection.send("requestLog", {
id: Math.random().toString().substr(2, 8),
length: 200,
});
});
});
},
beforeUnmount() {
if (this.connection) {
this.connection.off("stats", this.onStats);
this.connection.off("statsLog", this.onStatsLog);
this.connection.dispose();
}
this.queueConnection.dispose();
},
methods: {
cpumem(el) {
if (this.chartCpuMem != null) return;
this.chartCpuMem = markRaw(
new Chart(el, {
type: "line",
data: {
labels: [],
datasets: [
{
label: "CPU",
pointRadius: 0,
tension: 0,
borderWidth: 2,
borderColor: "#31748f",
backgroundColor: alpha("#31748f", 0.1),
data: [],
},
{
label: "MEM (active)",
pointRadius: 0,
tension: 0,
borderWidth: 2,
borderColor: "#c4a7e7",
backgroundColor: alpha("#c4a7e7", 0.02),
data: [],
},
{
label: "MEM (used)",
pointRadius: 0,
tension: 0,
borderWidth: 2,
borderColor: "#ebbcba",
borderDash: [5, 5],
fill: false,
data: [],
},
],
},
options: {
aspectRatio: 3,
layout: {
padding: {
left: 16,
right: 16,
top: 16,
bottom: 0,
},
},
legend: {
position: "bottom",
labels: {
boxWidth: 16,
},
},
scales: {
x: {
gridLines: {
display: false,
color: this.gridColor,
zeroLineColor: this.gridColor,
},
ticks: {
display: false,
},
},
y: {
position: "right",
gridLines: {
display: true,
color: this.gridColor,
zeroLineColor: this.gridColor,
},
ticks: {
display: false,
max: 100,
},
},
},
tooltips: {
intersect: false,
mode: "index",
},
},
})
);
},
net(el) {
if (this.chartNet != null) return;
this.chartNet = markRaw(
new Chart(el, {
type: "line",
data: {
labels: [],
datasets: [
{
label: "In",
pointRadius: 0,
tension: 0,
borderWidth: 2,
borderColor: "#94a029",
backgroundColor: alpha("#94a029", 0.1),
data: [],
},
{
label: "Out",
pointRadius: 0,
tension: 0,
borderWidth: 2,
borderColor: "#ff9156",
backgroundColor: alpha("#ff9156", 0.1),
data: [],
},
],
},
options: {
aspectRatio: 3,
layout: {
padding: {
left: 16,
right: 16,
top: 16,
bottom: 0,
},
},
legend: {
position: "bottom",
labels: {
boxWidth: 16,
},
},
scales: {
x: {
gridLines: {
display: false,
color: this.gridColor,
zeroLineColor: this.gridColor,
},
ticks: {
display: false,
},
},
y: {
position: "right",
gridLines: {
display: true,
color: this.gridColor,
zeroLineColor: this.gridColor,
},
ticks: {
display: false,
},
},
},
tooltips: {
intersect: false,
mode: "index",
},
},
})
);
},
disk(el) {
if (this.chartDisk != null) return;
this.chartDisk = markRaw(
new Chart(el, {
type: "line",
data: {
labels: [],
datasets: [
{
label: "Read",
pointRadius: 0,
tension: 0,
borderWidth: 2,
borderColor: "#94a029",
backgroundColor: alpha("#94a029", 0.1),
data: [],
},
{
label: "Write",
pointRadius: 0,
tension: 0,
borderWidth: 2,
borderColor: "#ff9156",
backgroundColor: alpha("#ff9156", 0.1),
data: [],
},
],
},
options: {
aspectRatio: 3,
layout: {
padding: {
left: 16,
right: 16,
top: 16,
bottom: 0,
},
},
legend: {
position: "bottom",
labels: {
boxWidth: 16,
},
},
scales: {
x: {
gridLines: {
display: false,
color: this.gridColor,
zeroLineColor: this.gridColor,
},
ticks: {
display: false,
},
},
y: {
position: "right",
gridLines: {
display: true,
color: this.gridColor,
zeroLineColor: this.gridColor,
},
ticks: {
display: false,
},
},
},
tooltips: {
intersect: false,
mode: "index",
},
},
})
);
},
fetchJobs() {
os.api("admin/queue/deliver-delayed", {}).then((jobs) => {
this.jobs = jobs;
});
},
onStats(stats) {
if (this.paused) return;
const cpu = (stats.cpu * 100).toFixed(0);
const memActive = (
(stats.mem.active / this.serverInfo.mem.total) *
100
).toFixed(0);
const memUsed = (
(stats.mem.used / this.serverInfo.mem.total) *
100
).toFixed(0);
this.memUsage = stats.mem.active;
this.chartCpuMem.data.labels.push("");
this.chartCpuMem.data.datasets[0].data.push(cpu);
this.chartCpuMem.data.datasets[1].data.push(memActive);
this.chartCpuMem.data.datasets[2].data.push(memUsed);
this.chartNet.data.labels.push("");
this.chartNet.data.datasets[0].data.push(stats.net.rx);
this.chartNet.data.datasets[1].data.push(stats.net.tx);
this.chartDisk.data.labels.push("");
this.chartDisk.data.datasets[0].data.push(stats.fs.r);
this.chartDisk.data.datasets[1].data.push(stats.fs.w);
if (this.chartCpuMem.data.datasets[0].data.length > 150) {
this.chartCpuMem.data.labels.shift();
this.chartCpuMem.data.datasets[0].data.shift();
this.chartCpuMem.data.datasets[1].data.shift();
this.chartCpuMem.data.datasets[2].data.shift();
this.chartNet.data.labels.shift();
this.chartNet.data.datasets[0].data.shift();
this.chartNet.data.datasets[1].data.shift();
this.chartDisk.data.labels.shift();
this.chartDisk.data.datasets[0].data.shift();
this.chartDisk.data.datasets[1].data.shift();
}
this.chartCpuMem.update();
this.chartNet.update();
this.chartDisk.update();
},
onStatsLog(statsLog) {
for (const stats of [...statsLog].reverse()) {
this.onStats(stats);
}
},
bytes,
number,
pause() {
this.paused = true;
},
resume() {
this.paused = false;
},
},
});
</script>
<style lang="scss" scoped>
.xhexznfu {
> div:nth-child(2) {
padding: 16px;
border-top: solid 0.5px var(--divider);
}
}
</style>

View file

@ -0,0 +1,145 @@
<template>
<div class="_panel" :class="$style.root">
<div class="ntjkdlsfk">
<div class="_panel">
<XPie class="pie" :value="cpuUsage" />
<div>
<p><i class="ph-cpu ph-bold ph-lg"></i>CPU</p>
<p>{{ meta.cpu.cores }} Logical cores</p>
<p>{{ meta.cpu.model }}</p>
</div>
</div>
<div class="_panel">
<XPie class="pie" :value="memUsage" />
<div>
<p><i class="ph-microchip ph-bold ph-lg"></i>RAM</p>
<p>Total: {{ bytes(memTotal, 1) }}</p>
<p>Used: {{ bytes(memUsed, 1) }}</p>
<p>Free: {{ bytes(memFree, 1) }}</p>
</div>
</div>
<div class="_panel">
<XPie class="pie" :value="diskUsage" />
<div>
<p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
<p>Total: {{ bytes(diskTotal, 1) }}</p>
<p>Free: {{ bytes(diskAvailable, 1) }}</p>
<p>Used: {{ bytes(diskUsed, 1) }}</p>
</div>
</div>
<div class="_panel">
<XPie class="pie" :value="meiliProgress" />
<div>
<p>
<i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch
</p>
<p>
{{ i18n.ts._widgets.meiliStatus }}: {{ meiliAvailable }}
</p>
<p>
{{ i18n.ts._widgets.meiliSize }}:
{{ bytes(meiliTotalSize, 1) }}
</p>
<p>
{{ i18n.ts._widgets.meiliIndexCount }}:
{{ meiliIndexCount }}
</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted } from "vue";
import XPie from "../../widgets/server-metric/pie.vue";
import bytes from "@/filters/bytes";
import { stream } from "@/stream";
import * as os from "@/os";
import { i18n } from "@/i18n";
const meta = await os.api("server-info", {});
const serverStats = await os.api("stats");
let cpuUsage: number = $ref(0);
let memUsage: number = $ref(0);
let memTotal: number = $ref(0);
let memUsed: number = $ref(0);
let memFree: number = $ref(0);
let meiliProgress: number = $ref(0);
let meiliTotalSize: number = $ref(0);
let meiliIndexCount: number = $ref(0);
let meiliAvailable: string = $ref("unavailable");
const diskUsage = $computed(() => meta.fs.used / meta.fs.total);
const diskTotal = $computed(() => meta.fs.total);
const diskUsed = $computed(() => meta.fs.used);
const diskAvailable = $computed(() => meta.fs.total - meta.fs.used);
function onStats(stats) {
cpuUsage = stats.cpu;
memUsage = stats.mem.active / meta.mem.total;
memTotal = meta.mem.total;
memUsed = stats.mem.active;
memFree = memTotal - memUsed;
meiliTotalSize = stats.meilisearch.size;
meiliIndexCount = stats.meilisearch.indexed_count;
meiliAvailable = stats.meilisearch.health;
meiliProgress = meiliIndexCount / serverStats.notesCount;
}
const connection = stream.useChannel("serverStats");
onMounted(() => {
connection.on("stats", onStats);
connection.dispose();
});
onUnmounted(() => {
connection.off("stats", onStats);
connection.dispose();
});
</script>
<style lang="scss" module>
.root {
padding: 20px;
}
.ntjkdlsfk {
display: flex;
padding: 16px;
> ._panel {
> .pie {
height: 82px;
flex-shrink: 0;
margin-right: 16px;
}
> div {
flex: 1;
> p {
margin: 0;
font-size: 0.8em;
&:first-child {
font-weight: bold;
margin-bottom: 4px;
> i {
margin-right: 4px;
}
}
}
}
}
}
</style>

View file

@ -50,6 +50,11 @@
<template #header>Inbox queue</template>
<XQueue domain="inbox" />
</MkFolder>
<MkFolder class="item">
<template #header>Server metrics</template>
<XMetrics domain="inbox" />
</MkFolder>
</div>
</MkSpacer>
</template>
@ -71,6 +76,7 @@ import XActiveUsers from "./overview.active-users.vue";
import XStats from "./overview.stats.vue";
import XModerators from "./overview.moderators.vue";
import XHeatmap from "./overview.heatmap.vue";
import XMetrics from "./overview.metrics.vue";
import MkTagCloud from "@/components/MkTagCloud.vue";
import { version, url } from "@/config";
import * as os from "@/os";

View file

@ -7,7 +7,9 @@
:tabs="headerTabs"
/></template>
<MkSpacer :content-max="700">
<MkInfo class="_gap" :warn="true">{{ i18n.ts.channelFederationWarn }}</MkInfo>
<MkInfo class="_gap" :warn="true">{{
i18n.ts.channelFederationWarn
}}</MkInfo>
<swiper
:round-lengths="true"
:touch-angle="25"

View file

@ -8,11 +8,7 @@
/></template>
<MkSpacer :content-max="700">
<div class="ieepwinx">
<MkInfo
class="_gap"
:icon="'flying-saucer'"
:card="true"
>
<MkInfo class="_gap" :icon="'flying-saucer'" :card="true">
<p>{{ i18n.ts.antennasDesc }}</p>
<MkButton
:link="true"
@ -24,10 +20,7 @@
>
</MkInfo>
<div class="">
<MkPagination
ref="list"
:pagination="pagination"
>
<MkPagination ref="list" :pagination="pagination">
<template #default="{ items }">
<div v-for="antenna in items" :key="antenna.id">
<MkA
@ -35,7 +28,9 @@
:link="true"
:to="`/timeline/antenna/${antenna.id}`"
>
<i class="ph-flying-saucer ph-bold ph-lg"></i
<i
class="ph-flying-saucer ph-bold ph-lg"
></i
><i
:class="`${
antenna.hasUnreadNote

View file

@ -14,10 +14,7 @@
class="list"
>
<template #empty>
<MkInfo
:icon="'paperclip'"
:card="true"
>
<MkInfo :icon="'paperclip'" :card="true">
<p>{{ i18n.ts.clipsDesc }}</p>
</MkInfo>
</template>

View file

@ -8,11 +8,7 @@
/></template>
<MkSpacer :content-max="700">
<div class="qkcjvfiv">
<MkInfo
class="_gap"
:icon="'list-bullets'"
:card="true"
>
<MkInfo class="_gap" :icon="'list-bullets'" :card="true">
<p>{{ i18n.ts.listsDesc }}</p>
<MkButton primary class="add" @click="create"
><i class="ph-plus ph-bold ph-lg"></i>

View file

@ -3,16 +3,16 @@ import { i18n } from "@/i18n";
import { mainRouter } from "@/router";
export async function search() {
const searchOptions =
"Advanced search operators\n" +
"from:user => filter by user\n" +
"has:image/video/audio/text/file => filter by attachment types\n" +
"domain:domain.com => filter by domain\n" +
"before:Date => show posts made before Date\n" +
"after:Date => show posts made after Date\n" +
'"text" => get posts with exact text between quotes\n' +
"filter:following => show results only from users you follow\n" +
"filter:followers => show results only from followers\n";
// const searchOptions =
// "Advanced search operators\n" +
// "from:user => filter by user\n" +
// "has:image/video/audio/text/file => filter by attachment types\n" +
// "domain:domain.com => filter by domain\n" +
// "before:Date => show posts made before Date\n" +
// "after:Date => show posts made after Date\n" +
// '"text" => get posts with exact text between quotes\n' +
// "filter:following => show results only from users you follow\n" +
// "filter:followers => show results only from followers\n";
const { canceled, result: query } = await os.inputText({
title: i18n.ts.search,

View file

@ -3,19 +3,17 @@
<div
:class="$style.container"
:style="{
backgroundImage: $instance.bannerUrl
? `url(${$instance.bannerUrl})`
: null,
backgroundImage: `url(${$instance.bannerUrl})`,
}"
>
<div :class="$style.iconContainer">
<img
:src="
$instance.iconUrl ??
$instance.faviconUrl ??
$instance.iconUrl ||
$instance.faviconUrl ||
'/favicon.ico'
"
alt=""
alt="Instance logo"
:class="$style.icon"
/>
</div>
@ -107,7 +105,7 @@ defineExpose<WidgetComponentExpose>({
-1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
}
.host {
.name {
font-weight: bold;
}
</style>

View file

@ -2,7 +2,7 @@
<div class="vrvdvrys">
<XPie class="pie" :value="usage" />
<div>
<p><i class="ph-microchip ph-bold ph-lg"></i>CPU</p>
<p><i class="ph-cpu ph-bold ph-lg"></i>CPU</p>
<p>{{ meta.cpu.cores }} Logical cores</p>
<p>{{ meta.cpu.model }}</p>
</div>

View file

@ -1,11 +1,15 @@
<template>
<div class="verusivbr">
<XPie class="pie" :value="progress" />
<XPie
v-tooltip="i18n.ts.meiliIndexCount"
class="pie"
:value="progress"
/>
<div>
<p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>
<p>{{ i18n.ts._widgets.meiliStatus }}: {{ available }}</p>
<p>{{ i18n.ts._widgets.meiliSize }}: {{ bytes(total_size, 2) }}</p>
<p>{{ i18n.ts._widgets.meiliIndexCount }}: {{ index_count }}</p>
<p>{{ i18n.ts._widgets.meiliSize }}: {{ bytes(totalSize, 1) }}</p>
<p>{{ i18n.ts._widgets.meiliIndexCount }}: {{ indexCount }}</p>
</div>
</div>
<br />
@ -25,15 +29,15 @@ const props = defineProps<{
let progress: number = $ref(0);
let serverStats = $ref(null);
let total_size: number = $ref(0);
let index_count: number = $ref(0);
let totalSize: number = $ref(0);
let indexCount: number = $ref(0);
let available: string = $ref("unavailable");
function onStats(stats) {
total_size = stats.meilisearch.size;
index_count = stats.meilisearch.indexed_count;
totalSize = stats.meilisearch.size;
indexCount = stats.meilisearch.indexed_count;
available = stats.meilisearch.health;
progress = index_count / serverStats.notesCount;
progress = indexCount / serverStats.notesCount;
}
onMounted(() => {

View file

@ -2,7 +2,7 @@
<div class="zlxnikvl">
<XPie class="pie" :value="usage" />
<div>
<p><i class="ph-cpu ph-bold ph-lg"></i>RAM</p>
<p><i class="ph-microchip ph-bold ph-lg"></i>RAM</p>
<p>Total: {{ bytes(total, 1) }}</p>
<p>Used: {{ bytes(used, 1) }}</p>
<p>Free: {{ bytes(free, 1) }}</p>