Website: Add support for ChromeOS to query library and osquery schema pages.

website/api/helpers/get-extended-osquery-schema.js

@@ -149,6 +149,8 @@ module.exports = {
                 for(let platform of columnHasFleetOverrides.platforms) {
                   if(platform === 'darwin') {
                     platformWithNormalizedNames.push('macOS');
+                  } else if(platform === 'chromeos') {
+                    platformWithNormalizedNames.push('ChromeOS');
                   } else {
                     platformWithNormalizedNames.push(_.capitalize(platform));
                   }

website/assets/js/pages/osquery-table-details.page.js

@@ -11,6 +11,7 @@ parasails.registerPage('osquery-table-details', {
       'darwin': 'macOS',
       'linux': 'Linux',
       'windows': 'Windows',
+      'chromeos': 'ChromeOS',
       'all': 'All platforms'
     },
   },

website/scripts/build-static-content.js

@@ -581,14 +581,21 @@ module.exports = {
 
                   let platformString = '<br> **Only available on ';// start building a string to add to the column's description
 
-                  if(column.platforms.length === 2) { // Because there are only three options for platform, we can safely assume that there will be at most 2 platforms, so we'll just handle this one of two ways
-                    // If there are two values in the platforms array, we'll add the capitalized version of each to the columns description
-                    platformString += column.platforms[0]+' and '+ column.platforms[1];
+                  if(column.platforms.length > 3) {// FUTURE: add support for more than three platform values in columns.
+                    throw new Error('Support for more than three platforms has not been implemented yet.');
+                  }
+
+                  if(column.platforms.length === 3) { // Because there are only four options for platform, we can safely assume that there will be at most 3 platforms, so we'll just handle this one of three ways
+                    // If there are three, we'll add a string with an oxford comma. e.g., "On macOS, Windows, and Linux"
+                    platformString += `${column.platforms[0]}, ${column.platforms[1]}, and ${column.platforms[2]}`;
+                  } else if(column.platforms.length === 2) {
+                    // If there are two values in the platforms array, it will be formated as "[Platform 1] and [Platform 2]"
+                    platformString += `${column.platforms[0]} and ${column.platforms[1]}`;
                   } else {
                     // Otherwise, there is only one value in the platform array and we'll add that value to the column's description
                     platformString += column.platforms[0];
                   }
-                  platformString += ' devices.** ';
+                  platformString += '** ';
                   columnDescriptionForTable += platformString; // Add the platform string to the column's description.
                 }
                 tableMdString += ' | '+column.name+' | '+ column.type +' | '+columnDescriptionForTable+'|\n';

website/views/pages/osquery-table-details.ejs

@@ -17,6 +17,8 @@
               @click="clickFilterByPlatform('linux')">Linux</div>
             <div class="dropdown-item d-block"
               @click="clickFilterByPlatform('darwin')">macOS</div>
+            <div class="dropdown-item d-block"
+              @click="clickFilterByPlatform('chromeos')">ChromeOS</div>
           </div>
         </div>
         <div class="d-flex">
@@ -68,9 +70,10 @@
         <div purpose="table-container" class="d-flex flex-column pl-xl-5 pl-lg-3 w-100">
           <div purpose="schema-table">
             <div purpose="platform-logos" class="d-flex flex-row align-items-center">
-              <img class="mx-2" style="height: 24px" src="/images/os-linux-black-32x36@2x.png" alt="Linux logo" v-if="_.includes(tableToDisplay.platforms, 'linux')">
-              <img class="mx-2" style="height: 24px" src="/images/os-windows-black-38x36@2x.png" alt="Windows logo" v-if="_.includes(tableToDisplay.platforms, 'windows')">
-              <img class="mx-2" style="height: 25px" src="/images/os-macos-black-31x35@2x.png" alt="macOS logo" v-if="_.includes(tableToDisplay.platforms, 'darwin')">
+              <img class="mx-2" style="height: 25px" src="/images/os-macos-dark-24x24@2x.png" alt="macOS logo" v-if="_.includes(tableToDisplay.platforms, 'darwin')">
+              <img class="mx-2" style="height: 24px" src="/images/os-windows-dark-24x24@2x.png" alt="Windows logo" v-if="_.includes(tableToDisplay.platforms, 'windows')">
+              <img class="mx-2" style="height: 24px" src="/images/os-linux-dark-24x24@2x.png" alt="Linux logo" v-if="_.includes(tableToDisplay.platforms, 'linux')">
+              <img class="mx-2" style="height: 25px" src="/images/os-chromeos-dark-24x24@2x.png" alt="macOS logo" v-if="_.includes(tableToDisplay.platforms, 'chromeos')">
             </div>
             <%- partial(path.relative(path.dirname(__filename), path.resolve( sails.config.appPath, path.join(sails.config.builtStaticContent.compiledPagePartialsAppPath, tableToDisplay.htmlId)))) %>
           </div>

website/views/pages/query-detail.ejs

@@ -34,9 +34,10 @@
             <h5 class="pb-md-2 m-0">Platforms</h5>
             <p class="pb-1" v-if="!query.platform || !query.platform.length">--</p>
             <div purpose="platforms" class="d-flex align-items-center align-items-md-start pb-1" v-else>
-              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-macos-black-24x24@2x.png" alt="macOS" v-if="query.platform.includes('darwin')"/>
-              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-windows-black-24x24@2x.png" alt="Windows" v-if="query.platform.includes('windows')"/>
-              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-linux-black-24x24@2x.png" alt="Linux" v-if="query.platform.includes('linux')"/>
+              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-macos-dark-24x24@2x.png" alt="macOS" v-if="query.platform.includes('darwin')"/>
+              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-windows-dark-24x24@2x.png" alt="Windows" v-if="query.platform.includes('windows')"/>
+              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-linux-dark-24x24@2x.png" alt="Linux" v-if="query.platform.includes('linux')"/>
+              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" v-if="query.platform.includes('chromeos')"/>
             </div>
           </div>
         </div>

website/views/pages/query-library.ejs

@@ -33,6 +33,7 @@
                 <option value="darwin">macOS</option>
                 <option value="windows">Windows</option>
                 <option value="linux">Linux</option>
+                <option value="chromeos">ChromeOS</option>
               </select>
             </div>
           </div>
@@ -62,14 +63,15 @@
                 <p class="d-inline-flex flex-wrap px-2 mb-0">compatible with</p>
                 <button class="btn btn-secondary btn-sm dropdown-toggle p-0" type="button"
                   id="dropdownMenuSelectPlatform" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  {{selectedPlatform === 'windows' ? 'Windows' : selectedPlatform === 'darwin' ? 'macOS' : selectedPlatform === 'linux' ? 'Linux' : selectedPlatform}}
+                  {{selectedPlatform === 'windows' ? 'Windows' : selectedPlatform === 'darwin' ? 'macOS' : selectedPlatform === 'linux' ? 'Linux' : selectedPlatform === 'chromeos' ? 'ChromeOS' : selectedPlatform}}
                 </button>
                 <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuSelectPlatform">
                   <button class="dropdown-item" type="button" @click="clickSelectPlatform('all platforms')">all platforms</button>
                   <button class="dropdown-item" type="button" @click="clickSelectPlatform('darwin')">macOS</button>
                   <button class="dropdown-item" type="button"
                     @click="clickSelectPlatform('windows')">Windows</button>
                   <button class="dropdown-item" type="button" @click="clickSelectPlatform('linux')">Linux</button>
+                  <button class="dropdown-item" type="button" @click="clickSelectPlatform('chromeos')">ChromeOS</button>
                 </div>
               </div>
             </div>
@@ -120,14 +122,17 @@
                   <div class="col-sm-3 col-md-auto align-self-start">
                     <div class="text-sm-right m-0">
                       <img class="d-inline-flex mr-1 mr-sm-0 ml-sm-1 ml-md-2 logo"
-                        src="/images/os-macos-black-16x16@2x.png" alt="macOS"
+                        src="/images/os-macos-dark-24x24@2x.png" alt="macOS"
                         v-if="query.platform.includes('darwin')" />
                       <img class="d-inline-flex mr-1 mr-sm-0 ml-sm-1 ml-md-2 logo"
-                        src="/images/os-windows-black-16x16@2x.png" alt="Windows"
+                        src="/images/os-windows-dark-24x24@2x.png" alt="Windows"
                         v-if="query.platform.includes('windows')" />
                       <img class="d-inline-flex mr-1 mr-ms-0 ml-sm-1 ml-md-2 logo"
-                        src="/images/os-linux-black-16x16@2x.png" alt="Linux"
+                        src="/images/os-linux-dark-24x24@2x.png" alt="Linux"
                         v-if="query.platform.includes('linux')" />
+                      <img class="d-inline-flex mr-1 mr-ms-0 ml-sm-1 ml-md-2 logo"
+                        src="/images/os-chromeos-dark-24x24@2x.png" alt="Linux"
+                        v-if="query.platform.includes('chromeos')" />
                     </div>
                   </div>
                 </div>