MDM comparison update (#26984)

Added Tanium and fixed up some errors.

Compare against [Figma
draft](https://www.figma.com/design/3he8e72251IEnF6dBafKq1/%F0%9F%9A%A7-fleetdm.com-(scratchpad)?node-id=19416-11228)
for QA review.
This commit is contained in:
Mike Thomas 2025-03-11 01:26:43 +09:00 committed by GitHub
parent f5f2a16867
commit 24d516dc9c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 48 additions and 9 deletions

View file

@ -9,6 +9,7 @@ parasails.registerPage('device-management-page', {
jamf: 'Jamf Pro',
omnissa: 'Omnissa (WS1)',
intune: 'Intune',
tanium: 'Tanium',
ansible: 'Ansible',
puppet: 'Puppet',
chef: 'Chef'

View file

@ -126,6 +126,7 @@
<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>
@ -155,7 +156,7 @@
<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 === 'chef'">
<div purpose="comparison-column" v-if="['tanium', 'chef'].includes(comparisonMode)">
<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'">
@ -178,7 +179,10 @@
<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 === 'tanium'">
<p>Mobile not supported</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>
@ -194,9 +198,12 @@
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="['omnissa', 'intune',].includes(comparisonMode)">
<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-if="comparisonMode === 'tanium'">
<p>Mobile not supported</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>
@ -214,7 +221,7 @@
<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)">
<div purpose="comparison-column" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonMode)">
<p>Mobile not supported</p>
</div>
<div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
@ -234,6 +241,9 @@
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p>Windows only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'omnissa'">
<p>No built-in Linux</p>
</div>
@ -257,6 +267,9 @@
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</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>
@ -278,6 +291,9 @@
<div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
<p>Additional purchase</p>
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</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>
@ -316,7 +332,10 @@
<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'">
<div purpose="comparison-column" v-if="comparisonMode === 'tanium'">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
<p>6 Hours</p>
</div>
<div purpose="comparison-column" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
@ -351,6 +370,7 @@
<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>
@ -387,7 +407,7 @@
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'chef'">
<div purpose="feature-status" v-if="['tanium', 'chef'].includes(comparisonMode)">
<img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'puppet'">
@ -414,7 +434,10 @@
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status">
<div purpose="feature-status" v-if="comparisonMode === 'tanium'">
<p>Mobile not supported</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>
@ -435,6 +458,9 @@
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<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>
@ -460,7 +486,7 @@
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="['ansible', 'puppet', 'chef'].includes(comparisonMode)">
<div purpose="feature-status" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonMode)">
<p>Mobile not supported</p>
</div>
<div purpose="feature-status" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
@ -488,6 +514,9 @@
<div purpose="feature-status" v-else-if="comparisonMode === 'omnissa'">
<p>No built-in Linux</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p>Windows only</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>
@ -514,6 +543,9 @@
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Apple only</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</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>
@ -540,6 +572,9 @@
<div purpose="feature-status" v-if="comparisonMode === 'jamf'">
<p>Additional purchase</p>
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
<p>Mobile not supported</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>
@ -600,7 +635,10 @@
</div>
<div purpose="feature-table-row">
<div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
<div purpose="feature-status" v-if="comparisonMode === 'intune'">
<div purpose="feature-status" v-if="comparisonMode === 'tanium'">
<img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
</div>
<div purpose="feature-status" v-else-if="comparisonMode === 'intune'">
<p>6 Hours</p>
</div>
<div purpose="feature-status" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">