@rancher/shell 0.1.0

package/components/EventsTable.vue

@@ -0,0 +1,67 @@
+<script>
+import { AGE, SIMPLE_TYPE, REASON, MESSAGE } from '@shell/config/table-headers';
+import SortableTable from '@shell/components/SortableTable';
+
+export default {
+  components: { SortableTable },
+  props:      {
+    resource: {
+      type:     Object,
+      required: true
+    }
+  },
+  data() {
+    const eventHeaders = [
+      SIMPLE_TYPE,
+      REASON,
+      MESSAGE,
+      AGE
+    ];
+
+    this.loopEvents();
+
+    return {
+      eventRows:      [],
+      eventHeaders,
+      intervalHandle: null
+    };
+  },
+
+  beforeDestroy() {
+    if (this.intervalHandle) {
+      clearInterval(this.intervalHandle);
+    }
+  },
+
+  methods: {
+    async loopEvents() {
+      this.eventRows = await this.fetchEvents();
+
+      this.intervalHandle = setInterval(async() => {
+        this.eventRows = await this.fetchEvents();
+      }, 10000);
+    },
+    async fetchEvents() {
+      const namespace = this.resource.namespace;
+      const name = this.resource.name;
+      const kind = this.resource.kind;
+
+      const url = `/k8s/clusters/local/api/v1/namespaces/${ namespace }/events?fieldSelector=involvedObject.name=${ name },involvedObject.kind=${ kind }`;
+      const response = await this.$store.dispatch('cluster/request', { url });
+
+      return response.items;
+    },
+  }
+};
+</script>
+
+<template>
+  <SortableTable
+    :rows="eventRows"
+    :headers="eventHeaders"
+    :table-actions="false"
+    :row-actions="false"
+    key-field="key"
+    default-sort-by="state"
+  />
+</template>

package/components/FileDiff.vue

@@ -0,0 +1,174 @@
+<script>
+import { Diff2Html } from 'diff2html';
+import { createPatch } from 'diff';
+import $ from 'jquery';
+
+export default {
+  props: {
+    filename: {
+      type:    String,
+      default: 'file.txt',
+    },
+
+    sideBySide: {
+      type:    Boolean,
+      default: false,
+    },
+
+    orig: {
+      type:     String,
+      required: true,
+    },
+
+    neu: {
+      type:     String,
+      required: true,
+    },
+
+    autoResize: {
+      type:    Boolean,
+      default: true,
+    },
+    footerSpace: {
+      type:    Number,
+      default: 0,
+    },
+    minHeight: {
+      type:    Number,
+      default: 200,
+    }
+  },
+
+  computed: {
+    html() {
+      const outputFormat = this.sideBySide ? 'side-by-side' : 'line-by-line';
+      const showFiles = false;
+      const matching = 'words';
+
+      const patch = createPatch(
+        this.filename,
+        this.orig,
+        this.neu
+      );
+
+      const json = Diff2Html.getJsonFromDiff(patch, {
+        inputFormat: 'diff',
+        outputFormat,
+        showFiles,
+        matching
+      });
+
+      return Diff2Html.getPrettyHtml(json, {
+        inputFormat:        'json',
+        outputFormat,
+        showFiles,
+        matching,
+        synchronizedScroll: true,
+      });
+    }
+  },
+
+  methods: {
+    fit() {
+      if ( !this.autoResize ) {
+        return;
+      }
+
+      const container = $(this.$refs.root);
+
+      if ( !container || !container.length ) {
+        return;
+      }
+
+      const offset = container.offset();
+
+      if ( !offset ) {
+        return;
+      }
+
+      const desired = $(window).innerHeight() - offset.top - this.footerSpace;
+
+      container.css('height', `${ Math.max(0, desired) }px`);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <resize-observer @notify="fit" />
+    <div ref="root" class="root" v-html="html" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.root {
+  max-width: 100%;
+  position: relative;
+  overflow: auto;
+}
+</style>
+
+<style lang="scss">
+@import 'node_modules/diff2html/dist/diff2html.min.css';
+
+.d2h-file-header {
+  display: none;
+}
+
+.d2h-file-wrapper {
+  border-color: var(--diff-border);
+}
+
+.d2h-diff-table {
+  font-family: Menlo,Consolas,monospace;
+  font-size: 13px;
+}
+
+.d2h-emptyplaceholder, .d2h-code-side-emptyplaceholder {
+  border-color: var(--diff-linenum-border);
+  background-color: var(--diff-empty-placeholder);
+}
+
+.d2h-code-linenumber,
+.d2h-code-side-linenumber {
+  background-color: var(--diff-linenum-bg);
+  color: var(--diff-linenum);
+  border-color: var(--diff-linenum-border);
+  border-left: 0;
+}
+
+.d2h-code-line del,.d2h-code-side-line del {
+  background-color: var(--diff-line-del-bg);
+}
+
+.d2h-code-line ins,.d2h-code-side-line ins {
+  background-color: var(--diff-line-ins-bg);
+}
+
+.d2h-del {
+  background-color: var(--diff-del-bg);
+  border-color: var(--diff-del-border);
+  color: var(--body-text);
+}
+
+.d2h-ins {
+  background-color: var(--diff-ins-bg);
+  border-color: var(--diff-ins-border);
+  color: var(--body-text);
+}
+
+.d2h-info {
+  background-color: var(--diff-header-bg);
+  color: var(--diff-header);
+  border-color: var(--diff-header-border);
+}
+
+.d2h-file-diff .d2h-del.d2h-change {
+  background-color: var(--diff-chg-del);
+}
+
+.d2h-file-diff .d2h-ins.d2h-change {
+  background-color: var(--diff-chg-ins);
+}
+</style>

package/components/FixedBanner.vue

@@ -0,0 +1,228 @@
+<script>
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import isEmpty from 'lodash/isEmpty';
+
+export default {
+  props: {
+    header: {
+      type:    Boolean,
+      default: false
+    },
+    consent: {
+      type:    Boolean,
+      default: false
+    },
+    footer: {
+      type:    Boolean,
+      default: false
+    },
+  },
+
+  async fetch() {
+    this.bannerSetting = await this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BANNERS);
+  },
+
+  data() {
+    return {
+      showDialog:      true,
+      showHeader:      false,
+      showFooter:      false,
+      showConsent:     false,
+      banner:          {},
+      bannerSetting:   null
+    };
+  },
+
+  methods: {
+    hideDialog() {
+      this.showDialog = false;
+    },
+    handleLineBreaksConsentText(banner) {
+      if (banner.text?.length) {
+        // split text by newline char
+        const textArray = banner.text.split(/\\n/).filter(element => element);
+
+        if (textArray.length > 1) {
+          textArray.forEach((str, i) => {
+            textArray[i] = str.trim();
+          });
+          banner.text = textArray;
+        }
+      }
+
+      return banner;
+    }
+  },
+
+  computed: {
+    bannerStyle() {
+      return {
+        color:              this.banner.color,
+        'background-color': this.banner.background,
+        'text-align':       this.banner.textAlignment,
+        'font-weight':      this.banner.fontWeight ? 'bold' : '',
+        'font-style':       this.banner.fontStyle ? 'italic' : '',
+        'font-size':        this.banner.fontSize,
+        'text-decoration':  this.banner.textDecoration ? 'underline' : ''
+      };
+    },
+    dialogStyle() {
+      return {
+        color:              this.banner.color,
+        'background-color': this.banner.background
+      };
+    },
+    showBanner() {
+      if (!this.banner.text && !this.banner.background) {
+        return false;
+      }
+
+      if (this.header) {
+        return this.showHeader;
+      } else if (this.consent) {
+        return this.showConsent;
+      } else if (this.footer) {
+        return this.showFooter;
+      }
+
+      return null;
+    },
+    isTextAnArray() {
+      return Array.isArray(this.banner?.text);
+    },
+    showAsDialog() {
+      return this.consent && !!this.banner.button;
+    }
+  },
+
+  watch: {
+    bannerSetting(neu) {
+      if (neu?.value && neu.value !== '') {
+        try {
+          const parsed = JSON.parse(neu.value);
+          const {
+            bannerHeader, bannerFooter, bannerConsent, banner, showHeader, showFooter, showConsent
+          } = parsed;
+          let bannerContent = parsed?.banner || {};
+
+          if (isEmpty(banner)) {
+            if (showHeader && this.header) {
+              bannerContent = bannerHeader || {};
+            } else if (showConsent && this.consent) {
+              bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
+            } else if (showFooter && this.footer) {
+              bannerContent = bannerFooter || {};
+            } else {
+              bannerContent = {};
+            }
+          }
+
+          this.showHeader = showHeader === 'true';
+          this.showFooter = showFooter === 'true';
+          this.showConsent = showConsent === 'true';
+          this.banner = bannerContent;
+        } catch {}
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="showBanner">
+    <div v-if="!showAsDialog" class="banner" :style="bannerStyle" :class="{'banner-consent': consent}">
+      <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
+      <div v-if="isTextAnArray">
+        <p v-for="(text, index) in banner.text" :key="index">
+          {{ text }}
+        </p>
+      </div>
+      <p v-else>
+        {{ banner.text }}
+      </p>
+    </div>
+    <div v-else-if="showDialog">
+      <div class="banner-dialog-glass"></div>
+      <div class="banner-dialog">
+        <div class="banner-dialog-frame" :style="dialogStyle">
+          <div class="banner" :style="bannerStyle">
+            <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
+            <div v-if="isTextAnArray">
+              <p v-for="(text, index) in banner.text" :key="index">
+                {{ text }}
+              </p>
+            </div>
+            <p v-else>
+              {{ banner.text }}
+            </p>
+          </div>
+          <button class="btn role-primary" @click="hideDialog()">
+            {{ banner.button }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .banner {
+    text-align: center;
+    line-height: 2em;
+    width: 100%;
+    padding: 0 20px;
+
+    &.banner-consent {
+      position: absolute;
+      height: unset;
+      min-height: 2em;
+      overflow: hidden;
+    }
+  }
+  .banner-dialog, .banner-dialog-glass {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+  }
+  .banner-dialog-glass {
+    z-index: 5000;
+    background-color: var(--default);
+    opacity: 0.75;
+  }
+  .banner-dialog {
+    z-index: 5001;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .banner-dialog-frame {
+      border: 2px solid var(--border);
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      padding: 20px;
+      height: fit-content;
+      width: fit-content;
+      min-width: 50%;
+      max-width: 80%;
+      max-height: 90%;
+
+      .banner {
+        height: initial;
+        overflow-y: auto;
+      }
+
+      button {
+        margin-top: 10px;
+        max-width: 50%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: fit-content;
+      }
+    }
+  }
+</style>

package/components/Flag.vue

@@ -0,0 +1,77 @@
+<script>
+export default {
+  props: {
+    color: {
+      type:    String,
+      default: 'warning'
+    },
+    label: {
+      type:    String,
+      default: null,
+    },
+    labelKey: {
+      type:    String,
+      default: null,
+    },
+  }
+};
+</script>
+<template>
+  <span class="flag" :class="{[color]: true}">
+    <slot>
+      <t v-if="labelKey" :k="labelKey" />
+      <template v-else>{{ label }}</template>
+    </slot>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .flag {
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 10px;
+    padding: 0 0 0 10px;
+    border-radius: 2px 0 0 2px;
+
+    &.success {
+      background: var(--success);
+      &:after {
+        border-color: var(--success-border);
+      }
+    }
+
+    &.info {
+      background: var(--info);
+      &:after {
+        border-color: var(--info-border);
+      }
+    }
+
+    &.warning {
+      background: var(--warning);
+      &:after {
+        border-color: var(--warning-border);
+      }
+    }
+
+    &.error {
+      background: var(--error);
+      &:after {
+        border-color: var(--error-border);
+      }
+    }
+
+    &:after {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      position: relative;
+      right: -10px;
+      height: 100%;
+      border-width: 10px;
+      border-style: solid;
+      border-right-color: transparent !important;
+    }
+  }
+</style>

package/components/Glance.vue

@@ -0,0 +1,70 @@
+<script>
+import GradientBox from '@shell/components/GradientBox';
+
+export default {
+  components: { GradientBox },
+  props:      {
+    // array of slot names being used
+    slots: {
+      type:    Array,
+      default: () => []
+    }
+  }
+};
+</script>
+
+<template>
+  <GradientBox :plain="true" class="glance" primary-color-var="--glance-bg-rgb" :show-tab="false">
+    <div v-for="slot in slots" :key="slot" class="tile">
+      <slot :name="slot" />
+    </div>
+  </GradientBox>
+</template>
+
+<style lang="scss">
+  .glance {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      padding: 11px;
+
+    .tile {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          align-items: flex-start;
+          padding: 9px 0 3px 0;
+
+          &:not(:last-of-type) {
+              border-right: 1px solid;
+              border-color: var(--glance-divider);
+          }
+
+          &:not(:first-of-type) {
+              padding-left: 20px;
+          }
+      }
+      h1 {
+        font-size: 15px;
+        line-height: 3px;
+      }
+
+      @media only screen and (min-width: map-get($breakpoints, '--viewport-9')) {
+        h1 {
+          font-size: 25px;
+          line-height: 14px;
+        }
+      }
+      @media only screen and (min-width: map-get($breakpoints, '--viewport-12')) {
+        h1 {
+          font-size: 30px;
+          line-height: 28px;
+        }
+      }
+
+      label {
+          font-size: 12px;
+          opacity: 0.7;
+      }
+  }
+</style>