@rancher/shell 3.0.5-rc.7 → 3.0.5-rc.8

package/detail/secret.vue

@@ -1,313 +1,54 @@
-<script>
-import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import { base64Decode } from '@shell/utils/crypto';
-import CreateEditView from '@shell/mixins/create-edit-view';
-import ResourceTabs from '@shell/components/form/ResourceTabs';
-import DetailText from '@shell/components/DetailText';
-import Tab from '@shell/components/Tabbed/Tab';
+<script setup lang="ts">
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import { MANAGEMENT, SECRET } from '@shell/config/types';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
+import SecretDataTab from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue';
+import KnownHostsTab from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/index.vue';
+import { useGetKnownHostsTabProps } from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/composables';
+import { useSecretDataTabDefaultProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import { useDefaultMastheadProps } from '@shell/components/Resource/Detail/Masthead/composable';
+
+const store = useStore();
+
+export interface Props {
+  value: any;
+}
+const props = defineProps<Props>();
+const schema = computed(() => store.getters['cluster/schemaFor'](SECRET));
+const secret = props.value;
+
+if (secret.isProjectScoped) {
+  store.dispatch('management/find', { id: secret.projectId, type: MANAGEMENT.PROJECT });
+}
+
+const defaultMastheadProps = useDefaultMastheadProps(secret);
+const knownHostsTabProps = useGetKnownHostsTabProps(secret);
+const secretDataTabProps = useSecretDataTabDefaultProps(secret);
 
-const types = [
-  TYPES.OPAQUE,
-  TYPES.DOCKER_JSON,
-  TYPES.TLS,
-  TYPES.SSH,
-  TYPES.BASIC,
-];
-const registryAddresses = [
-  'DockerHub', 'Quay.io', 'Artifactory', 'Custom'
-];
-
-export default {
-  emits: ['input'],
-
-  components: {
-    ResourceTabs,
-    DetailText,
-    Tab,
-  },
-
-  mixins: [CreateEditView],
-
-  props: {
-    value: {
-      type:    Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-
-  data() {
-    let username;
-    let password;
-    let registryUrl;
-    let registryProvider = 'Custom';
-    let key;
-    let crt;
-
-    if (this.value._type === TYPES.DOCKER_JSON) {
-      const json = base64Decode(this.value.data['.dockerconfigjson']);
-
-      const { auths } = JSON.parse(json);
-
-      registryUrl = Object.keys(auths)[0];
-
-      if (registryUrl === 'index.docker.io/v1/') {
-        registryProvider = 'DockerHub';
-      } else if (registryUrl === 'quay.io') {
-        registryProvider = 'Quay.io';
-      } else if (registryUrl.includes('artifactory')) {
-        registryProvider = 'Artifactory';
-      }
-
-      username = auths[registryUrl].username;
-      password = auths[registryUrl].password;
-    }
-
-    const data = this.value?.data || {};
-
-    if (this.value._type === TYPES.TLS) {
-      // do not show existing key when editing
-      key = this.mode === 'edit' ? '' : base64Decode(data['tls.key']);
-
-      crt = base64Decode(data['tls.crt']);
-    }
-
-    if (this.value._type === TYPES.SERVICE_ACCT) {
-      key = base64Decode(data['token']);
-      crt = base64Decode(data['ca.crt']);
-    }
-
-    if ( this.value._type === TYPES.BASIC ) {
-      username = base64Decode(data.username || '');
-      password = base64Decode(data.password || '');
-    }
-
-    if ( this.value._type === TYPES.SSH ) {
-      username = base64Decode(data['ssh-publickey'] || '');
-      password = base64Decode(data['ssh-privatekey'] || '');
-    }
-
-    if (!this.value._type) {
-      this.value['_type'] = TYPES.OPAQUE;
-    }
-
-    return {
-      types,
-      registryAddresses,
-      registryProvider,
-      username,
-      password,
-      registryUrl,
-      key,
-      crt,
-      relatedServices: [],
-    };
-  },
-
-  computed: {
-    isCertificate() {
-      return this.value._type === TYPES.TLS;
-    },
-
-    isSvcAcctToken() {
-      return this.value._type === TYPES.SERVICE_ACCT;
-    },
-
-    isRegistry() {
-      return this.value._type === TYPES.DOCKER_JSON;
-    },
-
-    isSsh() {
-      return this.value._type === TYPES.SSH;
-    },
-
-    showKnownHosts() {
-      return this.isSsh && this.value.supportsSshKnownHosts;
-    },
-
-    isBasicAuth() {
-      return this.value._type === TYPES.BASIC;
-    },
-
-    parsedRows() {
-      const rows = [];
-      const { data = {} } = this.value;
-
-      Object.keys(data).forEach((key) => {
-        const value = base64Decode(data[key]);
-
-        rows.push({
-          key,
-          value
-        });
-      });
-
-      return rows;
-    },
-
-    knownHosts() {
-      const { data = {} } = this.value;
-
-      return data.known_hosts ? base64Decode(data.known_hosts) : '';
-    },
-
-    dataLabel() {
-      switch (this.value._type) {
-      case TYPES.TLS:
-        return this.t('secret.certificate.certificate');
-      case TYPES.SSH:
-        return this.t('secret.ssh.keys');
-      case TYPES.BASIC:
-        return this.t('secret.authentication');
-      default:
-        return this.t('secret.data');
-      }
-    }
-  },
-};
 </script>
-
 <template>
-  <ResourceTabs
-    :value="value"
-    :mode="mode"
-    @update:value="$emit('input', $event)"
-  >
-    <Tab
-      name="data"
-      :label="dataLabel"
-    >
-      <template v-if="isRegistry || isBasicAuth">
-        <div
-          v-if="isRegistry"
-          class="row"
-        >
-          <div class="col span-12">
-            <DetailText
-              :value="registryUrl"
-              label-key="secret.registry.domainName"
-            />
-          </div>
-        </div>
-        <div class="row mt-20">
-          <div class="col span-6">
-            <DetailText
-              :value="username"
-              label-key="secret.registry.username"
-            />
-          </div>
-          <div class="col span-6">
-            <DetailText
-              :value="password"
-              label-key="secret.registry.password"
-              :conceal="true"
-            />
-          </div>
-        </div>
-      </template>
-
-      <div
-        v-else-if="isCertificate"
-        class="row"
-      >
-        <div class="col span-6">
-          <DetailText
-            :value="key"
-            label-key="secret.certificate.privateKey"
-            :conceal="true"
-          />
-        </div>
-        <div class="col span-6">
-          <DetailText
-            :value="crt"
-            label-key="secret.certificate.certificate"
-          />
-        </div>
-      </div>
-
-      <div
-        v-else-if="isSvcAcctToken"
-        class="row"
+  <DetailPage>
+    <template #top-area>
+      <Masthead v-bind="defaultMastheadProps" />
+    </template>
+    <template #bottom-area>
+      <ResourceTabs
+        :value="secret"
+        :schema="schema"
       >
-        <div class="col span-6">
-          <DetailText
-            :value="crt"
-            label-key="secret.serviceAcct.ca"
-          />
-        </div>
-        <div class="col span-6">
-          <DetailText
-            :value="key"
-            label-key="secret.serviceAcct.token"
-            :conceal="true"
-          />
-        </div>
-      </div>
-
-      <div
-        v-else-if="isSsh"
-        class="row"
-      >
-        <div class="col span-6">
-          <DetailText
-            :value="username"
-            label-key="secret.ssh.public"
-          />
-        </div>
-        <div class="col span-6">
-          <DetailText
-            :value="password"
-            label-key="secret.ssh.private"
-            :conceal="true"
-          />
-        </div>
-      </div>
-
-      <div v-else>
-        <div
-          v-for="(row,idx) in parsedRows"
-          :key="idx"
-          class="entry"
-        >
-          <DetailText
-            :value="row.value"
-            :label="row.key"
-            :conceal="true"
-          />
-        </div>
-        <div v-if="!parsedRows.length">
-          <div
-            v-t="'sortableTable.noRows'"
-            class="m-20 text-center"
-          />
-        </div>
-      </div>
-    </Tab>
-    <Tab
-      v-if="showKnownHosts"
-      name="known_hosts"
-      label-key="secret.ssh.knownHosts"
-    >
-      <div class="row">
-        <div class="col span-12">
-          <DetailText
-            :value="knownHosts"
-            label-key="secret.ssh.knownHosts"
-            :conceal="false"
-          />
-        </div>
-      </div>
-    </Tab>
-  </ResourceTabs>
+        <SecretDataTab
+          v-bind="secretDataTabProps"
+          :weight="1"
+        />
+        <KnownHostsTab
+          v-if="knownHostsTabProps"
+          v-bind="knownHostsTabProps"
+          :weight="0"
+        />
+      </ResourceTabs>
+    </template>
+  </DetailPage>
 </template>
-
-<style lang="scss" scoped>
-  .entry {
-    margin-top: 10px;
-
-    &:first-of-type {
-      margin-top: 0;
-    }
-  }
-</style>

package/detail/workload/index.vue

@@ -164,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() {
@@ -278,39 +280,50 @@ export default {
       // Find Ingresses that forward traffic to Services
       // that select this workload.
       const matchingIngresses = this.allIngresses.filter((ingress) => {
-        const rules = ingress.spec.rules;
+        try {
+          const rules = ingress.spec.rules;
+
+          if (!rules || !Array.isArray(rules)) return false;
 
-        if (rules) {
           for (let i = 0; i < rules.length; i++) {
-            const rule = rules[i];
+            const paths = rules[i]?.http?.paths;
 
-            const paths = rule.http.paths;
+            if (!paths || !Array.isArray(paths)) continue;
+            // For each Ingress, check if any Services that match
+            // this workload are also target backends for the Ingress.
+            for (let j = 0; j < paths.length; j++) {
+              const pathData = paths[j];
+              const targetServiceName = pathData?.backend?.service?.name;
 
-            if (paths) {
-              // For each Ingress, check if any Services that match
-              // this workload are also target backends for the Ingress.
-              for (let j = 0; j < paths.length; j++) {
-                const pathData = paths[j];
-                const targetServiceName = pathData.backend.service.name;
+              if (!targetServiceName) continue;
 
-                for (let k = 0; k < this.matchingServices.length; k++) {
-                  const service = this.matchingServices[k];
-                  const matchingServiceName = service.metadata?.name;
+              for (let k = 0; k < this.matchingServices.length; k++) {
+                const service = this.matchingServices[k];
+                const matchingServiceName = service?.metadata?.name;
 
-                  if (ingress.metadata?.namespace === this.value.metadata?.namespace && matchingServiceName === targetServiceName) {
-                    return true;
-                  }
+                if (ingress.metadata?.namespace === this.value.metadata?.namespace && matchingServiceName === targetServiceName) {
+                  return true;
                 }
               }
             }
           }
+        } catch (err) {
+          return false;
         }
-
-        return false;
       });
 
       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>
@@ -376,6 +389,7 @@ export default {
           :headers="jobHeaders"
           key-field="id"
           :schema="jobSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
         />
@@ -391,6 +405,7 @@ export default {
           :headers="podHeaders"
           key-field="id"
           :schema="podSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
         />
@@ -457,6 +472,7 @@ export default {
           :headers="serviceHeaders"
           key-field="id"
           :schema="serviceSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
           :table-actions="false"
@@ -498,6 +514,7 @@ export default {
           :headers="ingressHeaders"
           key-field="id"
           :schema="ingressSchema"
+          :namespaced="false"
           :groupable="false"
           :search="false"
           :table-actions="false"

package/dialog/InstallExtensionDialog.vue

@@ -6,6 +6,7 @@ import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import Banner from '@components/Banner/Banner.vue';
 import { SETTING } from '@shell/config/settings';
+import { getPluginChartVersion, getPluginChartVersionLabel } from '@shell/utils/uiplugins';
 
 // Note: This dialog handles installation and update of a plugin
 
@@ -62,11 +63,13 @@ export default {
   },
 
   async fetch() {
+    const chartVersion = getPluginChartVersion(this.plugin);
+
     // Default to latest version on install (this is default on the plugin)
-    this.version = this.plugin?.displayVersion;
+    this.version = chartVersion;
 
     if (this.mode === 'update') {
-      this.currentVersion = this.plugin?.displayVersion;
+      this.currentVersion = chartVersion;
 
       // Update to latest version, so take the first version
       if (this.plugin?.installableVersions?.length > 0) {
@@ -74,9 +77,9 @@ export default {
       }
     } else if (this.mode === 'rollback') {
       // Find the newest version once we remove the current version
-      const versionNames = this.plugin?.installableVersions.filter((v) => v.version !== this.plugin?.displayVersion);
+      const versionNames = this.plugin.installableVersions.filter((v) => v.version !== chartVersion);
 
-      this.currentVersion = this.plugin?.displayVersion;
+      this.currentVersion = chartVersion;
 
       if (versionNames.length > 0) {
         this.version = versionNames[0].version;
@@ -131,7 +134,7 @@ export default {
 
       return versions.map((version) => {
         return {
-          label: version.version,
+          label: getPluginChartVersionLabel(version),
           value: version.version,
         };
       });