5 files changed, 27 insertions, 13 deletions

diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue
index 20747d6f9c..6b536793b7 100644
--- a/src/client/pages/instance/ads.vue
+++ b/src/client/pages/instance/ads.vue
@@ -15,12 +15,17 @@
 				<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
 				<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio>
 			</div>
+			<!--
 			<div style="margin: 32px 0;">
 				{{ $ts.priority }}
 				<MkRadio v-model="ad.priority" value="high">{{ $ts.high }}</MkRadio>
 				<MkRadio v-model="ad.priority" value="middle">{{ $ts.middle }}</MkRadio>
 				<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
 			</div>
+			-->
+			<MkInput v-model:value="ad.ratio" type="number">
+				<span>{{ $ts.ratio }}</span>
+			</MkInput>
 			<MkInput v-model:value="ad.expiresAt" type="date">
 				<span>{{ $ts.expiration }}</span>
 			</MkInput>
@@ -82,6 +87,7 @@ export default defineComponent({
 				memo: '',
 				place: 'square',
 				priority: 'middle',
+				ratio: 1,
 				url: '',
 				imageUrl: null,
 				expiresAt: null,
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 974c4345bb..acd46518f5 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -43,6 +43,7 @@
 			<FormGroup>
 				<template #label>{{ $ts.info }}</template>
 				<FormLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</FormLink>
+				<FormLink :active="page === 'logs'" replace to="/instance/logs"><template #icon><i class="fas fa-stream"></i></template>{{ $ts.logs }}</FormLink>
 			</FormGroup>
 		</FormBase>
 	</div>
@@ -105,6 +106,7 @@ export default defineComponent({
 				case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
 				case 'ads': return defineAsyncComponent(() => import('./ads.vue'));
 				case 'database': return defineAsyncComponent(() => import('./database.vue'));
+				case 'logs': return defineAsyncComponent(() => import('./logs.vue'));
 				case 'abuses': return defineAsyncComponent(() => import('./abuses.vue'));
 				case 'settings': return defineAsyncComponent(() => import('./settings.vue'));
 				case 'files-settings': return defineAsyncComponent(() => import('./files-settings.vue'));
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index f52e5d866b..75a24bcb80 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkUsersDialog from '@client/components/users-dialog.vue';
@@ -280,7 +280,7 @@ export default defineComponent({
 			}
 
 			Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-			this.chartInstance = new Chart(this.canvas, {
+			this.chartInstance = markRaw(new Chart(this.canvas, {
 				type: 'line',
 				data: {
 					labels: new Array(chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
@@ -331,7 +331,7 @@ export default defineComponent({
 						mode: 'index',
 					}
 				}
-			});
+			}));
 		},
 
 		getDate(ago: number) {
diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue
index 7b634259d3..112b0f66d0 100644
--- a/src/client/pages/instance/logs.vue
+++ b/src/client/pages/instance/logs.vue
@@ -5,13 +5,13 @@
 			<span>{{ $ts.domain }}</span>
 		</MkInput>
 		<MkSelect v-model:value="logLevel">
-			<template #label>{{ $ts.level }}</template>
-			<option value="all">{{ $ts.levels.all }}</option>
-			<option value="info">{{ $ts.levels.info }}</option>
-			<option value="success">{{ $ts.levels.success }}</option>
-			<option value="warning">{{ $ts.levels.warning }}</option>
-			<option value="error">{{ $ts.levels.error }}</option>
-			<option value="debug">{{ $ts.levels.debug }}</option>
+			<template #label>Level</template>
+			<option value="all">All</option>
+			<option value="info">Info</option>
+			<option value="success">Success</option>
+			<option value="warning">Warning</option>
+			<option value="error">Error</option>
+			<option value="debug">Debug</option>
 		</MkSelect>
 	</div>
 
@@ -45,6 +45,8 @@ export default defineComponent({
 		MkTextarea,
 	},
 
+	emits: ['info'],
+
 	data() {
 		return {
 			[symbols.PAGE_INFO]: {
@@ -72,6 +74,10 @@ export default defineComponent({
 		this.fetchLogs();
 	},
 
+	mounted() {
+		this.$emit('info', this[symbols.PAGE_INFO]);
+	},
+
 	methods: {
 		fetchLogs() {
 			os.api('admin/logs', {
diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue
index 446c979209..0cd983127f 100644
--- a/src/client/pages/instance/queue.chart.vue
+++ b/src/client/pages/instance/queue.chart.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
 import number from '../../filters/number';
 
@@ -69,7 +69,7 @@ export default defineComponent({
 
 		Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
-		this.chart = new Chart(this.$refs.chart, {
+		this.chart = markRaw(new Chart(this.$refs.chart, {
 			type: 'line',
 			data: {
 				labels: [],
@@ -152,7 +152,7 @@ export default defineComponent({
 					mode: 'index',
 				}
 			}
-		});
+		}));
 
 		this.connection.on('stats', this.onStats);
 		this.connection.on('statsLog', this.onStatsLog);