Implement query detail page for standard query library (#887)

* Implement detail page for standard query lib

* Add alt text for image

* Replace id with css class

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

@@ -1,5 +1,35 @@
 #query-detail {
 
-  // …
+  h5 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  h6 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  a {
+    font-size: 18px;
+    color: @core-vibrant-blue;
+  }
+
+  .query-tip {
+    background-color: @ui-off-white;
+
+    .lightbulb {
+      height: 24px;
+      width: auto;
+      margin-left: 4px;
+      margin-right: 20px;
+    }
+
+  }
+
+  .query-sidebar {
+    border-color: #E2E4EA;
+
+  }
 
 }

website/views/pages/query-detail.ejs

@@ -2,38 +2,48 @@
 
   <div class="d-flex justify-content-center">
     <div class="col-6 my-5">
-      <h1>TODO: Implement this part.</h1>
-      <p>(See also <em>assets/styles/pages/query-detail.less</em>, <em>assets/js/pages/query-detail.page.js</em>, and <em>api/controllers/view-query-detail.js</em>.)</p>
-      <h2>sql:</h2>
-      <code>{{query.query}}</code>
-      <% /*
-      e.g. here's what all is available:
-      {
-        "name": "Get Docker images on a system",
-        "platforms": "macOS, Linux",
-        "description": "Docker images information, can be used on normal system or a kubenode.",
-        "query": "SELECT * FROM docker_images;",
-        "purpose": "Informational",
-        "remediation": "N/A",
-        "contributors": "anelshaer,gillespi314"
-      },
-      */ %>
-      <h2>here's what all's available</h2>
-      <code>{{query}}</code>
-
-      <!-- note: only show remediation when v-if="query.purpose === 'Detection"-->
-
+      <h2 class="mb-3">{{query.name}}</h2>
+      <h6 class="font-weight-light pb-3">{{query.description}}</h6>
+      <div v-if="!!query.tip">
+        <div class="container query-tip d-flex align-items-center border-left border-primary p-4 my-5">        
+          <img alt="lightbulb" class="lightbulb" src="/images/lightbulb-blue-24x24@2x.png"/><p class="d-flex m-0">{{query.tip}}</p>
+        </div>
+      </div>
+      <h3 class="py-3">Query</h3>   
+      <code class="pb-3">{{query.query}}</code>
+      <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">
+            {{item}}
+          </li>
+        </ul>
+      </div>
     </div>
-    <div class="col-2 mx-5 my-5">
-      <h4 permalink="support">Platforms</h4>
-      <p><i class="fa fa-apple fa-lg mr-1" alt="Mac"></i>
-        <i class="fa fa-windows fa-lg mr-1" alt="Windows"></i>
-        <i class="fa fa-linux fa-lg mr" alt="Linux"></i>
-      </p>
-      <h4 permalink="purpose">Purpose</h4>
-      <p>Informational</p>
-      <h4 permalink="remediation">Contribute</h4>
-      <a target="_blank" :href="'https://github.com/fleetdm/fleet/edit/master/'+queryLibraryYmlRepoPath">Edit this page</a>
+
+    <div class="col-3 mx-5 my-5">
+      <!-- TODO: refactor as page script to type-check and normalize"-->
+      <div class="query-sidebar border-bottom mb-3">
+        <h5 permalink="support">Platforms</h5>
+        <p>
+          <span v-if="query.platforms.includes('macOS')"><i class="fa fa-apple fa-lg mr-3" alt="Mac"></i></span>
+          <span v-if="query.platforms.includes('Windows')"><i class="fa fa-windows fa-lg mr-3" alt="Windows"></i></span>
+          <span v-if="query.platforms.includes('Linux')"><i class="fa fa-linux fa-lg mr" alt="Linux"></i></span>
+        </p>
+      </div>
+
+      <div class="query-sidebar border-bottom mb-3">
+        <h5 permalink="purpose">Purpose</h5>
+        <p>{{query.purpose}}</p>
+      </div>
+      
+      <div class="query-sidebar border-bottom mb-3" v-if="query.contributors && query.contributors.length">
+        <h5 permalink="contributors">Contributors</h5>
+        <!-- TODO: display github avatars"-->
+        <p>{{query.contributors}}</p>
+      </div>
+      <h5 permalink="contribute">Contribute to this page</h5>
+      <a target="_blank" :href="'https://github.com/fleetdm/fleet/edit/master/'+queryLibraryYmlRepoPath">View source</a>
     </div>
   </div>