@rancher/shell 0.1.1 → 0.1.3

package/pages/auth/login.vue

@@ -3,6 +3,7 @@ import { removeObject } from '@shell/utils/array';
 import { USERNAME } from '@shell/config/cookies';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import AsyncButton from '@shell/components/AsyncButton';
+import LocaleSelector from '@shell/components/LocaleSelector';
 import BrandImage from '@shell/components/BrandImage';
 import InfoBox from '@shell/components/InfoBox';
 import CopyCode from '@shell/components/CopyCode';
@@ -30,7 +31,7 @@ export default {
   name:       'Login',
   layout:     'unauthenticated',
   components: {
-    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password
+    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector
   },
 
   async asyncData({ route, redirect, store }) {
@@ -164,7 +165,7 @@ export default {
 
     kubectlCmd() {
       return "kubectl get secret --namespace cattle-system bootstrap-secret -o go-template='{{.data.bootstrapPassword|base64decode}}{{\"\\n\"}}'";
-    }
+    },
 
   },
 
@@ -393,6 +394,9 @@ export default {
               {{ nonLocalPrompt }}
             </a>
           </div>
+          <div class="locale-elector">
+            <LocaleSelector></LocaleSelector>
+          </div>
         </template>
       </div>
 
@@ -435,4 +439,9 @@ export default {
       }
     }
   }
+
+  .locale-elector {
+    position: absolute;
+    bottom: 30px;
+  }
 </style>

package/pages/auth/setup.vue

@@ -114,7 +114,7 @@ export default {
       setVendor(plSetting.value);
     }
 
-    const productName = plSetting.default === 'Harvester' ? 'Harvester' : 'Rancher';
+    const productName = plSetting.default;
 
     const principals = await store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL, opt: { url: '/v3/principals' } });
     const me = findBy(principals, 'me', true);

package/pages/c/_cluster/_product/members/index.vue

@@ -1,96 +1,6 @@
 <script>
-import { MANAGEMENT, NORMAN, VIRTUAL_TYPES } from '@shell/config/types';
-import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { AGE, ROLE, STATE, PRINCIPAL } from '@shell/config/table-headers';
-import { canViewClusterPermissionsEditor } from '@shell/components/form/Members/ClusterPermissionsEditor.vue';
-import Banner from '@components/Banner/Banner.vue';
-
-/**
- * Explorer members page.
- * Route: /c/local/explorer/members
- */
-export default {
-
-  name: 'ExplorerMembers',
-
-  components: {
-    Banner, Loading, Masthead, ResourceTable
-  },
-
-  async fetch() {
-    const clusterRoleTemplateBindingSchema = this.$store.getters[`rancher/schemaFor`](NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING);
-
-    const hydration = [
-      clusterRoleTemplateBindingSchema ? this.$store.dispatch(`rancher/findAll`, { type: NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING }, { root: true }) : [],
-      clusterRoleTemplateBindingSchema ? this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING }) : [],
-      this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }),
-    ];
-    const [clusterRoleTemplateBindings] = await Promise.all(hydration);
-    const steveBindings = await Promise.all(clusterRoleTemplateBindings.map(b => b.steve));
-
-    this.$set(this, 'clusterRoleTemplateBindings', steveBindings);
-  },
-
-  data() {
-    return {
-      schema:         this.$store.getters[`management/schemaFor`](MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING),
-      headers:        [
-        STATE,
-        PRINCIPAL,
-        ROLE,
-        AGE
-      ],
-      createLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
-        }
-      },
-      resource:                    MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
-      clusterRoleTemplateBindings: [],
-      VIRTUAL_TYPES
-    };
-  },
-
-  computed: {
-    filteredClusterRoleTemplateBindings() {
-      return this.clusterRoleTemplateBindings
-        .filter(b => b.clusterName === this.$store.getters['currentCluster'].id);
-    },
-    canManageMembers() {
-      return canViewClusterPermissionsEditor(this.$store);
-    },
-    isLocal() {
-      return this.$store.getters['currentCluster'].isLocal;
-    }
-  },
-};
+import ExplorerMembers from '@shell/components/ExplorerMembers';
+export default { components: { ExplorerMembers } };
 </script>
 
-<template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else>
-    <Masthead
-      :schema="schema"
-      :resource="resource"
-      :favorite-resource="VIRTUAL_TYPES.CLUSTER_MEMBERS"
-      :create-location="createLocation"
-      :create-button-label="t('members.createActionLabel')"
-    />
-    <Banner v-if="isLocal" color="error" :label="t('members.localClusterWarning')" />
-    <ResourceTable
-      :schema="schema"
-      :headers="headers"
-      :rows="filteredClusterRoleTemplateBindings"
-      :groupable="false"
-      :namespaced="false"
-      sub-search="subSearch"
-      :sub-fields="['nameDisplay']"
-    />
-  </div>
-</template>
+<template><ExplorerMembers v-bind="$attrs" /></template>

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/apps/charts/install.vue

@@ -740,12 +740,6 @@ export default {
 
     window.scrollTop = 0;
 
-    // For easy access debugging...
-    if ( typeof window !== 'undefined' ) {
-      window.v = this.value;
-      window.c = this;
-    }
-
     this.preFormYamlOption = this.valuesComponent || this.hasQuestions ? VALUES_STATE.FORM : VALUES_STATE.YAML;
   },
 

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;
       }