@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.2

package/components/EmberPage.vue

@@ -1,622 +0,0 @@
-<script>
-import Loading from '@shell/components/Loading';
-import { mapGetters, mapState } from 'vuex';
-import { NAME as MANAGER } from '@shell/config/product/manager';
-import { CAPI, MANAGEMENT } from '@shell/config/types';
-import { SETTING } from '@shell/config/settings';
-import { findEmberPage, clearEmberInactiveTimer, startEmberInactiveTimer, EMBER_FRAME } from '@shell/utils/ember-page';
-
-const EMBER_FRAME_HIDE_CLASS = 'ember-iframe-hidden';
-const PAGE_CHECK_TIMEOUT = 30000;
-const WINDOW_MANAGER = 'horizontal-window-manager';
-
-// Pages that we should intercept when loaded in the IFRAME and instead
-// navigate to a page in Cluster Dashboard
-// example if the Ember clusters page that is navigated to when the user presses cancel on some pages
-// we intercept this and go the the vue Clusters page instead
-const INTERCEPTS = {
-  'global-admin.clusters.index': {
-    name:   'c-cluster-product-resource',
-    params: {
-      cluster:  '',
-      product:  MANAGER,
-      resource: CAPI.RANCHER_CLUSTER,
-    }
-  },
-  'authenticated.cluster.index': {
-    name:   'c-cluster-product-resource',
-    params: {
-      cluster:  '',
-      product:  MANAGER,
-      resource: CAPI.RANCHER_CLUSTER,
-    }
-  },
-  'authenticated.cluster.istio.cluster-setting': { name: 'c-cluster-explorer-tools' },
-};
-
-export default {
-  emits: ['before-nav'],
-
-  components: { Loading },
-
-  props: {
-    src: {
-      type:     String,
-      required: true
-    },
-    pop: {
-      type:    Boolean,
-      default: false
-    },
-    inline: {
-      type:    String,
-      default: ''
-    },
-    // force inline pages to reuse cached Ember pages
-    forceInlineReuse: {
-      type:    Boolean,
-      default: false
-    },
-    // Do not reuse cached pages
-    forceNew: {
-      type:    Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      iframeEl:         null,
-      loaded:           true,
-      loadRequired:     false,
-      emberCheck:       null,
-      error:            false,
-      heightSync:       null,
-      frameHeight:      -1,
-      frameWidth:       -1,
-      wmHeight:         -1,
-      showHeaderBanner: false,
-      showFooterBanner: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters({ theme: 'prefs/theme' }),
-    ...mapGetters(['clusterId', 'productId']),
-    ...mapState('wm', ['open']),
-    locale() {
-      return this.$store.getters['i18n/current']();
-    }
-  },
-
-  watch: {
-    theme(theme) {
-      this.notifyTheme(theme);
-    },
-
-    // Update when source property changes
-    src(nue, old) {
-      if (nue !== old) {
-        this.initFrame();
-      }
-    },
-
-    // Watch on the window manager opening/closing
-    open(nue, old) {
-      if (nue !== old) {
-        if (nue) {
-          this.syncSize();
-        } else {
-          clearTimeout(this.heightSync);
-          const iframeEl = findEmberPage();
-
-          // Reset the height when the window manager is closed
-          this.heightSync = null;
-          this.wmHeight = -1;
-
-          if (iframeEl) {
-            iframeEl.style.height = '';
-          }
-        }
-      }
-    },
-    locale() {
-      this.syncLocale();
-    }
-  },
-
-  mounted() {
-    // Embedded page visited, so cancel time to remove IFRAME when inactive
-    clearEmberInactiveTimer();
-    window.addEventListener('message', this.receiveMessage);
-    this.initFrame();
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('message', this.receiveMessage);
-
-    if (this.heightSync) {
-      clearTimeout(this.heightSync);
-    }
-
-    if (this.inline) {
-      const iframeEl = findEmberPage();
-
-      // Remove the IFRAME - we can't reuse it one its been moved inline
-      if (iframeEl) {
-        iframeEl.remove();
-      }
-    }
-
-    // Hide the iframe
-    if (this.iframeEl) {
-      this.iframeEl.classList.add(EMBER_FRAME_HIDE_CLASS);
-    }
-
-    // Cancel any pending http request to check Ember UI availability
-    if (this.emberCheck) {
-      this.emberCheck.cancel('User left page');
-    }
-
-    // Set up a timer to remove the IFrame after a period of inactivity
-    startEmberInactiveTimer();
-  },
-
-  methods: {
-    addBannerClasses(elm, prefix) {
-      if (!elm) {
-        return;
-      }
-
-      elm.classList.remove(`${ prefix }-top-banner`);
-      elm.classList.remove(`${ prefix }-one-banner`);
-      elm.classList.remove(`${ prefix }-two-banners`);
-
-      if (this.showHeaderBanner) {
-        elm.classList.add(`${ prefix }-top-banner`);
-        if (this.showFooterBanner) {
-          elm.classList.add(`${ prefix }-two-banners`);
-        }
-      } else if (this.showFooterBanner) {
-        elm.classList.add(`${ prefix }-one-banner`);
-      }
-    },
-
-    async initFrame() {
-      const bannerSetting = await this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BANNERS);
-
-      try {
-        const parsed = JSON.parse(bannerSetting.value);
-
-        this.showHeaderBanner = parsed.showHeader === 'true';
-        this.showFooterBanner = parsed.showFooter === 'true';
-      } catch {}
-
-      this.loaded = true;
-      this.loadRequired = false;
-
-      // Get the existing iframe if it exists
-      let iframeEl = findEmberPage();
-
-      // If the iframe already exists, check if it is ready for us to reuse
-      // by navigating within the app that is already loaded
-      if (iframeEl !== null) {
-        const ready = iframeEl.getAttribute('data-ready') === 'true';
-        const lastDidLoad = iframeEl.getAttribute('data-loaded') === 'true';
-        const doNotReuse = (!!this.inline && !this.forceInlineReuse) || this.forceNew;
-        // Was not inline but now is - can't reuse
-        const inlineChanged = !!this.inline && (iframeEl.parentElement === document.body);
-
-        if (!ready || doNotReuse || !lastDidLoad || inlineChanged) {
-          iframeEl.remove();
-          iframeEl = null;
-        }
-      }
-
-      if (iframeEl === null && process.env.dev) {
-        // Fetch a page to check that the Ember UI is available
-        try {
-          this.error = false;
-          this.loaded = false;
-          this.emberCheck = this.$axios.CancelToken.source();
-
-          // Make a head request to a known asset of the Ember UI
-          const pageUrl = `${ window.location.origin }/assets/images/logos/rke.svg`;
-          const response = await this.$axios.head(pageUrl, {
-            timeout:     PAGE_CHECK_TIMEOUT,
-            cancelToken: this.emberCheck.token,
-          });
-
-          if (response.status !== 200) {
-            this.loaded = true;
-            this.error = true;
-          }
-        } catch (e) {
-          if (!this.$axios.isCancel(e)) {
-            this.loaded = true;
-            this.error = true;
-          }
-        }
-      }
-
-      if (this.error) {
-        return;
-      }
-
-      if (iframeEl === null) {
-        iframeEl = document.createElement('iframe');
-        iframeEl.setAttribute('id', EMBER_FRAME);
-        iframeEl.setAttribute('data-testid', EMBER_FRAME);
-        iframeEl.classList.add(EMBER_FRAME_HIDE_CLASS);
-
-        if (this.inline) {
-          const frameParent = document.getElementById(this.inline);
-
-          frameParent.appendChild(iframeEl);
-        } else {
-          document.body.append(iframeEl);
-        }
-        iframeEl.setAttribute('src', this.src);
-      } else {
-        // Reset scroll position to top
-        if (iframeEl.contentWindow?.scrollTo) {
-          iframeEl.contentWindow.scrollTo(0, 0);
-        }
-
-        // Post a message to navigate within the existing app
-        iframeEl.contentWindow.postMessage({
-          action: 'navigate',
-          name:   this.src
-        });
-
-        // Ensure iframe gets the latest theme if it has changed
-        this.notifyTheme(this.theme);
-
-        const currentUrl = iframeEl.contentWindow.location.pathname;
-        const src = this.trimURL(this.src);
-
-        if (src !== currentUrl) {
-          iframeEl.classList.add(EMBER_FRAME_HIDE_CLASS);
-        } else {
-          iframeEl.classList.remove(EMBER_FRAME_HIDE_CLASS);
-        }
-      }
-
-      this.iframeEl = iframeEl;
-
-      if (!this.inline) {
-        iframeEl.classList.add('ember-iframe');
-        iframeEl.classList.remove('ember-iframe-inline');
-        this.addBannerClasses(this.$refs.emberPage, 'fixed');
-        this.addBannerClasses(iframeEl, 'ember-iframe');
-
-        // If the window manager is open, sync the size
-        if (this.open) {
-          this.syncSize();
-        }
-      } else {
-        iframeEl.classList.remove('ember-iframe');
-        iframeEl.classList.add('ember-iframe-inline');
-        iframeEl.height = 0;
-        this.syncSize();
-      }
-    },
-
-    syncSize() {
-      if (this.heightSync) {
-        clearTimeout(this.heightSync);
-      }
-
-      this.heightSync = setTimeout(() => {
-        this.dosyncSize();
-        this.syncSize();
-      }, 500);
-    },
-
-    dosyncSize() {
-      if (this.inline) {
-        const iframeEl = findEmberPage();
-        const doc = iframeEl.contentWindow.document;
-        const app = doc.getElementById('application');
-        const h = app?.offsetHeight;
-
-        if (h && this.frameHeight !== h) {
-          this.frameHeight = h;
-          iframeEl.height = h;
-        }
-
-        const frameParent = document.getElementById(this.inline);
-        const w = frameParent.offsetWidth;
-
-        if (w && this.frameWidth !== w) {
-          this.frameWidth = w;
-          iframeEl.width = w;
-        }
-      } else {
-        // Ensure the height takes into count the window manger height
-        const wm = document.getElementById(WINDOW_MANAGER);
-
-        if (wm) {
-          const wmh = wm.offsetHeight;
-
-          if (wmh !== this.wmHeight) {
-            // Adjust the bottom
-            const iframeEl = findEmberPage();
-
-            iframeEl.style.height = `calc(100vh - var(--header-height) - ${ wmh }px)`;
-            this.wmHeight = wmh;
-          }
-        }
-      }
-    },
-
-    notifyTheme(theme) {
-      const iframeEl = findEmberPage();
-
-      if (iframeEl) {
-        const emberTheme = theme === 'light' ? 'ui-light' : 'ui-dark';
-
-        // Ensure the embedded UI uses the correct theme
-        iframeEl.contentWindow.postMessage({
-          action: 'set-theme',
-          name:   emberTheme
-        });
-      }
-    },
-
-    trimURL(url) {
-      if (url && url.endsWith('/')) {
-        url = url.substr(0, url.length - 1);
-      }
-
-      return url;
-    },
-
-    // We use PostMessage between the Embedded Ember UI and the Dashboard UI
-    receiveMessage(event) {
-      const msg = event.data;
-
-      if (msg.action === 'navigate') {
-        this.$router.replace({
-          name:   'c-cluster-explorer',
-          params: { cluster: msg.cluster }
-        });
-      } else if (msg.action === 'before-navigation') {
-        this.$emit('before-nav', msg.target);
-
-        // Ember willTransition event
-        if (INTERCEPTS[msg.target]) {
-          const dest = INTERCEPTS[msg.target];
-
-          if (this.isCurrentRoute(dest)) {
-            this.setLoaded(true);
-
-            return;
-          }
-
-          this.setLoaded(false);
-          this.$router.replace(this.fillRoute(dest));
-        }
-      } else if (msg.action === 'loading') {
-        this.setLoaded(!msg.state);
-        this.updateFrameVisibility();
-      } else if (msg.action === 'ready') {
-        // Echo back a ping
-        this.iframeEl.contentWindow.postMessage({ action: 'echo-back' });
-        this.iframeEl.setAttribute('data-ready', true);
-
-        const doc = this.iframeEl.contentWindow?.document?.body;
-
-        if (this.inline) {
-          doc.classList.add('embedded-no-overflow');
-        } else {
-          doc.classList.remove('embedded-no-overflow');
-        }
-        this.syncLocale();
-      } else if (msg.action === 'need-to-load') {
-        this.loadRequired = true;
-      } else if (msg.action === 'did-transition') {
-        if (!this.loadRequired) {
-          this.setLoaded(true);
-          this.updateFrameVisibility();
-          this.dosyncSize();
-        }
-      } else if (msg.action === 'dashboard') {
-        this.iframeEl.setAttribute('data-ready', false);
-        this.$router.replace(msg.page);
-      } else if (msg.action === 'reload') {
-        this.loaded = false;
-        this.iframeEl.remove();
-        this.initFrame();
-      } else if ( msg.action === 'logout' ) {
-        this.loaded = false;
-        this.iframeEl.remove();
-        this.initFrame();
-        this.$store.dispatch('auth/logout');
-      }
-    },
-
-    setLoaded(loaded) {
-      this.loaded = loaded;
-      if (this.iframeEl) {
-        this.iframeEl.setAttribute('data-loaded', loaded);
-      }
-    },
-
-    updateFrameVisibility() {
-      if (this.loaded) {
-        if (this.iframeEl) {
-          this.iframeEl.classList.remove(EMBER_FRAME_HIDE_CLASS);
-
-          // Notify the embedded UI of the primary and primary text colors
-          const primary = window.getComputedStyle(document.body).getPropertyValue('--primary');
-          const primaryText = window.getComputedStyle(document.body).getPropertyValue('--primary-text');
-
-          this.iframeEl.contentWindow.postMessage({
-            action: 'colors',
-            primary,
-            primaryText,
-          });
-        }
-      }
-    },
-
-    fillRoute(route) {
-      if (typeof route === 'object') {
-        // Fill in standard params
-        if (route.params) {
-          if ('cluster' in route.params) {
-            route.params.cluster = this.clusterId;
-          }
-          if ('product' in route.params) {
-            route.params.product = this.productId;
-          }
-        }
-      }
-
-      return route;
-    },
-
-    isCurrentRoute(route) {
-      const current = this.$route;
-
-      if (current.name === route.name) {
-        let same = true;
-
-        Object.keys(current.params).forEach((p) => {
-          if (route.params[p] !== current.params[p]) {
-            same = false;
-          }
-        });
-
-        return same;
-      }
-
-      return false;
-    },
-
-    syncLocale() {
-      const iframeEl = findEmberPage();
-
-      iframeEl?.contentWindow?.ls('user-language')?.sideLoadLanguage(this.locale);
-    }
-  }
-};
-</script>
-
-<template>
-  <div
-    ref="emberPage"
-    class="ember-page"
-  >
-    <Loading
-      v-if="!inline"
-      :loading="!loaded"
-      mode="content"
-      :no-delay="true"
-    />
-    <div
-      v-if="inline && !loaded"
-      v-clean-html="t('generic.loading', {}, true)"
-      class="inline-loading"
-    />
-    <div
-      v-if="error"
-      class="ember-page-error"
-    >
-      <div>{{ t('embedding.unavailable') }}</div>
-      <button
-        class="btn role-primary"
-        @click="initFrame()"
-      >
-        {{ t('embedding.retry') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  $banner-height: 2em;
-
-  .fixed-top-banner {
-    top: calc(#{$banner-height} + var(--header-height));
-  }
-
-  .fixed-one-banner {
-    height: calc(100vh - var(--header-height) - #{$banner-height});
-  }
-
-  .fixed-two-banners {
-    height: calc(100vh - var(--header-height) - #{$banner-height} - #{$banner-height});
-  }
-
-  .ember-page {
-    display: flex;
-    height: 100%;
-    padding: 0;
-  }
-
-  .frame {
-    flex: 1;
-    visibility: hidden;
-  }
-  .frame.pop {
-    margin: -20px;
-  }
-
-  .loading {
-    visibility: visible;
-  }
-  .ember-page-error {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    flex-direction: column;
-    justify-content: center;
-    > div {
-      font-size: 20px;
-      padding-bottom: 20px;
-    }
-  }
-  .inline-loading {
-    border: 1px solid var(--border);
-    border-radius: 5px;
-    padding: 10px;
-    text-align: center;
-    width: 100%;
-  }
-</style>
-<style lang="scss">
-  $banner-height: 2em;
-
-  .ember-iframe {
-    border: 0;
-    left: calc(var(--nav-width) + $app-bar-collapsed-width);
-    height: calc(100vh - var(--header-height));
-    position: absolute;
-    top: var(--header-height);
-    width: calc(100vw - var(--nav-width) - $app-bar-collapsed-width);
-    visibility: show;
-  }
-
-  .ember-iframe-top-banner {
-    top: calc(#{$banner-height} + var(--header-height));
-  }
-
-  .ember-iframe-one-banner {
-    height: calc(100vh - var(--header-height) - #{$banner-height});
-  }
-
-  .ember-iframe-two-banners {
-    height: calc(100vh - var(--header-height) - #{$banner-height} - #{$banner-height});
-  }
-
-  .ember-iframe-inline {
-    border: 0;
-    overflow: hidden;
-  }
-
-  .ember-iframe-hidden {
-    visibility: hidden;
-  }
-</style>

package/components/EmberPageView.vue

@@ -1,39 +0,0 @@
-<script>
-import EmberPage from '@shell/components/EmberPage';
-
-export default {
-  components: { EmberPage },
-
-  props: {
-    pages: {
-      type:     Object,
-      required: true
-    },
-  },
-
-  data() {
-    const page = this.$route.params.page;
-    let src;
-
-    if (page) {
-      src = this.pages[page];
-    }
-
-    return {
-      src,
-      page
-    };
-  },
-};
-</script>
-
-<template>
-  <EmberPage
-    v-if="src"
-    :src="src"
-  />
-  <div v-else>
-    <h1>{{ t('generic.notFound') }}</h1>
-    <h2>{{ page }}</h2>
-  </div>
-</template>