Website: Update order of platform filters for Windows users (#26340)

Changes:
- Updated the platform filters on the policy-library, query-library,
vital-details, and osquery-table-details pages to list Windows first for
users who visit the website on Windows.
- Updated the default platform filter on the policy-library,
query-library, vital-details to be windows for Users who visit the
website on Windows.
This commit is contained in:
Eric 2025-02-13 17:29:14 -06:00 committed by GitHub
parent c582f74fdd
commit 470766c9ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 35 additions and 14 deletions

View file

@ -40,6 +40,8 @@ parasails.registerPage('osquery-table-details', {
// otherwise, default the filter to be the first supported platform of the currently viewed table.
this.selectedPlatform = this.tableToDisplay.platforms[0] === 'darwin' ? 'apple' : this.tableToDisplay.platforms[0];
}
// Note: we do not personalize the selected platform on this page based on the user's
// current OS because the default table that the /tables url redirects to does not support windows.
},
mounted: async function() {

View file

@ -13,7 +13,9 @@ parasails.registerPage('policy-library', {
//…
},
mounted: async function () {
//…
if(bowser.windows){
this.selectedPlatform = 'windows';
}
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

View file

@ -13,7 +13,9 @@ parasails.registerPage('query-library', {
//…
},
mounted: async function () {
//…
if(bowser.windows){
this.selectedPlatform = 'windows';
}
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗

View file

@ -20,6 +20,8 @@ parasails.registerPage('vital-details', {
// All links to vitals in the on-page navigation have the currently selected filter appended to them, this lets us persist the user's filter when they navigate to a new page.
if(['#apple','#linux','#windows','#chrome'].includes(window.location.hash)){
this.selectedPlatform = window.location.hash.split('#')[1];
} else if(bowser.windows){
this.selectedPlatform = 'windows';
}
let columnNamesForThisQuery = [];
let tableNamesForThisQuery = [];

View file

@ -135,7 +135,12 @@
margin-bottom: 16px;
}
}
[purpose='platform-filters'] {
&.detected-windows {
flex-direction: row-reverse;
}
flex-direction: row;
border-bottom: 1px solid #E2E4EA;
margin-bottom: 48px;
[purpose='platform-filter'] {

View file

@ -142,6 +142,10 @@
}
}
[purpose='platform-filters'] {
&.detected-windows {
flex-direction: row-reverse;
}
flex-direction: row;
border-bottom: 1px solid #E2E4EA;
margin-bottom: 48px;
[purpose='platform-filter'] {

View file

@ -216,6 +216,10 @@
}
}
[purpose='platform-filters'] {
&.detected-windows {
flex-direction: row-reverse;
}
flex-direction: row;
border-bottom: 1px solid #E2E4EA;
margin-bottom: 32px;
padding-top: 8px;

View file

@ -6,26 +6,26 @@
<h2>Tables</h2>
<p>Fleet uses osquery tables to query operating system, hardware, and software data. Each table provides specific data for analysis and filtering.</p>
</div>
<div purpose="platform-filters" class="d-flex flex-row justify-content-center">
<div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
<div purpose="platform-filters" class="d-flex justify-content-center" >
<div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
<p class="d-flex align-items-center">
<img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
<span class="d-none d-md-inline">Apple</span>
</p>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
<div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
<p class="d-flex align-items-center">
<img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
<span class="d-none d-md-inline">Linux</span>
</p>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
<div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
<p class="d-flex align-items-center">
<img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
<span class="d-none d-md-inline">Windows</span>
</p>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
<div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']+' '+[bowser.windows ? 'order-4' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
<p class="d-flex align-items-center">
<img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
<span class="d-none d-md-inline">ChromeOS</span>

View file

@ -10,7 +10,7 @@
<p>Contributions welcome <a target="_blank" href="https://github.com/fleetdm/fleet/blob/main/docs/01-Using-Fleet/standard-query-library/standard-query-library.yml">over on GitHub.</a></p>
</div>
</div>
<div purpose="platform-filters" class="d-flex flex-row justify-content-center">
<div purpose="platform-filters" class="d-flex justify-content-center" :class="[bowser.windows ? 'detected-windows' : '']">
<div purpose="platform-filter" :class="[selectedPlatform === 'macos' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('macos')">
<p class="d-flex align-items-center">
<img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">

View file

@ -9,7 +9,7 @@
<p>A collection of optional queries you can run anytime. Contributions welcome <a target="_blank" href="https://github.com/fleetdm/fleet/edit/main/docs/queries.yml">over on GitHub.</a></p>
</div>
</div>
<div purpose="platform-filters" class="d-flex flex-row justify-content-center">
<div purpose="platform-filters" :class="[bowser.windows ? 'detected-windows' : '']" class="d-flex justify-content-center">
<div purpose="platform-filter" :class="[selectedPlatform === 'macos' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('macos')">
<p class="d-flex align-items-center">
<img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">

View file

@ -8,26 +8,26 @@
<p>Fleets built-in queries for collecting and storing important device information.</p>
</div>
</div>
<div purpose="platform-filters" class="d-flex flex-row justify-content-center">
<div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
<div purpose="platform-filters" class="d-flex justify-content-center" >
<div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
<p class="d-flex align-items-center">
<img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
<span class="d-none d-md-inline">Apple</span>
</p>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
<div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
<p class="d-flex align-items-center">
<img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
<span class="d-none d-md-inline">Linux</span>
</p>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
<div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
<p class="d-flex align-items-center">
<img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
<span class="d-none d-md-inline">Windows</span>
</p>
</div>
<div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
<div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']+' '+[bowser.windows ? 'order-4' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
<p class="d-flex align-items-center">
<img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
<span class="d-none d-md-inline">ChromeOS</span>