@nethserver/ns8-ui-lib 0.0.64 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.0.64",
+  "version": "0.0.67",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",

package/src/lib-components/NsBackupCard.vue

@@ -15,15 +15,11 @@
       ></cv-skeleton-text>
     </div>
     <template v-else-if="!backupsContainingInstance.length">
-      <div class="row">
+      <div class="row no-backup">
         <!-- no backup -->
-        <NsInlineNotification
-          kind="warning"
-          :title="noBackupMessage"
-          :showCloseButton="false"
-          :actionLabel="scheduleBackupLabel"
-          @action="goToBackup"
-        />
+        <span class="ns-warning">
+          {{ noBackupMessage }}
+        </span>
       </div>
     </template>
     <template v-else>
@@ -33,11 +29,8 @@
           :key="backup.id"
           class="backup"
         >
-          <div class="row">
-            <h5
-              v-if="backupsContainingInstance.length > 1"
-              class="title mg-top-sm"
-            >
+          <div v-if="backupsContainingInstance.length > 1" class="row">
+            <h5 class="title">
               {{ backup.name }}
             </h5>
           </div>
@@ -83,12 +76,12 @@
               />
             </div>
           </div>
-          <div class="table-wrapper">
+          <div
+            v-if="backupsContainingInstance.length > 1"
+            class="table-wrapper"
+          >
             <div class="table">
-              <cv-accordion
-                v-if="backupsContainingInstance.length > 1"
-                ref="accordion"
-              >
+              <cv-accordion ref="accordion">
                 <cv-accordion-item :open="toggleAccordion[0]">
                   <template slot="title">{{ showMoreLabel }}</template>
                   <template slot="content">
@@ -140,10 +133,6 @@ export default {
       type: String,
       default: "No backup configured",
     },
-    scheduleBackupLabel: {
-      type: String,
-      default: "Configure",
-    },
     goToBackupLabel: {
       type: String,
       default: "Go to Backup",
@@ -292,6 +281,7 @@ export default {
 .title {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  margin-bottom: 0.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -300,7 +290,7 @@ export default {
 .table-wrapper {
   display: flex;
   justify-content: center;
-  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .table {
@@ -329,6 +319,10 @@ export default {
 .backup-status-icon {
   margin-right: 0.25rem;
 }
+
+.no-backup {
+  font-weight: bold;
+}
 </style>
 
 <style lang="scss">

package/src/lib-components/NsInfoCard.vue

@@ -23,7 +23,19 @@
     </div>
     <template v-else>
       <div v-if="title" class="row">
-        <h3 class="title">{{ title }}</h3>
+        <!-- title tooltip -->
+        <cv-tooltip
+          v-if="titleTooltip"
+          alignment="center"
+          direction="bottom"
+          :tip="titleTooltip"
+        >
+          <h3 class="title">
+            {{ title }}
+          </h3>
+        </cv-tooltip>
+        <!-- no title tooltip -->
+        <h3 v-else class="title">{{ title }}</h3>
       </div>
       <div v-if="description" class="row">
         <div class="description">{{ description }}</div>
@@ -52,6 +64,10 @@ export default {
       type: String,
       required: false,
     },
+    titleTooltip: {
+      type: String,
+      required: false,
+    },
     icon: {
       type: [String, Object],
       default: undefined,
@@ -105,6 +121,7 @@ export default {
 .title {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  margin-bottom: 0.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/lib-components/NsSystemLogsCard.vue

@@ -0,0 +1,136 @@
+<template>
+  <NsInfoCard
+    :title="title"
+    :description="description"
+    :light="light"
+    :icon="Catalog32"
+  >
+    <template slot="content">
+      <NsButton kind="ghost" :icon="ArrowRight20" @click="goToLogs">
+        {{ buttonLabel }}
+      </NsButton>
+    </template>
+  </NsInfoCard>
+</template>
+
+<script>
+import IconService from "../lib-mixins/icon.js";
+import UtilService from "../lib-mixins/util.js";
+
+export default {
+  name: "NsSystemLogsCard",
+  mixins: [UtilService, IconService],
+  props: {
+    title: {
+      type: String,
+      default: "Logs",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    buttonLabel: {
+      type: String,
+      default: "Go to System logs",
+    },
+    router: {
+      type: Object,
+      default: null,
+    },
+    context: {
+      type: String,
+      default: "cluster",
+      validator: (val) => ["cluster", "node", "module"].includes(val),
+    },
+    nodeId: {
+      type: String,
+      default: "",
+    },
+    moduleId: {
+      type: String,
+      default: "",
+    },
+    searchQuery: {
+      type: String,
+      default: "",
+    },
+    maxLines: {
+      type: String,
+      default: "",
+    },
+    startDate: {
+      type: String,
+      default: "",
+    },
+    startTime: {
+      type: String,
+      default: "",
+    },
+    endDate: {
+      type: String,
+      default: "",
+    },
+    endTime: {
+      type: String,
+      default: "",
+    },
+    followLogs: Boolean,
+    light: Boolean,
+  },
+  computed: {
+    logsUrl() {
+      const queryParams = [];
+
+      if (this.context) {
+        queryParams.push(`context=${this.context}`);
+      }
+
+      if (this.context == "node" && this.nodeId) {
+        queryParams.push(`selectedNodeId=${this.nodeId}`);
+      }
+
+      if (this.context == "module" && this.moduleId) {
+        queryParams.push(`selectedAppId=${this.moduleId}`);
+      }
+
+      if (this.searchQuery) {
+        queryParams.push(`searchQuery=${this.searchQuery}`);
+      }
+
+      if (this.maxLines) {
+        queryParams.push(`maxLines=${this.maxLines}`);
+      }
+
+      if (this.startDate) {
+        queryParams.push(`startDate=${this.startDate}`);
+      }
+
+      if (this.startTime) {
+        queryParams.push(`startTime=${this.startTime}`);
+      }
+
+      if (this.endDate) {
+        queryParams.push(`endDate=${this.endDate}`);
+      }
+
+      if (this.endTime) {
+        queryParams.push(`endTime=${this.endTime}`);
+      }
+
+      if (this.followLogs) {
+        queryParams.push(`followLogs=${this.followLogs}`);
+      }
+      return "/system-logs?" + queryParams.join("&");
+    },
+  },
+  methods: {
+    goToLogs() {
+      if (this.router) {
+        this.router.push(this.logsUrl);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

package/src/lib-components/NsSystemdServiceCard.vue

@@ -87,6 +87,7 @@ export default {
 .service-name {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  margin-bottom: 0.5rem;
 }
 
 .success-icon {