V1.0.4

Add dashboard widget
fix lint

Author: fakoua

q-manui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "q-manui",
-  "version": "1.0.3",
-  "description": "DenoMan 1.0.3",
+  "version": "1.0.4",
+  "description": "DenoMan 1.0.4",
   "productName": "q-manui",
   "author": "Sameh Fakoua <s.fakoua@gmail.com>",
   "private": true,
@@ -13,6 +13,7 @@
     "build": "quasar build"
   },
   "dependencies": {
+    "@quasar/cli": "^2.3.0",
     "@quasar/extras": "^1.16.4",
     "axios": "^1.2.1",
     "lodash": "^4.17.21",

q-manui/src/components/ServerComponent.vue

@@ -22,7 +22,7 @@
                 <service-details-component
                   :service="selectedService"
                   v-on:on-open-service="
-            (svr: ServiceType) => {
+            (svr: ServiceModel) => {
               openService(svr);
             }
           "
@@ -34,12 +34,12 @@
               <div class="q-a-xl no-margin no-padding">
                 <services-list-component
                   v-on:on-select-service="
-            (svr: ServiceType) => {
+            (svr: ServiceModel) => {
               selectedService = svr;
             }
           "
                   v-on:on-open-service="
-            (svr: ServiceType) => {
+            (svr: ServiceModel) => {
               openService(svr);
             }
           "
@@ -56,7 +56,7 @@
     <header>
       <div class="fit row wrap justify-between items-start content-start">
         <div class="text-caption caption dialog-title">
-          {{ doubleClickedService.data?.caption }}
+          {{ doubleClickedService?.caption }}
         </div>
         <div class="overflow: auto;">
           <q-btn
@@ -169,9 +169,7 @@ import ServiceDetailsComponent from '../components/ServiceDetailsComponent.vue';
 import ServiceWindowComponent from '../components/service-window/ServiceWindowComponent.vue';
 import DashboardComponent from '../components/dashboard/DashboardComponent.vue';
 
-import { ServiceModel, ServiceType } from './models';
-
-//import { ServiceModel, ServiceType } from './repo/models';
+import { ServiceModel } from './models';
 
 export default defineComponent({
   name: 'ServerComponent',
@@ -182,16 +180,16 @@ export default defineComponent({
     DashboardComponent,
   },
   methods: {
-    openService(service: ServiceType) {
+    openService(service: ServiceModel) {
       this.doubleClickedService = service;
       this.isDialogOpen = true;
       (this.$refs.serviceWindow as HTMLDialogElement).showModal();
     },
   },
 
   setup() {
-    const doubleClickedService = ref<ServiceType>(new ServiceType());
-    const selectedService = ref<ServiceType>(new ServiceType());
+    const doubleClickedService = ref<ServiceModel | undefined>(undefined);
+    const selectedService = ref<ServiceModel | undefined>(undefined);
     const isDialogOpen = ref(false);
     const serviceWindow = ref<HTMLDialogElement | null>(null);
 
@@ -205,9 +203,9 @@ export default defineComponent({
         }
       });
       bus.on('serviceChanged', (service) => {
-        selectedService.value = new ServiceType(service as ServiceModel);
+        selectedService.value = service;
         if (isDialogOpen.value) {
-          doubleClickedService.value = new ServiceType(service as ServiceModel);
+          doubleClickedService.value = service;
           serviceWindow.value?.showModal();
         }
       });

q-manui/src/components/ServiceDetailsComponent.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="container column justify-between">
     <div>
-      <div v-if="!service.data" class="text-weight-bold text-primary mb-12">
+      <div v-if="!service" class="text-weight-bold text-primary mb-12">
         Select a service
       </div>
-      <div v-if="service.data">
+      <div v-if="service">
         <div class="text-weight-bold text-primary mb-12">
-          {{ service.data?.caption }}
+          {{ service.caption }}
         </div>
         <div>
           <q-btn outline size="sm" color="primary" label="Actions">
@@ -19,7 +19,7 @@
                 <q-item
                   clickable
                   @click="controlService('Start')"
-                  :disable="service?.data?.state !== 'Stopped'"
+                  :disable="service?.state !== 'Stopped'"
                 >
                   <q-item-section avatar class="q-item-section-item">
                     <q-icon name="play_arrow" size="20px" />
@@ -29,7 +29,7 @@
                 <q-item
                   clickable
                   @click="controlService('Stop')"
-                  :disable="!service?.data?.acceptStop"
+                  :disable="!service?.acceptStop"
                 >
                   <q-item-section avatar class="q-item-section-item">
                     <q-icon name="stop" size="20px" />
@@ -40,10 +40,7 @@
                   clickable
                   @click="controlService('Suspend')"
                   :disable="
-                    !(
-                      service?.data?.state === 'Running' &&
-                      service?.data?.acceptPause
-                    )
+                    !(service?.state === 'Running' && service?.acceptPause)
                   "
                 >
                   <q-item-section avatar class="q-item-section-item">
@@ -54,7 +51,7 @@
                 <q-item
                   clickable
                   @click="controlService('Resume')"
-                  :disable="service?.data?.state !== 'Paused'"
+                  :disable="service?.state !== 'Paused'"
                 >
                   <q-item-section avatar class="q-item-section-item">
                     <q-icon name="motion_photos_paused" size="20px" />
@@ -64,7 +61,7 @@
                 <q-item
                   clickable
                   @click="controlService('Restart')"
-                  :disable="service?.data?.state !== 'Running'"
+                  :disable="service?.state !== 'Running'"
                 >
                   <q-item-section avatar class="q-item-section-item">
                     <q-icon name="replay" size="20px" />
@@ -85,11 +82,11 @@
 
         <div class="text-weight-bold mt-12">Path to executable:</div>
         <div class="mb-12 div-path-name">
-          {{ service.data?.pathName.replaceAll('|', '\\') }}
+          {{ service.pathName.replaceAll('|', '\\') }}
         </div>
         <div class="text-weight-bold">Description:</div>
         <div>
-          {{ service.data?.description }}
+          {{ service.description }}
         </div>
       </div>
     </div>
@@ -144,21 +141,21 @@
   overflow-wrap: anywhere;
 }
 </style>
+
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { api } from 'boot/axios';
+import { PropType, defineComponent, ref } from 'vue';
+import { getSystemInformation } from './service-api';
 
-import { ControlAction, ServiceType } from './models';
+import { ControlAction, ServiceModel, SystemModel } from './models';
 import { bus } from 'boot/bus';
-import { useHostsStore } from 'src/stores/hosts-store';
 
 export default defineComponent({
   name: 'ServiceDetailsComponent',
 
   props: {
     service: {
-      type: ServiceType,
-      required: true,
+      type: Object as PropType<ServiceModel>,
+      required: false,
     },
   },
 
@@ -169,31 +166,28 @@ export default defineComponent({
     async controlService(action: ControlAction) {
       bus.emit('controlService', {
         action: action,
-        name: this.service?.data?.name,
+        name: this.service?.name,
       });
     },
   },
 
   emits: ['onOpenService'],
 
   setup() {
-    const store = useHostsStore();
-
-    const params = store.$state[0];
+    const data = ref<SystemModel>({} as SystemModel);
 
-    const data = ref([]);
     const isLoading = ref(true);
-    api
-      .get('http://localhost:8001/api/system', { params })
+    getSystemInformation()
       .then((response) => {
-        data.value = response.data;
+        data.value = response;
       })
       .catch(() => {
         console.log('error');
       })
       .finally(() => {
         isLoading.value = false;
       });
+
     return {
       data,
       isLoading,

q-manui/src/components/ServicesListComponent.vue

@@ -180,11 +180,11 @@
 import { defineComponent, onMounted, ref } from 'vue';
 
 import * as serviceApi from './service-api';
-import { ControlAction, ServiceModel, ServiceType } from './models';
+import { ControlAction, ServiceModel } from './models';
 import { bus } from 'boot/bus';
-import { useQuasar } from 'quasar';
+import { QTableColumn, useQuasar } from 'quasar';
 
-const columns = [
+const columns: QTableColumn[] = [
   {
     name: 'caption',
     label: 'Name',
@@ -242,21 +242,21 @@ export default defineComponent({
   name: 'ServicesListComponent',
 
   methods: {
-    onSelect(row: any) {
+    onSelect(row: ServiceModel) {
       this.selected = [row];
       const service = this.selected[0] as ServiceModel;
 
       this.setDisabledControls(service);
-      this.$emit('onSelectService', new ServiceType(row as ServiceModel));
+      this.$emit('onSelectService', row as ServiceModel);
     },
     rowStyle(service: ServiceModel): string {
       if (service.isSystemDriver) {
         return 'text-blue-6 text-weight-thin system-driver';
       }
       return service.state == 'Stopped' ? 'text-red-6' : 'bg-white text-black';
     },
-    onDoubleClick(row: any) {
-      this.$emit('onOpenService', new ServiceType(row as ServiceModel));
+    onDoubleClick(row: ServiceModel) {
+      this.$emit('onOpenService', row as ServiceModel);
     },
     controlService(action: ControlAction) {
       if (this.selected && this.selected.length > 0) {
@@ -279,12 +279,12 @@ export default defineComponent({
   emits: ['onSelectService', 'onOpenService'],
 
   setup() {
-    const services = ref<Array<ServiceModel>>([]); //All services
-    const data = ref<Array<ServiceModel>>([]); //Services filtered by isSystemData
+    const services = ref<ServiceModel[]>([]); //All services
+    const data = ref<ServiceModel[]>([]); //Services filtered by isSystemData
     const isLoading = ref(true);
     const showSystemDriver = ref(false);
     const disabledControls = ref<boolean[]>([true, true, true, true, true]);
-    const selected = ref([] as any[]);
+    const selected = ref([] as ServiceModel[]);
     const $q = useQuasar();
 
     const loadServices = async () => {
@@ -310,6 +310,8 @@ export default defineComponent({
     onMounted(async () => {
       await loadServices();
       isLoading.value = false;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       bus.on('controlService', async (action: any) => {
         $q.loading.show();
         const res = await serviceApi.controlService(action.action, action.name);