From 24d516dc9c7731b53a8ba6029e5bc07453de85a4 Mon Sep 17 00:00:00 2001
From: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
Date: Tue, 11 Mar 2025 01:26:43 +0900
Subject: [PATCH] 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.
---
 .../assets/js/pages/device-management.page.js |  1 +
 website/views/pages/device-management.ejs     | 56 ++++++++++++++++---
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/website/assets/js/pages/device-management.page.js b/website/assets/js/pages/device-management.page.js
index cbab8c2ab3..e4e2074c50 100644
--- a/website/assets/js/pages/device-management.page.js
+++ b/website/assets/js/pages/device-management.page.js
@@ -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'
diff --git a/website/views/pages/device-management.ejs b/website/views/pages/device-management.ejs
index 77b8b71c4e..b5113dd420 100644
--- a/website/views/pages/device-management.ejs
+++ b/website/views/pages/device-management.ejs
@@ -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)">