@rancher/shell 2.0.0 → 3.0.0-rc.1

package/detail/provisioning.cattle.io.cluster.vue

@@ -194,7 +194,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if ( this.logSocket ) {
       this.logSocket.disconnect();
       this.logSocket = null;
@@ -512,14 +512,14 @@ export default {
         return false;
       }
 
-      if ( this.value.isImported ) {
-        return !this.value.mgmt?.isReady && this.extDetailTabs.registration;
-      }
-
       if ( this.value.isCustom ) {
         return this.extDetailTabs.registration;
       }
 
+      if ( this.value.isImported ) {
+        return !this.value.mgmt?.isReady && this.extDetailTabs.registration;
+      }
+
       // Hosted kubernetes providers with private endpoints need the registration tab
       // https://github.com/rancher/dashboard/issues/6036
       // https://github.com/rancher/dashboard/issues/4545
@@ -737,13 +737,14 @@ export default {
       :label="$fetchState.error"
     />
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :default-tab="defaultTab"
       :need-related="hasLocalAccess"
       :extension-params="extCustomParams"
       :needRelated="extDetailTabsRelated"
       :needEvents="extDetailTabsEvents"
       :needConditions="extDetailTabsConditions"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         v-if="showMachines"
@@ -942,16 +943,14 @@ export default {
           <tbody class="logs-body">
             <template v-if="logs.length">
               <tr
-                v-for="line in logs"
-                :key="line.id"
+                v-for="(line, i) in logs"
+                :key="i"
               >
                 <td
-                  :key="line.id + '-time'"
                   v-clean-html="format(line.time)"
                   class="time"
                 />
                 <td
-                  :key="line.id + '-msg'"
                   v-clean-html="line.msg"
                   class="msg"
                 />
@@ -1112,7 +1111,7 @@ export default {
   }
 }
 
-.snapshots ::v-deep .state-description{
+.snapshots :deep() .state-description{
   font-size: .8em;
   color: var(--error);
 }

package/detail/secret.vue

@@ -87,7 +87,7 @@ export default {
     }
 
     if (!this.value._type) {
-      this.$set(this.value, '_type', TYPES.OPAQUE);
+      this.value['_type'] = TYPES.OPAQUE;
     }
 
     return {
@@ -158,8 +158,9 @@ export default {
 
 <template>
   <ResourceTabs
-    v-model="value"
+    :value="value"
     :mode="mode"
+    @update:value="$emit('input', $event)"
   >
     <Tab
       name="data"

package/detail/service.vue

@@ -143,8 +143,9 @@ export default {
 
 <template>
   <ResourceTabs
-    v-model="value"
+    :value="value"
     :mode="mode"
+    @input="$emit('input', $event)"
   >
     <Tab
       name="pods"

package/detail/workload/index.vue

@@ -2,7 +2,7 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { NAMESPACE as NAMESPACE_COL } from '@shell/config/table-headers';
 import {
-  POD, WORKLOAD_TYPES, SCALABLE_WORKLOAD_TYPES, SERVICE, INGRESS, NODE, NAMESPACE,
+  POD, WORKLOAD_TYPES, SCALABLE_WORKLOAD_TYPES, SERVICE, INGRESS, NODE, NAMESPACE, WORKLOAD_TYPE_TO_KIND_MAPPING, METRICS_SUPPORTED_KINDS
 } from '@shell/config/types';
 import ResourceTable from '@shell/components/ResourceTable';
 import Tab from '@shell/components/Tabbed/Tab';
@@ -21,24 +21,6 @@ const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);
 const WORKLOAD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-workload-pods-1/rancher-workload-pods?orgId=1';
 const WORKLOAD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-workload-1/rancher-workload?orgId=1';
 
-export const WORKLOAD_TYPE_TO_KIND_MAPPING = {
-  // Each deployment creates a replicaset and the metrics are published for a replicaset.
-  [WORKLOAD_TYPES.DEPLOYMENT]:             'ReplicaSet',
-  [WORKLOAD_TYPES.CRON_JOB]:               'CronJob',
-  [WORKLOAD_TYPES.DAEMON_SET]:             'DaemonSet',
-  [WORKLOAD_TYPES.JOB]:                    'Job',
-  [WORKLOAD_TYPES.STATEFUL_SET]:           'StatefulSet',
-  [WORKLOAD_TYPES.REPLICA_SET]:            'ReplicaSet',
-  [WORKLOAD_TYPES.REPLICATION_CONTROLLER]: 'ReplicationController',
-};
-
-const METRICS_SUPPORTED_KINDS = [
-  WORKLOAD_TYPES.DAEMON_SET,
-  WORKLOAD_TYPES.REPLICA_SET,
-  WORKLOAD_TYPES.STATEFUL_SET,
-  WORKLOAD_TYPES.DEPLOYMENT
-];
-
 export default {
   components: {
     DashboardMetrics,

package/dialog/AddClusterMemberDialog.vue

@@ -37,40 +37,39 @@ export default {
     class="prompt-rotate"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      v-clean-html="t('addClusterMemberDialog.title')"
-      class="text-default-text"
-    />
-
-    <div
-      slot="body"
-      class="pl-10 pr-10"
-    >
-      <ClusterPermissionsEditor
-        v-model="bindings"
-        :use-two-columns-for-custom="true"
+    <template #title>
+      <h4
+        v-clean-html="t('addClusterMemberDialog.title')"
+        class="text-default-text"
       />
-    </div>
+    </template>
+
+    <template #body>
+      <div class="pl-10 pr-10">
+        <ClusterPermissionsEditor
+          v-model:value="bindings"
+          :use-two-columns-for-custom="true"
+        />
+      </div>
+    </template>
 
-    <div
-      slot="actions"
-      class="buttons"
-    >
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
-      >
-        {{ t('generic.cancel') }}
-      </button>
+    <template #actions>
+      <div class="buttons">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
 
-      <button
-        class="btn role-primary"
-        @click="apply"
-      >
-        {{ t('generic.add') }}
-      </button>
-    </div>
+        <button
+          class="btn role-primary"
+          @click="apply"
+        >
+          {{ t('generic.add') }}
+        </button>
+      </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>

package/dialog/AddCustomBadgeDialog.vue

@@ -183,9 +183,9 @@ export default {
           delete norman.annotations[CLUSTER_BADGE.ICON_TEXT];
           delete norman.annotations[CLUSTER_BADGE.TEXT];
 
-          this.$set(norman.annotations, CLUSTER_BADGE.COLOR, this.badgeColorPicker ? this.badgeBgColor : 'transparent');
-          this.$set(norman.annotations, CLUSTER_BADGE.ICON_TEXT, this.letter.toUpperCase());
-          this.$set(norman.annotations, CLUSTER_BADGE.TEXT, this.badgeComment);
+          norman.annotations[CLUSTER_BADGE.COLOR] = this.badgeColorPicker ? this.badgeBgColor : 'transparent';
+          norman.annotations[CLUSTER_BADGE.ICON_TEXT] = this.letter.toUpperCase();
+          norman.annotations[CLUSTER_BADGE.TEXT] = this.badgeComment;
 
           await norman.save();
 
@@ -212,120 +212,117 @@ export default {
     class="prompt-badge"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      {{ t('clusterBadge.modal.title') }}
-    </h4>
-
-    <div
-      slot="body"
-      class="cluster-badge-body"
-    >
-      <div>{{ t('clusterBadge.modal.previewTitle') }}</div>
-      <div class="badge-preview">
-        <div class="badge-preview-sidenav">
-          <p> {{ t('clusterBadge.modal.previewSide') }}</p>
-
-          <div>
-            <ClusterIconMenu :cluster="previewCluster" />
-            <span>{{ clusterName }}</span>
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('clusterBadge.modal.title') }}
+      </h4>
+    </template>
+
+    <template #body>
+      <div class="cluster-badge-body">
+        <div>{{ t('clusterBadge.modal.previewTitle') }}</div>
+        <div class="badge-preview">
+          <div class="badge-preview-sidenav">
+            <p> {{ t('clusterBadge.modal.previewSide') }}</p>
+
+            <div>
+              <ClusterIconMenu :cluster="previewCluster" />
+              <span>{{ clusterName }}</span>
+            </div>
           </div>
-        </div>
-        <span class="badge-preview-separator" />
-        <div class="badge-preview-header">
-          <p> {{ t('clusterBadge.modal.previewHeader') }}</p>
-          <div
-            class="col span-12"
-          >
-            <ClusterProviderIcon
-              :cluster="{...previewCluster, badge: displayClusterPrevIcon}"
-            />
-            <div class="cluster-name">
-              {{ previewName }}
+          <span class="badge-preview-separator" />
+          <div class="badge-preview-header">
+            <p> {{ t('clusterBadge.modal.previewHeader') }}</p>
+            <div
+              class="col span-12"
+            >
+              <ClusterProviderIcon
+                :cluster="{...previewCluster, badge: displayClusterPrevIcon}"
+              />
+              <div class="cluster-name">
+                {{ previewName }}
+              </div>
+              <ClusterBadge
+                v-if="useCustomComment"
+                :cluster="previewCluster"
+              />
             </div>
-            <ClusterBadge
-              v-if="useCustomComment"
-              :cluster="previewCluster"
-            />
           </div>
         </div>
-      </div>
 
-      <div class="badge-customisation">
-        <!-- Badge abbreviation toggle & customisation -->
-        <div class="badge-customisation-badge">
-          <Checkbox
-            v-model="badgeAsIcon"
-            :label="t('clusterBadge.modal.badgeAsIcon')"
+        <div class="badge-customisation">
+          <!-- Badge abbreviation toggle & customisation -->
+          <div class="badge-customisation-badge">
+            <Checkbox
+              v-model:value="badgeAsIcon"
+              :label="t('clusterBadge.modal.badgeAsIcon')"
 
-            :tooltip="t('clusterBadge.modal.maxCharsTooltip')"
-          />
+              :tooltip="t('clusterBadge.modal.maxCharsTooltip')"
+            />
 
-          <LabeledInput
-            v-model.trim="letter"
-            :disabled="!badgeAsIcon"
-            class="badge-icon-text"
-            :label="t('clusterBadge.modal.iconText')"
-            :maxlength="3"
-          />
-        </div>
+            <LabeledInput
+              v-model:value.trim="letter"
+              :disabled="!badgeAsIcon"
+              class="badge-icon-text"
+              :label="t('clusterBadge.modal.iconText')"
+              :maxlength="3"
+            />
+          </div>
 
-        <!-- Comment toggle & customisation section -->
-        <div>
-          <Checkbox
-            v-model="useCustomComment"
-            :label="t('clusterBadge.modal.checkbox')"
-          />
+          <!-- Comment toggle & customisation section -->
+          <div>
+            <Checkbox
+              v-model:value="useCustomComment"
+              :label="t('clusterBadge.modal.checkbox')"
+            />
 
-          <LabeledInput
-            v-model.trim="badgeComment"
-            :disabled="!useCustomComment"
-            :label="t('clusterBadge.modal.comment')"
-            :maxlength="32"
-          />
-        </div>
+            <LabeledInput
+              v-model:value.trim="badgeComment"
+              :disabled="!useCustomComment"
+              :label="t('clusterBadge.modal.comment')"
+              :maxlength="32"
+            />
+          </div>
 
-        <!-- Color toggle & customisation section -->
-        <div class="badge-customisation-color">
-          <Checkbox
-            v-model="badgeColorPicker"
-            :label="t('clusterBadge.modal.badgeBgColor')"
-          />
-          <ColorInput
-            v-model="badgeBgColor"
-            :disabled="!badgeColorPicker"
-            :default-value="badgeBgColor"
-          />
+          <!-- Color toggle & customisation section -->
+          <div class="badge-customisation-color">
+            <Checkbox
+              v-model:value="badgeColorPicker"
+              :label="t('clusterBadge.modal.badgeBgColor')"
+            />
+            <ColorInput
+              v-model:value="badgeBgColor"
+              :disabled="!badgeColorPicker"
+              :default-value="badgeBgColor"
+            />
+          </div>
         </div>
       </div>
-    </div>
-
-    <div
-      slot="actions"
-      class="bottom"
-    >
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :label="err"
-      />
-      <div class="buttons">
-        <button
-          class="btn role-secondary mr-10"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          :action-label="t('clusterBadge.modal.buttonAction')"
-          :disabled="!canSubmit"
-          @click="apply"
+    </template>
+
+    <template #actions>
+      <div class="bottom">
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
         />
+        <div class="buttons">
+          <button
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            :action-label="t('clusterBadge.modal.buttonAction')"
+            :disabled="!canSubmit"
+            @click="apply"
+          />
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>
@@ -414,7 +411,7 @@ export default {
       padding: 2px 10px;
     }
 
-    ::v-deep .badge-icon-text input {
+    :deep() .badge-icon-text input {
       text-transform: uppercase;
     }
   }

package/dialog/AddProjectMemberDialog.vue

@@ -112,53 +112,52 @@ export default {
     :show-highlight-border="false"
     :sticky="true"
   >
-    <h4
-      slot="title"
-      v-clean-html="t('addProjectMemberDialog.title')"
-      class="text-default-text"
-    />
-
-    <div
-      slot="body"
-      class="pl-10 pr-10"
-    >
-      <Banner
-        v-if="error"
-        color="error"
-      >
-        {{ error }}
-      </Banner>
-      <ProjectMemberEditor
-        v-model="member"
-        :use-two-columns-for-custom="true"
+    <template #title>
+      <h4
+        v-clean-html="t('addProjectMemberDialog.title')"
+        class="text-default-text"
       />
-    </div>
-
-    <div
-      slot="actions"
-      class="buttons"
-    >
-      <button
-        class="btn role-secondary mr-10"
-        @click="close"
-      >
-        {{ t('generic.cancel') }}
-      </button>
-
-      <AsyncButton
-        v-if="saveInModal"
-        mode="create"
-        @click="cb=>saveBindings(cb)"
-      />
-
-      <button
-        v-else
-        class="btn role-primary"
-        @click="apply"
-      >
-        {{ t('generic.add') }}
-      </button>
-    </div>
+    </template>
+
+    <template #body>
+      <div class="pl-10 pr-10">
+        <Banner
+          v-if="error"
+          color="error"
+        >
+          {{ error }}
+        </Banner>
+        <ProjectMemberEditor
+          v-model:value="member"
+          :use-two-columns-for-custom="true"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <div class="buttons">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          v-if="saveInModal"
+          mode="create"
+          @click="cb=>saveBindings(cb)"
+        />
+
+        <button
+          v-else
+          class="btn role-primary"
+          @click="apply"
+        >
+          {{ t('generic.add') }}
+        </button>
+      </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>

package/dialog/AddonConfigConfirmationDialog.vue

@@ -49,37 +49,35 @@ export default {
     class="prompt-restore"
     :show-highlight-border="false"
   >
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      {{ t('addonConfigConfirmation.title') }}
-    </h4>
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('addonConfigConfirmation.title') }}
+      </h4>
+    </template>
 
-    <template slot="body">
+    <template #body>
       <slot name="body">
         {{ t('addonConfigConfirmation.body') }}
       </slot>
     </template>
 
-    <div
-      slot="actions"
-      class="bottom"
-    >
-      <div class="buttons">
-        <button
-          type="button"
-          class="btn role-secondary mr-10"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          mode="continue"
-          @click="apply"
-        />
+    <template #actions>
+      <div class="bottom">
+        <div class="buttons">
+          <button
+            type="button"
+            class="btn role-secondary mr-10"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="continue"
+            @click="apply"
+          />
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 <style lang='scss' scoped>