Merge pull request #2966 from codyrancher/membership2

Migrating cluster membership from ember to vue (clusterRoleTemplateBindings)
rancher · Jun 4, 2021 · 579a562 · 579a562
2 parents 0fa3ce8 + bbfc407
commit 579a562
Show file tree

Hide file tree

Showing 12 changed files with 492 additions and 30 deletions.
diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
@@ -1686,6 +1686,33 @@ login:
   loginWithLocal: Log in with Local User
   useProvider: Use a {provider} user
 
+members:
+  clusterMembers: Cluster Members
+  createActionLabel: Add
+  clusterPermissions:
+    noDescription: User created - no description
+    label: Cluster Permissions
+    description: Controls what access users have to the Cluster
+    createProjects: Create Projects
+    manageClusterBackups: Manage Cluster Backups
+    manageClusterCatalogs: Manage Cluster Catalogs
+    manageClusterMembers: Manage Cluster Members
+    manageNodes: Manage Nodes
+    manageStorage: Manage Storage
+    viewAllProjects: View All Projects
+    viewClusterCatalogs: View Cluster Catalogs
+    viewClusterMembers: View Cluster Members
+    viewNodes: View Nodes
+    owner:
+      label: Owner
+      description: Owners have full control over the Cluster and all resources inside it.
+    member:
+      label: Member
+      description: Members can manage the resources inside the Cluster but not change the Cluster itself.
+    custom:
+      label: Custom
+      description: Choose individual roles for this user.
+
 monitoring:
   accessModes:
     many: ReadWriteMany
@@ -2500,6 +2527,8 @@ rbac:
     fleetworkspace-admin: Admin
     fleetworkspace-member: Member
     fleetworkspace-readonly: Read-Only
+  members:
+    label: Members
   roletemplate:
     label: Roles
     newUserDefault:
@@ -4129,6 +4158,11 @@ typeLabel:
       one { Cluster Group }
       other {Cluster Groups }
     }
+  management.cattle.io.clusterroletemplatebinding: |-
+    {count, plural,
+      one { Cluster Member }
+      other { Cluster Members }
+    }
   fleet.cattle.io.gitrepo: |-
     {count, plural,
       one { Git Repo }
@@ -4215,6 +4249,11 @@ typeLabel:
       one { User }
       other { Users }
     }
+  namespace: |-
+    {count, plural,
+      one { Namespace }
+      other { Namespaces }
+    }
   group.principal: |-
     {count, plural,
       one { Group }

diff --git a/components/ResourceDetail/Masthead.vue b/components/ResourceDetail/Masthead.vue
@@ -317,7 +317,8 @@ export default {
               {{ parent.displayName }}:
             </nuxt-link>
             <span v-else>{{ parent.displayName }}:</span>
-            <t :k="'resourceDetail.header.' + realMode" :subtype="resourceSubtype" :name="value.nameDisplay" />
+            <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
+            <t v-else :k="'resourceDetail.header.' + realMode" :subtype="resourceSubtype" :name="value.nameDisplay" />
             <BadgeState v-if="!isCreate && parent.showState" class="masthead-state" :value="value" />
           </h1>
         </div>

diff --git a/components/form/RadioButton.vue b/components/form/RadioButton.vue
@@ -34,7 +34,17 @@ export default {
     mode: {
       type:    String,
       default: 'edit',
-    }
+    },
+
+    descriptionKey: {
+      type:    String,
+      default: null
+    },
+
+    description: {
+      type:    String,
+      default: null
+    },
   },
 
   data() {
@@ -102,17 +112,27 @@ export default {
       :aria-checked="isChecked"
       role="radio"
     />
-    <label
-      v-if="label"
-      :class="[ muteLabel ? 'text-muted' : '', 'radio-label']"
-      v-html="label"
-    >
-      <slot name="label">{{ label }}</slot>
-    </label>
+    <div class="labeling">
+      <label
+        v-if="label"
+        :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
+        v-html="label"
+      >
+        <slot name="label">{{ label }}</slot>
+      </label>
+      <div v-if="descriptionKey || description" class="radio-button-outer-container-description">
+        <t v-if="descriptionKey" :k="descriptionKey" />
+        <template v-else-if="description">
+          {{ description }}
+        </template>
+      </div>
+    </div>
   </label>
 </template>
 
 <style lang='scss'>
+$fontColor: var(--input-label);
+
 .radio-view {
   display: flex;
   flex-direction: column;
@@ -131,7 +151,7 @@ export default {
 .radio-container {
   position: relative;
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   margin: 0;
   cursor: pointer;
   user-select: none;
@@ -142,10 +162,6 @@ export default {
     cursor: not-allowed
   }
 
-  .radio-label {
-    margin: 3px 10px 0px 5px;
-  }
-
  .radio-custom {
     height: 14px;
     width: 14px;
@@ -155,6 +171,7 @@ export default {
     border-radius: 50%;
     transition: all 0.3s ease-out;
     border: 1.5px solid var(--border);
+    margin-top: 5px;
 
     &:focus {
       outline: none;
@@ -186,6 +203,19 @@ export default {
     background-color: var(--disabled-bg);
     opacity: .25;
   }
+
+  .radio-button-outer-container-description {
+    color: $fontColor;
+    font-size: 11px;
+    margin-top: 5px;
+  }
+
+  .labeling {
+    display: inline-flex;
+    flex-direction: column;
+
+    margin: 3px 10px 0px 5px;
+  }
 }
 
 </style>
diff --git a/components/form/RadioGroup.vue b/components/form/RadioGroup.vue
@@ -150,6 +150,7 @@ export default {
             :name="name"
             :value="value"
             :label="option.label"
+            :description="option.description"
             :val="option.value"
             :disabled="isDisabled"
             :mode="mode"

diff --git a/config/product/explorer.js b/config/product/explorer.js
@@ -1,9 +1,10 @@
 import {
   CONFIG_MAP,
-  NAMESPACE, NODE, SECRET, INGRESS,
+  NODE, SECRET, INGRESS,
   WORKLOAD, WORKLOAD_TYPES, SERVICE, HPA, NETWORK_POLICY, PV, PVC, STORAGE_CLASS, POD,
   RBAC,
   MANAGEMENT,
+  NAMESPACE,
   NORMAN,
 } from '@/config/types';
 
@@ -27,6 +28,7 @@ export function init(store) {
     basicType,
     ignoreType,
     mapGroup,
+    mapType,
     weightGroup,
     weightType,
     headers,
@@ -40,7 +42,7 @@ export function init(store) {
     weight:              3,
     showNamespaceFilter: true,
     icon:                'compass',
-    typeStoreMap:        { [MANAGEMENT.PROJECT]: 'management' }
+    typeStoreMap:        { [MANAGEMENT.PROJECT]: 'management', [MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING]: 'management' }
   });
 
   basicType(['cluster-dashboard', 'cluster-tools']);
@@ -77,6 +79,7 @@ export function init(store) {
     RBAC.CLUSTER_ROLE,
     RBAC.ROLE_BINDING,
     RBAC.CLUSTER_ROLE_BINDING,
+    'cluster-members'
   ], 'rbac');
 
   weightGroup('cluster', 99, true);
@@ -124,9 +127,12 @@ export function init(store) {
   mapGroup(/^(.*\.)?cluster\.x-k8s\.io$/, 'Cluster Provisioning');
   mapGroup(/^(aks|eks|gke|rke|rke-machine-config|provisioning)\.cattle\.io$/, 'Cluster Provisioning');
 
+  mapType(MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING, store.getters['i18n/t'](`typeLabel.${ MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING }`, { count: 2 }));
+
   configureType(NODE, { isCreatable: false, isEditable: false });
   configureType(WORKLOAD_TYPES.JOB, { isEditable: false, match: WORKLOAD_TYPES.JOB });
   configureType(PVC, { isEditable: false });
+  configureType(MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING, { isEditable: false });
 
   configureType('workload', {
     displayName: 'Workload',
@@ -200,7 +206,7 @@ export function init(store) {
   ]);
 
   virtualType({
-    label:       'Cluster Dashboard',
+    label:       store.getters['i18n/t']('clusterIndexPage.header'),
     group:      'Root',
     namespaced:  false,
     name:        'cluster-dashboard',
@@ -211,7 +217,18 @@ export function init(store) {
   });
 
   virtualType({
-    label:          'Overview',
+    label:       store.getters['i18n/t']('members.clusterMembers'),
+    group:      'rbac',
+    namespaced:  false,
+    name:        'cluster-members',
+    icon:       'globe',
+    weight:      100,
+    route:       { name: 'c-cluster-explorer-members' },
+    exact:       true,
+  });
+
+  virtualType({
+    label:          store.getters['i18n/t']('generic.overview'),
     group:          'Workload',
     namespaced:     true,
     name:           'workload',
@@ -226,7 +243,7 @@ export function init(store) {
   });
 
   virtualType({
-    label:            'Projects/Namespaces',
+    label:            store.getters['i18n/t']('projectNamespaces.label'),
     group:            'cluster',
     icon:             'globe',
     namespaced:       false,
@@ -238,7 +255,7 @@ export function init(store) {
   });
 
   virtualType({
-    label:            'Namespaces',
+    label:            store.getters['i18n/t'](`typeLabel.${ NAMESPACE }`, { count: 2 }),
     group:            'cluster',
     icon:             'globe',
     namespaced:       false,

diff --git a/config/table-headers.js b/config/table-headers.js
@@ -177,6 +177,14 @@ export const RAM = {
   width:     120,
 };
 
+export const PRINCIPAL = {
+  name:      'principal',
+  labelKey:  'tableHeaders.name',
+  sort:      'principal.loginName',
+  value:     'userPrincipalName',
+  formatter: 'Principal',
+};
+
 export const PODS = {
   name:      'pods',
   labelKey:  'tableHeaders.pods',
@@ -789,6 +797,12 @@ export const RESTART = {
   width:     75,
 };
 
+export const ROLE = {
+  name:          'role',
+  value:         'roleDisplay',
+  labelKey:      'tableHeaders.role',
+};
+
 export const FEATURE_DESCRIPTION = {
   name:     'description',
   labelKey: 'tableHeaders.description',

diff --git a/config/types.js b/config/types.js
@@ -12,14 +12,15 @@ export const STEVE = {
 // Auth (via Norman)
 // Base: /v3
 export const NORMAN = {
-  AUTH_CONFIG:   'authconfig',
-  ETCD_BACKUP:   'etcdbackup',
-  CLUSTER_TOKEN: 'clusterregistrationtoken',
-  GROUP:         'group',
-  PRINCIPAL:     'principal',
-  SPOOFED:       { GROUP_PRINCIPAL: 'group.principal' },
-  TOKEN:         'token',
-  USER:          'user',
+  AUTH_CONFIG:                   'authconfig',
+  ETCD_BACKUP:                   'etcdbackup',
+  CLUSTER_TOKEN:                 'clusterregistrationtoken',
+  CLUSTER_ROLE_TEMPLATE_BINDING: 'clusterRoleTemplateBinding',
+  GROUP:                         'group',
+  PRINCIPAL:                     'principal',
+  SPOOFED:                       { GROUP_PRINCIPAL: 'group.principal' },
+  TOKEN:                         'token',
+  USER:                          'user',
 };
 
 // Public (via Norman)