Implement query-library page for fleetdm.com (#891)

* 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

website/assets/js/pages/query-detail.page.js

@@ -20,6 +20,15 @@ parasails.registerPage('query-detail', {
   //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
   //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
   methods: {
-    //…
+    castRemediationArray: function (remediation) {
+      if (_.isArray(remediation) && remediation.length) {
+        return remediation.filter((item) => _.isString(item) && item.length);
+      }
+      if (_.isString(remediation) && remediation.length) {
+        return [remediation];
+      }
+      return ['N/A'];
+    }
+
   }
 });

website/assets/js/pages/query-library.page.js

@@ -3,7 +3,15 @@ parasails.registerPage('query-library', {
   //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
-    //…
+    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")
+  },
+
+  computed: {
+    filteredQueries: function () {
+      return _.filter(this.queries, (query) => this.isIncluded(query.platforms, this.selectedPlatform) && this.isIncluded(query.purpose, this.selectedPurpose));
+    },
+
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -21,5 +29,20 @@ 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 === '') {
+        return true;
+      }
+      if (_.isArray(queryProperty)) {
+        queryProperty = queryProperty.join(', ');
+      }
+      return _.isString(queryProperty) && queryProperty.toLowerCase().includes(selectedOption.toLowerCase());
+    },
+
   }
+
 });

website/assets/styles/pages/query-library.less

@@ -1,5 +1,76 @@
 #query-library {
 
-  //…
+  h2 {
+    padding: 0px 30px 0px 30px;
+  }
+
+  h5 {
+    font-size: 18px;
+    font-weight: bold;
+    line-height: 25px;
+  }
+
+  h6 {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 30px 0px 30px;
+
+  }
+
+  a {
+    font-size: 18px;
+    color: @core-vibrant-blue;
+  }
+
+  select {
+    color: @core-vibrant-blue;
+    border: none;
+  }
+
+  .filter-and-search-bar {
+    margin-left: 30px;
+    margin-right: 30px;
+  }
+
+  .contributors, .platforms {
+
+    p {
+      font-size: 13px;
+      line-height: 20px;
+    }
+
+  }
+
+  .row {
+    min-height: 70px;;
+  }
+
+  .card.results {
+    box-shadow: none;
+    border: none;
+    border-radius: 8px;
+    border-bottom: 1px solid;
+    border-color: #E2E4EA;
+    ;
+
+  }
+
+  .card.results:hover {
+    background-color: #F1F0FF;
+
+  }
+
+  .card.call-to-action {
+    background-color: @ui-off-white;
+    border-radius: 16px;
+    border-color: @ui-off-white;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+    margin-bottom: 90px;
+
+  }
+
+  .card-body {
+    padding: 30px;
+  }
 
 }

website/views/pages/query-detail.ejs

@@ -14,7 +14,7 @@
       <div v-if="query.purpose === 'Detection' && (query.remediation && query.remediation.length)">
         <h3 class="pt-5 pb-3">Remediation</h3> 
         <ul class="px-4">
-          <li v-for="item of query.remediation">
+          <li v-for="item of castRemediationArray(query.remediation)">
             {{item}}
           </li>
         </ul>

website/views/pages/query-library.ejs

@@ -1,14 +1,68 @@
 <div id="query-library" v-cloak>
 
-  <h1>TODO: Implement this page.</h1>
+  <div class="d-flex justify-content-center">
-  <p>(See also <em>assets/styles/pages/query-library.less</em>, <em>assets/js/pages/query-library.page.js</em>, and <em>api/controllers/view-query-library.js</em>.)</p>
+    <div class="col-8 my-5">
-
+      <h2 class="mb-3">Standard query library</h2>
-  <h2>Queries \o/</h2>
+      <h6 class="font-weight-light pb-3">Fleet's standard query library includes a growing collection of useful queries for organizations deploying Fleet and osquery.</h6>
-  <ul>
+      <div class="filter-and-search-bar container">
-    <li v-for="query of queries">
+        <div class="row">
-      <code>{{query}}</code>
+          <div class="filter-purpose">
-    </li>
+            <span>Show
-  </ul>
+              <select class="mr-1" v-model="selectedPurpose">
+                <option value="all" selected>all queries</option>
+                <option value="information">informational</option>
+                <option value="detection">detection</option>
+              </select>
+            </span>
+          </div>
+          <div class="filter-platform">
+            <span> compatible with
+              <select class="mr-1" v-model="selectedPlatform">
+                <option value="all" selected>all platforms</option>
+                <option value="macOS">macOS</option>
+                <option value="Windows">Windows</option>
+                <option value="Linux">Linux</option>
+              </select>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="results">
+        <div class="category__informational">
+          <div v-for="query of filteredQueries">
+            <div class="card results" @click="clickCard(query.slug)">
+              <div class="card-body">
+                <div class="row justify-content-between align-items-center">
+                  <div class="col-10">
+                    <h5 class="card-title m-0">{{query.name}}</h5>
+                    <h6 class="font-italic mb-1 p-0">{{query.description}}</h6>
+                    <div class="contributors" v-if="query.contributors && query.contributors.length">
+                      <p class="mb-0">contributed by {{query.contributors}}</p>
+                    </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="text-right m-0">
+                      <span v-if="query.platforms.includes('macOS')"><i class="fa fa-apple fa-md ml-1" alt="Mac"></i></span>
+                      <span v-if="query.platforms.includes('Windows')"><i class="fa fa-windows fa-md ml-1" alt="Windows"></i></span>
+                      <span v-if="query.platforms.includes('Linux')"><i class="fa fa-linux fa-md ml-1" alt="Linux"></i></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>    
+    </div>
+  </div>
+  <div class="d-flex justify-content-center">
+    <div class="card call-to-action col-8">
+      <div class="card-body flex-fill">
+          <h3 class="mb-3">Contributors</h3>
+          <p><strong>Want to add your own query?</strong> Please submit a pull request <a href="https://github.com/fleetdm/fleet/tree/master/handbook/queries" >over on GitHub</a>.</p>
+      </div>
+    </div>
+  </div>
 
 </div>
 <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>