Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Website: Update query page view action, vital page styles and platform filters. (#25714)

Browse source 
Changes:
- Updated the modal styles on vitals/ pages
- Updated the platform filter behavior on the vitals page to take users
to a different vital query if the currently viewed vital is not
available on the platform they switch to.
This commit is contained in:
Eric 2025-01-22 21:41:16 -06:00 committed by GitHub
parent 5c0894ce0a
commit 11d9f56b95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 45 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/api/controllers/view-query-detail.js vendored
View file

@ -42,7 +42,7 @@ module.exports = {
let policyWithThisSlug = _.find(sails.config.builtStaticContent.policies, {kind: 'policy', slug: slug});
if(policyWithThisSlug){
// If we foudn a matchign policy, redirect the user.
throw {redirect: `/policies/${policyWithThisSlug.slug}`};
throw {redirectToPolicy: `/policies/${policyWithThisSlug.slug}`};
} else {
throw 'notFound';
}

26
website/assets/js/pages/vital-details.page.js vendored
View file

@ -4,7 +4,7 @@ parasails.registerPage('vital-details', {
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: {
contributors: [],
selectedPlatform: 'macos', // Initially set to 'macos'
selectedPlatform: 'apple', // Initially set to 'macos'
modal: '',
},
@ -17,7 +17,7 @@ parasails.registerPage('vital-details', {
mounted: async function () {
// Set the selected platform from the hash in the user's URL.
// 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(['#macos','#linux','#windows','#chrome'].includes(window.location.hash)){
if(['#apple','#linux','#windows','#chrome'].includes(window.location.hash)){
this.selectedPlatform = window.location.hash.split('#')[1];
}
@ -103,7 +103,27 @@ parasails.registerPage('vital-details', {
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
clickSelectPlatform: function (platform) {
this.selectedPlatform = platform;
let platformToLookFor = platform;
if(platform === 'apple'){
platformToLookFor = 'darwin';
}
let currentVitalAvailableOnNewPlatform = this.thisVital.platform.includes(platformToLookFor);
if(!currentVitalAvailableOnNewPlatform){
if(platformToLookFor === 'chrome'){
this.goto('/vitals/'+this.chromeVitals[0].slug+'#chrome');
} else if(platformToLookFor === 'darwin') {
this.goto('/vitals/'+this.macOsVitals[0].slug+'#macos');
} else if(platformToLookFor === 'linux') {
this.goto('/vitals/'+this.linuxVitals[0].slug+'#linux');
} else if(platformToLookFor === 'windows') {
this.goto('/vitals/'+this.windowsVitals[0].slug+'#windows');
}
} else {
this.selectedPlatform = platform;
}
},
clickOpenTableOfContents: function () {
this.modal = 'table-of-contents';

18
website/assets/styles/pages/vital-details.less vendored
View file

@ -474,12 +474,14 @@
[purpose='modal-dialog'] {
margin-left: 16px;
margin-top: 16px;
margin-bottom: 16px;
[purpose='modal-content'] {
display: flex;
height: calc(~'100vh - 72px');
height: calc(~'100vh - 32px');
margin-top: 0px;
max-width: 366px;
padding: 48px 24px 24px 24px;
padding: 48px 19px 24px 24px;
flex-direction: column;
align-items: flex-start;
// gap: 24px;
@ -492,6 +494,7 @@
[purpose='vital-link'] {
color: #515774;
font-family: Inter;
margin-right: 5px;
font-size: 14px;
line-height: 150%;
width: 100%;
@ -564,6 +567,17 @@
}
}
}
[parasails-component='modal'] {
[purpose='modal-dialog'] {
margin: 16px;
width: 100%;
max-width: calc(~'100% - 32px');
[purpose='modal-content'] {
max-width: 100%;
}
}
}
}

10
website/views/pages/vital-details.ejs vendored
View file

@ -24,7 +24,7 @@
</div> -->
</div>
<div purpose="platform-filters" class="d-flex flex-row 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')">
<div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']" 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>
@ -51,11 +51,11 @@
</div>
<div purpose="vital-details-and-sidebar" class="d-flex flex-md-row flex-column">
<div purpose="table-of-contents" class="d-md-flex d-none">
<div v-if="selectedPlatform === 'macos'">
<div v-if="selectedPlatform === 'apple'">
<% // macOS policies (server-side-rendered)
for(let vital of macOsVitals) {
%>
<a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#macos"><%- vital.name %></a>
<a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#apple"><%- vital.name %></a>
<% } %>
</div>
<div v-else-if="selectedPlatform === 'linux'">
@ -112,11 +112,11 @@
</div>
<modal purpose="table-of-contents-modal" v-if="modal === 'table-of-contents'" @close="closeModal()">
<p purpose="mobile-table-of-contents-header"><strong>Vitals</strong></p>
<div purpose="table-of-contents" v-if="selectedPlatform === 'macos'">
<div purpose="table-of-contents" v-if="selectedPlatform === 'apple'">
<% // macOS policies (server-side-rendered)
for(let vital of macOsVitals) {
%>
<a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#macos"><%- vital.name %></a>
<a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#apple"><%- vital.name %></a>
<% } %>
</div>
<div purpose="table-of-contents" v-else-if="selectedPlatform === 'linux'">