feat: added monitoring for node

package.json

@@ -33,7 +33,7 @@
     }
   },
   "scripts": {
-    "dev": "pnpm run build --mode development",
+    "dev": "vite build --watch --mode development",
     "serve": "vite",
     "serve:local": "vite serve --port=8081 --mode local",
     "serve:dist": "serve dist",
@@ -50,9 +50,7 @@
     "build:docker": "vite build --mode docker",
     "build:local": "vite build --mode local",
     "build:lib": "vite build",
-    "build:lib:watch": "vite build --target lib --mode production --watch src/index.ts",
-    "build:lib:local": "vite build --target lib --mode local src/index.ts",
-    "build:lib:analyze": "vite build --target lib --mode analyze src/index.ts",
+    "build:lib:analyze": "vite build --mode analyze",
     "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit",
     "lint": "vite lint",
     "test": "jest"
@@ -77,6 +75,7 @@
     "async-validator": "^4.2.5",
     "atom-material-icons": "^3.0.0",
     "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
     "core-js": "^3.37.1",
     "crawlab-vue3-dropzone": "3.0.3",
     "cron-parser": "^4.9.0",

src/components/index.ts

@@ -9,10 +9,10 @@ import MetricLineChart from './chart/MetricLineChart.vue';
 import PieChart from './chart/PieChart.vue';
 import ContextMenu from './context-menu/ContextMenu.vue';
 import ContextMenuList from './context-menu/ContextMenuList.vue';
-import * as date from './date/date';
 import DateRangePicker from './date/DateRangePicker.vue';
 import DateTimeRangePicker from './date/DateTimeRangePicker.vue';
 import RangePicker from './date/RangePicker.vue';
+import * as date from './date/date';
 import ConfirmDialog from './dialog/ConfirmDialog.vue';
 import CreateEditDialog from './dialog/CreateEditDialog.vue';
 import Dialog from './dialog/Dialog.vue';
@@ -34,7 +34,6 @@ import FileActions from './file/FileActions.vue';
 import FileDiff from './file/FileDiff.vue';
 import FileEditor from './file/FileEditor.vue';
 import FileEditorCreateWithAiDialog from './file/FileEditorCreateWithAiDialog.vue';
-import * as fileEditorDropZone from './file/fileEditorDropZone';
 import FileEditorNavMenu from './file/FileEditorNavMenu.vue';
 import FileEditorNavMenuContextMenu from './file/FileEditorNavMenuContextMenu.vue';
 import FileEditorNavTabs from './file/FileEditorNavTabs.vue';
@@ -44,15 +43,16 @@ import FileEditorSettingsDialog from './file/FileEditorSettingsDialog.vue';
 import FileTab from './file/FileTab.vue';
 import FileUpload from './file/FileUpload.vue';
 import UploadFilesDialog from './file/UploadFilesDialog.vue';
-import * as filter from './filter/filter';
+import * as fileEditorDropZone from './file/fileEditorDropZone';
 import FilterCondition from './filter/FilterCondition.vue';
 import FilterConditionList from './filter/FilterConditionList.vue';
 import FilterInput from './filter/FilterInput.vue';
 import FilterSelect from './filter/FilterSelect.vue';
+import * as filter from './filter/filter';
 import Form from './form/Form.vue';
 import FormItem from './form/FormItem.vue';
-import * as formTable from './form/formTable';
 import FormTableField from './form/FormTableField.vue';
+import * as formTable from './form/formTable';
 import useForm from './form/useForm';
 import CreateEditGitDialog from './git/CreateEditGitDialog.vue';
 import CreateGitBranchDialog from './git/CreateGitBranchDialog.vue';
@@ -69,9 +69,9 @@ import GitStatus from './git/GitStatus.vue';
 import UploadGitFilesDialog from './git/UploadGitFilesDialog.vue';
 import useGit from './git/useGit';
 import AtomMaterialIcon from './icon/AtomMaterialIcon.vue';
-import * as icon from './icon/icon';
 import Icon from './icon/Icon.vue';
 import MenuItemIcon from './icon/MenuItemIcon.vue';
+import * as icon from './icon/icon';
 import InputList from './input/InputList.vue';
 import DetailTabList from './list/DetailTabList.vue';
 import NavActionBack from './nav/NavActionBack.vue';
@@ -94,8 +94,8 @@ import NodeStatus from './node/NodeStatus.vue';
 import NodeType from './node/NodeType.vue';
 import useNode from './node/useNode';
 import CreateEditNotificationDialog from './notification/CreateEditNotificationDialog.vue';
-import * as notification from './notification/notification';
 import NotificationForm from './notification/NotificationForm.vue';
+import * as notification from './notification/notification';
 import CreateEditProjectDialog from './project/CreateEditProjectDialog.vue';
 import ProjectForm from './project/ProjectForm.vue';
 import useProject from './project/useProject';
@@ -116,12 +116,6 @@ import useSpider from './spider/useSpider';
 import Switch from './switch/Switch.vue';
 import ActionTab from './tab/ActionTab.vue';
 import Tab from './tab/Tab.vue';
-import * as action from './table/action';
-import * as column from './table/column';
-import * as data from './table/data';
-import * as header from './table/header';
-import * as pagination from './table/pagination';
-import * as store from './table/store';
 import Table from './table/Table.vue';
 import TableActions from './table/TableActions.vue';
 import TableCell from './table/TableCell.vue';
@@ -131,6 +125,12 @@ import TableHeaderAction from './table/TableHeaderAction.vue';
 import TableHeaderDialog from './table/TableHeaderDialog.vue';
 import TableHeaderDialogFilter from './table/TableHeaderDialogFilter.vue';
 import TableHeaderDialogSort from './table/TableHeaderDialogSort.vue';
+import * as action from './table/action';
+import * as column from './table/column';
+import * as data from './table/data';
+import * as header from './table/header';
+import * as pagination from './table/pagination';
+import * as store from './table/store';
 import CheckTag from './tag/CheckTag.vue';
 import CheckTagGroup from './tag/CheckTagGroup.vue';
 import LinkTag from './tag/LinkTag.vue';
@@ -164,10 +164,10 @@ export {
   PieChart as ClPieChart,
   ContextMenu as ClContextMenu,
   ContextMenuList as ClContextMenuList,
-  date as date,
   DateRangePicker as ClDateRangePicker,
   DateTimeRangePicker as ClDateTimeRangePicker,
   RangePicker as ClRangePicker,
+  date as date,
   ConfirmDialog as ClConfirmDialog,
   CreateEditDialog as ClCreateEditDialog,
   Dialog as ClDialog,
@@ -189,7 +189,6 @@ export {
   FileDiff as ClFileDiff,
   FileEditor as ClFileEditor,
   FileEditorCreateWithAiDialog as ClFileEditorCreateWithAiDialog,
-  fileEditorDropZone as fileEditorDropZone,
   FileEditorNavMenu as ClFileEditorNavMenu,
   FileEditorNavMenuContextMenu as ClFileEditorNavMenuContextMenu,
   FileEditorNavTabs as ClFileEditorNavTabs,
@@ -199,15 +198,16 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
-  filter as filter,
+  fileEditorDropZone as fileEditorDropZone,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
   FilterSelect as ClFilterSelect,
+  filter as filter,
   Form as ClForm,
   FormItem as ClFormItem,
-  formTable as formTable,
   FormTableField as ClFormTableField,
+  formTable as formTable,
   useForm as useForm,
   CreateEditGitDialog as ClCreateEditGitDialog,
   CreateGitBranchDialog as ClCreateGitBranchDialog,
@@ -224,9 +224,9 @@ export {
   UploadGitFilesDialog as ClUploadGitFilesDialog,
   useGit as useGit,
   AtomMaterialIcon as ClAtomMaterialIcon,
-  icon as icon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,
+  icon as icon,
   InputList as ClInputList,
   DetailTabList as ClDetailTabList,
   NavActionBack as ClNavActionBack,
@@ -249,8 +249,8 @@ export {
   NodeType as ClNodeType,
   useNode as useNode,
   CreateEditNotificationDialog as ClCreateEditNotificationDialog,
-  notification as notification,
   NotificationForm as ClNotificationForm,
+  notification as notification,
   CreateEditProjectDialog as ClCreateEditProjectDialog,
   ProjectForm as ClProjectForm,
   useProject as useProject,
@@ -271,12 +271,6 @@ export {
   Switch as ClSwitch,
   ActionTab as ClActionTab,
   Tab as ClTab,
-  action as action,
-  column as column,
-  data as data,
-  header as header,
-  pagination as pagination,
-  store as store,
   Table as ClTable,
   TableActions as ClTableActions,
   TableCell as ClTableCell,
@@ -286,6 +280,12 @@ export {
   TableHeaderDialog as ClTableHeaderDialog,
   TableHeaderDialogFilter as ClTableHeaderDialogFilter,
   TableHeaderDialogSort as ClTableHeaderDialogSort,
+  action as action,
+  column as column,
+  data as data,
+  header as header,
+  pagination as pagination,
+  store as store,
   CheckTag as ClCheckTag,
   CheckTagGroup as ClCheckTagGroup,
   LinkTag as ClLinkTag,

src/components/nav/NavTabs.vue

@@ -14,6 +14,7 @@ import {
   TAB_NAME_TRIGGERS,
   TAB_NAME_TEMPLATE,
   TAB_NAME_CHANGES,
+  TAB_NAME_MONITORING,
 } from '@/constants';
 import { translate } from '@/utils';
 
@@ -75,6 +76,8 @@ const getIcon = (item: NavItem): Icon => {
       return ['fa', 'file-code'];
     case TAB_NAME_CHANGES:
       return ['fa', 'code-commit'];
+    case TAB_NAME_MONITORING:
+      return ['fa', 'tachometer-alt'];
     default:
       return ['fa', 'circle'];
   }

src/constants/tab.ts

@@ -11,3 +11,4 @@ export const TAB_NAME_DEPENDENCIES = 'dependencies';
 export const TAB_NAME_TRIGGERS = 'triggers';
 export const TAB_NAME_TEMPLATE = 'template';
 export const TAB_NAME_CHANGES = 'changes';
+export const TAB_NAME_MONITORING = 'monitoring';

src/i18n/lang/en/common.ts

@@ -98,6 +98,7 @@ const common: LCommon = {
     references: 'References',
     changes: 'Changes',
     ignore: 'Ignore',
+    monitoring: 'Monitoring',
   },
   status: {
     unassigned: 'Unassigned',

src/i18n/lang/zh/common.ts

@@ -98,6 +98,7 @@ const common: LCommon = {
     references: '引用',
     changes: '变更',
     ignore: '忽略',
+    monitoring: '监控',
   },
   status: {
     unassigned: '未指定',

src/interfaces/i18n/common.d.ts

@@ -111,6 +111,7 @@ export declare global {
       references: string;
       changes: string;
       ignore: string;
+      monitoring: string;
     };
     status: {
       unassigned: string;

src/layouts/index.ts

@@ -1,4 +1,5 @@
 import BlankLayout from './BlankLayout.vue';
+import NormalLayout from './NormalLayout.vue';
 import Header from './components/Header.vue';
 import Sidebar from './components/Sidebar.vue';
 import SidebarItem from './components/SidebarItem.vue';
@@ -8,10 +9,10 @@ import useDetail from './content/detail/useDetail';
 import ListLayout from './content/list/ListLayout.vue';
 import useList from './content/list/useList';
 import SimpleLayout from './content/simple/SimpleLayout.vue';
-import NormalLayout from './NormalLayout.vue';
 
 export {
   BlankLayout as ClBlankLayout,
+  NormalLayout as ClNormalLayout,
   Header as ClHeader,
   Sidebar as ClSidebar,
   SidebarItem as ClSidebarItem,
@@ -21,5 +22,4 @@ export {
   ListLayout as ClListLayout,
   useList as useList,
   SimpleLayout as ClSimpleLayout,
-  NormalLayout as ClNormalLayout,
 };

src/router/node.ts

@@ -1,5 +1,9 @@
 import { RouteRecordRaw } from 'vue-router';
-import { TAB_NAME_OVERVIEW, TAB_NAME_TASKS } from '@/constants/tab';
+import {
+  TAB_NAME_MONITORING,
+  TAB_NAME_OVERVIEW,
+  TAB_NAME_TASKS,
+} from '@/constants/tab';
 
 const endpoint = 'nodes';
 
@@ -27,6 +31,11 @@ export default [
         component: () =>
           import('@/views/node/detail/tabs/NodeDetailTabTasks.vue'),
       },
+      {
+        path: TAB_NAME_MONITORING,
+        component: () =>
+          import('@/views/node/detail/tabs/NodeDetailTabMonitoring.vue'),
+      },
     ],
   },
 ] as Array<RouteRecordRaw>;

src/store/modules/node.ts

@@ -4,7 +4,11 @@ import {
   getDefaultStoreMutations,
   getDefaultStoreState,
 } from '@/utils/store';
-import { TAB_NAME_OVERVIEW, TAB_NAME_TASKS } from '@/constants/tab';
+import {
+  TAB_NAME_MONITORING,
+  TAB_NAME_OVERVIEW,
+  TAB_NAME_TASKS,
+} from '@/constants/tab';
 
 const state = {
   ...getDefaultStoreState<CNode>('node'),
@@ -18,6 +22,7 @@ const state = {
   tabs: [
     { id: TAB_NAME_OVERVIEW, title: 'common.tabs.overview' },
     { id: TAB_NAME_TASKS, title: 'common.tabs.tasks' },
+    { id: TAB_NAME_MONITORING, title: 'common.tabs.monitoring' },
   ],
 } as NodeStoreState;