Website: Update comparison tables (#30370)

Changes:
- Updated the IT comparison table on the homepage and the device
management page.

---------

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric 2025-06-27 12:42:07 -05:00 committed by GitHub
parent e3a93f7366
commit 9b209bca79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 189 additions and 45 deletions

View file

@ -40,6 +40,15 @@ parasails.registerPage('device-management-page', {
closeModal: function() {
this.modal = undefined;
},
clickSwitchComparisonTableColumn: async function(option){
this.comparisonMode = option;
await setTimeout(()=>{
$('[data-toggle="tooltip"]').tooltip({
container: '#device-management-page',
trigger: 'hover',
});
}, 250);
},
clickSwagRequestCTA: function () {
if(window.gtag !== undefined){
gtag('event','fleet_website__swag_request');

View file

@ -124,6 +124,19 @@ parasails.registerPage('homepage', {
});
}, 250);
},
clickSwitchComparisonTableColumn: async function(option){
if(this.comparisonTableMode === 'it'){
this.comparisonModeForIt = option;
} else {
this.comparisonModeForSecurity = option;
}
await setTimeout(()=>{
$('[data-toggle="tooltip"]').tooltip({
container: '#homepage',
trigger: 'hover',
});
}, 250);
},
closeModal: function() {
this.modal = undefined;
},

View file

@ -184,6 +184,7 @@
border: 1px solid @core-vibrant-blue-15;
cursor: pointer;
font-weight: 700;
white-space: nowrap;
}
[purpose='comparison-selector-dropwdown'] {
width: 152px;
@ -293,7 +294,18 @@
font-weight: 700;
color: #192147;
}
[purpose='tooltip'] {
color: #515774;
font-size: 12px;
font-weight: 400;
line-height: 18px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
[purpose='mobile-comparison-table'] {
p {
color: @core-fleet-black;

View file

@ -122,18 +122,42 @@
{{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
<div class="dropdown-item" @click="comparisonMode = 'sccm'">SCCM</div>
<div class="dropdown-item" @click="comparisonMode = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item" @click="comparisonMode = 'jamf'">Jamf Pro</div>
<div class="dropdown-item" @click="comparisonMode = 'intune'">Intune</div>
<div class="dropdown-item" @click="comparisonMode = 'ansible'">Ansible</div>
<div class="dropdown-item" @click="comparisonMode = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonMode = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
</div>
</div>
</div>
<div purpose="comparison-table" class="d-sm-flex d-none flex-column">
<div purpose="table-row">
<div purpose="feature-name"><p>Cloud or self-host with no restrictions</p></div>
<div purpose="fleet-column">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some key features, like Apple Declarative Device Management (DDM), are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some modern modules and integrations are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
<p>Cloud-only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'sccm'">
<p>On-prem only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'omnissa'">
<p>On-prem discouraged</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Zero-touch setup</p></div>
<div purpose="fleet-column">
@ -386,14 +410,44 @@
{{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurpose">
<div class="dropdown-item" @click="comparisonMode = 'sccm'">SCCM</div>
<div class="dropdown-item" @click="comparisonMode = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item" @click="comparisonMode = 'jamf'">Jamf Pro</div>
<div class="dropdown-item" @click="comparisonMode = 'intune'">Intune</div>
<div class="dropdown-item" @click="comparisonMode = 'ansible'">Ansible</div>
<div class="dropdown-item" @click="comparisonMode = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonMode = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Cloud or self-host with no restrictions</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some key features, like Apple Declarative Device Management (DDM), are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some modern modules and integrations are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'intune'">
<p>Cloud-only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
<p>On-prem only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'omnissa'">
<p>On-prem discouraged</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Zero-touch setup</p></div>

View file

@ -182,18 +182,43 @@
{{comparisonModeFriendlyNames[comparisonModeForIt]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
<div class="dropdown-item" @click="comparisonModeForIt = 'sccm'">SCCM</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'jamf'">Jamf Pro</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'intune'">Intune</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'ansible'">Ansible</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'chef'">Chef</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
</div>
</div>
</div>
<div purpose="comparison-table" class="d-sm-flex d-none flex-column">
<div purpose="table-row">
<div purpose="feature-name"><p>Cloud or self-host with no restrictions</p></div>
<div purpose="fleet-column">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-if="comparisonModeForIt === 'jamf'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some key features, like Apple Declarative Device Management (DDM), are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="comparison-column" v-else-if="comparisonModeForIt === 'tanium'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some modern modules and integrations are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="comparison-column" v-else-if="comparisonModeForIt === 'intune'">
<p>Cloud-only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonModeForIt === 'sccm'">
<p>On-prem only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonModeForIt === 'omnissa'">
<p>On-prem discouraged</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Zero-touch setup</p></div>
<div purpose="fleet-column">
@ -448,14 +473,45 @@
{{comparisonModeFriendlyNames[comparisonModeForIt]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurpose">
<div class="dropdown-item" @click="comparisonModeForIt = 'sccm'">SCCM</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'jamf'">Jamf Pro</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'intune'">Intune</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'ansible'">Ansible</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonModeForIt = 'chef'">Chef</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Cloud or self-host with no restrictions</p></div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
<div purpose="feature-status" v-if="comparisonModeForIt === 'jamf'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some key features, like Apple Declarative Device Management (DDM), are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="feature-status" v-else-if="comparisonModeForIt === 'tanium'">
<p><a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="On-prem supported, but some modern modules and integrations are cloud-only.">On-prem limited</a></p>
</div>
<div purpose="feature-status" v-else-if="comparisonModeForIt === 'intune'">
<p>Cloud-only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonModeForIt === 'sccm'">
<p>On-prem only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonModeForIt === 'omnissa'">
<p>On-prem discouraged</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Zero-touch setup</p></div>
@ -784,12 +840,12 @@
{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurposeForSecurity">
<div class="dropdown-item" @click="comparisonModeForSecurity = 'defender'">Defender</div>
<div class="dropdown-item" @click="comparisonModeForSecurity = 'rapid'">Rapid 7</div>
<!-- <div class="dropdown-item" @click="comparisonModeForSecurity = 'crowdstrike'">Crowdstrike</div> -->
<div class="dropdown-item" @click="comparisonModeForSecurity = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonModeForSecurity = 'qualys'">Qualys</div>
<div class="dropdown-item" @click="comparisonModeForSecurity = 'tenable'">Tenable</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('defender')">Defender</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('rapid')">Rapid 7</div>
<!-- <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('crowdstrike')">Crowdstrike</div> -->
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('qualys')">Qualys</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tenable')">Tenable</div>
</div>
</div>
</div>
@ -999,12 +1055,12 @@
{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
</div>
<div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurposeForSecurity">
<div class="dropdown-item" @click="comparisonModeForSecurity = 'rapid'">Rapid 7</div>
<div class="dropdown-item" @click="comparisonModeForSecurity = 'crowdstrike'">Crowdstrike</div>
<!-- <div class="dropdown-item" @click="comparisonModeForSecurity = 'defender'">Defender</div> -->
<div class="dropdown-item" @click="comparisonModeForSecurity = 'tanium'">Tanium</div>
<div class="dropdown-item" @click="comparisonModeForSecurity = 'qualys'">Qualys</div>
<div class="dropdown-item" @click="comparisonModeForSecurity = 'tenable'">Tenable</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('defender')">Defender</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('rapid')">Rapid 7</div>
<!-- <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('crowdstrike')">Crowdstrike</div> -->
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('qualys')">Qualys</div>
<div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tenable')">Tenable</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Threat intelligence <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Integrate threat intelligence sources to detect, enrich, or investigate suspicious activity on devices."></p></div>