dashboard-shell-shell 1.0.10000011122 → 3.0.5-test.1

package/detail/workload/index.vue

@@ -47,16 +47,20 @@ export default {
     } catch {}
 
     const hash = {
-      // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
-      allPods:      this.$store.dispatch('cluster/findAll', { type: POD }),
-      // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
-      allServices:  this.$store.dispatch('cluster/findAll', { type: SERVICE }),
       allIngresses: this.$store.dispatch('cluster/findAll', { type: INGRESS }),
       // Nodes should be fetched because they may be referenced in the target
       // column of a service list item.
       allNodes:     hasNodes ? this.$store.dispatch('cluster/findAll', { type: NODE }) : []
     };
 
+    if (this.podSchema) {
+      hash.pods = this.value.fetchPods();
+    }
+
+    if (this.serviceSchema) {
+      hash.servicesInNamespace = this.$store.dispatch('cluster/findAll', { type: SERVICE, opt: { namespaced: this.value.metadata.namespace } });
+    }
+
     if (this.value.type === WORKLOAD_TYPES.CRON_JOB) {
       hash.jobs = this.value.matchingJobs();
     }
@@ -85,10 +89,15 @@ export default {
     this.findMatchingIngresses();
   },
 
+  async unmounted() {
+    if (this.podSchema) {
+      await this.value.unWatchPods();
+    }
+  },
+
   data() {
     return {
-      allPods:                         [],
-      allServices:                     [],
+      servicesInNamespace:             [],
       allIngresses:                    [],
       matchingServices:                [],
       matchingIngresses:               [],
@@ -155,13 +164,15 @@ export default {
     },
 
     jobHeaders() {
-      return this.$store.getters['type-map/headersFor'](this.jobSchema);
+      return this.$store.getters['type-map/headersFor'](this.jobSchema).filter((h) => !h.name || h.name !== NAMESPACE_COL.name);
     },
+
     ingressHeaders() {
-      return this.$store.getters['type-map/headersFor'](this.ingressSchema);
+      return this.$store.getters['type-map/headersFor'](this.ingressSchema).filter((h) => !h.name || h.name !== NAMESPACE_COL.name);
     },
+
     serviceHeaders() {
-      return this.$store.getters['type-map/headersFor'](this.serviceSchema);
+      return this.$store.getters['type-map/headersFor'](this.serviceSchema).filter((h) => !h.name || h.name !== NAMESPACE_COL.name);
     },
 
     totalRuns() {
@@ -180,22 +191,6 @@ export default {
       }, 0);
     },
 
-    podRestarts() {
-      return this.value.pods.reduce((total, pod) => {
-        const { status:{ containerStatuses = [] } } = pod;
-
-        if (containerStatuses.length) {
-          total += containerStatuses.reduce((tot, container) => {
-            tot += container.restartCount;
-
-            return tot;
-          }, 0);
-        }
-
-        return total;
-      }, 0);
-    },
-
     podHeaders() {
       return this.$store.getters['type-map/headersFor'](this.podSchema).filter((h) => !h.name || h.name !== NAMESPACE_COL.name);
     },
@@ -213,12 +208,16 @@ export default {
     },
 
     showPodGaugeCircles() {
-      const podGauges = Object.values(this.value.podGauges);
+      const podGauges = Object.values(this.podGauges);
       const total = this.value.pods.length;
 
       return !podGauges.find((pg) => pg.count === total);
     },
 
+    podGauges() {
+      return this.value.calcPodGauges(this.value.pods);
+    },
+
     showJobGaugeCircles() {
       const jobGauges = Object.values(this.value.jobGauges);
       const total = this.isCronJob ? this.totalRuns : this.value.pods.length;
@@ -230,6 +229,7 @@ export default {
       return !!SCALABLE_TYPES.includes(this.value.type) && this.value.canUpdate;
     },
   },
+
   methods: {
     async scale(isUp) {
       try {
@@ -256,15 +256,13 @@ export default {
       if (!this.serviceSchema) {
         return [];
       }
-      const matchingPods = this.value.pods;
 
-      // Find Services that have selectors that match this
-      // workload's Pod(s).
-      const matchingServices = this.allServices.filter((service) => {
+      // Find Services that have selectors that match this workload's Pod(s).
+      this.matchingServices = this.servicesInNamespace.filter((service) => {
         const selector = service.spec.selector;
 
-        for (let i = 0; i < matchingPods.length; i++) {
-          const pod = matchingPods[i];
+        for (let i = 0; i < this.value.pods.length; i++) {
+          const pod = this.value.pods[i];
 
           if (service.metadata?.namespace === this.value.metadata?.namespace && matches(pod, selector)) {
             return true;
@@ -273,8 +271,6 @@ export default {
 
         return false;
       });
-
-      this.matchingServices = matchingServices;
     },
     findMatchingIngresses() {
       if (!this.ingressSchema) {
@@ -317,6 +313,16 @@ export default {
 
       this.matchingIngresses = matchingIngresses;
     }
+  },
+
+  watch: {
+    async 'value.jobRelationships.length'(neu, old) {
+      // If there are MORE jobs ensure we go out and fetch them (changes and removals are tracked by watches)
+      if (neu > old) {
+        // We don't need to worry about spam, this won't be called often and it will be infrequent
+        await this.value.matchingJobs();
+      }
+    }
   }
 };
 </script>
@@ -358,7 +364,7 @@ export default {
       </template>
       <template v-else>
         <CountGauge
-          v-for="(group, key) in value.podGauges"
+          v-for="(group, key) in podGauges"
           :key="key"
           :total="value.pods.length"
           :useful="group.count || 0"
@@ -382,22 +388,23 @@ export default {
           :headers="jobHeaders"
           key-field="id"
           :schema="jobSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
         />
       </Tab>
       <Tab
-        v-else
+        v-else-if="value.podMatchExpression"
         name="pods"
         :label="t('tableHeaders.pods')"
         :weight="4"
       >
         <ResourceTable
-          v-if="value.pods"
           :rows="value.pods"
           :headers="podHeaders"
           key-field="id"
           :schema="podSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
         />
@@ -414,7 +421,7 @@ export default {
             :detail-url="WORKLOAD_METRICS_DETAIL_URL"
             :summary-url="WORKLOAD_METRICS_SUMMARY_URL"
             :vars="graphVars"
-            graph-height="550px"
+            graph-height="600px"
           />
         </template>
       </Tab>
@@ -430,7 +437,7 @@ export default {
             :detail-url="WORKLOAD_PROJECT_METRICS_DETAIL_URL"
             :summary-url="WORKLOAD_PROJECT_METRICS_SUMMARY_URL"
             :vars="graphVars"
-            graph-height="550px"
+            graph-height="600px"
           />
         </template>
       </Tab>
@@ -464,6 +471,7 @@ export default {
           :headers="serviceHeaders"
           key-field="id"
           :schema="serviceSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
           :table-actions="false"
@@ -505,6 +513,7 @@ export default {
           :headers="ingressHeaders"
           key-field="id"
           :schema="ingressSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
           :table-actions="false"

package/dialog/AddCustomBadgeDialog.vue

@@ -213,7 +213,6 @@ export default {
   <Card
     class="prompt-badge"
     :show-highlight-border="false"
-    :trigger-focus-trap="true"
   >
     <template #title>
       <h4 class="text-default-text">

package/{pages/c/_cluster/uiplugins/AddExtensionRepos.vue → dialog/AddExtensionReposDialog.vue}

@@ -1,22 +1,32 @@
 <script>
-import { CATALOG } from '@shell/config/types';
-import Dialog from '@shell/components/Dialog.vue';
+import AsyncButton from '@shell/components/AsyncButton';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { CATALOG } from '@shell/config/types';
 import { UI_PLUGINS_REPOS } from '@shell/config/uiplugins';
 import { isRancherPrime } from '@shell/config/version';
 
 export default {
-  emits: ['done'],
+  emits: ['close'],
+
+  components: { AsyncButton, Checkbox },
 
-  components: {
-    Checkbox,
-    Dialog,
+  props: {
+    /**
+     * Callback to update install status on extensions main screen
+     */
+    done: {
+      type:    Function,
+      default: () => {}
+    },
   },
 
   async fetch() {
     if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
       this.repos = await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true } });
     }
+
+    this.addRepos.official = isRancherPrime() && !this.hasRancherUIPluginsRepo;
+    this.addRepos.partners = !this.hasRancherUIPartnersPluginsRepo;
   },
 
   data() {
@@ -25,8 +35,8 @@ export default {
       repos:    [],
       prime:    isRancherPrime(),
       addRepos: {
-        official: true,
-        partners: true
+        official: false,
+        partners: false
       },
       reposInfo: {
         official: {
@@ -57,14 +67,6 @@ export default {
   },
 
   methods: {
-    showDialog() {
-      this.addRepos = {
-        official: isRancherPrime() && !this.hasRancherUIPluginsRepo,
-        partners: !this.hasRancherUIPartnersPluginsRepo,
-      };
-      this.isDialogActive = true;
-    },
-
     async doAddRepos(btnCb) {
       this.errors = [];
       const promises = [];
@@ -96,24 +98,20 @@ export default {
         });
       }
 
-      this.$emit('done');
+      this.done();
+      this.$emit('close');
 
       btnCb(true);
     },
   }
 };
 </script>
+
 <template>
-  <Dialog
-    v-if="isDialogActive"
-    name="add-extensions-repos"
-    :title="t('plugins.addRepos.title')"
-    mode="add"
-    data-testid="add-extensions-repos-modal"
-    :return-focus-selector="returnFocusSelector"
-    @okay="doAddRepos"
-    @closed="isDialogActive = false"
-  >
+  <div class="modal-dialog">
+    <h4>
+      {{ t('plugins.addRepos.title') }}
+    </h4>
     <p class="mb-20">
       {{ t('plugins.addRepos.prompt', {}, true) }}
     </p>
@@ -124,7 +122,7 @@ export default {
     >
       <Checkbox
         v-model:value="addRepos.official"
-        :disabled="hasRancherUIPluginsRepo"
+        :disabled="$fetchState.pending || hasRancherUIPluginsRepo"
         :primary="true"
         label-key="plugins.setup.install.addRancherRepo"
         data-testid="add-extensions-repos-modal-add-official-repo"
@@ -142,7 +140,7 @@ export default {
     >
       <Checkbox
         v-model:value="addRepos.partners"
-        :disabled="hasRancherUIPartnersPluginsRepo"
+        :disabled="$fetchState.pending || hasRancherUIPartnersPluginsRepo"
         :primary="true"
         label-key="plugins.setup.install.addPartnersRancherRepo"
         data-testid="add-extensions-repos-modal-add-partners-repo"
@@ -154,22 +152,54 @@ export default {
         ({{ t('plugins.setup.installed') }})
       </div>
     </div>
-  </Dialog>
+    <div class="dialog-buttons mt-20">
+      <button
+        class="btn role-secondary"
+        @click="$emit('close')"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <AsyncButton
+        mode="add"
+        class="ml-10"
+        @click="doAddRepos"
+      />
+    </div>
+  </div>
 </template>
+
 <style lang="scss" scoped>
-  .enable-plugin-support {
-    font-size: 14px;
-    margin-top: 20px;
-  }
+  .modal-dialog {
+    padding: 10px;
 
-  .plugin-setup-error {
-    font-size: 14px;
-    color: var(--error);
-    margin: 10px 0 0 0;
-  }
+    h4 {
+      font-weight: bold;
+    }
+
+    .enable-plugin-support {
+      font-size: 14px;
+      margin-top: 20px;
+    }
+
+    .plugin-setup-error {
+      font-size: 14px;
+      color: var(--error);
+      margin: 10px 0 0 0;
+    }
+
+    .checkbox-info {
+      margin-left: 20px;
+      opacity: 0.7;
+    }
 
-  .checkbox-info {
-    margin-left: 20px;
-    opacity: 0.7;
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
   }
 </style>

package/dialog/AddonConfigConfirmationDialog.vue

@@ -27,7 +27,7 @@ export default {
       if (this.resources[0]) {
         this.resources[0](value);
         delete this.resources[0];
-        this.$emit('close', value);
+        this.$emit('close');
       }
     },
 

package/dialog/AssignToDialog.vue

@@ -0,0 +1,176 @@
+<script>
+import { mapGetters } from 'vuex';
+import { FLEET, NORMAN } from '@shell/config/types';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import KeyValue from '@shell/components/form/KeyValue';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { set } from '@shell/utils/object';
+
+export default {
+  emits: ['close'],
+
+  components: {
+    Card,
+    LabeledSelect,
+    KeyValue,
+    AsyncButton,
+    Banner
+  },
+
+  props: {
+    toAssign: {
+      type:    Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      errors:        [],
+      labels:        {},
+      moveTo:        this.workspace,
+      loaded:        false,
+      allWorkspaces: []
+    };
+  },
+
+  async fetch() {
+    await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER });
+    this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
+    this.moveTo = this.workspace;
+    this.loaded = true;
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    ...mapGetters(['workspace']),
+
+    workspaceOptions() {
+      const out = this.allWorkspaces.map((x) => x.metadata?.name).filter((x) => !!x && x !== 'fleet-local');
+
+      return out;
+    },
+
+    resourceCount() {
+      return this.toAssign?.length || 0;
+    }
+  },
+
+  methods: {
+    close() {
+      this.errors = [];
+      this.labels = {};
+      this.moveTo = this.workspace;
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      const promises = [];
+
+      this.errors = [];
+
+      for ( const fleetCluster of this.toAssign ) {
+        const c = await this.$store.dispatch(`rancher/clone`, { resource: fleetCluster.norman });
+
+        if ( !c ) {
+          continue;
+        }
+
+        c.fleetWorkspaceName = this.moveTo;
+
+        for ( const k of Object.keys(this.labels) ) {
+          if ( !c._labels ) {
+            set(c, '_labels', {});
+          }
+
+          set(c._labels, k, this.labels[k]);
+        }
+
+        promises.push(c.save());
+      }
+
+      try {
+        await Promise.all(promises);
+        buttonDone(true);
+        this.close();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4
+        v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
+        class="text-default-text"
+      />
+    </template>
+    <template #body>
+      <div class="pl-10 pr-10">
+        <form>
+          <LabeledSelect
+            v-model:value="moveTo"
+            data-testid="workspace_options"
+            :label="t('assignTo.workspace')"
+            :options="workspaceOptions"
+            placement="bottom"
+          />
+
+          <KeyValue
+            key="labels"
+            v-model:value="labels"
+            class="mt-20"
+            :add-label="t('labels.addSetLabel')"
+            :read-allowed="false"
+          />
+
+          <Banner
+            v-for="(err, i) in errors"
+            :key="i"
+            color="error"
+            :label="err"
+          />
+        </form>
+      </div>
+    </template>
+
+    <template #actions>
+      <div class="actions-container">
+        <button
+          class="btn role-secondary"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          class="apply-btn"
+          mode="apply"
+          @click="apply"
+        />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang='scss'>
+  .actions-container {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+
+      .apply-btn {
+        margin-left: 20px;
+      }
+    }
+</style>

package/dialog/ChangePasswordDialog.vue

@@ -0,0 +1,106 @@
+<script>
+import { mapGetters } from 'vuex';
+import ChangePassword from '@shell/components/form/ChangePassword';
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  emits:      ['close'],
+  components: {
+    Card, AsyncButton, ChangePassword
+  },
+  data() {
+    return { valid: false, password: '' };
+  },
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  methods:  {
+    closeModal() {
+      this.$emit('close');
+    },
+    async submit(buttonCb) {
+      try {
+        await this.$refs.changePassword.save();
+        this.closeModal();
+        buttonCb(true);
+      } catch (err) {
+        buttonCb(false);
+      }
+    }
+  },
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-password"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t("changePassword.title") }}
+      </h4>
+    </template>
+
+    <template #body>
+      <form @submit.prevent>
+        <ChangePassword
+          ref="changePassword"
+          @valid="valid = $event"
+        />
+      </form>
+    </template>
+
+    <template #actions>
+      <!-- type reset is required by lastpass -->
+      <button
+        class="btn role-secondary"
+        role="button"
+        :aria-label="t('changePassword.cancel')"
+        type="reset"
+        @click="closeModal"
+      >
+        {{ t("changePassword.cancel") }}
+      </button>
+      <AsyncButton
+        type="submit"
+        mode="apply"
+        class="btn bg-error ml-10"
+        :disabled="!valid"
+        value="LOGIN"
+        @click="submit"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+  .prompt-password {
+    :deep() .card-wrap {
+      display: flex;
+      flex-direction: column;
+
+      .card-body {
+        flex: 1;
+        justify-content: start;
+        & > div {
+          flex: 1;
+          display: flex;
+        }
+      }
+
+      .card-actions {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+      }
+    }
+  }
+
+  .prompt-password {
+    flex: 1;
+    display: flex;
+    form {
+      flex: 1;
+    }
+  }
+</style>