V 1.1.0

- Update dependencies - Reduce bundle size - Enhanced Perfmon
fakoua · Feb 16, 2024 · 78bddbe · 78bddbe
1 parent f1b3743
commit 78bddbe
Show file tree

Hide file tree

Showing 19 changed files with 8,129 additions and 9,610 deletions.
diff --git a/build-tools/binToTs.ts b/build-tools/binToTs.ts
@@ -1,5 +1,5 @@
-import { join } from "https://deno.land/std@0.213.0/path/mod.ts";
-import { copy } from "https://deno.land/std@0.213.0/fs/copy.ts";
+import { join } from "https://deno.land/std@0.215.0/path/mod.ts";
+import { copy } from "https://deno.land/std@0.215.0/fs/copy.ts";
 
 import { bin, version } from "../wwwzip/ui.ts";
 import { decompress } from "./zip.ts";

diff --git a/build-tools/zip.ts b/build-tools/zip.ts
@@ -1,4 +1,4 @@
-import { join } from "https://deno.land/std@0.213.0/path/mod.ts";
+import { join } from "https://deno.land/std@0.215.0/path/mod.ts";
 
 export const compress = async (
   files: string | string[],

diff --git a/deno.lock b/deno.lock
diff --git a/mod.ts b/mod.ts
@@ -1,8 +1,8 @@
-import { join } from "https://deno.land/std@0.213.0/path/join.ts";
-import { exists } from "https://deno.land/std@0.213.0/fs/exists.ts";
-import { ensureDir } from "https://deno.land/std@0.213.0/fs/ensure_dir.ts";
+import { join } from "https://deno.land/std@0.215.0/path/join.ts";
+import { exists } from "https://deno.land/std@0.215.0/fs/exists.ts";
+import { ensureDir } from "https://deno.land/std@0.215.0/fs/ensure_dir.ts";
 
-import { Application, Router } from "https://deno.land/x/oak@v13.0.0/mod.ts";
+import { Application, Router } from "https://deno.land/x/oak@v13.2.5/mod.ts";
 import { oakCors } from "https://deno.land/x/cors@v1.2.2/mod.ts";
 
 import { actions, getDependsServices, getServices } from "./src/services.ts";

diff --git a/q-manui/.eslintrc.cjs b/q-manui/.eslintrc.cjs
@@ -9,14 +9,14 @@ module.exports = {
   // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
   parserOptions: {
     parser: require.resolve('@typescript-eslint/parser'),
-    extraFileExtensions: [ '.vue' ]
+    extraFileExtensions: ['.vue'],
   },
 
   env: {
     browser: true,
     es2021: true,
     node: true,
-    'vue/setup-compiler-macros': true
+    'vue/setup-compiler-macros': true,
   },
 
   // Rules order is important, please avoid shuffling them
@@ -37,7 +37,7 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier'
+    'prettier',
   ],
 
   plugins: [
@@ -46,12 +46,11 @@ module.exports = {
 
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
     // required to lint *.vue files
-    'vue'
-    
+    'vue',
+
     // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
     // Prettier has not been included as plugin to avoid performance impact
     // add it as an extension for your IDE
-
   ],
 
   globals: {
@@ -64,12 +63,11 @@ module.exports = {
     __QUASAR_SSR_PWA__: 'readonly',
     process: 'readonly',
     Capacitor: 'readonly',
-    chrome: 'readonly'
+    chrome: 'readonly',
   },
 
   // add your custom rules here
   rules: {
-
     'prefer-promise-reject-errors': 'off',
 
     quotes: ['warn', 'single', { avoidEscape: true }],
@@ -85,6 +83,6 @@ module.exports = {
     'no-unused-vars': 'off',
 
     // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};
diff --git a/q-manui/index.html b/q-manui/index.html
@@ -37,8 +37,11 @@
       href="icons/favicon-16x16.png"
     />
     <link rel="icon" type="image/ico" href="favicon.ico" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0/dist/apexcharts.min.css" />
   </head>
   <body>
     <!-- quasar:entry-point -->
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0/dist/apexcharts.min.js"></script>
   </body>
 </html>
diff --git a/q-manui/package.json b/q-manui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "q-manui",
-  "version": "1.0.9",
-  "description": "DenoMan 1.0.9",
+  "version": "1.1.0",
+  "description": "DenoMan 1.1.0",
   "productName": "DenoMan",
   "author": "Sameh Fakoua <s.fakoua@gmail.com>",
   "private": true,
@@ -17,10 +17,13 @@
     "@quasar/extras": "^1.16.4",
     "apexcharts": "3.36.0",
     "axios": "^1.2.1",
+    "humanizer.node": "^1.0.5",
     "lodash": "^4.17.21",
     "pinia": "^2.0.11",
     "pinia-plugin-persistedstate": "^3.2.1",
     "quasar": "^2.8.0",
+    "to": "^0.2.9",
+    "update": "^0.7.4",
     "vue": "^3.2.29",
     "vue-router": "^4.0.12",
     "vue3-apexcharts": "1.4.1"
@@ -29,17 +32,17 @@
     "@babel/preset-typescript": "^7.23.3",
     "@quasar/app-vite": "^1.4.3",
     "@types/lodash": "^4.14.202",
-    "@types/node": "^12.20.21",
+    "@types/node": "^20.11.17",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@vue/test-utils": "^2.4.4",
     "autoprefixer": "^10.4.2",
     "eslint": "^8.11.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.0.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.5.4",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.3",
     "vitest": "^1.2.2"
   },
   "engines": {

diff --git a/q-manui/quasar.config.js b/q-manui/quasar.config.js
@@ -19,6 +19,7 @@ module.exports = configure(function (/* ctx */) {
       // rawOptions: {},
       warnings: true,
       errors: true,
+      external: ['apexcharts'],
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
@@ -42,7 +43,7 @@ module.exports = configure(function (/* ctx */) {
       // 'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
       //'roboto-font', // optional, you are not bound to it
-      'material-icons', // optional, you are not bound to it
+      //'material-icons', // optional, you are not bound to it
     ],
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
@@ -51,7 +52,7 @@ module.exports = configure(function (/* ctx */) {
         browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
         //node: 'node20',
       },
-
+      external: ['apexcharts'],
       vueRouterMode: 'history', // available values: 'hash', 'history'
       // vueRouterBase,
       // vueDevtools,
@@ -74,12 +75,18 @@ module.exports = configure(function (/* ctx */) {
       // vitePlugins: [
       //   [ 'package-name', { ..options.. } ]
       // ]
+      extendViteConf(viteConf) {
+        viteConf.build.rollupOptions = {
+          external: ['apexcharts'],
+        };
+      },
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
       // https: true
       open: false, // opens browser window automatically
+      vueDevtools: true,
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
@@ -195,7 +202,6 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
     bex: {
       contentScripts: ['my-content-script'],
-
       // extendBexScriptsConf (esbuildConf) {}
       // extendBexManifestJson (json) {}
     },

diff --git a/q-manui/src/components/dashboard/DashboardComponent.vue b/q-manui/src/components/dashboard/DashboardComponent.vue
@@ -56,9 +56,7 @@
     </div>
 
     <div class="col-grow q-ma-sm"></div>
-    <div class="col-grow q-ma-sm">
-      <service-type-component :loading="isLoading" :types="model.types" />
-    </div>
+    <div class="col-grow q-ma-sm"></div>
   </div>
 </template>
 

diff --git a/q-manui/src/components/performance/CpuComponent.vue b/q-manui/src/components/performance/CpuComponent.vue
@@ -1,26 +1,58 @@
 <template>
   <q-card flat bordered style="min-height: 268px">
-    <q-card-section class="text-blue-6">
+    <q-card-section style="color: #ff4560">
       <div class="text-h6">CPU</div>
       <div class="text-weight-thin">CPU Usage %</div>
     </q-card-section>
     <div>
       <apexchart
         ref="chart"
-        height="640px"
+        height="360px"
         type="area"
         :options="options"
         :series="series"
       ></apexchart>
     </div>
   </q-card>
+  <div class="fit row wrap justify-start items-start content-start q-mt-md">
+    <div class="q-ml-md bl">
+      <div class="text-caption">Utilization</div>
+      <div class="text-weight-bolder">{{ perfmon.cpu }}%</div>
+    </div>
+    <div class="q-ml-md bl">
+      <div class="text-caption">Processor</div>
+      <div class="text-weight-bolder">{{ system.processorName }}</div>
+    </div>
+  </div>
+  <q-linear-progress size="50px" :value="perfmon.cpu / 100" class="q-mt-sm">
+    <div class="absolute-full flex flex-center">
+      <q-badge
+        color="white"
+        text-color="#ff4560"
+        :label="perfmon.cpu.toFixed(1) + '%'"
+      />
+    </div>
+  </q-linear-progress>
 </template>
 
+<style lang="css" scoped>
+.q-linear-progress {
+  color: #ff4560;
+}
+.q-linear-progress .q-badge {
+  color: #ff4560;
+}
+.bl {
+  border-left: 2px dotted #ff4560;
+  padding-left: 4px;
+}
+</style>
+
 <script lang="ts">
 import { PropType, defineComponent, ref } from 'vue';
 import _fill from 'lodash/fill';
 
-import { PerfmonModel } from '../models';
+import { PerfmonModel, SystemModel } from '../models';
 import { VueApexChartsComponent } from 'vue3-apexcharts';
 import { getChartOptions } from './common';
 
@@ -31,6 +63,10 @@ export default defineComponent({
       type: Object as PropType<PerfmonModel>,
       required: true,
     },
+    system: {
+      type: Object as PropType<SystemModel>,
+      required: true,
+    },
   },
 
   watch: {

diff --git a/q-manui/src/components/performance/DiskComponent.vue b/q-manui/src/components/performance/DiskComponent.vue
@@ -1,23 +1,63 @@
 <template>
   <q-card flat bordered style="min-height: 268px">
-    <q-card-section class="text-blue-6">
+    <q-card-section style="color: #ffc107">
       <div class="text-h6">Disk {{ disk.name }}</div>
+      <div class="text-weight-thin">Active time</div>
     </q-card-section>
     <div>
       <apexchart
         ref="chart"
-        height="640px"
+        height="360px"
         type="area"
         :options="options"
         :series="series"
       ></apexchart>
     </div>
   </q-card>
+  <div class="fit row wrap justify-start items-start content-start q-mt-md">
+    <div class="q-ml-md bl">
+      <div class="text-caption">Disk</div>
+      <div class="text-weight-bolder">
+        {{ disk.name }}
+      </div>
+    </div>
+    <div class="q-ml-md bl">
+      <div class="text-caption">Reading speed</div>
+      <div class="text-weight-bolder">
+        {{ disk.diskReadBytesPersec.bytes().toString() }}/s
+      </div>
+    </div>
+    <div class="q-ml-md bl">
+      <div class="text-caption">Writing speed</div>
+      <div class="text-weight-bolder">
+        {{ disk.diskWriteBytesPersec.bytes().toString() }}/s
+      </div>
+    </div>
+  </div>
+  <q-linear-progress size="50px" :value="diskPerc / 100" class="q-mt-sm">
+    <div class="absolute-full flex flex-center">
+      <q-badge color="white" :label="diskPerc.toFixed(1) + '%'" />
+    </div>
+  </q-linear-progress>
 </template>
 
+<style lang="css" scoped>
+.q-linear-progress {
+  color: #ffc107;
+}
+.q-linear-progress .q-badge {
+  color: #ffc107;
+}
+.bl {
+  border-left: 2px dotted #ffc107;
+  padding-left: 4px;
+}
+</style>
+
 <script lang="ts">
-import { PropType, defineComponent, ref } from 'vue';
+import { PropType, computed, defineComponent, ref } from 'vue';
 import _fill from 'lodash/fill';
+import 'Humanizer.node';
 
 import { DiskModel } from '../models';
 import { VueApexChartsComponent } from 'vue3-apexcharts';
@@ -46,6 +86,12 @@ export default defineComponent({
     const chart = ref(null);
     const data: number[] = _fill(Array(20), 0);
 
+    const diskPerc = computed(() => {
+      return props.disk.percentDiskTime > 100
+        ? 100
+        : props.disk.percentDiskTime;
+    });
+
     const options = getChartOptions();
     options.chart.id = `disk-${props.disk.name}`;
     options.colors = ['#ffc107'];
@@ -58,7 +104,9 @@ export default defineComponent({
     ];
 
     const updateSeries = () => {
-      data.push(props.disk.percentDiskTime);
+      data.push(
+        props.disk.percentDiskTime > 100 ? 100 : props.disk.percentDiskTime,
+      );
       if (data.length > 20) data.shift();
 
       if (chart.value) {
@@ -70,7 +118,7 @@ export default defineComponent({
       }
     };
 
-    return { loading, options, series, chart, updateSeries };
+    return { loading, options, series, chart, diskPerc, updateSeries };
   },
 });
 </script>