dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/detail/management.cattle.io.fleetworkspace.vue

@@ -1,8 +1,6 @@
 <script>
 import CountBox from '@shell/components/CountBox';
-// import RoleBindings from '@shell/components/RoleBindings';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
-// import Tab from '@shell/components/Tabbed/Tab';
 import { SCOPE_NAMESPACE, SCOPE_CLUSTER } from '@shell/components/RoleBindings.vue';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 import { FLEET } from '@shell/config/types';
@@ -12,8 +10,6 @@ export default {
 
   components: {
     CountBox,
-    // RoleBindings,
-    // Tab,
     ResourceTabs
   },
 
@@ -32,7 +28,10 @@ export default {
       return this.t(`typeLabel."${ FLEET.CLUSTER_GROUP }"`, { count: this.value.counts.clusterGroup });
     },
     gitRepoLabel() {
-      return this.t(`typeLabel."${ FLEET.GIT_REPO }"`, { count: this.value.counts.gitRepo });
+      return this.t(`typeLabel."${ FLEET.GIT_REPO }"`, { count: this.value.counts.gitRepos });
+    },
+    helmOpsLabel() {
+      return this.t(`typeLabel."${ FLEET.HELM_OP }"`, { count: this.value.counts.helmOps });
     },
 
     SCOPE_NAMESPACE() {
@@ -54,21 +53,28 @@ export default {
   <div>
     <div class="mb-20">
       <div class="row">
-        <div class="col span-4">
+        <div class="col span-3">
           <CountBox
             :count="value.counts.gitRepos"
             :name="gitRepoLabel"
             :primary-color-var="'--sizzle-3'"
           />
         </div>
-        <div class="col span-4">
+        <div class="col span-3">
+          <CountBox
+            :count="value.counts.helmOps"
+            :name="helmOpsLabel"
+            :primary-color-var="'--sizzle-3'"
+          />
+        </div>
+        <div class="col span-3">
           <CountBox
             :count="value.counts.clusters"
             :name="clustersLabel"
             :primary-color-var="'--sizzle-1'"
           />
         </div>
-        <div class="col span-4">
+        <div class="col span-3">
           <CountBox
             :count="value.counts.clusterGroups"
             :name="clusterGroupsLabel"
@@ -77,24 +83,9 @@ export default {
         </div>
       </div>
     </div>
-    <section class="bordered-section">
-      <ResourceTabs
-        :value="value"
-        mode="view"
-      >
-        <!-- <Tab name="members" label="Members">
-          <RoleBindings
-            ref="rb"
-            :role-scope="SCOPE_CLUSTER"
-            :binding-scope="SCOPE_NAMESPACE"
-            :filter-role-value="FLEET_NAME"
-            :namespace="value.name"
-            in-store="management"
-            mode="view"
-            as="detail"
-          />
-        </Tab> -->
-      </ResourceTabs>
-    </section>
+    <ResourceTabs
+      :value="value"
+      mode="view"
+    />
   </div>
 </template>

package/detail/management.cattle.io.oidcclient.vue

@@ -0,0 +1,369 @@
+<script lang="ts">
+import Loading from '@shell/components/Loading.vue';
+import { OIDC_CLIENT_SECRET_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { SECRET } from '@shell/config/types';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { defineComponent } from 'vue';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
+import DateComponent from '@shell/components/formatter/Date.vue';
+import { RcItemCard } from '@components/RcItemCard';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { Banner } from '@components/Banner';
+
+type SecretActionType = 'create-secret' | 'regen-secret' | 'remove-secret'
+interface ClientSecretData { createdAt: string, lastUsedAt: string, lastFiveCharacters: string }
+
+export const OIDC_CLIENT_SECRET_ACTION: { [key: string]: SecretActionType } = {
+  CREATE: 'create-secret',
+  REGEN:  'regen-secret',
+  REMOVE: 'remove-secret',
+};
+
+interface SecretManageData {
+  id: string,
+  header?: any,
+  image?: any,
+  createdAt: string,
+  lastFiveCharacters: string,
+  lastUsedAt: string,
+  displayFullSecret: boolean,
+}
+
+const OIDC_SECRETS_NAMESPACE = 'cattle-oidc-client-secrets';
+
+export default defineComponent({
+  emits: ['regenerateSecret', 'removeSecret'],
+
+  components: {
+    CopyToClipboardText,
+    DateComponent,
+    RcItemCard,
+    ActionMenu,
+    Loading,
+    Banner
+  },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  created() {
+    // this mean that we came from the create screen and we need to display that first secret generated
+    if (window.history?.state?.displaySecret) {
+      this.displayFirstSecret = true;
+      const state = window.history.state;
+
+      const { displaySecret, ...cleanedState } = state;
+
+      // let's clean from the browser history state the flag so that when we do a refresh we don't get the same state back (we don't want to show the secret ever again)
+      window.history.replaceState(cleanedState, '', window.location.href);
+    }
+
+    setTimeout(() => {
+      this.showNoSecretsDelay = true;
+    }, 5000);
+  },
+
+  data() {
+    return {
+      displayFirstSecret:    false,
+      errors:                [] as any[],
+      snapshotSecretsOnLoad: Object.assign({}, this.value?.status?.clientSecrets),
+      OIDC_CLIENT_SECRET_ACTION,
+      secretsRegenerated:    [] as any[],
+      cardActions:           [
+        {
+          enabled:    true,
+          total:      0,
+          allEnabled: true,
+          anyEnabled: true,
+          available:  0,
+          action:     'regenerateSecret',
+          label:      this.t('oidcclient.regenerate')
+        },
+        {
+          enabled:    true,
+          total:      0,
+          allEnabled: true,
+          anyEnabled: true,
+          available:  0,
+          action:     'removeSecret',
+          label:      this.t('generic.delete')
+        }
+      ],
+      canFetchSecrets:    this.$store.getters[`management/canList`](SECRET),
+      showNoSecretsDelay: false
+    };
+  },
+
+  methods: {
+    promptSecretsModal(actionType: SecretActionType, secret: SecretManageData) {
+      this.errors = [];
+
+      this.$store.dispatch('management/promptModal', {
+        component:      'OidcClientSecretDialog',
+        customClass:    'remove-modal',
+        modalWidth:     400,
+        height:         'auto',
+        styles:         'max-height: 100vh;',
+        componentProps: {
+          type:     actionType,
+          actionCb: async() => {
+            try {
+              await this.performSecretAction(actionType, secret);
+            } catch (error: any) {
+              this.errors = exceptionToErrorsArray(error);
+            }
+          }
+        }
+      });
+    },
+    async addNewSecret() {
+      this.errors = [];
+
+      try {
+        await this.performSecretAction(OIDC_CLIENT_SECRET_ACTION.CREATE, {});
+      } catch (error: any) {
+        this.errors = exceptionToErrorsArray(error);
+      }
+    },
+    async performSecretAction(actionType: SecretActionType, secret: SecretManageData | any) {
+      let isValidAction = false;
+
+      if (!this.value?.metadata?.annotations) {
+        this.value.metadata.annotations = {};
+      }
+
+      if (actionType === OIDC_CLIENT_SECRET_ACTION.CREATE) {
+        this.value.metadata.annotations[OIDC_CLIENT_SECRET_ANNOTATIONS.CREATE] = 'true';
+        isValidAction = true;
+      } else if (actionType === OIDC_CLIENT_SECRET_ACTION.REGEN) {
+        this.value.metadata.annotations[OIDC_CLIENT_SECRET_ANNOTATIONS.REGEN] = secret.id;
+        this.secretsRegenerated.push(secret);
+        isValidAction = true;
+      } else if (actionType === OIDC_CLIENT_SECRET_ACTION.REMOVE) {
+        this.value.metadata.annotations[OIDC_CLIENT_SECRET_ANNOTATIONS.REMOVE] = secret.id;
+        isValidAction = true;
+      }
+
+      if (isValidAction) {
+        return await this.value.save();
+      }
+
+      Promise.reject(new Error(this.t('oidcclient.errors.performSecretAction')));
+    },
+  },
+
+  watch: {
+    clientSecretId: {
+      handler(neu) {
+        if (neu && this.canFetchSecrets) {
+          this.$store.dispatch('management/find', { type: SECRET, id: neu });
+        }
+      },
+      immediate: true
+    }
+  },
+
+  computed: {
+    clientID(): string {
+      return this.value?.status?.clientID || '';
+    },
+
+    clientSecretId(): string {
+      // We can either use `${ OIDC_SECRETS_NAMESPACE }/${ this.value.status.clientID }` directly, or attempt to find the secret owned by the client
+      return this.value.metadata.relationships.find((r: any) => r.rel === 'owner' && r.state === 'active' && r.toType === SECRET && r.toId.startsWith(OIDC_SECRETS_NAMESPACE))?.toId;
+    },
+
+    clientSecret(): Record<string, any> | undefined {
+      return this.clientSecretId ? this.$store.getters['management/byId'](SECRET, this.clientSecretId) : undefined;
+    },
+
+    clientSecrets(): SecretManageData[] {
+      const clientSecrets: SecretManageData[] = [];
+      const oidcClientSecretsData: [string, ClientSecretData][] = this.value?.status?.clientSecrets ? Object.entries(this.value?.status?.clientSecrets) : [];
+
+      oidcClientSecretsData.forEach(([oidcSecretDataKey, oidcSecretData], index: number) => {
+        if (oidcSecretDataKey && oidcSecretData) {
+          const createdAtNum = parseInt(oidcSecretData.createdAt || '0');
+          const createdAt = createdAtNum ? new Date(createdAtNum * 1000).toISOString() : '';
+          const lastUsedAtNum = parseInt(oidcSecretData.lastUsedAt || '0');
+          const lastUsedAt = lastUsedAtNum ? new Date(lastUsedAtNum * 1000).toISOString() : '';
+
+          let displayFullSecret = false;
+
+          // this covers the first render after creation
+          if (this.displayFirstSecret && index === 0) {
+            displayFullSecret = true;
+          // this cover the "add secret" scenario
+          } else if (!this.snapshotSecretsOnLoad[oidcSecretDataKey]) {
+            displayFullSecret = true;
+          }
+
+          // this cover the "regen secret" scenario
+          if (this.secretsRegenerated.find((regen: SecretManageData) => regen.id === oidcSecretDataKey && regen.lastFiveCharacters !== oidcSecretData.lastFiveCharacters)) {
+            displayFullSecret = true;
+          }
+
+          // this covers the removal, then adding a new secret again... We need to compare keys so that we can check it's new and render it
+          if (this.snapshotSecretsOnLoad[oidcSecretDataKey] && (this.snapshotSecretsOnLoad[oidcSecretDataKey].lastFiveCharacters !== oidcSecretData.lastFiveCharacters)) {
+            displayFullSecret = true;
+          }
+
+          clientSecrets.push({
+            id:                 oidcSecretDataKey,
+            header:             { title: { text: oidcSecretDataKey } },
+            image:              { src: require('~shell/assets/images/key.svg') },
+            createdAt,
+            lastFiveCharacters: oidcSecretData.lastFiveCharacters,
+            lastUsedAt,
+            displayFullSecret,
+          });
+        }
+      });
+
+      return clientSecrets;
+    },
+
+    showSecrets(): boolean {
+      return this.value.status?.clientID;
+    },
+
+    showNoSecrets(): boolean {
+      // Avoid the no secrets message blipping up whilst we wait for the client status to update over websocket (which unlocks the details required to fetch secrets)
+      return !this.showSecrets && this.showNoSecretsDelay;
+    }
+  }
+});
+</script>
+
+<template>
+  <div>
+    <Loading v-if="!value" />
+    <div v-else-if="showSecrets">
+      <div
+        v-if="errors && errors.length"
+      >
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :data-testid="`error-banner${i}`"
+          :label="err"
+        />
+      </div>
+
+      <!-- clientID -->
+      <h3
+        class="mt-10 mb-20"
+      >
+        {{ t('oidcclient.clientId') }}:
+        <CopyToClipboardText
+          :aria-label="t('oidcclient.a11y.copyText.clientId')"
+          :text="clientID"
+          data-testid="oidc-clients-copy-clipboard-client-id"
+        />
+      </h3>
+      <!-- secrets cards -->
+      <div
+        class="mb-20"
+      >
+        <h3 class="mt-20 mb-20">
+          {{ t('oidcclient.clientSecrets') }}
+        </h3>
+        <div class="card-grid-container">
+          <rc-item-card
+            v-for="(secret, i) in clientSecrets"
+            :id="secret.id"
+            :key="secret.id"
+            class="card-item"
+            :header="secret.header"
+            :image="secret.image"
+            :value="secret"
+            variant="medium"
+            :clickable="false"
+          >
+            <template #item-card-content>
+              <p v-if="secret.displayFullSecret">
+                <CopyToClipboardText
+                  :aria-label="t('oidcclient.a11y.copyText.clientSecret')"
+                  :text="clientSecret?.decodedData?.[secret.id]"
+                  :data-testid="`oidc-client-secret-${i}-copy-full-secret`"
+                />
+              </p>
+              <p v-else>
+                ********{{ secret.lastFiveCharacters }}
+              </p>
+            </template>
+            <template
+              #item-card-footer
+            >
+              <div class="card-footer">
+                <p class="mr-40">
+                  <span class="card-footer-title">{{ t('generic.created') }}</span>
+                  <span>: <DateComponent :value="secret.createdAt" /></span>
+                </p>
+                <p>
+                  <span class="card-footer-title">{{ t('tableHeaders.lastUsed') }}</span>
+                  <span v-if="!secret.lastUsedAt">: {{ t('oidcclient.usedNever') }}</span>
+                  <span v-else>: <DateComponent :value="secret.lastUsedAt" /></span>
+                </p>
+              </div>
+            </template>
+            <template
+              #item-card-actions
+            >
+              <ActionMenu
+                :data-testid="`oidc-client-secret-${i}-action-menu`"
+                :resource="secret"
+                :custom-actions="cardActions"
+                @regenerateSecret="promptSecretsModal(OIDC_CLIENT_SECRET_ACTION.REGEN, secret)"
+                @removeSecret="promptSecretsModal(OIDC_CLIENT_SECRET_ACTION.REMOVE, secret)"
+              />
+            </template>
+          </rc-item-card>
+        </div>
+        <button
+          class="btn role-primary mt-20"
+          data-testid="oidc-client-add-new-secret"
+          @click="addNewSecret"
+        >
+          {{ t('oidcclient.addNewSecret') }}
+        </button>
+      </div>
+    </div>
+    <div v-else-if="showNoSecrets">
+      {{ t('oidcclient.noClientId') }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card-item {
+  max-width: 800px
+}
+.card-grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+  gap: 24px;
+}
+
+.card-footer {
+  display: flex;
+
+  p {
+    color: var(--link-text-secondary);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0%;
+
+    .card-footer-title {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

package/detail/namespace.vue

@@ -5,7 +5,6 @@ import ResourceTabs from '@shell/components/form/ResourceTabs';
 import { COUNT, WORKLOAD_TYPES } from '@shell/config/types';
 import { WORKLOAD_SCHEMA } from '@shell/config/schema';
 import { getStatesByType } from '@shell/plugins/dashboard-store/resource-class';
-import MoveModal from '@shell/components/MoveModal';
 import Tab from '@shell/components/Tabbed/Tab';
 import ResourceTable from '@shell/components/ResourceTable';
 import SortableTable from '@shell/components/SortableTable';
@@ -20,7 +19,6 @@ export default {
     ResourceTable,
     ResourceTabs,
     Loading,
-    MoveModal,
     Tab,
     SortableTable
   },
@@ -264,6 +262,5 @@ export default {
         />
       </Tab>
     </ResourceTabs>
-    <MoveModal />
   </div>
 </template>

package/detail/node.vue

@@ -49,23 +49,25 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](POD);
-
-    if (this.filterByApi) {
-      // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
-      const opt = { // Of type ActionFindPageArgs
-        pagination: new FilterArgs({
-          sort:    [{ field: 'metadata.name', asc: true }],
-          filters: PaginationParamFilter.createSingleField({
-            field: 'spec.nodeName',
-            value: this.value.id,
+    if (this.podSchema) {
+      this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](POD);
+
+      if (this.filterByApi) {
+        // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
+        const opt = { // Of type ActionFindPageArgs
+          pagination: new FilterArgs({
+            sort:    [{ field: 'metadata.name', asc: true }],
+            filters: PaginationParamFilter.createSingleField({
+              field: 'spec.nodeName',
+              value: this.value.id,
+            })
           })
-        })
-      };
+        };
 
-      this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
-    } else {
-      this.$store.dispatch('cluster/findAll', { type: POD });
+        this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
+      } else {
+        this.$store.dispatch('cluster/findAll', { type: POD });
+      }
     }
 
     this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
@@ -97,6 +99,7 @@ export default {
         VALUE,
         EFFECT
       ],
+      podSchema,
       podTableHeaders: this.$store.getters['type-map/headersFor'](podSchema),
       NODE_METRICS_DETAIL_URL,
       NODE_METRICS_SUMMARY_URL,
@@ -241,6 +244,7 @@ export default {
       @update:value="$emit('input', $event)"
     >
       <Tab
+        v-if="podSchema"
         name="pods"
         :label="t('node.detail.tab.pods')"
         :weight="4"
@@ -266,7 +270,7 @@ export default {
             :detail-url="NODE_METRICS_DETAIL_URL"
             :summary-url="NODE_METRICS_SUMMARY_URL"
             :vars="graphVars"
-            graph-height="825px"
+            graph-height="875px"
           />
         </template>
       </Tab>

package/detail/pod.vue

@@ -231,7 +231,7 @@ export default {
           :detail-url="POD_METRICS_DETAIL_URL"
           :summary-url="POD_METRICS_SUMMARY_URL"
           :vars="graphVars"
-          graph-height="550px"
+          graph-height="600px"
         />
       </template>
     </Tab>
@@ -247,7 +247,7 @@ export default {
           :detail-url="POD_PROJECT_METRICS_DETAIL_URL"
           :summary-url="POD_PROJECT_METRICS_SUMMARY_URL"
           :vars="graphVars"
-          graph-height="550px"
+          graph-height="600px"
         />
       </template>
     </Tab>