From 0c236fd7015ddd90a11ba6b626ef1b7ec2185c1d Mon Sep 17 00:00:00 2001 From: gillespi314 <73313222+gillespi314@users.noreply.github.com> Date: Fri, 28 May 2021 16:57:04 -0500 Subject: [PATCH] Ship v1 of standard query library (#898) * Implement detail page for standard query lib * Add alt text for image * Replace id with css class * Implement query-libary page for fleetdm.com * Remove console.log * Implement client-side search for query library * Add responsive breakppoints * Fix input tag --- website/assets/js/pages/query-library.page.js | 40 +++++++++++++++-- .../assets/styles/pages/query-library.less | 17 ++++--- website/views/pages/query-detail.ejs | 2 +- website/views/pages/query-library.ejs | 45 +++++++++++-------- 4 files changed, 73 insertions(+), 31 deletions(-) diff --git a/website/assets/js/pages/query-library.page.js b/website/assets/js/pages/query-library.page.js index 979d448d85..3ffb4df8b3 100644 --- a/website/assets/js/pages/query-library.page.js +++ b/website/assets/js/pages/query-library.page.js @@ -3,6 +3,9 @@ parasails.registerPage('query-library', { // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { + inputTextValue: '', + inputTimers: {}, + searchString: '', // The user input string to be searched against the query library selectedPurpose: 'all', // Initially set to all, the user may select a different option to filter queries by purpose (e.g., "all queries", "information", "detection") selectedPlatform: 'all', // Initially set to all, the user may select a different option to filter queries by platform (e.g., "all platforms", "macOS", "Windows", "Linux") }, @@ -12,6 +15,14 @@ parasails.registerPage('query-library', { return _.filter(this.queries, (query) => this.isIncluded(query.platforms, this.selectedPlatform) && this.isIncluded(query.purpose, this.selectedPurpose)); }, + searchResults: function () { + return this.search(this.filteredQueries, this.searchString); + }, + + queriesList: function () { + return this.searchResults; + } + }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ @@ -28,10 +39,6 @@ parasails.registerPage('query-library', { // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ methods: { - //… - clickCard: function (querySlug) { - window.location = '/sandbox/queries/' + querySlug.toLowerCase(); // TODO remove sandbox from path before deploy to production - }, isIncluded: function (queryProperty, selectedOption) { if (selectedOption.startsWith('all') || selectedOption === '') { @@ -43,6 +50,31 @@ parasails.registerPage('query-library', { return _.isString(queryProperty) && queryProperty.toLowerCase().includes(selectedOption.toLowerCase()); }, + search: function (library, searchString) { + const searchTerms = _.isString(searchString) ? searchString.toLowerCase().split(' ') : []; + return library.filter((item) => { + const description = _.isString(item.description) ? item.description.toLowerCase() : ''; + return _.some(searchTerms, (term) => description.includes(term)); + }); + }, + + setSearchString: function () { + this.searchString = this.inputTextValue; + }, + + delayInput: function(callback, ms, label) { + let inputTimers = this.inputTimers; + return function () { + label = label || 'defaultTimer'; + _.has(inputTimers, label) ? clearTimeout(inputTimers[label]) : 0; + inputTimers[label] = setTimeout(callback, ms); + }; + }, + + clickCard: function (querySlug) { + window.location = '/sandbox/queries/' + querySlug.toLowerCase(); // TODO remove sandbox from path before deploy to production + }, + } }); diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less index 4aee1b0e23..b503c60ef3 100644 --- a/website/assets/styles/pages/query-library.less +++ b/website/assets/styles/pages/query-library.less @@ -27,6 +27,10 @@ border: none; } + input { + max-width: 176px; + } + .filter-and-search-bar { margin-left: 30px; margin-right: 30px; @@ -42,7 +46,8 @@ } .row { - min-height: 70px;; + min-height: 70px; + align-items: center; } .card.results { @@ -51,13 +56,11 @@ border-radius: 8px; border-bottom: 1px solid; border-color: #E2E4EA; - ; - - } - - .card.results:hover { - background-color: #F1F0FF; + &:hover { + background-color: #F1F0FF; + cursor: pointer; + } } .card.call-to-action { diff --git a/website/views/pages/query-detail.ejs b/website/views/pages/query-detail.ejs index 7af7a97cd0..ce7057c84e 100644 --- a/website/views/pages/query-detail.ejs +++ b/website/views/pages/query-detail.ejs @@ -21,7 +21,7 @@ -
+
Platforms
diff --git a/website/views/pages/query-library.ejs b/website/views/pages/query-library.ejs index 24c30c60f5..9a96b8651e 100644 --- a/website/views/pages/query-library.ejs +++ b/website/views/pages/query-library.ejs @@ -5,31 +5,38 @@

Standard query library

Fleet's standard query library includes a growing collection of useful queries for organizations deploying Fleet and osquery.
-
-
- Show - - +
+
+
+ Show + + +
+
+ compatible with + + +
-
- compatible with - - +
+
+ +
-
+