Lazy Load Secrets (#47)

Author: jcrowthe

app/elements/search-page.html

@@ -61,22 +61,45 @@
  font-size: 16px;
  font-weight: bold;
  }
+ paper-button {
+ text-transform: none;
+ }
+ paper-button.accent {
+ background-color: var(--accent-color);
+ color: white;
+ }
+ paper-button[disabled] {
+ color: #a7a9ab !important;
+ background: transparent;
+ border: 2px solid #a7a9ab !important;
+ font-weight: 700
+ }
  a {
  text-decoration: none;
-color: black;
+ color: black;
  }
  </style>
 
 <template>
  <div id="list">
- <div style="float: right">
+ <div style="float: right; padding-top: 14px;">
  <paper-checkbox checked="{{fuzzy}}" on-tap="_showResults">
  Fuzzy Search
  <paper-tooltip position="top" animation-delay="0" style="width: 175px;">Approximate string matching. <br />Ex: "ysph" would match "symphony"</paper-tooltip>
  </paper-checkbox>
  </div>
+ <div style="float: left; padding-top: 9px;">
+ <h2 style="margin-top: 0px;">Secrets</h2>
+ </div>
+ <div style="float: left; padding-left: 20px" class="vertical">
+ <paper-button raised class="accent" on-tap="_indexAllSecrets" disabled="{{indexAllSecrets}}">
+ <iron-icon icon="file-download" style="padding-right: 7px;"></iron-icon>
+ Index all secrets
+ <paper-tooltip position="top" animation-delay="0" style="width: 300px;">Currently only searching secrets that have been viewed. <br />Click to search all accessible secrets</paper-tooltip>
+ </paper-button>
+ </div>
+ <div style="height: 60px;"></div>
 
- <h2 style="margin-top: 0px;">Secrets</h2>
  <template is="dom-repeat" items="[[results]]" filter="_filterFolders">
  <a href="secret/[[item.location]]">
  <div class="pad">
@@ -95,45 +118,54 @@ <h2 style="margin-top: 0px;">Secrets</h2>
 is: 'search-page',
 properties: {
 secrets: Array,
- query: {
- type: String,
- notify: true,
- observer: '_showResults'
- },
- results: {
- type: Array,
- value: []
- },
- fuzzy: {
- type: Boolean,
- value: true
- }
+ query: {
+ type: String,
+ notify: true,
+ observer: '_showResults'
+ },
+ results: {
+ type: Array,
+ value: []
+ },
+ fuzzy: {
+ type: Boolean,
+ value: true
+ },
+ indexAllSecrets: {
+ type: Boolean,
+ notify: true
+ }
 },
- _showResults: function() {
- if (this.fuzzy) {
- var options = {
- shouldSort: true,
- threshold: 0.6,
- location: 0,
- distance: 100,
- maxPatternLength: 100,
- minMatchCharLength: 1,
- tokenize: true,
- matchAllTokens: true,
- keys: [ "location" ]
- };
- var fuse = new Fuse(this.secrets, options); // "list" is the item array
- this.results = fuse.search(this.query.replace(' ', '_'));
- } else {
- this.results = [];
- for (var i = 0; i < this.secrets.length; i++) {
- if (this.secrets[i].location.includes(this.query.toLowerCase().replace(' ', '_'))) this.push('results', this.secrets[i]);
- }
- }
- },
- _filterFolders: function(item) {
- return item.type != 'folder';
- },
+ _indexAllSecrets: function() {
+ this.indexAllSecrets = true;
+ },
+ _showResults: function() {
+ this.debounce('newcharacter', function() {
+ if (this.fuzzy) {
+ var options = {
+ shouldSort: true,
+ threshold: 0.6,
+ location: 0,
+ distance: 100,
+ maxPatternLength: 100,
+ minMatchCharLength: 1,
+ tokenize: true,
+ matchAllTokens: true,
+ keys: [ "location" ]
+ };
+ var fuse = new Fuse(this.secrets, options); // "list" is the item array
+ this.results = fuse.search(this.query.replace(' ', '_'));
+ } else {
+ this.results = [];
+ for (var i = 0; i < this.secrets.length; i++) {
+ if (this.secrets[i].location.includes(this.query.toLowerCase().replace(' ', '_'))) this.push('results', this.secrets[i]);
+ }
+ }
+ }, 600);
+ },
+ _filterFolders: function(item) {
+ return item.type != 'folder';
+ },
 });
 })();
 </script>

app/elements/secrets-init.html

@@ -52,6 +52,26 @@
 value: [],
 notify: true
 },
+indexAllSecrets: {
+type: Boolean,
+value: false,
+observer: '_watchIndexAllSecrets',
+notify: true
+},
+deferredRequests: {
+type: Array,
+value: [],
+notify: true
+},
+completedRequests: {
+type: Array,
+value: [],
+notify: true
+},
+folderRoute: {
+type: String,
+observer: '_watchFolderRoute'
+},
 policyRequests: {
 type: Array,
 value: []
@@ -79,6 +99,9 @@
 // Todo: Check for list permissions on folder before executing
 // Execute list on a folder
 if (!key.startsWith('sys') && !key.startsWith('cubbyhole')) {
+// Track completed requests
+this.push('completedRequests', key);
+
 this.listSecretsURL = app.url + 'v1/' + key.replace('*', '') + '?list=true';
 this.push('listRequests', this.$.listSecrets.generateRequest());
 }
@@ -88,7 +111,12 @@
 var base = e.detail.url.replace(app.url + 'v1/', '').replace('?list=true','');
 var data = e.detail.response.data.keys;
 for (var i = 0; i < data.length; i++) {
-if (data[i].endsWith('/')) this._listSecrets(base + data[i]);
+if (data[i].endsWith('/')) {
+if (base.split('/').length <= 3) this._listSecrets(base + data[i]);
+else if (this.indexAllSecrets) this._listSecrets(base + data[i]);
+else if (!this.completedRequests.includes(base + data[i])) this.push('deferredRequests', base + data[i])
+else this._listSecrets(base + data[i]);
+} 
 else this._addSecret(base + data[i]);
 }
 // Add containing folder to secrets array
@@ -98,6 +126,38 @@
 _listError: function(e) {
 // No access to list on this folder
 },
+_watchIndexAllSecrets: function() {
+if (this.indexAllSecrets) {
+this.loading = true;
+this.deferredRequests.forEach(function(route) {
+this._listSecrets(route);
+}, this);
+this.deferredRequests = [];
+}
+},
+_watchFolderRoute: function() {
+var path = this.folderRoute;
+var parts = this.folderRoute.split('/');
+// Lookup the backend to check for v2 secret engine
+for (var i in this.backends) {
+if (this.backends[i].name == parts[0]) {
+// If v2 secret backend, replace 'data' with 'metadata'
+if (this.backends[i].type === '2') path = path.replace(this.backends[i].name + '/data', this.backends[i].name + '/metadata');
+break;
+}
+}
+var matches = this.deferredRequests.filter(function(value) {
+if (value.includes(path + '/')) value = value.replace(path + '/', '');
+return value.split('/').length == 2
+});
+matches.forEach(function(route) {
+this._listSecrets(route);
+this.loading = true;
+var index = this.deferredRequests.indexOf(route);
+if (index > -1) this.deferredRequests.splice(index, 1);
+}, this);
+// if (this.folderRoute in this.deferredRequests) this._listSecrets(this.folderRoute);
+},
 _addSecret: function(location) {
 var parts = location.split('/');
 if (!['sys', 'auth', 'cubbyhole'].includes(parts[0])) {
@@ -294,6 +354,9 @@
 this.policyRequests = [];
 this.listRequests = [];
 this.secrets = [];
+this.deferredRequests = [];
+this.completedRequests = [];
+this.indexAllSecrets = false;
 }
  }
 });

app/index.html

@@ -33,7 +33,7 @@
 <div id="blocker"></div> <!-- blocker: an element to obscure background-loading content at load time. -->
 <login-form status="{{status}}" username="{{u}}" url="{{url}}" header="{{header}}" login-response="{{loginResponse}}" loading="{{loading}}" backends="{{backends}}"></login-form>
 <login-status id="login-status" status="{{status}}" url="{{url}}" header="{{header}}"></login-status>
-<secrets-init status="{{status}}" header="{{header}}" login-response="{{loginResponse}}" secrets="{{secrets}}" access="{{access}}" loading="{{loading}}" backends="{{backends}}"></secrets-init>
+<secrets-init status="{{status}}" header="{{header}}" deferred-requests="{{deferredRequests}}" completed-requests="{{completedRequests}}" folder-route="{{folderRoute}}" login-response="{{loginResponse}}" secrets="{{secrets}}" access="{{access}}" loading="{{loading}}" backends="{{backends}}" index-all-secrets="{{indexAllSecrets}}"></secrets-init>
 
 <paper-drawer-panel id="paperDrawerPanel" drawer-width="{{drawerWidth}}">
 <!-- Drawer Area -->
@@ -123,7 +123,7 @@
 </section>
 
 <section data-route="search" style="height: 100%">
-<search-page secrets="{{secrets}}" query="{{query}}"></search-page>
+<search-page secrets="{{secrets}}" query="{{query}}" index-all-secrets="{{indexAllSecrets}}"></search-page>
 </section>
 </iron-pages>
 </div>