Website: Add support for ChromeOS to query library and osquery schema pages. (#12013)
Closes https://github.com/fleetdm/fleet/issues/11837 Changes: - Changed the OS icons used on tables/ and queries/ pages. - updated `get-extended-osquery-schema` to change the `platform` value of osquery table columns to be the normalized platform name (`chromeos` » `ChromeOS`) - updated `build-static-content` to support three `platforms` values when adding platform compatibility notes to generated Markdown tables (e.g., "**Only available on macOS, Linux, and Windows.**" ) - Added dropdown options and icons for ChromeOS on osquery schema table pages, query details pages, and the query library.
This commit is contained in:
Eric
@@ -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));
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 494 B |
@@ -11,6 +11,7 @@ parasails.registerPage('osquery-table-details', {
|
||||
'darwin': 'macOS',
|
||||
'linux': 'Linux',
|
||||
'windows': 'Windows',
|
||||
'chromeos': 'ChromeOS',
|
||||
'all': 'All platforms'
|
||||
},
|
||||
},
|
||||
|
||||
+11
-4
@@ -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';
|
||||
|
||||
+6
-3
@@ -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>
|
||||
|
||||
Vendored
+4
-3
@@ -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>
|
||||
|
||||
+9
-4
@@ -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,7 +63,7 @@
|
||||
<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>
|
||||
@@ -70,6 +71,7 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user