Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 09:28:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 52

Website: update comparison table on device management page (#26839)

Browse source 
Closes: #26744


Changes:
- Updated the comparison table on the /device-management page
This commit is contained in:
Eric 2025-03-04 18:10:59 -06:00 committed by GitHub
parent cb7f07e64c
commit 85fae4f0a6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 315 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
website/assets/images/icon-android-16x16@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 315 B

BIN
website/assets/images/icon-emoji-x-12x12@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 466 B

BIN
website/assets/images/icon-ios-16x16@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 200 B

10
website/assets/js/pages/device-management.page.js vendored
View file

@ -4,7 +4,15 @@ parasails.registerPage('device-management-page', {
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: {
modal: '',
comparisonMode: 'omnissa'
comparisonMode: 'omnissa',
comparisonModeFriendlyNames: {
jamf: 'Jamf Pro',
omnissa: 'Omnissa (WS1)',
intune: 'Intune',
ansible: 'Ansible',
puppet: 'Puppet',
chef: 'Chef'
}
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗

28
website/assets/styles/pages/device-management.less vendored
View file

@ -202,19 +202,29 @@
}
}
}
[purpose='comparison-column'] {
text-align: center;
display: flex;
justify-content: center;
align-self: center;
min-width: 200px;
p {
font-size: 12px;
margin-bottom: 0px;
}
}
[purpose='fleet-column'] {
text-align: center;
display: flex;
justify-content: center;
justify-content: flex-start;
align-self: center;
min-width: 200px;
p {
white-space: nowrap;
font-size: 12px;
margin-bottom: 0px;
}
}
[purpose='feature-name'] {
width: 100%;
@ -237,6 +247,10 @@
border: 1px solid #E2E4EA;
margin-bottom: 32px;
[purpose='table-row'] {
[purpose='red-x'] {
height: 12px;
width: 12px;
}
div {
padding: 12px 24px;
display: flex;
@ -328,6 +342,9 @@
line-height: 21px;
color: #192147;
}
img {
height: 16px;
}
}
[purpose='feature-table-row'] {
padding: 12px 16px;
@ -348,6 +365,15 @@
display: flex;
flex-direction: row;
justify-content: center;
[purpose='red-x'] {
height: 12px;
width: 12px;
}
p {
white-space: nowrap;
font-size: 12px;
margin-bottom: 0px;
}
img {
height: 16px;
&:not(:first-of-type) {

442
website/views/pages/device-management.ejs vendored
View file

@ -119,13 +119,15 @@
<div purpose="comparison-column" class="d-flex">
<div purpose="comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{comparisonMode === 'omnissa' ? 'Omnissa (WS1)' : 'Jamf Pro'}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
{{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 = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item"
@click="comparisonMode = 'jamf'">Jamf Pro</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 = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
</div>
</div>
</div>
@ -135,24 +137,33 @@
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'omnissa'">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<div purpose="comparison-column" v-if="['omnissa', 'intune'].includes(comparisonMode)">
<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'">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>iOS/iPadOS management</p></div>
<div purpose="fleet-column">
<img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-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 === 'chef'">
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'puppet'">
<p>Community module</p>
</div>
<div purpose="comparison-column" v-else>
<img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="table-row">
@ -160,22 +171,53 @@
<p>Complete device inventory </p>
<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="Fleet gives you data down to the chip level on every endpoint. Access over 300 tables of system state data. Use presets or create your own queries.">
</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"></div>
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column">
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Operating system updates</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">
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="['omnissa', 'intune',].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Configuration management and scripting</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">
<div purpose="fleet-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="['ansible', 'puppet', 'chef'].includes(comparisonMode)">
<p>Mobile not supported</p>
</div>
<div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
@ -186,53 +228,114 @@
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo">
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'omnissa'">
<p>No built-in Linux</p>
</div>
<div purpose="comparison-column" v-else-if="['intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name" class="d-flex align-items-center"><p>App management </p>
<!-- <span purpose="table-new-badge" class="ml-2">New</span> -->
</div>
<div purpose="feature-name" class="d-flex align-items-center"><p>App management </p></div>
<div purpose="fleet-column">
<img style="height: 14px; width: 14px;" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column">
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Automated device compliance</p></div>
<div purpose="fleet-column">
<img style="height: 14px; width: 14px;" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
<div purpose="comparison-column">
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Additional purchase</p>
</div>
<div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>REST API</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">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<div purpose="comparison-column" v-if="comparisonMode === 'intune'">
<p>Microsoft Graph API</p>
</div>
<div purpose="comparison-column" v-else>
<p>Multiple APIs required</p>
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Config as code (GitOps)</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"></div>
<div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name">
<p>Device reporting (<30 mins)</p>
<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="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
</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 === 'intune'">
<p>6 Hours</p>
</div>
<div purpose="comparison-column" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>One-off scripts</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="table-row">
<div purpose="feature-name"><p>Open source</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"></div>
<div purpose="fleet-column"><p>Free and paid version</p></div>
<div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>Only free version</p>
</div>
<div purpose="comparison-column" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
</div>
@ -241,13 +344,15 @@
<p class="mt-5 mb-2 font-weight-bold">Compare with:</p>
<div purpose="mobile-comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
id="mobileDropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{comparisonMode === 'omnissa' ? 'Omnissa (WS1)' : 'Jamf Pro'}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
{{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 = 'omnissa'">Omnissa (WS1)</div>
<div class="dropdown-item"
@click="comparisonMode = 'jamf'">Jamf Pro</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 = 'puppet'">Puppet</div>
<div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Zero-touch setup</p></div>
@ -256,19 +361,19 @@
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<div purpose="feature-status" v-else-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
@ -280,37 +385,37 @@
<img style="height: 14px; width: 14px;" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'chef'">
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<div purpose="feature-status" v-else-if="comparisonMode === 'puppet'">
<p>Community module</p>
</div>
<div purpose="feature-status" v-else>
<img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>Complete device state</p></div>
<div purpose="feature-name">
<p>Complete device inventory </p>
<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="Fleet gives you data down to the chip level on every endpoint. Access over 300 tables of system state data. Use presets or create your own queries.">
</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>
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS"> </div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
@ -319,19 +424,22 @@
<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">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="['omnissa', 'intune',].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
@ -340,18 +448,22 @@
<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">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<div purpose="feature-status" v-else-if="['ansible', 'puppet', 'chef'].includes(comparisonMode)">
<p>Mobile not supported</p>
</div>
<div purpose="feature-status" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
@ -364,41 +476,49 @@
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo">
<div purpose="feature-status" v-else-if="comparisonMode === 'omnissa'">
<p>No built-in Linux</p>
</div>
<div purpose="feature-status" v-else-if="['intune'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
<div purpose="feature-table">
<div purpose="feature-name"><p>App management </p>
<!-- <span purpose="table-new-badge" class="ml-2">New</span> -->
</div>
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img style="height: 14px; width: 14px;" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
@ -408,19 +528,23 @@
<div purpose="feature-table-row">
<div>Fleet</div>
<div purpose="feature-status">
<img style="height: 14px; width: 14px;" alt="coming soon" src="/images/icon-coming-soon-14x14@2x.png">
<img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
<img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
<img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
<img src="/images/icon-android-16x16@2x.png" alt="Android" >
<img src="/images/icon-ios-16x16@2x.png" alt="iOS">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Additional purchase</p>
</div>
<div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
@ -433,37 +557,13 @@
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</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" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<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>MDM migration</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>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'intune'">
<p>Microsoft Graph API</p>
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<div purpose="feature-status" v-else>
<p>Multiple APIs required</p>
</div>
</div>
</div>
@ -476,16 +576,38 @@
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
</div>
<div purpose="feature-table">
<div purpose="feature-name">
<p>Device reporting (<30 mins)</p>
<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="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
</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 === 'intune'">
<p>6 Hours</p>
</div>
<div purpose="feature-status" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>One-off scripts</p>
</div>
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
@ -498,16 +620,13 @@
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'omnissa'">
<div>Omnissa (WS1)</div>
<div purpose="feature-status">
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
<p>Only free version</p>
</div>
</div>
<div purpose="feature-table-row" v-if="comparisonMode === 'jamf'">
<div>Jamf Pro</div>
<div purpose="feature-status">
<div purpose="feature-status" v-else>
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
</div>
</div>
@ -592,8 +711,5 @@
</div>
<%/* Cloud city banner */%>
<parallax-city></parallax-city>
<modal purpose="video-modal" v-if="modal === 'calendar'" @close="closeModal()">
<iframe width="560" height="315" src="https://www.youtube.com/embed/nhufmzGUeNk?si=rtAF6sFZuA7PhYRS&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>