@rancher/shell 0.1.0

package/components/nav/Group.vue

@@ -0,0 +1,371 @@
+<script>
+import Type from '@shell/components/nav/Type';
+export default {
+  name: 'Group',
+
+  components: { Type },
+
+  props: {
+    depth: {
+      type:    Number,
+      default: 0,
+    },
+
+    idPrefix: {
+      type:     String,
+      required: true,
+    },
+
+    group: {
+      type:     Object,
+      required: true,
+    },
+
+    childrenKey: {
+      type:    String,
+      default: 'children',
+    },
+
+    canCollapse: {
+      type:    Boolean,
+      default: true,
+    },
+
+    showHeader: {
+      type:    Boolean,
+      default: true,
+    },
+
+    fixedOpen: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+
+  data() {
+    const id = (this.idPrefix || '') + this.group.name;
+
+    return { id, expanded: false };
+  },
+
+  computed: {
+    hasChildren() {
+      return this.group.children?.length > 0;
+    },
+
+    hasOverview() {
+      return this.group.children?.[0]?.overview;
+    },
+
+    onlyHasOverview() {
+      return this.group.children && this.group.children.length === 1 && this.hasOverview;
+    },
+
+    isOverview() {
+      if (this.group.children && this.group.children.length > 0) {
+        const grp = this.group.children[0];
+        const overviewRoute = grp?.route;
+
+        if (overviewRoute && grp.overview) {
+          const route = this.$router.resolve(overviewRoute || {});
+
+          return this.$route.fullPath === route?.route?.fullPath;
+        }
+      }
+
+      return false;
+    },
+
+    isExpanded: {
+      get() {
+        return this.fixedOpen || this.group.isRoot || !!this.expanded;
+      },
+      set(v) {
+        this.expanded = v;
+      }
+    }
+  },
+
+  methods: {
+    expandGroup() {
+      this.isExpanded = true;
+      this.$emit('expand', this.group);
+    },
+
+    groupSelected() {
+      // Don't auto-select first group entry if we're already expanded and contain the currently-selected nav item
+      if (this.hasActiveRoute() && this.isExpanded) {
+        return;
+      }
+
+      this.expandGroup();
+
+      const items = this.group[this.childrenKey];
+
+      // Navigate to one of the child items (by default the first child)
+      if (items && items.length > 0) {
+        let index = 0;
+
+        // If there is a default type, use it
+        if (this.group.defaultType) {
+          const found = items.findIndex(i => i.name === this.group.defaultType);
+
+          index = (found === -1) ? 0 : found;
+        }
+
+        const route = items[index].route;
+
+        if (route) {
+          this.$router.replace(route);
+        }
+      }
+    },
+
+    selectType() {
+      this.groupSelected();
+      this.close();
+    },
+
+    close() {
+      this.$emit('close');
+    },
+
+    // User clicked on the expander icon, so toggle the expansion so the user can see inside the group
+    peek($event) {
+      this.isExpanded = !this.isExpanded;
+      $event.stopPropagation();
+    },
+
+    hasActiveRoute(items) {
+      if (!items) {
+        items = this.group;
+      }
+
+      for (const item of items.children) {
+        if (item.children && this.hasActiveRoute(item)) {
+          return true;
+        } else if (item.route) {
+          const navLevels = ['cluster', 'product', 'resource'];
+          const matchesNavLevel = navLevels.filter(param => !this.$route.params[param] || this.$route.params[param] !== item.route.params[param]).length === 0;
+          const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
+          const withoutQuery = withoutHash.split('?')[0];
+
+          if (matchesNavLevel || this.$router.resolve(item.route).route.fullPath === withoutQuery) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    },
+
+    syncNav() {
+      const refs = this.$refs.groups;
+
+      if (refs) {
+        // Only expand one group - so after the first has been expanded, no more will
+        let canExpand = true;
+
+        refs.forEach((grp) => {
+          if (!grp.group.isRoot) {
+            if (canExpand) {
+              const isActive = this.hasActiveRoute(grp.group);
+
+              if (isActive) {
+                grp.isExpanded = true;
+                canExpand = false;
+                this.$nextTick(() => grp.syncNav());
+              }
+            }
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="accordion" :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren}">
+    <div v-if="showHeader" class="header" :class="{'active': isOverview, 'noHover': !canCollapse}" @click="groupSelected()">
+      <slot name="header">
+        <n-link v-if="hasOverview" :to="group.children[0].route" :exact="group.children[0].exact">
+          <h6 v-html="group.labelDisplay || group.label" />
+        </n-link>
+        <h6 v-else v-html="group.labelDisplay || group.label" />
+      </slot>
+      <i v-if="!onlyHasOverview && canCollapse" class="icon toggle" :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}" @click="peek($event, true)" />
+    </div>
+    <ul v-if="isExpanded" class="list-unstyled body" v-bind="$attrs">
+      <template v-for="(child, idx) in group[childrenKey]">
+        <li v-if="child.divider" :key="idx">
+          <hr />
+        </li>
+        <!-- <div v-else-if="child[childrenKey] && hideGroup(child[childrenKey])" :key="child.name">
+          HIDDEN
+        </div> -->
+        <li v-else-if="child[childrenKey]" :key="child.name">
+          <Group
+            ref="groups"
+            :key="id+'_'+child.name+'_children'"
+            :id-prefix="id+'_'"
+            :depth="depth + 1"
+            :children-key="childrenKey"
+            :can-collapse="canCollapse"
+            :group="child"
+            :fixed-open="fixedOpen"
+            @selected="groupSelected($event)"
+            @expand="expandGroup($event)"
+            @close="close($event)"
+          />
+        </li>
+        <Type
+          v-else-if="!child.overview || group.name === 'starred'"
+          :key="id+'_' + child.name + '_type'"
+          :is-root="depth == 0 && !showHeader"
+          :type="child"
+          :depth="depth"
+          @selected="selectType($event)"
+        />
+      </template>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .header {
+    position: relative;
+    cursor: pointer;
+    color: var(--body-text);
+
+    > H6 {
+      color: var(--body-text);
+      user-select: none;
+      text-transform: none;
+      font-size: 14px;
+    }
+
+    > A {
+      display: block;
+      padding-left: 10px;
+      &:hover{
+          text-decoration: none;
+        }
+      &:focus{
+        outline:none;
+      }
+      > H6 {
+        font-size: 14px;
+        text-transform: none;
+      }
+    }
+
+    &.active {
+      background-color: var(--nav-active);
+    }
+  }
+
+  .body {
+    margin-left: 10px;
+  }
+
+  .accordion {
+    .header {
+      &:hover:not(.noHover) {
+        background-color: var(--nav-hover);
+      }
+
+      > I {
+        &:hover {
+          background-color: var(--nav-expander-hover);
+        }
+      }
+    }
+  }
+
+  .accordion {
+    &.depth-0 {
+      > .header {
+        padding: 8px 0;
+
+        &.noHover {
+          cursor: default;
+        }
+
+        > H6 {
+          font-size: 14px;
+          text-transform: none;
+          padding-left: 10px;
+        }
+
+        > I {
+          position: absolute;
+          right: 0;
+          top: 0;
+          padding: 10px 7px 9px 7px;
+          user-select: none;
+        }
+      }
+
+      > .body {
+        margin-left: 0;
+      }
+    }
+
+    &.depth-1 {
+      > .header {
+        > H6 {
+          font-size: 13px;
+          line-height: 16px;
+          padding: 8px 0 7px 5px !important;
+        }
+        > I {
+          padding: 9px 7px 8px 7px !important;
+        }
+      }
+    }
+
+    &:not(.depth-0) {
+      > .header {
+        padding-left: 10px;
+        > H6 {
+          // Child groups that aren't linked themselves
+          display: inline-block;
+          padding: 5px 0 5px 5px;
+        }
+
+        > I {
+          position: absolute;
+          right: 0;
+          top: 0;
+          padding: 6px 8px 6px 8px;
+        }
+      }
+    }
+  }
+
+ .body ::v-deep > .child.nuxt-link-active,
+ .header ::v-deep > .child.nuxt-link-exact-active {
+    padding: 0;
+
+    A, A I {
+      color: var(--body-text);
+    }
+
+    A {
+      background-color: var(--nav-active);
+    }
+  }
+
+  .body ::v-deep > .child {
+    A {
+      border-left: solid 5px transparent;
+      line-height: 16px;
+      font-size: 13px;
+    }
+
+    A:focus {
+      outline: none;
+    }
+  }
+</style>

package/components/nav/HarvesterUpgrade.vue

@@ -0,0 +1,222 @@
+<script>
+import { HCI, NODE } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
+import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
+import PercentageBar from '@shell/components/PercentageBar';
+import ProgressBarList from '@shell/components/HarvesterUpgradeProgressBarList';
+import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
+
+export default {
+  name:       'HarvesterUpgrade',
+  components: {
+    PercentageBar, ProgressBarList, BadgeStateFormatter
+  },
+
+  async fetch() {
+    await allHash({
+      images:   this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE }),
+      upgrades: this.$store.dispatch('harvester/findAll', { type: HCI.UPGRADE }),
+      nodes:    this.$store.dispatch('harvester/findAll', { type: NODE })
+    });
+  },
+
+  computed: {
+    latestResource() {
+      return this.$store.getters['harvester/all'](HCI.UPGRADE).find( U => U.isLatestUpgrade);
+    },
+
+    overallMessage() {
+      return this.latestResource?.overallMessage;
+    },
+
+    upgradeImage() {
+      const id = this.latestResource?.upgradeImage;
+
+      return this.$store.getters['harvester/all'](HCI.IMAGE).find(I => I.id === id);
+    },
+
+    imageProgress() {
+      return this.upgradeImage?.progress || 0;
+    },
+
+    showImage() {
+      return !this.latestResource.isUpgradeSucceeded;
+    },
+
+    imageMessage() {
+      return this.latestResource?.upgradeImageMessage;
+    },
+
+    repoReady() {
+      return this.latestResource.createRepo;
+    },
+
+    isShow() {
+      return this.latestResource && !this.latestResource.hasReadMessage;
+    },
+
+    nodesStatus() {
+      return this.latestResource?.nodeUpgradeMessage;
+    },
+
+    sysServiceUpgradeMessage() {
+      return this.latestResource?.sysServiceUpgradeMessage;
+    },
+
+    sysServiceTotal() {
+      return this.sysServiceUpgradeMessage?.[0].percent || 0;
+    },
+
+    nodesPercent() {
+      return this.latestResource?.nodeTotalPercent || 0;
+    },
+
+    repoInfo() {
+      return this.latestResource.repoInfo;
+    },
+  },
+
+  methods: {
+    ignoreMessage() {
+      this.latestResource.setLabel(HCI_ANNOTATIONS.REAY_MESSAGE, 'true');
+      this.latestResource.save();
+    }
+  }
+};
+</script>
+<template>
+  <div v-if="isShow" class="upgrade">
+    <v-popover
+      v-tooltip="{
+        placement: 'bottom-left',
+      }"
+      class="hand"
+    >
+      <slot name="button-content">
+        <i class="warning icon-fw icon icon-dot-open dot-icon" />
+      </slot>
+
+      <template slot="popover">
+        <div class="upgrade-info mb-10">
+          <div v-if="repoInfo" class="repoInfo">
+            <div v-if="latestResource" class="row mb-5">
+              <div class="col span-12">
+                <p class="state">
+                  {{ t('harvester.upgradePage.repoInfo.upgradeStatus') }}: <BadgeStateFormatter class="ml-5" :row="latestResource" />
+                </p>
+              </div>
+            </div>
+
+            <p class="bordered-section"></p>
+
+            <div class="row mb-5">
+              <div class="col span-6">
+                {{ t('harvester.upgradePage.repoInfo.os') }}: <span class="text-muted">{{ repoInfo.release.os }}</span>
+              </div>
+
+              <div class="col span-6">
+                {{ t('product.harvester') }}: <span class="text-muted">{{ repoInfo.release.harvester }}</span>
+              </div>
+            </div>
+
+            <div class="row mb-5">
+              <div class="col span-6">
+                {{ t('harvester.upgradePage.repoInfo.harvesterChart') }}: <span class="text-muted">{{ repoInfo.release.harvesterChart }}</span>
+              </div>
+
+              <div class="col span-6">
+                {{ t('harvester.upgradePage.repoInfo.monitoringChart') }}: <span class="text-muted">{{ repoInfo.release.monitoringChart }}</span>
+              </div>
+            </div>
+
+            <div class="row mb-5">
+              <div class="col span-6">
+                {{ t('harvester.upgradePage.repoInfo.kubernetes') }}: <span class="text-muted">{{ repoInfo.release.kubernetes }}</span>
+              </div>
+
+              <div class="col span-6">
+                {{ t('product.rancher') }}: <span class="text-muted">{{ repoInfo.release.rancher }}</span>
+              </div>
+            </div>
+
+            <p class="bordered-section"></p>
+          </div>
+
+          <p v-if="overallMessage" class="text-warning mb-20">
+            {{ overallMessage }}
+          </p>
+
+          <div v-if="showImage">
+            <h4>{{ t('harvester.upgradePage.upgradeImage') }}<span class="float-r text-info">{{ imageProgress }}%</span></h4>
+            <PercentageBar :value="imageProgress" preferred-direction="MORE" />
+            <p class="text-warning">
+              {{ imageMessage }}
+            </p>
+            <p class="bordered-section"></p>
+          </div>
+
+          <h4>{{ t('harvester.upgradePage.createRepository') }} <span class="float-r text-info">{{ repoReady.isReady ? t('harvester.upgradePage.succeeded') : t('harvester.upgradePage.pending') }}</span></h4>
+          <p v-if="repoReady.message" class="text-warning">
+            {{ repoReady.message }}
+          </p>
+          <p class="bordered-section"></p>
+
+          <ProgressBarList :title="t('harvester.upgradePage.upgradeNode')" :precent="nodesPercent" :list="nodesStatus" />
+          <p class="bordered-section"></p>
+
+          <ProgressBarList :title="t('harvester.upgradePage.upgradeSysService')" :precent="sysServiceTotal" :list="sysServiceUpgradeMessage" />
+        </div>
+
+        <div v-if="latestResource.isUpgradeSucceeded" class="successTip">
+          <button class="btn role-primary" @click="ignoreMessage()">
+            {{ t('harvester.upgradePage.dismissMessage') }}
+          </button>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.upgrade {
+  height: 100%;
+  min-width: 40px;
+  display: flex;
+  align-items: center;
+
+  .dot-icon {
+    font-size: 24px;
+    vertical-align: middle;
+    color: #00a483;
+  }
+}
+
+.upgrade-info {
+  min-width: 550px;
+
+  .repoInfo {
+    .col span {
+      word-break: break-all
+    }
+
+    p.state {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .float-r {
+    float: right;
+  }
+
+  p {
+    word-break: break-word;
+    margin-top: 5px;
+  }
+}
+
+.successTip {
+  display: flex;
+  flex-direction: row-reverse
+}
+</style>