feat(connections): copy to clipboard on right click

vAHiD55555 · Sep 3, 2023 · 58afb5f · 58afb5f
1 parent 3f90a81
commit 58afb5f
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -21,13 +21,15 @@
     "@solid-primitives/keyed": "^1.2.0",
     "@solid-primitives/media": "^2.2.5",
     "@solid-primitives/storage": "^2.1.1",
+    "@solid-primitives/timer": "^1.3.7",
     "@solid-primitives/websocket": "^1.1.0",
     "@solidjs/router": "^0.8.3",
     "@tabler/icons-solidjs": "^2.32.0",
     "@tanstack/solid-table": "^8.9.3",
     "@tanstack/solid-virtual": "3.0.0-beta.6",
     "@thisbeyond/solid-dnd": "^0.7.4",
     "@types/byte-size": "^8.1.0",
+    "@types/lodash": "^4.14.197",
     "@types/node": "^20.5.8",
     "@types/uuid": "^9.0.3",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
@@ -45,6 +47,7 @@
     "is-ip": "^5.0.1",
     "ky": "^1.0.0",
     "lint-staged": "^14.0.1",
+    "lodash": "^4.17.21",
     "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-tailwindcss": "^0.5.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,3 +1,6 @@
+import { ApexOptions } from 'apexcharts'
+import byteSize from 'byte-size'
+
 export const themes = [
   'light',
   'dark',
@@ -40,6 +43,38 @@ export enum ROUTES {
   Config = '/config',
 }
 
+export const CHART_MAX_XAXIS = 10
+
+export const DEFAULT_CHART_OPTIONS: ApexOptions = {
+  title: { align: 'center', style: { color: 'gray' } },
+  chart: {
+    toolbar: { show: false },
+    zoom: { enabled: false },
+    animations: { easing: 'linear' },
+  },
+  noData: { text: 'Loading...' },
+  legend: {
+    fontSize: '14px',
+    labels: { colors: 'gray' },
+    itemMargin: { horizontal: 64 },
+  },
+  dataLabels: { enabled: false },
+  grid: { yaxis: { lines: { show: false } } },
+  stroke: { curve: 'smooth' },
+  tooltip: { enabled: false },
+  xaxis: {
+    range: CHART_MAX_XAXIS,
+    labels: { show: false },
+    axisTicks: { show: false },
+  },
+  yaxis: {
+    labels: {
+      style: { colors: 'gray' },
+      formatter: (val) => byteSize(val).toString(),
+    },
+  },
+}
+
 export enum LATENCY_QUALITY_MAP_HTTP {
   NOT_CONNECTED = -1,
   MEDIUM = 200,

diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
@@ -1,3 +1,4 @@
+import { writeClipboard } from '@solid-primitives/clipboard'
 import { createEventSignal } from '@solid-primitives/event-listener'
 import { useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
@@ -304,7 +305,12 @@ export default () => {
                 <tr class="hover">
                   <For each={row.getVisibleCells()}>
                     {(cell) => (
-                      <td>
+                      <td
+                        onContextMenu={(e) => {
+                          e.preventDefault()
+                          writeClipboard(cell.renderValue() as string)
+                        }}
+                      >
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext(),

diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx
@@ -1,8 +1,10 @@
 import { createEventSignal } from '@solid-primitives/event-listener'
 import { useI18n } from '@solid-primitives/i18n'
+import { makeTimer } from '@solid-primitives/timer'
 import { createReconnectingWS } from '@solid-primitives/websocket'
 import type { ApexOptions } from 'apexcharts'
 import byteSize from 'byte-size'
+import { merge } from 'lodash'
 import { SolidApexCharts } from 'solid-apexcharts'
 import {
   JSX,
@@ -11,13 +13,11 @@ import {
   createEffect,
   createMemo,
   createSignal,
-  onCleanup,
 } from 'solid-js'
+import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
 import { secret, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
-const CHART_MAX_XAXIS = 10
-
 const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
   <div class="stat flex-1">
     <div class="stat-title text-primary-content">{props.label}</div>
@@ -34,26 +34,24 @@ export default () => {
     [],
   )
   const [memories, setMemories] = createSignal<number[]>([])
+
   // https://github.com/apexcharts/apexcharts.js/blob/main/samples/source/line/realtime.xml
   // TODO: need a better way
-  const preventLeakTimer = setInterval(
+  makeTimer(
     () => {
       setTraffics((traffics) => traffics.slice(-CHART_MAX_XAXIS))
       setMemories((memo) => memo.slice(-CHART_MAX_XAXIS))
     },
-    // we shrink the chart data array size down every 10 minutes
+    // we shrink the chart data array size down every 10 minutes to prevent memory leaks
     10 * 60 * 1000,
+    setInterval,
   )
 
-  onCleanup(() => clearInterval(preventLeakTimer))
-
   const trafficWS = createReconnectingWS(
     `${wsEndpointURL()}/traffic?token=${secret()}`,
   )
 
-  const trafficWSMessageEvent = createEventSignal<{
-    message: WebSocketEventMap['message']
-  }>(trafficWS, 'message')
+  const trafficWSMessageEvent = createEventSignal(trafficWS, 'message')
 
   const traffic = () => {
     const data = trafficWSMessageEvent()?.data
@@ -64,50 +62,12 @@ export default () => {
   createEffect(() => {
     const t = traffic()
 
-    if (t) {
-      setTraffics((traffics) => [...traffics, t])
-    }
+    if (t) setTraffics((traffics) => [...traffics, t])
   })
 
-  const defaultChartOptions: ApexOptions = {
-    chart: {
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      animations: { easing: 'linear' },
-    },
-    noData: { text: 'Loading...' },
-    legend: {
-      fontSize: '14px',
-      labels: { colors: 'gray' },
-      itemMargin: { horizontal: 64 },
-    },
-    dataLabels: { enabled: false },
-    grid: { yaxis: { lines: { show: false } } },
-    stroke: { curve: 'smooth' },
-    tooltip: { enabled: false },
-    xaxis: {
-      range: CHART_MAX_XAXIS,
-      labels: { show: false },
-      axisTicks: { show: false },
-    },
-    yaxis: {
-      labels: {
-        style: { colors: 'gray' },
-        formatter(val) {
-          return byteSize(val).toString()
-        },
-      },
-    },
-  }
-
-  const trafficChartOptions = createMemo<ApexOptions>(() => ({
-    title: {
-      text: t('traffic'),
-      align: 'center',
-      style: { color: 'gray' },
-    },
-    ...defaultChartOptions,
-  }))
+  const trafficChartOptions = createMemo<ApexOptions>(() =>
+    merge({ title: { text: t('traffic') } }, DEFAULT_CHART_OPTIONS),
+  )
 
   const trafficChartSeries = createMemo(() => [
     {
@@ -124,9 +84,7 @@ export default () => {
     `${wsEndpointURL()}/memory?token=${secret()}`,
   )
 
-  const memoryWSMessageEvent = createEventSignal<{
-    message: WebSocketEventMap['message']
-  }>(memoryWS, 'message')
+  const memoryWSMessageEvent = createEventSignal(memoryWS, 'message')
 
   const memory = () => {
     const data = memoryWSMessageEvent()?.data
@@ -137,19 +95,12 @@ export default () => {
   createEffect(() => {
     const m = memory()
 
-    if (m) {
-      setMemories((memories) => [...memories, m])
-    }
+    if (m) setMemories((memories) => [...memories, m])
   })
 
-  const memoryChartOptions = createMemo<ApexOptions>(() => ({
-    title: {
-      text: t('memory'),
-      align: 'center',
-      style: { color: 'gray' },
-    },
-    ...defaultChartOptions,
-  }))
+  const memoryChartOptions = createMemo<ApexOptions>(() =>
+    merge({ title: { text: t('memory') } }, DEFAULT_CHART_OPTIONS),
+  )
 
   const memoryChartSeries = createMemo(() => [{ data: memories() }])