core&ui: add clean all monitors

Author: pandadtdyy

packages/server/handler/monitor.ts

@@ -47,6 +47,20 @@ class MonitorAdminHandler extends AuthHandler {
         this.response.body = { success: true };
     }
 
+    async postDelete(params) {
+        const { _id } = params;
+        if (!_id) throw new BadRequestError();
+        const m = await this.ctx.db.monitor.findOne({ _id });
+        if (!m) throw new BadRequestError();
+        await this.ctx.db.monitor.remove({ _id }, {});
+        this.response.body = { success: true };
+    }
+
+    async postCleanAll() {
+        await this.ctx.db.monitor.remove({}, { multi: true });
+        this.response.body = { success: true };
+    }
+
     async postUpdateAll(params) {
         const {
             name, group, camera, desktop, ips,

packages/server/utils/color.ts

@@ -216,7 +216,7 @@ export const CHINESE_NAME = {
     lightslategray: '浅板岩灰',
     lightsteelblue: '浅钢蓝',
     lightyellow: '浅黄',
-    lime: '酸橙色',
+    lime: '酸橙绿',
     limegreen: '酸橙绿',
     linen: '亚麻色',
     magenta: '洋红',

packages/server/utils/metrics.ts

@@ -32,7 +32,7 @@ export function createMetricsRegistry(ctx: Context) {
         labelNames: ['status'],
         async collect() {
             const machines = await ctx.db.monitor.find({});
-            const onlines = machines.filter((m) => m.updateAt > new Date().getTime() - 1000 * 60);
+            const onlines = machines.filter((m) => m.updateAt > new Date().getTime() - 1000 * 120);
             this.set({ status: 'online' }, onlines.length);
             this.set({ status: 'offline' }, machines.length - onlines.length);
         },

packages/ui/app/components/MonitorDisplay.tsx

@@ -82,7 +82,9 @@ export function MonitorTable({ monitors, openMonitorInfo }) {
             </HoverCard.Dropdown>
           </HoverCard>) : 'No Info' }
       </Table.Td>
-      <Table.Td><MonitorInfoButton monitor={m} action={openMonitorInfo} /></Table.Td>
+      <Table.Td>
+        <MonitorInfoButton monitor={m} action={openMonitorInfo} />
+      </Table.Td>
     </Table.Tr>
   ));
 

packages/ui/app/components/MonitorInfo.tsx

@@ -6,11 +6,11 @@ import {
 import { notifications } from '@mantine/notifications';
 import {
   IconCircleChevronLeft,
-  IconDeviceComputerCamera, IconDeviceDesktop, IconInfoCircle,
+  IconDeviceComputerCamera, IconDeviceDesktop, IconInfoCircle, IconX,
 } from '@tabler/icons-react';
 import mpegts from 'mpegts.js';
 
-function VideoPlayer({ client = null, type = 'camera' }) {
+function VideoPlayer({ client, type = 'camera' }) {
   const videoRef = React.useRef(null);
   const needProxy = client && client[type].startsWith('proxy://');
   const src = `${needProxy ? '/stream/' : 'http://'}${client.ip}${
@@ -142,6 +142,24 @@ export function MonitorInfo({
 }
 
 export function MonitorInfoButton({ monitor, action }) {
+  const del = async (m) => {
+    try {
+      const res = await (await fetch('/monitor', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ _id: m._id, operation: 'delete' }),
+      })).json();
+      if (res.error) {
+        notifications.show({ title: 'Error', message: `${res.error.message}(${res.error.params})`, color: 'red' });
+        return;
+      }
+      notifications.show({ title: 'Success', message: 'Client deleted', color: 'green' });
+    } catch (e) {
+      console.error(e);
+      notifications.show({ title: 'Error', message: 'Failed to delete client', color: 'red' });
+    }
+  };
+
   return (
     <Group>
       <Tooltip label="Info">
@@ -161,6 +179,9 @@ export function MonitorInfoButton({ monitor, action }) {
           </ActionIcon>
         </Tooltip>
       )}
+      <Tooltip label="Delete">
+        <ActionIcon variant="transparent" color="red" aria-label='Delete' onClick={() => del(monitor)}><IconX /></ActionIcon>
+      </Tooltip>
     </Group>
   );
 }

packages/ui/app/pages/Monitor.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Button, Card, Center, Group, LoadingOverlay, Tabs, Text, Title,
 } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import { useQuery } from '@tanstack/react-query';
 import { MonitorBatchModal } from '../components/MonitorBatchModel';
 import { MonitorCards, MonitorTable } from '../components/MonitorDisplay';
@@ -26,6 +27,25 @@ export default function Monitor() {
     setInfoTab(tab);
   };
 
+  const cleanAll = async () => {
+    try {
+      const res = await (await fetch('/monitor', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ operation: 'clean_all' }),
+      })).json();
+      if (res.error) {
+        notifications.show({ title: 'Error', message: res.error.message, color: 'red' });
+        return;
+      }
+      notifications.show({ title: 'Success', message: 'All monitors cleaned', color: 'green' });
+      query.refetch();
+    } catch (e) {
+      console.error(e);
+      notifications.show({ title: 'Error', message: 'Failed to clean all monitors', color: 'red' });
+    }
+  };
+
   return (
     <>
       {detailM ? (
@@ -46,6 +66,13 @@ export default function Monitor() {
                 </Button>
               )}
               <MonitorBatchModal refresh={query.refetch} />
+              <Button
+                variant="outline"
+                color="red"
+                onClick={cleanAll}
+              >
+                Clean All
+              </Button>
             </Group>
           </Group>
           <Tabs value={activeTab} onChange={(value) => setActiveTab(value!)}>