@nethserver/ns8-ui-lib 0.0.40 → 0.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.0.40",
+  "version": "0.0.44",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",
@@ -61,6 +61,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "core-js": "^3.15.2",
     "date-fns": "^2.23.0",
-    "date-fns-tz": "^1.1.6"
+    "date-fns-tz": "^1.1.6",
+    "vue-date-fns": "^2.0.1"
   }
 }

package/src/lib-components/NsBackupCard.vue

@@ -0,0 +1,357 @@
+<template>
+  <cv-tile kind="standard" :light="light" class="ns-backup-card">
+    <!-- icon -->
+    <div class="row">
+      <NsSvg :svg="Save32" />
+    </div>
+    <div class="row">
+      <h3 class="title">{{ title }}</h3>
+    </div>
+    <div v-if="loading" class="row">
+      <cv-skeleton-text
+        :paragraph="true"
+        :line-count="5"
+        class="mg-top-sm"
+      ></cv-skeleton-text>
+    </div>
+    <template v-else-if="!backupsContainingInstance.length">
+      <div class="row">
+        <!-- no backup -->
+        <NsInlineNotification
+          kind="warning"
+          :title="noBackupMessage"
+          :showCloseButton="false"
+          :actionLabel="scheduleBackupLabel"
+          @action="goToBackup"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <div v-for="backup in backupsContainingInstance" :key="backup.id">
+        <div class="row">
+          <h5
+            v-if="backupsContainingInstance.length > 1"
+            class="title mg-top-sm"
+          >
+            {{ backup.name }}
+          </h5>
+        </div>
+        <div class="table-wrapper">
+          <div class="table">
+            <!-- status -->
+            <div class="tr">
+              <div class="td label">{{ statusLabel }}</div>
+              <div class="td status">
+                <span v-if="!backup.enabled" class="ns-warning">
+                  {{ backupDisabledLabel }}
+                </span>
+                <span
+                  v-else-if="
+                    status[backup.id] && status[backup.id].success == true
+                  "
+                  class="ns-success"
+                >
+                  <span>{{ statusSuccessLabel }}</span>
+                </span>
+                <span
+                  v-else-if="
+                    status[backup.id] && status[backup.id].success == false
+                  "
+                  class="ns-error"
+                >
+                  {{ statusErrorLabel }}
+                </span>
+                <span v-else class="ns-warning">
+                  {{ statusNotRunLabel }}
+                </span>
+              </div>
+            </div>
+            <!-- repository -->
+            <div class="tr">
+              <div class="td label">{{ repositoryLabel }}</div>
+              <div class="td">
+                {{ backup.repoName }}
+              </div>
+            </div>
+            <!-- completed -->
+            <div class="tr">
+              <div class="td label">{{ completedLabel }}</div>
+              <div class="td">
+                <span v-if="status[backup.id] && status[backup.id].end">
+                  <cv-tooltip
+                    alignment="center"
+                    direction="bottom"
+                    :tip="
+                      (status[backup.id].end * 1000)
+                        | date('yyyy-MM-dd HH:mm:ss')
+                    "
+                    class="info tooltip-with-text-trigger"
+                  >
+                    {{
+                      formatDateDistance(
+                        status[backup.id].end * 1000,
+                        new Date(),
+                        {
+                          addSuffix: true,
+                        }
+                      )
+                    }}
+                  </cv-tooltip>
+                </span>
+                <span v-else>-</span>
+              </div>
+            </div>
+            <!-- duration -->
+            <div class="tr">
+              <div class="td label">{{ durationLabel }}</div>
+              <div class="td">
+                <span
+                  v-if="
+                    status[backup.id] &&
+                    status[backup.id].end &&
+                    status[backup.id].start
+                  "
+                >
+                  {{
+                    (status[backup.id].end - status[backup.id].start)
+                      | secondsFormat
+                  }}
+                </span>
+                <span v-else>-</span>
+              </div>
+            </div>
+            <!-- total size -->
+            <div class="tr">
+              <div class="td label">{{ totalSizeLabel }}</div>
+              <div class="td">
+                <span v-if="status[backup.id] && status[backup.id].total_size">
+                  {{ status[backup.id].total_size | byteFormat }}
+                </span>
+                <span v-else>-</span>
+              </div>
+            </div>
+            <!-- total file count -->
+            <div class="tr">
+              <div class="td label">{{ totalFileCountLabel }}</div>
+              <div class="td">
+                <span
+                  v-if="status[backup.id] && status[backup.id].total_file_count"
+                >
+                  {{ status[backup.id].total_file_count | humanFormat }}
+                  ({{ status[backup.id].total_file_count }})
+                </span>
+                <span v-else>-</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div>
+      <div class="row mg-top-sm">
+        <NsButton
+          kind="ghost"
+          :icon="ArrowRight20"
+          @click="goToBackup"
+          :disabled="loading"
+          >{{ goToBackupLabel }}
+        </NsButton>
+      </div>
+    </div>
+  </cv-tile>
+</template>
+
+<script>
+import IconService from "../lib-mixins/icon.js";
+import DateTimeService from "../lib-mixins/dateTime.js";
+
+export default {
+  name: "NsBackupCard",
+  mixins: [IconService, DateTimeService],
+  props: {
+    title: {
+      type: String,
+      default: "Backup",
+    },
+    noBackupMessage: {
+      type: String,
+      default: "No backup configured",
+    },
+    scheduleBackupLabel: {
+      type: String,
+      default: "Configure",
+    },
+    goToBackupLabel: {
+      type: String,
+      default: "Go to Backup",
+    },
+    repositoryLabel: {
+      type: String,
+      default: "Repository",
+    },
+    statusLabel: {
+      type: String,
+      default: "Status",
+    },
+    statusSuccessLabel: {
+      type: String,
+      default: "Success",
+    },
+    statusNotRunLabel: {
+      type: String,
+      default: "Backup has not run yet",
+    },
+    statusErrorLabel: {
+      type: String,
+      default: "Error",
+    },
+    completedLabel: {
+      type: String,
+      default: "Completed",
+    },
+    durationLabel: {
+      type: String,
+      default: "Duration",
+    },
+    totalSizeLabel: {
+      type: String,
+      default: "Total size",
+    },
+    totalFileCountLabel: {
+      type: String,
+      default: "Total file count",
+    },
+    backupDisabledLabel: {
+      type: String,
+      default: "Disabled",
+    },
+    moduleId: {
+      type: String,
+      required: true,
+    },
+    moduleUiName: {
+      type: String,
+      default: "",
+    },
+    repositories: {
+      type: Array,
+      required: true,
+    },
+    backups: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    coreContext: {
+      type: Object,
+      required: true,
+    },
+    light: Boolean,
+  },
+  data() {
+    return {
+      backupsContainingInstance: [],
+      status: [],
+    };
+  },
+  watch: {
+    repositories: function () {
+      this.updateData();
+    },
+    backups: function () {
+      this.updateData();
+    },
+  },
+  created() {
+    this.updateData();
+  },
+  methods: {
+    updateData() {
+      let backupsContainingInstance = [];
+
+      for (const backup of this.backups) {
+        for (const instance of backup.instances) {
+          if (instance.module_id == this.moduleId) {
+            backupsContainingInstance.push(backup);
+          }
+        }
+      }
+      this.backupsContainingInstance = backupsContainingInstance;
+
+      // status
+      for (const backup of this.backupsContainingInstance) {
+        const instance = backup.instances.find(
+          (i) => i.module_id == this.moduleId
+        );
+        const status = instance.status;
+        this.status[backup.id] = status;
+      }
+    },
+    goToBackup() {
+      if (this.coreContext && this.coreContext.$router) {
+        this.coreContext.$router.push("/backup");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ns-backup-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 7rem;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+}
+
+.title {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+
+.table {
+  display: table;
+}
+
+.tr {
+  display: table-row;
+}
+
+.td {
+  display: table-cell;
+}
+
+.label {
+  padding-right: 0.75rem;
+  font-weight: bold;
+  text-align: right;
+  padding-bottom: 0.5rem;
+}
+
+.status {
+  font-weight: bold;
+}
+
+.backup-status-icon {
+  margin-right: 0.25rem;
+}
+</style>

package/src/lib-components/NsIconMenu.vue

@@ -72,8 +72,6 @@
 <script>
 import { CvOverflowMenu } from "@carbon/vue";
 
-//// move to ns8-ui-lib
-
 export default {
   name: "NsIconMenu",
   extends: CvOverflowMenu,

package/src/lib-components/NsTextInput.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    :class="[
+      `cv-text-input`,
+      `ns-text-input`,
+      `${carbonPrefix}--form-item`,
+      `${carbonPrefix}--text-input-wrapper`,
+      { [`${carbonPrefix}--password-input-wrapper`]: isPassword },
+    ]"
+  >
+    <div v-if="hasTooltipSlot">
+      <label
+        :for="uid"
+        :class="[
+          `${carbonPrefix}--label`,
+          {
+            [`${carbonPrefix}--label--disabled`]:
+              $attrs.disabled !== undefined && $attrs.disabled,
+          },
+        ]"
+        >{{ label }}</label
+      >
+      <!-- tooltip -->
+      <cv-interactive-tooltip
+        :alignment="tooltipAlignment"
+        :direction="tooltipDirection"
+        class="tooltip"
+      >
+        <template slot="content">
+          <slot name="tooltip"></slot>
+        </template>
+      </cv-interactive-tooltip>
+    </div>
+    <label
+      v-else
+      :for="uid"
+      :class="[
+        `${carbonPrefix}--label`,
+        {
+          [`${carbonPrefix}--label--disabled`]:
+            $attrs.disabled !== undefined && $attrs.disabled,
+        },
+      ]"
+      >{{ label }}</label
+    >
+    <div
+      :class="[
+        `${carbonPrefix}--text-input__field-wrapper`,
+        {
+          [`${carbonPrefix}--text-input__field-wrapper--warning`]:
+            !isInvalid && isWarn,
+        },
+      ]"
+      :data-invalid="isInvalid"
+    >
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--text-input__invalid-icon`"
+      />
+      <WarningAltFilled16
+        v-if="isWarn"
+        :class="`${carbonPrefix}--text-input__invalid-icon ${carbonPrefix}--text-input__invalid-icon--warning`"
+      />
+
+      <input
+        :id="uid"
+        :class="[
+          `${carbonPrefix}--text-input`,
+          {
+            [`${carbonPrefix}--text-input--light`]: isLight,
+            [`${carbonPrefix}--text-input--invalid`]: isInvalid,
+            [`${carbonPrefix}--text-input--warning`]: isWarn,
+            [`${carbonPrefix}--password-input`]: isPassword,
+          },
+        ]"
+        v-bind="$attrs"
+        :value="value"
+        v-on="inputListeners"
+        :data-toggle-password-visibility="isPassword"
+        :type="dataType"
+        ref="input"
+      />
+      <button
+        v-if="isPassword"
+        :class="[
+          `${carbonPrefix}--btn`,
+          `${carbonPrefix}--text-input--password__visibility__toggle`,
+          `${carbonPrefix}--tooltip__trigger`,
+          `${carbonPrefix}--tooltip--a11y`,
+          `${carbonPrefix}--tooltip--bottom`,
+          `${carbonPrefix}--tooltip--align-center`,
+        ]"
+        @click="togglePasswordVisibility"
+        type="button"
+      >
+        <span :class="`${carbonPrefix}--assistive-text`">{{
+          passwordHideShowLabel
+        }}</span>
+        <ViewOff16
+          v-if="isPasswordVisible"
+          :class="`${carbonPrefix}--icon-visibility-off`"
+        />
+        <View16 v-else :class="`${carbonPrefix}--icon-visibility-off`" />
+      </button>
+    </div>
+    <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+    <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
+      <slot name="warn-text">{{ warnText }}</slot>
+    </div>
+    <div
+      v-if="isHelper"
+      :class="[
+        `${carbonPrefix}--form__helper-text`,
+        { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
+      ]"
+    >
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CvTextInput } from "@carbon/vue";
+import {
+  WarningFilled16,
+  WarningAltFilled16,
+  View16,
+  ViewOff16,
+} from "@carbon/icons-vue";
+
+export default {
+  name: "NsTextInput",
+  extends: CvTextInput,
+  components: { WarningFilled16, WarningAltFilled16, View16, ViewOff16 },
+  props: {
+    helperText: { type: String, default: undefined },
+    invalidMessage: { type: String, default: undefined },
+    label: String,
+    passwordHideLabel: { type: String, default: "Hide password" },
+    passwordShowLabel: { type: String, default: "Show password" },
+    passwordVisible: Boolean,
+    type: String,
+    value: String,
+    warnText: { type: String, default: undefined },
+    tooltipAlignment: {
+      type: String,
+      default: "center",
+      validator: (val) => ["start", "center", "end"].includes(val),
+    },
+    tooltipDirection: {
+      type: String,
+      default: "bottom",
+      validator: (val) => ["top", "left", "bottom", "right".includes(val)],
+    },
+  },
+  computed: {
+    hasTooltipSlot() {
+      return !!this.$slots.tooltip;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.tooltip {
+  display: inline-block;
+  position: absolute;
+}
+</style>
+
+<style lang="scss">
+// global styles
+
+.ns-text-input .bx--tooltip__label .bx--tooltip__trigger {
+  margin-left: 0.25rem;
+}
+</style>