@rancher/shell 0.1.2 → 0.1.3

package/pages/c/_cluster/_product/projectsnamespaces.vue

@@ -1,403 +1,6 @@
-<script>
-import ResourceTable from '@shell/components/ResourceTable';
-import { STATE, AGE, NAME } from '@shell/config/table-headers';
-import { uniq } from '@shell/utils/array';
-import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
-import { PROJECT_ID } from '@shell/config/query-params';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { mapPref, GROUP_RESOURCES, DEV } from '@shell/store/prefs';
-import MoveModal from '@shell/components/MoveModal';
-import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
-import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
-import { mapGetters } from 'vuex';
-
-export default {
-  name:       'ListNamespace',
-  components: {
-    Loading, Masthead, MoveModal, ResourceTable
-  },
-
-  props: {},
-
-  async fetch() {
-    const inStore = this.$store.getters['currentStore'](NAMESPACE);
-
-    this.schema = this.$store.getters[`${ inStore }/schemaFor`](NAMESPACE);
-    this.projectSchema = this.$store.getters[`management/schemaFor`](MANAGEMENT.PROJECT);
-
-    if ( !this.schema ) {
-      // clusterReady:   When switching routes, it will cause clusterReady to change, causing itself to repeat rendering。
-      // this.$store.dispatch('loadingError', `Type ${ NAMESPACE } not found`);
-
-      return;
-    }
-
-    this.namespaces = await this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE });
-    this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT, opt: { force: true } });
-  },
-
-  data() {
-    return {
-      schema:        null,
-      namespaces:    [],
-      projects:      [],
-      projectSchema: null,
-      MANAGEMENT,
-      VIRTUAL_TYPES
-    };
-  },
-
-  computed: {
-    ...mapGetters(['currentCluster']),
-
-    isNamespaceCreatable() {
-      return (this.schema?.collectionMethods || []).includes('POST');
-    },
-    headers() {
-      const project = {
-        name:          'project',
-        label:         'Project',
-        value:         'project.nameDisplay',
-        sort:          ['projectNameSort', 'nameSort'],
-      };
-
-      return [
-        STATE,
-        NAME,
-        this.groupPreference === 'none' ? project : null,
-        AGE
-      ].filter(h => h);
-    },
-    projectIdsWithNamespaces() {
-      const ids = this.rows
-        .map(row => row.projectId)
-        .filter(id => id);
-
-      return uniq(ids);
-    },
-    clusterProjects() {
-      const clusterId = this.$store.getters['currentCluster'].id;
-
-      // Get the list of projects from the store so that the list
-      // is updated if a new project is created or removed.
-      const projectsInAllClusters = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
-
-      const clustersInProjects = projectsInAllClusters.filter(project => project.spec.clusterName === clusterId);
-
-      return clustersInProjects;
-    },
-    projectsWithoutNamespaces() {
-      return this.activeProjects.filter((project) => {
-        return !this.projectIdsWithNamespaces.find(item => project?.id?.endsWith(`/${ item }`));
-      });
-    },
-    // We're using this because we need to show projects as groups even if the project doesn't have any namespaces.
-    rowsWithFakeNamespaces() {
-      const fakeRows = this.projectsWithoutNamespaces.map((project) => {
-        return {
-          groupByLabel:     `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
-          isFake:           true,
-          mainRowKey:       project.id,
-          nameDisplay:      project.spec?.displayName, // Enable filtering by the project name
-          project,
-          availableActions: []
-        };
-      });
-
-      if (this.showMockNotInProjectGroup) {
-        fakeRows.push( {
-          groupByLabel:     this.t('resourceTable.groupLabel.notInAProject'), // Same as the groupByLabel for the namespace model
-          mainRowKey:       'fake-empty',
-        });
-      }
-
-      return [...this.rows, ...fakeRows];
-    },
-    createProjectLocation() {
-      return {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: MANAGEMENT.PROJECT
-        },
-      };
-    },
-    groupPreference: mapPref(GROUP_RESOURCES),
-    activeNamespaceFilters() {
-      return this.$store.getters['activeNamespaceFilters'];
-    },
-    activeProjectFilters() {
-      const activeProjects = {};
-
-      for (const filter of this.activeNamespaceFilters) {
-        const [type, id] = filter.split('://', 2);
-
-        if (type === 'project') {
-          activeProjects[id] = true;
-        }
-      }
-
-      return activeProjects;
-    },
-    activeProjects() {
-      const namespaceFilters = this.$store.getters['activeNamespaceFilters'];
-
-      if (namespaceFilters.includes(NAMESPACE_FILTER_ALL_ORPHANS) && Object.keys(this.activeProjectFilters).length === 0) {
-        // If the user wants to only see namespaces that are not
-        // in a project, don't show any projects.
-        return [];
-      }
-
-      // If the user is not filtering by any projects or namespaces, return
-      // all projects in the cluster.
-      if (!this.userIsFilteringForSpecificNamespaceOrProject()) {
-        return this.clusterProjects;
-      }
-
-      // Filter out projects that are not selected in the top nav.
-      return this.clusterProjects.filter((projectData) => {
-        const projectId = projectData.id.split('/')[1];
-
-        return !!this.activeProjectFilters[projectId];
-      });
-    },
-    activeNamespaces() {
-      // Apply namespace filters from the top nav.
-      const activeNamespaces = this.$store.getters['namespaces']();
-
-      return this.namespaces.filter((namespaceData) => {
-        return !!activeNamespaces[namespaceData.metadata.name];
-      });
-    },
-    filteredRows() {
-      return this.groupPreference === 'none' ? this.rows : this.rowsWithFakeNamespaces;
-    },
-    rows() {
-      if (this.$store.getters['prefs/get'](DEV)) {
-        // If developer tools are turned on in the user preferences,
-        // return all namespaces including system namespaces and RBAC
-        // management namespaces.
-        return this.activeNamespaces;
-      }
-
-      const isVirtualCluster = this.$store.getters['isVirtualCluster'];
-
-      return this.activeNamespaces.filter((namespace) => {
-        const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(namespace.metadata.name);
-
-        const systemNS = namespace.isSystem || namespace.isFleetManaged || isSettingSystemNamespace;
-
-        // For Harvester, filter out system namespaces AND obscure namespaces.
-        if (isVirtualCluster) {
-          return !systemNS && !namespace.isObscure;
-        }
-
-        // Otherwise only filter out obscure namespaces, such as namespaces
-        // that Rancher uses to manage RBAC for projects, which should not be
-        // edited or deleted by Rancher users.
-        return !namespace.isObscure;
-      });
-    },
-
-    canSeeProjectlessNamespaces() {
-      return this.currentCluster.canUpdate;
-    },
-
-    showMockNotInProjectGroup() {
-      if (!this.canSeeProjectlessNamespaces) {
-        return false;
-      }
-
-      const someNamespacesAreNotInProject = !this.rows.some(row => !row.project);
-
-      // Hide the "Not in a Project" group if the user is filtering
-      // for specific namespaces or projects.
-      const usingSpecificFilter = this.userIsFilteringForSpecificNamespaceOrProject();
-
-      return !usingSpecificFilter && someNamespacesAreNotInProject;
-    },
-
-    notInProjectKey() {
-      return this.$store.getters['i18n/t']('resourceTable.groupLabel.notInAProject');
-    }
-  },
-  methods: {
-    userIsFilteringForSpecificNamespaceOrProject() {
-      const activeFilters = this.$store.getters['namespaceFilters'];
-
-      for (let i = 0; i < activeFilters.length; i++) {
-        const filter = activeFilters[i];
-        const filterType = filter.split('://')[0];
-
-        if (filterType === 'ns' || filterType === 'project') {
-          return true;
-        }
-      }
-
-      return false;
-    },
-    slotName(project) {
-      return `main-row:${ project.id }`;
-    },
-    createNamespaceLocation(group) {
-      const project = group.rows[0].project;
-
-      return {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: NAMESPACE
-        },
-        query: { [PROJECT_ID]: project?.metadata.name }
-      };
-    },
-    showProjectAction(event, group) {
-      const project = group.rows[0].project;
-
-      this.$store.commit(`action-menu/show`, {
-        resources: [project],
-        elem:      event.target
-      });
-    },
-    showProjectActionButton(group) {
-      const project = group.rows[0].project;
-
-      return !!project;
-    },
-    projectLabel(group) {
-      const row = group.rows[0];
-
-      if (row.isFake) {
-        return this.t('resourceTable.groupLabel.project', { name: row.project?.nameDisplay }, true);
-      }
-
-      return row.groupByLabel;
-    },
-
-    projectDescription(group) {
-      const project = group.rows[0].project;
-
-      return project?.description;
-    },
-
-    clearSelection() {
-      this.$refs.table.clearSelection();
-    },
-
-    sortGenerationFn() {
-      // The sort generation function creates a unique value and is used to create a key including sort details.
-      // The unique key determines if the list is redrawn or a cached version is shown.
-      // Because we ensure the 'not in a project' group is there via a row, and timing issues, the unqiue key doesn't change
-      // after a namespace is removed... so the list won't update... so we need to inject a string to ensure the key is fresh
-      const base = defaultTableSortGenerationFn(this.schema, this.$store);
-
-      return base + (this.showMockNotInProjectGroup ? '-mock' : '');
-    },
-
-  }
-};
-</script>
-
-<template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else class="project-namespaces">
-    <Masthead
-      :schema="projectSchema"
-      :type-display="t('projectNamespaces.label')"
-      :resource="MANAGEMENT.PROJECT"
-      :favorite-resource="VIRTUAL_TYPES.PROJECT_NAMESPACES"
-      :create-location="createProjectLocation"
-      :create-button-label="t('projectNamespaces.createProject')"
-    />
-    <ResourceTable
-      ref="table"
-      class="table"
-      v-bind="$attrs"
-      :schema="schema"
-      :headers="headers"
-      :rows="filteredRows"
-      :groupable="true"
-      :sort-generation-fn="sortGenerationFn"
-      group-tooltip="resourceTable.groupBy.project"
-      key-field="_key"
-      v-on="$listeners"
-    >
-      <template #group-by="group">
-        <div class="project-bar" :class="{'has-description': projectDescription(group.group)}">
-          <div v-trim-whitespace class="group-tab">
-            <div class="project-name" v-html="projectLabel(group.group)" />
-            <div v-if="projectDescription(group.group)" class="description text-muted text-small">
-              {{ projectDescription(group.group) }}
-            </div>
-          </div>
-          <div class="right">
-            <n-link
-              v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
-              class="create-namespace btn btn-sm role-secondary mr-5"
-              :to="createNamespaceLocation(group.group)"
-            >
-              {{ t('projectNamespaces.createNamespace') }}
-            </n-link>
-            <button type="button" class="project-action btn btn-sm role-multi-action actions mr-10" :class="{invisible: !showProjectActionButton(group.group)}" @click="showProjectAction($event, group.group)">
-              <i class="icon icon-actions" />
-            </button>
-          </div>
-        </div>
-      </template>
-      <template #cell:project="{row}">
-        <span v-if="row.project">{{ row.project.nameDisplay }}</span>
-        <span v-else class="text-muted">&ndash;</span>
-      </template>
-      <template v-for="project in projectsWithoutNamespaces" v-slot:[slotName(project)]>
-        <tr :key="project.id" class="main-row">
-          <td class="empty text-center" colspan="5">
-            {{ t('projectNamespaces.noNamespaces') }}
-          </td>
-        </tr>
-      </template>
-      <template #main-row:fake-empty>
-        <tr class="main-row">
-          <td class="empty text-center" colspan="5">
-            {{ t('projectNamespaces.noProjectNoNamespaces') }}
-          </td>
-        </tr>
-      </template>
-    </ResourceTable>
-    <MoveModal @moving="clearSelection" />
-  </div>
-</template>
-<style lang="scss" scoped>
-.project-namespaces {
-  & ::v-deep {
-    .project-name {
-      line-height: 30px;
-    }
-
-    .project-bar {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-
-      &.has-description {
-        .right {
-          margin-top: 5px;
-        }
-        .group-tab {
-          &, &::after {
-              height: 50px;
-          }
-
-          &::after {
-              right: -20px;
-          }
-
-          .description {
-              margin-top: -20px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<script>
+import ExplorerProjectsNamespaces from '@shell/components/ExplorerProjectsNamespaces';
+export default { components: { ExplorerProjectsNamespaces } };
+</script>
+
+<template><ExplorerProjectsNamespaces v-bind="$attrs" /></template>

package/pages/c/_cluster/settings/performance.vue

@@ -5,18 +5,8 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
-import { SETTING } from '@shell/config/settings';
+import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
-const DEFAULT_PERF_SETTING = {
-  incrementalLoading: {
-    enabled:   false,
-    threshold: 2500,
-  },
-  manualRefresh: {
-    enabled:   false,
-    threshold: 2500,
-  }
-};
 
 export default {
   layout:     'authenticated',
@@ -27,6 +17,7 @@ export default {
     Banner,
     LabeledInput,
   },
+
   async fetch() {
     try {
       this.uiPerfSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
@@ -41,6 +32,7 @@ export default {
 
     this.value = JSON.parse(sValue);
   },
+
   data() {
     return {
       uiPerfSetting: DEFAULT_PERF_SETTING,
@@ -49,6 +41,7 @@ export default {
       errors:        [],
     };
   },
+
   computed: {
     mode() {
       const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
@@ -56,10 +49,12 @@ export default {
       return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
     },
   },
+
   methods: {
     async save(btnCB) {
       this.uiPerfSetting.value = JSON.stringify(this.value);
       this.errors = [];
+
       try {
         await this.uiPerfSetting.save();
         btnCB(true);
@@ -78,12 +73,19 @@ export default {
       {{ t('performance.label') }}
     </h1>
     <div>
-      <label class="text-label">
-        {{ t(`performance.description`, {}, true) }}
-      </label>
-      <Banner color="error" label-key="performance.banner" />
-      <!-- Incremental Loading -->
       <div class="ui-perf-setting">
+        <!-- Websocket Notifications -->
+        <div class="mt-40">
+          <h2>{{ t('performance.websocketNotification.label') }}</h2>
+          <p>{{ t('performance.websocketNotification.description') }}</p>
+          <Checkbox
+            v-model="value.disableWebsocketNotification"
+            :label="t('performance.websocketNotification.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+        </div>
+        <!-- Incremental Loading -->
         <div class="mt-40">
           <h2>{{ t('performance.incrementalLoad.label') }}</h2>
           <p>{{ t('performance.incrementalLoad.description') }}</p>
@@ -111,6 +113,7 @@ export default {
         <div class="mt-40">
           <h2 v-t="'performance.manualRefresh.label'" />
           <p>{{ t('performance.manualRefresh.description') }}</p>
+          <Banner color="error" label-key="performance.manualRefresh.banner" />
           <Checkbox
             v-model="value.manualRefresh.enabled"
             :label="t('performance.manualRefresh.checkboxLabel')"

package/pages/fail-whale.vue

@@ -2,8 +2,6 @@
 import BrandImage from '@shell/components/BrandImage';
 import { mapGetters, mapState } from 'vuex';
 import { stringify } from '@shell/utils/error';
-import { getVendor } from '@shell/config/private-label';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
 
 export default {
   layout: 'home',
@@ -13,7 +11,7 @@ export default {
   data() {
     const store = this.$store;
 
-    if ( process.client && !store.state.error && !store.state.cameFromError) {
+    if (!store.state.error && !store.state.cameFromError) {
       store.commit('cameFromError');
       this.$router.replace('/');
     }
@@ -29,13 +27,6 @@ export default {
     ...mapGetters(['isSingleProduct']),
 
     home() {
-      const isOnlyHarvester = getVendor() === HARVESTER;
-
-      if (isOnlyHarvester) {
-        // This looks like it's covered by `isSingleProduct?.afterLoginRoute` too
-        return 'c/local/harvester/harvesterhci.io.dashboard';
-      }
-
       if (this.isSingleProduct?.afterLoginRoute) {
         return this.$router.resolve(this.isSingleProduct.afterLoginRoute).href;
       }

package/pages/index.vue

@@ -2,21 +2,35 @@
 import { SEEN_WHATS_NEW } from '@shell/store/prefs';
 import { getVersionInfo } from '@shell/utils/version';
 
+const validRoute = (route, router) => {
+  return !!route && !!router.resolve(route)?.resolved?.matched?.length;
+};
+
 export default {
-  middleware({ redirect, store } ) {
+  middleware({ redirect, store, app } ) {
     const seenWhatsNew = store.getters['prefs/get'](SEEN_WHATS_NEW);
     const versionInfo = getVersionInfo(store);
     const isSingleProduct = store.getters['isSingleProduct'];
+    const dashboardHome = { name: 'home' };
 
     // If this is a new version, then take the user to the home page to view the release notes
     if (versionInfo.fullVersion !== seenWhatsNew && !isSingleProduct) {
-      return redirect({ name: 'home' });
+      return redirect(dashboardHome);
     }
 
-    // Take the user to the configured login route
     const afterLoginRouteObject = store.getters['prefs/afterLoginRoute'];
 
-    return redirect(afterLoginRouteObject);
+    // Confirm this is a valid route (it could have come from an uninstalled plugin)
+    if (validRoute(afterLoginRouteObject, app.router)) {
+      // Take the user to the configured login route
+      return redirect(afterLoginRouteObject);
+    }
+
+    if (validRoute(isSingleProduct?.afterLoginRoute, app.router)) {
+      return redirect(isSingleProduct.afterLoginRoute);
+    }
+
+    return redirect(dashboardHome);
   }
 };
 </script>

package/pages/plugins.vue

@@ -242,7 +242,7 @@ export default {
             <LabeledInput v-model="location" label="Plugin URL" @input="updateLocation" />
           </div>
           <div class="dialog-buttons">
-            <button class="btn" @click="closeAddDialog()">
+            <button class="btn role-secondary" @click="closeAddDialog()">
               Cancel
             </button>
             <button class="btn role-primary" @click="loadPlugin()">
@@ -268,7 +268,7 @@ export default {
             <LabeledInput v-model="catalogUrl" label="Catalog URL" />
           </div>
           <div class="dialog-buttons">
-            <button class="btn" @click="closeAddCatalogDialog()">
+            <button class="btn role-secondary" @click="closeAddCatalogDialog()">
               Cancel
             </button>
             <button class="btn role-primary" @click="addCatalog()">

package/pages/prefs.vue

@@ -159,8 +159,11 @@ export default {
       <LandingPagePreference />
     </div>
     <hr />
-    <h4 v-t="'prefs.formatting'" />
-    <div class="row">
+    <h4 v-t="'prefs.displaySettings.title'" />
+    <p class="set-landing-leadin">
+      {{ t('prefs.displaySettings.detail', {}, raw=true) }}
+    </p>
+    <div class="row mt-20">
       <div class="col span-4">
         <LabeledSelect
           v-model="dateFormat"
@@ -175,7 +178,9 @@ export default {
           :options="timeOptions"
         />
       </div>
+    </div>
 
+    <div class="row mt-20">
       <div class="col span-4">
         <LabeledSelect
           v-model.number="perPage"
@@ -186,9 +191,6 @@ export default {
           placeholder="Select a row count"
         />
       </div>
-    </div>
-
-    <div class="row mt-20">
       <div class="col span-4">
         <LabeledSelect
           v-model.number="menuMaxClusters"
@@ -207,7 +209,7 @@ export default {
         <h4 v-t="'prefs.advanced'" />
         <Checkbox v-model="dev" :label="t('prefs.dev.label', {}, true)" />
         <p class="wrap-text">
-          {{ t('prefs.advancedTooltip', {}, raw=true) }}
+          {{ t('prefs.advancedTooltip') }}
         </p>
         <br>
         <Checkbox v-if="!isSingleProduct" v-model="hideDescriptions" :label="t('prefs.hideDesc.label')" class="mt-10" />