ui: cache derived secrets views

apps/ui/js/secrets.js

@@ -3,6 +3,11 @@ function initSecretsPage() {
     workspaceId: null,
     secrets: [],
     profiles: [],
+    derived: {
+      activeSecretCount: 0,
+      secretsById: {},
+      usageBySecret: {},
+    },
     search: '',
     loading: false,
     error: '',
@@ -101,7 +106,7 @@ function initSecretsPage() {
     return secret ? secret.name : secretId;
   }
 
-  function usageBySecret() {
+  function buildUsageBySecret() {
     var usage = {};
     state.profiles.forEach(function (profile) {
       secretIdsForProfile(profile).forEach(function (secretId) {
@@ -113,6 +118,24 @@ function initSecretsPage() {
     return usage;
   }
 
+  function recomputeDerivedState() {
+    var secretsById = {};
+    var activeSecretCount = 0;
+
+    state.secrets.forEach(function (secret) {
+      secretsById[secret.id] = secret;
+      if (secret.status === 'active') {
+        activeSecretCount += 1;
+      }
+    });
+
+    state.derived = {
+      activeSecretCount: activeSecretCount,
+      secretsById: secretsById,
+      usageBySecret: buildUsageBySecret(),
+    };
+  }
+
   function resetModalFields() {
     modalName.value = '';
     modalKind.value = 'token';
@@ -213,15 +236,14 @@ function initSecretsPage() {
   }
 
   function renderSecrets() {
-    var usage = usageBySecret();
+    var usage = state.derived.usageBySecret;
     var query = state.search.toLowerCase();
     var rows = state.secrets.filter(function (secret) {
       return !query || secret.name.toLowerCase().includes(query) || String(secret.kind || '').toLowerCase().includes(query);
     });
 
-    var active = state.secrets.filter(function (secret) { return secret.status === 'active'; }).length;
     summary.textContent = tfKey('secrets.active.subtitle', {
-      active: active,
+      active: state.derived.activeSecretCount,
       total: state.secrets.length,
     });
 
@@ -321,11 +343,8 @@ function initSecretsPage() {
   }
 
   function renderProfiles() {
-    var usage = usageBySecret();
-    var secretsById = {};
-    state.secrets.forEach(function (secret) {
-      secretsById[secret.id] = secret;
-    });
+    var usage = state.derived.usageBySecret;
+    var secretsById = state.derived.secretsById;
 
     profilesSummary.textContent = window.tPlural(
       'secrets.profiles.subtitle_count',
@@ -444,6 +463,9 @@ function initSecretsPage() {
     renderProfiles();
 
     if (!state.workspaceId) {
+      state.secrets = [];
+      state.profiles = [];
+      recomputeDerivedState();
       state.loading = false;
       state.error = tKey('secrets.error.workspace');
       renderSecrets();
@@ -458,10 +480,12 @@ function initSecretsPage() {
       ]);
       state.secrets = (results[0] && results[0].items) || [];
       state.profiles = (results[1] && results[1].items) || [];
+      recomputeDerivedState();
     } catch (error) {
       state.error = error.message || tKey('secrets.error.load');
       state.secrets = [];
       state.profiles = [];
+      recomputeDerivedState();
     } finally {
       state.loading = false;
       renderSecrets();