@nethserver/ns8-ui-lib 0.0.21 → 0.0.25

package/package.json

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

package/src/lib-components/NsEmptyState.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="empty-state">
-    <NsPictogram title="empty state" class="image">
+    <NsLottieAnimation
+      v-if="animationData"
+      :animationData="animationData"
+      :refName="animationTitle"
+      :animateOnHover="true"
+      :loop="1"
+      :autoPlay="true"
+      class="animation image"
+    />
+    <NsPictogram v-else title="empty state" class="image">
       <template v-if="hasPictogramSlot">
         <slot name="pictogram"></slot>
       </template>
@@ -20,16 +29,19 @@
 
 <script>
 import NsPictogram from "./NsPictogram.vue";
+import NsLottieAnimation from "./NsLottieAnimation";
 import ExclamationMark from "./pictograms/ExclamationMark";
 
 export default {
   name: "NsEmptyState",
-  components: { NsPictogram, ExclamationMark },
+  components: { NsPictogram, ExclamationMark, NsLottieAnimation },
   props: {
     title: {
       type: String,
       required: true,
     },
+    animationData: Object,
+    animationTitle: String,
   },
   computed: {
     hasPictogramSlot() {
@@ -55,4 +67,10 @@ export default {
 .empty-state .description {
   margin-top: 1rem;
 }
+
+.animation {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+}
 </style>

package/src/lib-components/NsInfoCard.vue

@@ -64,6 +64,9 @@ export default {
 .title {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .description {

package/src/lib-components/NsLottieAnimation.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="ns-lottie-animation" @mouseover="onMouseOver">
+    <LottieAnimation
+      :ref="refName"
+      :animationData="animationData"
+      :loop="loop"
+      :autoPlay="autoPlay"
+      @loopComplete="onLoopComplete"
+      @complete="onComplete"
+      @enterFrame="onEnterFrame"
+    />
+  </div>
+</template>
+
+<script>
+import LottieAnimation from "lottie-web-vue";
+
+export default {
+  name: "NsLottieAnimation",
+  components: { LottieAnimation },
+  props: {
+    animationData: {
+      type: Object,
+      required: true,
+    },
+    loop: {
+      type: [Boolean, Number],
+      default: false,
+    },
+    autoPlay: {
+      type: Boolean,
+      default: true,
+    },
+    refName: {
+      type: String,
+      default: "anim",
+    },
+    animateOnHover: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    onLoopComplete(eventData) {
+      this.$emit("loopComplete", eventData);
+    },
+    onComplete(eventData) {
+      this.$emit("complete", eventData);
+
+      if (this.animateOnHover) {
+        this.$refs[this.refName].stop();
+      }
+    },
+    onEnterFrame(eventData) {
+      this.$emit("enterFrame", eventData);
+    },
+    onMouseOver(eventData) {
+      this.$emit("mouseover", eventData);
+
+      if (this.animateOnHover) {
+        this.$refs[this.refName].play();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

package/src/lib-components/NsNodeCard.vue

@@ -1,212 +0,0 @@
-<template>
-  <cv-tile kind="standard" :light="light" class="node-card">
-    <!-- icon -->
-    <div class="row">
-      <NsSvg :svg="Chip32" />
-    </div>
-    <div class="row">
-      <h3 class="title">{{ nodeLabel }} {{ nodeId }}</h3>
-    </div>
-    <div class="row">
-      <cv-tag v-if="isLeader" kind="green" :label="leaderLabel"></cv-tag>
-      <cv-tag v-else kind="blue" :label="workerLabel"></cv-tag>
-    </div>
-    <div v-if="loading" class="row node-card-skeleton">
-      <cv-skeleton-text :paragraph="true" :line-count="5"></cv-skeleton-text>
-    </div>
-    <div v-else class="table-wrapper">
-      <div class="table">
-        <div class="tr">
-          <div class="td label">{{ cpuUsageLabel }}</div>
-          <div :class="['td', { warning: cpuUsage >= cpuUsageWarningTh }]">
-            {{ cpuUsage }}%
-          </div>
-        </div>
-        <div class="tr">
-          <div class="td label">
-            {{ cpuLoadLabel }}
-            <cv-tooltip
-              alignment="center"
-              direction="bottom"
-              :tip="cpuLoadTooltip"
-              class="info"
-            >
-              <Information16 />
-            </cv-tooltip>
-          </div>
-          <div class="td">
-            <span :class="{ warning: load1Min >= cpuLoadWarningTh }"
-              >{{ load1Min }}%</span
-            >
-            /
-            <span :class="{ warning: load5Min >= cpuLoadWarningTh }"
-              >{{ load5Min }}%</span
-            >
-            /
-            <span :class="{ warning: load15Min >= cpuLoadWarningTh }"
-              >{{ load15Min }}%</span
-            >
-          </div>
-        </div>
-        <div class="tr">
-          <div class="td label">{{ memoryUsageLabel }}</div>
-          <div :class="['td', { warning: memoryUsage >= memoryWarningTh }]">
-            {{ memoryUsage }}%
-          </div>
-        </div>
-        <div class="tr">
-          <div class="td label">{{ swapUsageLabel }}</div>
-          <div :class="['td', { warning: swapUsage >= swapWarningTh }]">
-            {{ swapUsage }}%
-          </div>
-        </div>
-        <div class="tr" v-for="(disk, index) in disksUsage" :key="index">
-          <div class="td label">{{ disk.diskId }} {{ diskUsageLabel }}</div>
-          <div :class="['td', { warning: disk.usage >= diskWarningTh }]">
-            {{ disk.usage }}%
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="row slot">
-      <!-- Extra content -->
-      <slot></slot>
-    </div>
-  </cv-tile>
-</template>
-
-<script>
-import NsSvg from "./NsSvg.vue";
-import { CvTile } from "@carbon/vue";
-import Chip32 from "@carbon/icons-vue/es/chip/32";
-import Information16 from "@carbon/icons-vue/es/information/16";
-
-export default {
-  name: "NsNodeCard",
-  //components added for storybook to work
-  components: { NsSvg, CvTile, Information16 },
-  props: {
-    nodeId: String,
-    nodeLabel: {
-      type: String,
-      default: "Node",
-    },
-    isLeader: Boolean,
-    leaderLabel: {
-      type: String,
-      default: "leader",
-    },
-    workerLabel: {
-      type: String,
-      default: "worker",
-    },
-    cpuUsageLabel: {
-      type: String,
-      default: "CPU usage",
-    },
-    cpuLoadLabel: {
-      type: String,
-      default: "CPU load",
-    },
-    cpuLoadTooltip: {
-      type: String,
-      default: "CPU average load of last 1 / 5 / 15 minutes",
-    },
-    memoryUsageLabel: {
-      type: String,
-      default: "Memory usage",
-    },
-    swapUsageLabel: {
-      type: String,
-      default: "Swap usage",
-    },
-    diskUsageLabel: {
-      type: String,
-      default: "usage",
-    },
-    cpuUsage: Number,
-    cpuUsageWarningTh: {
-      type: Number,
-      default: 90,
-    },
-    load1Min: Number,
-    load5Min: Number,
-    load15Min: Number,
-    cpuLoadWarningTh: {
-      type: Number,
-      default: 90,
-    },
-    memoryUsage: Number,
-    memoryWarningTh: {
-      type: Number,
-      default: 90,
-    },
-    swapUsage: Number,
-    swapWarningTh: {
-      type: Number,
-      default: 90,
-    },
-    disksUsage: Array,
-    diskWarningTh: {
-      type: Number,
-      default: 90,
-    },
-    loading: Boolean,
-    light: Boolean,
-  },
-  data() {
-    return {
-      Chip32,
-    };
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.node-card {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 7rem;
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 0.25rem;
-}
-
-.node-card-skeleton {
-  margin: 1rem 3rem;
-}
-
-.label {
-  padding-right: 0.5rem;
-  font-weight: bold;
-  text-align: right;
-  padding-bottom: 0.5rem;
-}
-
-.slot {
-  margin-top: 0.5rem;
-}
-
-.table-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-
-.table {
-  display: table;
-}
-
-.tr {
-  display: table-row;
-}
-
-.td {
-  display: table-cell;
-}
-</style>