@rancher/shell 3.0.0-rc.2 → 3.0.0-rc.4

package/vue.config.js

@@ -74,6 +74,7 @@ const getProxyConfig = (proxyConfig) => ({
   '/meta':           proxyMetaOpts(api), // Browser API UI
   '/v1-*':           proxyOpts(api), // SAML, KDM, etc
   '/rancherversion': proxyPrimeOpts(api), // Rancher version endpoint
+  '/version':        proxyPrimeOpts(api), // Rancher Kube version endpoint
   // These are for Ember embedding
   '/c/*/edit':       proxyOpts('https://127.0.0.1:8000'), // Can't proxy all of /c because that's used by Vue too
   '/k/':             proxyOpts('https://127.0.0.1:8000'),
@@ -362,6 +363,9 @@ const getVirtualModulesAutoImport = (dir) => {
   return new VirtualModulesPlugin(autoImportTypes);
 };
 
+// Get current shell version
+const shellPkgData = require(path.join(__dirname, 'package.json'));
+
 /**
  * DefinePlugin does string replacement within our code. We may want to consider replacing it with something else. In code we'll see something like
  * process.env.commit even though process and env aren't even defined objects. This could cause people to be mislead.
@@ -377,6 +381,7 @@ const createEnvVariablesPlugin = (routerBasePath, rancherEnv) => new webpack.Def
   'process.env.rancherEnv':                JSON.stringify(rancherEnv),
   'process.env.harvesterPkgUrl':           JSON.stringify(process.env.HARVESTER_PKG_URL),
   'process.env.api':                       JSON.stringify(api),
+  'process.env.UI_EXTENSIONS_API_VERSION': JSON.stringify(shellPkgData.version),
   // Store the Router Base as env variable that we can use in `shell/config/router.js`
   'process.env.routerBase':                JSON.stringify(routerBasePath),
   __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',

package/components/form/PodSecurity.vue

@@ -1,168 +0,0 @@
-<script>
-import { RadioGroup } from '@components/Form/Radio';
-import ArrayList from '@shell/components/form/ArrayList';
-import KeyValue from '@shell/components/form/KeyValue';
-import { mapGetters } from 'vuex';
-import { LabeledInput } from '@components/Form/LabeledInput';
-
-export default {
-  components: {
-    RadioGroup,
-    ArrayList,
-    KeyValue,
-    LabeledInput
-  },
-  props: {
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    },
-    mode: {
-      type:    String,
-      default: 'view'
-    }
-  },
-
-  data() {
-    const {
-      shareProcessNamespace, securityContext = {}, hostPID, hostIPC
-    } = this.value;
-    const {
-      runasNonRoot, runAsUser, runAsGroup, supplementalGroups, fsGroup, sysctls
-    } = securityContext;
-
-    return {
-      shareProcessNamespace,
-      hostPID,
-      hostIPC,
-      runasNonRoot,
-      runAsUser,
-      runAsGroup,
-      supplementalGroups,
-      fsGroup,
-      sysctls
-    };
-  },
-
-  computed: { ...mapGetters({ t: 'i18n/t' }) }
-};
-</script>
-
-<template>
-  <div>
-    <div class="row">
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="shareProcessNamespace"
-          name="shareProcessNamespace"
-          :label="t('workload.container.security.shareProcessNamespace')"
-          :labels="['No', 'Yes']"
-          :options="[false, true]"
-          :mode="mode"
-        />
-      </div>
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="runasNonRoot"
-          name="runasNonRoot"
-          :label="t('workload.container.security.runAsNonRoot')"
-          :options="[false, true]"
-          :labels="[t('workload.container.security.runAsNonRootOptions.noOption'), t('workload.container.security.runAsNonRootOptions.yesOption')]"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <LabeledInput
-          v-model.number="runAsUser"
-          :label="t('workload.container.security.runAsUser')"
-          :mode="mode"
-        />
-      </div>
-      <div class="col span-6">
-        <LabeledInput
-          v-model.number="runAsGroup"
-          :label="t('workload.container.security.runAsGroup')"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <h5 class="text-label">
-          <t k="workload.container.security.supplementalGroups" />
-        </h5>
-        <ArrayList
-          v-model:value="supplementalGroups"
-          :add-label="t('workload.container.security.addGroupIDs')"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <LabeledInput
-          v-model.number="fsGroup"
-          :label="t('workload.container.security.fsGroup')"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="hostIPC"
-          name="hostIPC"
-          :label="t('workload.container.security.hostIPC')"
-          :labels="['No', 'Yes']"
-          :options="[false, true]"
-          :mode="mode"
-        />
-      </div>
-      <div class="col span-6">
-        <RadioGroup
-          v-model:value="hostPID"
-          name="hostPID"
-          :label="t('workload.container.security.hostPID')"
-          :labels="['No', 'Yes']"
-          :options="[false, true]"
-          :mode="mode"
-        />
-      </div>
-    </div>
-
-    <div class="spacer" />
-
-    <div class="row">
-      <div class="col span-12">
-        <KeyValue
-          v-model:value="sysctls"
-          :title="t('workload.container.security.sysctls')"
-          :key-label="t('workload.container.security.sysctlsKey')"
-          :mode="mode"
-        >
-          <template #title>
-            <h3>
-              {{ t('workload.container.security.sysctls') }}
-            </h3>
-          </template>
-        </KeyValue>
-      </div>
-    </div>
-  </div>
-</template>

package/components/formatter/Weight.vue

@@ -1,147 +0,0 @@
-<script>
-import { LabeledInput } from '@components/Form/LabeledInput';
-
-export default {
-  components: { LabeledInput },
-
-  props: {
-    value: {
-      type:    Number,
-      default: 0,
-    },
-    row: {
-      type:     Object,
-      required: true
-    },
-    col: {
-      type:    Object,
-      default: () => {}
-    },
-  },
-
-  data() {
-    return { newPercent: null };
-  },
-
-  computed: {
-    totalForApp() {
-      return this.row.weightsOfApp;
-    },
-
-    desired() {
-      const desired = this.row.weights.desired;
-      const total = this.totalForApp.desired;
-
-      if ( total === 0 ) {
-        return 0;
-      }
-
-      return Math.round(desired / total * 1000) / 10;
-    },
-
-    current() {
-      const current = this.row.weights.current;
-      const total = this.totalForApp.current;
-
-      if ( total === 0 ) {
-        return 0;
-      }
-
-      return Math.round(current / total * 1000) / 10;
-    },
-
-    showDesired() {
-      return this.current !== this.desired;
-    },
-
-    canAdjust() {
-      return this.totalForApp.count > 1 && this.current !== 100;
-    },
-
-    newWeightValid() {
-      const percent = this.newPercent;
-
-      return percent >= 0 && percent <= 100;
-    }
-  },
-
-  methods: {
-    onShown() {
-      setTimeout(() => {
-        this.$refs.newPercent.focus();
-      }, 250);
-    },
-
-    setWeight() {
-      const newPercent = this.newPercent || 0;
-
-      this.row.saveWeightPercent(newPercent);
-    },
-  }
-};
-</script>
-
-<template>
-  <v-dropdown
-    :class="{'hand': canAdjust}"
-    placement="top"
-    :open-group="row.id"
-    :trigger="canAdjust ? 'click' : 'manual'"
-    offset="1"
-    @apply-show="onShown"
-  >
-    <div>
-      <span
-        v-if="totalForApp.count === 1"
-        class="text-muted"
-      >
-        &mdash;
-      </span>
-      <span
-        v-else
-        v-trim-whitespace
-        :class="{'text-muted': current === 0 && desired === 0}"
-      >
-        {{ current }}%
-      </span>
-      <div v-if="showDesired">
-        <i class="icon icon-chevron-right" />
-        {{ desired }}%
-      </div>
-    </div>
-
-    <template #popper>
-      <div
-        v-if="canAdjust"
-        class="text-center pb-5"
-      >
-        <form>
-          <LabeledInput
-            ref="newPercent"
-            v-model.number="newPercent"
-            label="Target"
-            size="4"
-            min="0"
-            max="100"
-            class="text-left"
-            style="width: 100px;"
-          >
-            <template #suffix>
-              <div class="addon">
-                %
-              </div>
-            </template>
-          </LabeledInput>
-          <button
-            type="submit"
-            class="btn bg-primary btn-sm mt-20"
-            :disabled="!newWeightValid"
-            @click.stop.prevent="setWeight"
-          >
-            Set
-          </button>
-        </form>
-      </div>
-    </template>
-  </v-dropdown>
-</template>

package/components/nuxt/nuxt-build-indicator.vue

@@ -1,170 +0,0 @@
-<template>
-  <transition appear>
-    <div
-      v-if="building"
-      class="nuxt__build_indicator"
-      :style="indicatorStyle"
-    >
-      <svg
-        viewBox="0 0 96 72"
-        version="1"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <path d="M6 66h23l1-3 21-37L40 6 6 66zM79 66h11L62 17l-5 9 22 37v3zM54 31L35 66h38z" />
-          <path
-            d="M29 69v-1-2H6L40 6l11 20 3-6L44 3s-2-3-4-3-3 1-5 3L1 63c0 1-2 3 0 6 0 1 2 2 5 2h28c-3 0-4-1-5-2z"
-            fill="#00C58E"
-          />
-          <path
-            d="M95 63L67 14c0-1-2-3-5-3-1 0-3 0-4 3l-4 6 3 6 5-9 28 49H79a5 5 0 0 1 0 3c-2 2-5 2-5 2h16c1 0 4 0 5-2 1-1 2-3 0-6z"
-            fill="#00C58E"
-          />
-          <path
-            d="M79 69v-1-2-3L57 26l-3-6-3 6-21 37-1 3a5 5 0 0 0 0 3c1 1 2 2 5 2h40s3 0 5-2zM54 31l19 35H35l19-35z"
-            fill="#FFF"
-            fill-rule="nonzero"
-          />
-        </g>
-      </svg>
-      {{ animatedProgress }}%
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'NuxtBuildIndicator',
-  data() {
-    return {
-      building:          false,
-      progress:          0,
-      animatedProgress:  0,
-      reconnectAttempts: 0
-    };
-  },
-  computed: {
-    options: () => ({
-      position: 'bottom-right', backgroundColor: '#2E495E', color: '#00C48D'
-    }),
-    indicatorStyle() {
-      const [d1, d2] = this.options.position.split('-');
-
-      return {
-        [d1]:               '20px',
-        [d2]:               '20px',
-        'background-color': this.options.backgroundColor,
-        color:              this.options.color
-      };
-    }
-  },
-  watch: {
-    progress(val, oldVal) {
-      // Average progress may decrease but ignore it!
-      if (val < oldVal) {
-        return;
-      }
-      // Cancel old animation
-      clearInterval(this._progressAnimation);
-      // Jump to edge immediately
-      if (val < 10 || val > 90) {
-        this.animatedProgress = val;
-
-        return;
-      }
-      // Animate to value
-      this._progressAnimation = setInterval(() => {
-        const diff = this.progress - this.animatedProgress;
-
-        if (diff > 0) {
-          this.animatedProgress++;
-        } else {
-          clearInterval(this._progressAnimation);
-        }
-      }, 50);
-    }
-  },
-  mounted() {
-    if (EventSource === undefined) {
-      return; // Unsupported
-    }
-    this.sseConnect();
-  },
-  beforeUnmount() {
-    this.sseClose();
-    clearInterval(this._progressAnimation);
-  },
-  methods: {
-    sseConnect() {
-      if (this._connecting) {
-        return;
-      }
-      this._connecting = true;
-      this.sse = new EventSource('/_loading/sse');
-      this.sse.addEventListener('message', (event) => this.onSseMessage(event));
-    },
-    onSseMessage(message) {
-      const data = JSON.parse(message.data);
-
-      if (!data.states) {
-        return;
-      }
-
-      this.progress = Math.round(data.states.reduce((p, s) => p + s.progress, 0) / data.states.length);
-
-      if (!data.allDone) {
-        this.building = true;
-      } else {
-        this.$nextTick(() => {
-          this.building = false;
-          this.animatedProgress = 0;
-          this.progress = 0;
-          clearInterval(this._progressAnimation);
-        });
-      }
-    },
-
-    sseClose() {
-      if (this.sse) {
-        this.sse.close();
-        delete this.sse;
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.nuxt__build_indicator {
-  box-sizing: border-box;
-  position: fixed;
-  font-family: monospace;
-  padding: 5px 10px;
-  border-radius: 5px;
-  box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
-  width: 88px;
-  z-index: 2147483647;
-  font-size: 16px;
-  line-height: 1.2rem;
-}
-.v-enter-active, .v-leave-active {
-  transition-delay: 0.2s;
-  transition-property: all;
-  transition-duration: 0.3s;
-}
-.v-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
-}
-svg {
-  display: inline-block;
-  vertical-align: baseline;
-  width: 1.1em;
-  height: 0.825em;
-  position: relative;
-  top: 1px;
-}
-</style>

package/components/nuxt/nuxt-child.js

@@ -1,52 +0,0 @@
-
-export default {
-  name:       'NuxtChild',
-  functional: true,
-  props:      {
-    nuxtChildKey: {
-      type:    String,
-      default: ''
-    },
-    keepAlive:      Boolean,
-    keepAliveProps: {
-      type:    Object,
-      default: undefined
-    }
-  },
-  render(_, { parent, data, props }) {
-    const h = parent.$createElement;
-
-    data.nuxtChild = true;
-    const _parent = parent;
-    let depth = 0;
-
-    while (parent) {
-      if (parent.$vnode && parent.$vnode.data.nuxtChild) {
-        depth++;
-      }
-      parent = parent.$parent;
-    }
-    data.nuxtChildDepth = depth;
-
-    const listeners = {};
-
-    const beforeEnter = listeners.beforeEnter;
-
-    listeners.beforeEnter = (el) => {
-      if (beforeEnter) {
-        return beforeEnter.call(_parent, el);
-      }
-    };
-
-    let routerView = h('routerView', data);
-
-    if (props.keepAlive) {
-      routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView]);
-    }
-
-    // this needs to be a "transition" or another non-rendering component,
-    // otherwise we will break pages like the charts wizard or the extensions main screen (DOM would render an additional element and break CSS)
-    // we can deal with this later once we remove this component and <nuxt /> component
-    return h('transition', { on: listeners }, [routerView]);
-  }
-};

package/components/nuxt/nuxt-error.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="__nuxt-error-page">
-    <div class="error">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="90"
-        height="90"
-        fill="#DBE1EC"
-        viewBox="0 0 48 48"
-      >
-        <path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
-      </svg>
-
-      <div class="title">
-        {{ message }}
-      </div>
-      <p
-        v-if="statusCode === 404"
-        class="description"
-      >
-        <a
-          v-if="typeof $route === 'undefined'"
-          class="error-link"
-          href="/"
-        />
-        <router-link
-          v-else
-          class="error-link"
-          to="/"
-        >
-          Back to the home page
-        </router-link>
-      </p>
-
-      <p
-        v-else
-        class="description"
-      >
-        An error occurred while rendering the page. Check developer tools console for details.
-      </p>
-
-      <div class="logo">
-        <a
-          href="https://nuxtjs.org"
-          target="_blank"
-          rel="noopener"
-        >Nuxt</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name:  'NuxtError',
-  props: {
-    error: {
-      type:    Object,
-      default: null
-    }
-  },
-  computed: {
-    statusCode() {
-      return (this.error && this.error.statusCode) || 500;
-    },
-    message() {
-      return this.error.message || 'Error';
-    }
-  },
-  head() {
-    return {
-      title: this.message,
-      meta:  [
-        {
-          name:    'viewport',
-          content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
-        }
-      ]
-    };
-  }
-};
-</script>
-
-<style>
-.__nuxt-error-page {
-  padding: 1rem;
-  background: #F7F8FB;
-  color: #47494E;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  font-family: sans-serif;
-  font-weight: 100 !important;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.__nuxt-error-page .error {
-  max-width: 450px;
-}
-.__nuxt-error-page .title {
-  font-size: 1.5rem;
-  margin-top: 15px;
-  color: #47494E;
-  margin-bottom: 8px;
-}
-.__nuxt-error-page .description {
-  color: #7F828B;
-  line-height: 21px;
-  margin-bottom: 10px;
-}
-.__nuxt-error-page a {
-  color: #7F828B !important;
-  text-decoration: none;
-}
-.__nuxt-error-page .logo {
-  position: fixed;
-  left: 12px;
-  bottom: 12px;
-}
-</style>

package/components/nuxt/nuxt-link.client.js

@@ -1,17 +0,0 @@
-// TODO: #9541 Remove for Vue 3 migration
-/**
- * Prints a deprecation warning for any extensions that might be using NuxtLink
- * @param {string} aliasName The alias that will print the deprecation warning
- * @returns Functional component that prints a deprecation warning and renders a
- * `router-link` instead
- */
-export const nuxtLinkAlias = (aliasName) => {
-  return {
-    functional: true,
-    render(createElement, context) {
-      console.warn(`${ aliasName } is deprecated in Rancher Dashboard. Use 'router-link' instead.`); // eslint-disable-line no-console
-
-      return createElement('router-link', context.data, context.children);
-    }
-  };
-};