@rancher/shell 0.1.0 → 0.1.1

package/edit/workload/types/Generic.vue

@@ -0,0 +1,295 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
+import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
+
+export default {
+  name:       'WorkloadGeneric',
+  mixins: [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <form v-else class="filled-height">
+    <CruResource
+      :validation-passed="fvFormIsValid"
+      :selected-subtype="type"
+      :resource="value"
+      :mode="mode"
+      :errors="fvUnreportedValidationErrors"
+      :done-route="doneRoute"
+      :subtypes="workloadSubTypes"
+      :apply-hooks="applyHooks"
+      :value="value"
+      @finish="save"
+      @select-type="selectType"
+      @error="e=>errors = e"
+    >
+      <NameNsDescription
+        :value="value"
+        :mode="mode"
+        :rules="{name: fvGetAndReportPathRules('metadata.name'), namespace: fvGetAndReportPathRules('metadata.namespace'), description: []}"
+        @change="name=value.metadata.name"
+      />
+      <div v-if="isCronJob || isReplicable || isStatefulSet || containerOptions.length > 1" class="row mb-20">
+        <div v-if="isCronJob" class="col span-3">
+          <LabeledInput
+            v-model="spec.schedule"
+            type="cron"
+            :mode="mode"
+            :label="t('workload.cronSchedule')"
+            :rules="fvGetAndReportPathRules('spec.schedule')"
+            placeholder="0 * * * *"
+          />
+        </div>
+        <div v-if="isReplicable" class="col span-3">
+          <LabeledInput
+            v-model.number="spec.replicas"
+            type="number"
+            min="0"
+            required
+            :mode="mode"
+            :label="t('workload.replicas')"
+          />
+        </div>
+        <div v-if="isStatefulSet" class="col span-3">
+          <LabeledSelect
+            v-model="spec.serviceName"
+            option-label="metadata.name"
+            :reduce="service=>service.metadata.name"
+            :mode="mode"
+            :label="t('workload.serviceName')"
+            :options="headlessServices"
+            required
+          />
+        </div>
+        <div v-if="containerOptions.length > 1" class="col span-3">
+          <LabeledSelect :value="container" option-label="name" :label="t('workload.container.titles.container')" :options="containerOptions" @input="selectContainer" />
+          <div class="delete-container-button">
+            <button v-if="allContainers.length > 1 && !isView" type="button" class="btn-sm role-link" @click="removeContainer(container)">
+              {{ t('workload.container.removeContainer') }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <Tabbed :key="containerChange" :side-tabs="true">
+        <Tab :label="t('workload.container.titles.general')" name="general" :weight="tabWeightMap['general']" :error="tabErrors.general">
+          <div>
+            <div :style="{'align-items':'center'}" class="row mb-20">
+              <div class="col span-6">
+                <LabeledInput v-model="container.name" :mode="mode" :label="t('workload.container.containerName')" />
+              </div>
+              <div class="col span-6">
+                <RadioGroup
+                  :mode="mode"
+                  :value="isInitContainer"
+                  name="initContainer"
+                  :options="[true, false]"
+                  :labels="[t('workload.container.init'), t('workload.container.standard')]"
+                  @input="updateInitContainer"
+                />
+              </div>
+            </div>
+            <h3>{{ t('workload.container.titles.image') }}</h3>
+            <div class="row mb-20">
+              <div class="col span-6">
+                <LabeledInput
+                  v-model.trim="container.image"
+                  :mode="mode"
+                  :label="t('workload.container.image')"
+                  :placeholder="t('generic.placeholder', {text: 'nginx:latest'}, true)"
+                  :rules="fvGetAndReportPathRules('image')"
+                />
+              </div>
+              <div class="col span-6">
+                <LabeledSelect
+                  v-model="container.imagePullPolicy"
+                  :label="t('workload.container.imagePullPolicy')"
+                  :options="pullPolicyOptions"
+                  :mode="mode"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col span-6">
+                <LabeledSelect
+                  v-model="imagePullSecrets"
+                  :label="t('workload.container.imagePullSecrets')"
+                  :multiple="true"
+                  :taggable="true"
+                  :options="namespacedSecrets"
+                  :mode="mode"
+                  option-label="metadata.name"
+                  :reduce="service=>service.metadata.name"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="spacer"></div>
+          <div>
+            <h3>{{ t('workload.container.titles.ports') }}</h3>
+            <div class="row">
+              <WorkloadPorts v-model="container.ports" :name="value.metadata.name" :services="servicesOwned" :mode="mode" />
+            </div>
+          </div>
+
+          <div class="spacer"></div>
+          <div>
+            <h3>{{ t('workload.container.titles.command') }}</h3>
+            <Command v-model="container" :secrets="namespacedSecrets" :config-maps="namespacedConfigMaps" :mode="mode" />
+          </div>
+          <ServiceNameSelect
+            :value="podTemplateSpec.serviceAccountName"
+            :mode="mode"
+            :select-label="t('workload.serviceAccountName.label')"
+            :select-placeholder="t('workload.serviceAccountName.label')"
+            :options="namespacedServiceNames"
+            option-label="metadata.name"
+            @input="updateServiceAccount"
+          />
+
+          <div class="spacer"></div>
+          <div>
+            <h3>{{ t('workload.container.titles.lifecycle') }}</h3>
+            <LifecycleHooks v-model="container.lifecycle" :mode="mode" />
+          </div>
+        </Tab>
+        <Tab :label="t('workload.storage.title')" name="storage" :weight="tabWeightMap['storage']">
+          <Storage
+            v-model="podTemplateSpec"
+            :namespace="value.metadata.namespace"
+            :register-before-hook="registerBeforeHook"
+            :mode="mode"
+            :secrets="namespacedSecrets"
+            :config-maps="namespacedConfigMaps"
+            :container="container"
+            :save-pvc-hook-name="savePvcHookName"
+            @removePvcForm="clearPvcFormState"
+          />
+        </Tab>
+        <Tab :label="t('workload.container.titles.resources')" name="resources" :weight="tabWeightMap['resources']">
+          <h3 class="mb-10">
+            <t k="workload.scheduling.titles.limits" />
+          </h3>
+          <ContainerResourceLimit v-model="flatResources" :mode="mode" :show-tip="false" />
+          <template>
+            <div class="spacer"></div>
+            <div>
+              <h3 class="mb-10">
+                <t k="workload.scheduling.titles.tolerations" />
+              </h3>
+              <div class="row">
+                <Tolerations v-model="podTemplateSpec.tolerations" :mode="mode" />
+              </div>
+            </div>
+
+            <div>
+              <div class="spacer"></div>
+              <h3 class="mb-10">
+                <t k="workload.scheduling.titles.priority" />
+              </h3>
+              <div class="row">
+                <div class="col span-6">
+                  <LabeledInput v-model.number="podTemplateSpec.priority" :mode="mode" :label="t('workload.scheduling.priority.priority')" />
+                </div>
+                <div class="col span-6">
+                  <LabeledInput v-model="podTemplateSpec.priorityClassname" :mode="mode" :label="t('workload.scheduling.priority.className')" />
+                </div>
+              </div>
+            </div>
+          </template>
+        </Tab>
+        <Tab :label="t('workload.container.titles.podScheduling')" name="podScheduling" :weight="tabWeightMap['podScheduling']">
+          <PodAffinity :mode="mode" :value="podTemplateSpec" :nodes="allNodeObjects" />
+        </Tab>
+        <Tab :label="t('workload.container.titles.nodeScheduling')" name="nodeScheduling" :weight="tabWeightMap['nodeScheduling']">
+          <NodeScheduling :mode="mode" :value="podTemplateSpec" :nodes="allNodes" />
+        </Tab>
+        <Tab :label="t('workload.container.titles.upgrading')" name="upgrading" :weight="tabWeightMap['upgrading']">
+          <Job v-if="isJob || isCronJob" v-model="spec" :mode="mode" :type="type" />
+          <Upgrading v-else v-model="spec" :mode="mode" :type="type" />
+        </Tab>
+        <Tab v-if="!isInitContainer" :label="t('workload.container.titles.healthCheck')" name="healthCheck" :weight="tabWeightMap['healthCheck']">
+          <HealthCheck v-model="healthCheck" :mode="mode" />
+        </Tab>
+        <Tab :label="t('workload.container.titles.securityContext')" name="securityContext" :weight="tabWeightMap['securityContext']">
+          <Security v-model="container.securityContext" :mode="mode" />
+          <div class="spacer"></div>
+          <div>
+            <h3>{{ t('workload.container.security.podFsGroup') }}</h3>
+            <div class="row">
+              <div class="col span-6">
+                <LabeledInput v-model.number="podFsGroup" type="number" :mode="mode" :label="t('workload.container.security.fsGroup')" />
+              </div>
+            </div>
+          </div>
+        </Tab>
+        <Tab :label="t('workload.container.titles.networking')" name="networking" :weight="tabWeightMap['networking']">
+          <Networking v-model="podTemplateSpec" :mode="mode" />
+        </Tab>
+        <Tab v-if="isStatefulSet" :label="t('workload.container.titles.volumeClaimTemplates')" name="volumeClaimTemplates" :weight="tabWeightMap['volumeClaimTemplates']">
+          <VolumeClaimTemplate v-model="spec" :mode="mode" />
+        </Tab>
+        <Tab name="labels" label-key="generic.labelsAndAnnotations" :weight="tabWeightMap['labels']">
+          <Labels v-model="value" :mode="mode" />
+          <div class="spacer"></div>
+          <div>
+            <h3>{{ t('workload.container.titles.podLabels') }}</h3>
+            <div class="row mb-20">
+              <KeyValue
+                key="labels"
+                v-model="podLabels"
+                :add-label="t('labels.addLabel')"
+                :mode="mode"
+                :read-allowed="false"
+                :protip="false"
+              />
+            </div>
+            <div class="spacer"></div>
+            <h3>{{ t('workload.container.titles.podAnnotations') }}</h3>
+            <div class="row">
+              <KeyValue
+                key="annotations"
+                v-model="podAnnotations"
+                :add-label="t('labels.addAnnotation')"
+                :mode="mode"
+                :read-allowed="false"
+                :protip="false"
+              />
+            </div>
+          </div>
+        </Tab>
+      </Tabbed>
+    </CruResource>
+  </form>
+</template>
+
+<style lang='scss'>
+.container-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.type-placeholder {
+  color: white;
+  font-size: 2.5em;
+  height: 100%;
+  width: 100%;
+  background-color: var(--primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.type-description {
+  color: var(--input-label);
+}
+
+.next-dropdown {
+  display: inline-block;
+}
+</style>

package/layouts/default.vue

@@ -13,6 +13,8 @@ import Group from '@shell/components/nav/Group';
 import Header from '@shell/components/nav/Header';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
+import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
+import AzureWarning from '@shell/components/auth/AzureWarning';
 import {
   COUNT, SCHEMA, MANAGEMENT, UI, CATALOG, HCI
 } from '@shell/config/types';
@@ -26,6 +28,7 @@ import { ucFirst } from '@shell/utils/string';
 import { getVersionInfo, markSeenReleaseNotes } from '@shell/utils/version';
 import { sortBy } from '@shell/utils/sort';
 import PageHeaderActions from '@shell/mixins/page-actions';
+import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -41,16 +44,18 @@ export default {
     Group,
     GrowlManager,
     WindowManager,
-    FixedBanner
+    FixedBanner,
+    AwsComplianceBanner,
+    AzureWarning
   },
 
-  mixins: [PageHeaderActions, Brand],
+  mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
 
   data() {
     return {
       groups:         [],
       gettingGroups:  false,
-      wantNavSync:    false
+      wantNavSync:    false,
     };
   },
 
@@ -65,7 +70,7 @@ export default {
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
 
     namespaces() {
-      return this.$store.getters['namespaces']();
+      return this.$store.getters['activeNamespaceCache'];
     },
 
     dev:            mapPref(DEV),
@@ -167,6 +172,10 @@ export default {
       return { name: `c-cluster-${ product }-support` };
     },
 
+    unmatchedRoute() {
+      return !this.$route?.matched?.length;
+    }
+
   },
 
   watch: {
@@ -322,7 +331,9 @@ export default {
       let namespaces = null;
 
       if ( !this.$store.getters['isAllNamespaces'] ) {
-        namespaces = Object.keys(this.namespaces);
+        const namespacesObject = this.$store.getters['namespaces']();
+
+        namespaces = Object.keys(namespacesObject);
       }
 
       // Always show cluster-level types, regardless of the namespace filter
@@ -531,7 +542,8 @@ export default {
 <template>
   <div class="dashboard-root">
     <FixedBanner :header="true" />
-
+    <AwsComplianceBanner v-if="managementReady" />
+    <AzureWarning v-if="managementReady" />
     <div v-if="managementReady" class="dashboard-content">
       <Header />
       <nav v-if="clusterReady" class="side-nav">
@@ -577,7 +589,10 @@ export default {
               placement="top"
               trigger="click"
             >
-              <a class="locale-chooser">
+              <a
+                data-testid="locale-selector"
+                class="locale-chooser"
+              >
                 {{ locale }}
               </a>
 
@@ -612,6 +627,10 @@ export default {
         <button v-shortkey.once="['f8']" class="hide" @shortkey="wheresMyDebugger()" />
         <button v-shortkey.once="['`']" class="hide" @shortkey="toggleShell" />
       </main>
+      <!-- Ensure there's an outlet to show the error (404) page -->
+      <main v-else-if="unmatchedRoute">
+        <nuxt class="outlet" />
+      </main>
       <div class="wm">
         <WindowManager />
       </div>

package/layouts/error.vue

@@ -2,9 +2,10 @@
 import Brand from '@shell/mixins/brand';
 
 export default {
-  name:   'NuxtError',
+  name:       'NuxtError',
   mixins:     [Brand],
-  props:  {
+  middleware: ['unauthenticated'],
+  props:      {
     error: {
       type:    Object,
       default: null

package/layouts/home.vue

@@ -4,14 +4,21 @@ import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
 import { mapPref, DEV } from '@shell/store/prefs';
+import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
+import AzureWarning from '@shell/components/auth/AzureWarning';
+import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 
 export default {
 
   components: {
-    Header, FixedBanner, GrowlManager
+    Header,
+    FixedBanner,
+    GrowlManager,
+    AzureWarning,
+    AwsComplianceBanner
   },
 
-  mixins: [Brand],
+  mixins: [Brand, BrowserTabVisibility],
 
   middleware: ['authenticated'],
 
@@ -36,6 +43,9 @@ export default {
 <template>
   <div class="dashboard-root">
     <FixedBanner :header="true" />
+    <AwsComplianceBanner />
+    <AzureWarning />
+
     <div class="dashboard-content">
       <Header :simple="true" />
 

package/layouts/plain.vue

@@ -1,4 +1,5 @@
 <script>
+import { mapPref, DEV } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import Header from '@shell/components/nav/Header';
 import PromptRemove from '@shell/components/PromptRemove';
@@ -7,6 +8,9 @@ import IndentedPanel from '@shell/components/IndentedPanel';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
+import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
+import AzureWarning from '@shell/components/auth/AzureWarning';
+import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 
 export default {
 
@@ -17,12 +21,14 @@ export default {
     IndentedPanel,
     PromptRemove,
     FixedBanner,
-    GrowlManager
+    GrowlManager,
+    AwsComplianceBanner,
+    AzureWarning
   },
 
   middleware: ['authenticated'],
 
-  mixins: [Brand],
+  mixins: [Brand, BrowserTabVisibility],
 
   data() {
     return {
@@ -31,12 +37,21 @@ export default {
     };
   },
 
+  computed: { dev: mapPref(DEV) },
+
+  methods: {
+    toggleTheme() {
+      this.$store.dispatch('prefs/toggleTheme');
+    }
+  }
 };
 </script>
 
 <template>
   <div class="dashboard-root">
     <FixedBanner :header="true" />
+    <AwsComplianceBanner />
+    <AzureWarning />
 
     <div class="dashboard-content">
       <Header :simple="true" />
@@ -47,6 +62,7 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <AssignTo />
+        <button v-if="dev" v-shortkey.once="['shift','t']" class="hide" @shortkey="toggleTheme()" />
       </main>
     </div>
 

package/layouts/unauthenticated.vue

@@ -4,7 +4,8 @@ import FixedBanner from '@shell/components/FixedBanner';
 
 export default {
   mixins:     [Brand],
-  components: { FixedBanner }
+  components: { FixedBanner },
+  middleware: ['unauthenticated'],
 };
 </script>
 

package/list/catalog.cattle.io.clusterrepo.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { HIDE_DESC, mapPref } from '@shell/store/prefs';
 import { addObject } from '@shell/utils/array';
 

package/list/fleet.cattle.io.bundle.vue

@@ -1,6 +1,6 @@
 <script>
 import { FLEET } from '@shell/config/types';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import {

package/list/fleet.cattle.io.cluster.vue

@@ -3,7 +3,7 @@ import FleetClusters from '@shell/components/fleet/FleetClusters';
 import { FLEET, MANAGEMENT } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
 import { isHarvesterCluster } from '@shell/utils/cluster';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 
 export default {
   name:       'ListCluster',

package/list/fleet.cattle.io.clusterregistrationtoken.vue

@@ -1,6 +1,6 @@
 <script>
 import { FLEET } from '@shell/config/types';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import { isHarvesterCluster } from '@shell/utils/cluster';

package/list/harvesterhci.io.dashboard/HarvesterUpgrade.vue

@@ -4,13 +4,14 @@ import { HCI } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import ModalWithCard from '@shell/components/ModalWithCard';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
+import UpgradeInfo from './UpgradeInfo';
 
 export default {
   name: 'HarvesterUpgrade',
 
   components: {
-    ModalWithCard, LabeledSelect, Banner
+    ModalWithCard, LabeledSelect, Banner, UpgradeInfo
   },
 
   async fetch() {
@@ -121,19 +122,19 @@ export default {
       </button>
     </header>
 
-    <ModalWithCard ref="deleteTip" name="deleteTip" :width="500">
+    <ModalWithCard ref="deleteTip" name="deleteTip" :width="850">
       <template #title>
         <t k="harvester.upgradePage.upgradeApp" />
       </template>
 
       <template #content>
-        <div class="currentVersion">
+        <UpgradeInfo :version="version" />
+
+        <div class="currentVersion mb-15">
           <span> <t k="harvester.upgradePage.currentVersion" /> </span>
           <span class="version">{{ currentVersion }}</span>
         </div>
 
-        <p class="bordered-section"></p>
-
         <div v-if="selectMode">
           <LabeledSelect
             v-model="version"
@@ -151,10 +152,10 @@ export default {
 
       <template #footer>
         <div class="footer">
-          <button class="btn role-secondary btn-sm mr-20" @click.prevent="cancel">
+          <button class="btn role-secondary mr-20" @click.prevent="cancel">
             <t k="generic.close" />
           </button>
-          <button class="btn role-tertiary bg-primary btn-sm mr-20" @click.prevent="handleUpgrade">
+          <button class="btn role-tertiary bg-primary" @click.prevent="handleUpgrade">
             <t k="harvester.upgradePage.upgrade" />
           </button>
         </div>

package/list/harvesterhci.io.dashboard/UpgradeInfo.vue

@@ -0,0 +1,40 @@
+<script>
+import { Banner } from '@components/Banner';
+
+export default {
+  name: 'HarvesterUpgradeInfo',
+
+  components: { Banner },
+
+  props: {
+    version: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  computed: {
+    releaseVersion() {
+      return !!this.version ? `https://github.com/harvester/harvester/releases/tag/${ this.version }` : `https://github.com/harvester/harvester/releases`;
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Banner color="warning">
+      <strong>{{ t('harvester.upgradePage.upgradeInfo.warning') }}:</strong>
+      <p class="mb-5" v-html="t('harvester.upgradePage.upgradeInfo.doc', {}, true)">
+      </p>
+
+      <p class="mb-5">
+        {{ t('harvester.upgradePage.upgradeInfo.tip') }}
+      </p>
+
+      <p class="mb-5">
+        {{ t('harvester.upgradePage.upgradeInfo.moreNotes') }} <a :href="releaseVersion" target="_blank">{{ t('generic.moreInfo') }} </a>
+      </p>
+    </Banner>
+  </div>
+</template>