fleet/website/views/pages/observability.ejs

<div id="observability-page" v-cloak>
  <div purpose="page-container">
    <div purpose="page-content" class="mx-auto">
    <div purpose="hero">
      <div purpose="page-headline">
        <h4>Observability <%= ['eo-security', 'vm'].includes(pagePersonalization) ? 'for security' : ['eo-it', 'mdm'].includes(pagePersonalization) ? 'for IT' : '' %></h4>
        <h1><%= pagePersonalization==='eo-security'? 'Deeper, faster visibility for every OS' : 'Talk to your computers'%></h1>
      </div>
      <div purpose="hero-content" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
        <div purpose="hero-image">
          <img alt="A device verifying compliance for every endpoint" src="/images/endpoint-operations-hero-image-380x380@2x.png">
        </div>
        <div purpose="hero-text">
          <% if(['eo-it', 'mdm'].includes(pagePersonalization)) { %>
            <strong>Automate anything</strong>
            <p>Remotely run scripts and prompts to complete tasks on every kind of computer, including Linux.</p>
            <strong>Pulse check anything</strong>
            <p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
            <strong>Ship data to any platform</strong>
            <p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
          <% } else if(['eo-security', 'vm'].includes(pagePersonalization)) { %>
            <strong>Osquery on easy mode</strong>
            <p>Build the agent in "read-only" mode or enable remote scripting to automatically mitigate misconfigurations and vulnerabilities.</p>
            <strong>Pulse check anything</strong>
            <p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
            <strong>Ship data to any platform</strong>
            <p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
          <% } else { %>
            <strong>Pulse check anything</strong>
            <p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
            <strong>Ship data to any platform</strong>
            <p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
            <strong>Osquery on easy mode</strong>
            <p>Use "read-only" mode or enable remote scripting to automate anything on every operating system, including Linux.</p>
          <% }%>
          <div purpose="button-row" class="d-flex flex-md-row flex-column justify-content-start align-items-center">
            <a purpose="cta-button" href="/contact">Take a tour</a>
            <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
          </div>
        </div>
      </div>
    </div>
    <div purpose="testimonials" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
      <% if (['eo-security'].includes(pagePersonalization)) { %>
        <div purpose="testimonial-quote">
          <div purpose="quote">
            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
            <p>"We will have no, zero, blind spots in our entire infrastructure, more than 100,000 servers. It just works, it's awesome."</p>
            <!-- TODO: Fleet reduces costs through tool consolidation.  Plus if you can’t confidently answer questions about the state and configuration of all your devices in seconds - regardless of operating system - you should take a look at what these guys are doing. -->
          </div>
            <a href="https://www.linkedin.com/in/charleszaffery/" target="_blank">
          <div purpose="quote-attribution" class="d-flex flex-row align-items-center">
            <div purpose="quote-image"><img src="/images/testimonial-author-charles-zaffery-48x48@2x.png" alt="Charles Zaffery"></div>
            <div class="d-flex flex-column">
              <p purpose="name">Charles Zaffery</p>
              <p purpose="title">Principal computer janitor</p>
            </div>
          </div>
            </a>
        </div>
      <% } else if (['vm'].includes(pagePersonalization)) { %>
        <div purpose="testimonial-quote">
          <div purpose="quote">
            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
            <p>"Fleet lets us be more actionable with fewer people. It helps us to filter out the noise better than we could with the other big name products we replaced."</p>
          </div>
            <a href="https://www.linkedin.com/in/austin-anderson-73172185/" target="_blank">
          <div purpose="quote-attribution" class="d-flex flex-row align-items-center">
            <div purpose="quote-image"><img src="/images/testimonial-author-austin-anderson-48x48@2x.png" alt="Austin Anderson"></div>
            <div class="d-flex flex-column">
              <p purpose="name">Austin Anderson</p>
              <p purpose="title">Cybersecurity team senior manager</p>
            </div>
          </div>
            </a>
        </div>
      <% } else { %>
        <div purpose="testimonial-quote">
          <div purpose="quote">
            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
            <p>“Fleet provides a way to surface device data and telemetry to our other teams and partners.”</p>
          </div>
          <a target="_blank" href="https://www.linkedin.com/in/nickfohs/">
          <div purpose="quote-attribution" class="d-flex flex-row align-items-center">
            <div purpose="quote-image"><img src="/images/testimonial-author-nick-fohs-24x24@2x.png" alt="Nick Fohs"></div>
            <div class="d-flex flex-column">
              <p purpose="name">Nick Fohs</p>
              <p purpose="title">Systems and infrastructure manager</p>
            </div>
          </div>
          </a>
        </div>
      <% } %>
      <div purpose="testimonial-videos" class="d-flex">
        <%if(['eo-security'].includes(pagePersonalization)) {%>
        <div purpose="testimonial-video" class="charles-zaffery mx-auto" @click="clickOpenVideoModal('charles-zaffery')">
          <span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>
        </div>
        <%} else if(['vm'].includes(pagePersonalization)){%>
        <div purpose="testimonial-video" class="austin-anderson mx-auto" @click="clickOpenVideoModal('austin-anderson')">
          <span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>
        </div>
        <%} else if(['eo-it', 'mdm'].includes(pagePersonalization)) {%>
        <div purpose="testimonial-video" class="nick-fohs mx-auto" @click="clickOpenVideoModal('nick-fohs')">
          <span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>
        </div>
        <% } else { /* Display no videos for now.  FUTURE: make the agnostic version have 2 appropriate vids */ %>
        <!-- <div purpose="testimonial-video" class="austin-anderson" @click="clickOpenVideoModal('austin-anderson')">
          <span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>
        </div>
        <div purpose="testimonial-video" class="nick-fohs" @click="clickOpenVideoModal('nick-fohs')">
          <span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>
        </div> -->
        <% } %>
      </div>
    </div>
    <logo-carousel></logo-carousel>


    <% if(!pagePersonalization || ['mdm', 'eo-it'].includes(pagePersonalization)){%>
    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
      <div purpose="feature-text" class="d-flex flex-column">
        <h3>Automate anything</h3>
        <p>Remote-control IT tasks on every kind of computer – even you, Linux.</p>
        <div purpose="checklist" class="flex-column d-flex">
          <p>Write and run scripts remotely, report progress, and replay queued up tasks on computers that went offline.</p>
          <p>Optionally integrate Google Calendar to make changes when certain users’ devices are actually free.</p>
        </div>
      </div>
      <div purpose="feature-image">
        <img alt="Ship data to any platform" src="/images/device-management-clickops-or-devops-380x280@2x.png">
      </div>
    </div>
    <% } %>

    <div purpose="feature-headline" class="mr-auto">
      <h3>Pulse check anything</h3>
      <p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
    </div>

    <div purpose="three-column-features" class="mx-auto">
      <div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-center align-items-center align-items-sm-start">
        <div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
          <img alt="Software and asset inventory" src="/images/icon-live-connection-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Live connection</h5>
          <p>Talk to online devices in real time with Fleet’s live query API. Implement custom workflows like conditional access based on device posture, Identity, and more.</p>
        </div>

        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
          <img alt="Software and asset inventory" src="/images/icon-software-and-asset-inventory-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Software and asset inventory</h5>
          <p>Get visibility into all endpoints across any operating system*, including support for servers and containers in every cloud infrastructure.</p>
        </div>

        <div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4">
          <img alt="See logins for every endpoint" src="/images/icon-see-logins-for-every-endpoint-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>See logins for every endpoint</h5>
          <p>Identify who logs in to any system, including login history and current sessions. Look up any computer by the email address of the person using it.</p>
        </div>

        <div purpose="feature-item" class="pr-0 pr-lg-4 pl-lg-0 col-12 col-sm-6 col-lg-4 mb-lg-0">
          <img alt="CIS benchmarks" src="/images/icon-cis-benchmarks-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>CIS benchmarks</h5>
          <p>Keep all your endpoints* compliant with customizable baselines, or use common benchmarks like CIS.</p>
        </div>

        <div purpose="feature-item" class="pl-0 pl-lg-4 col-12 col-sm-6 col-lg-4 mb-sm-0">
          <img alt="Verify updates and settings" src="/images/icon-edr-health-check-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>EDR health checks</h5>
          <p>Verify that your EDR tools are installed and working so you can identify and address configuration issues quickly.</p>
        </div>

        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4 mb-0">
          <img alt="Verify updates and settings" src="/images/icon-verify-updates-and-settings-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Verify updates and settings</h5>
          <p>Track progress towards deadlines for security posture remediation projects, and enforce due dates through automations.</p>
        </div>
      </div>
      <p purpose="feature-footnote">*Currently limited to: Apple, Linux, Windows, Chromebooks, OT, data centers, Amazon Web Services (AWS), Google Cloud (GCP), and the Microsoft Cloud (Azure).</p>
    </div>

    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
      <div purpose="feature-text" class="d-flex flex-column">
        <h3>Ship data to any platform</h3>
        <p>Export anything. Ship data to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.</p>
        <div purpose="checklist" class="flex-column d-flex">
          <p>Extract data and correlate it with your log aggregator, SIEM, or data lake.</p>
          <p>Ease your logging burden, pull the data you need.</p>
        </div>
      </div>
      <div purpose="feature-image">
        <img alt="Ship data to any platform" src="/images/endpoint-ops-feature-image-1-381x282@2x.png">
      </div>
    </div>
    <%/* Implement “zero trust” faster section */%>
    <div purpose="page-section">
      <div purpose="feature-headline" style="max-width: 580px;">
        <h3>“Zero” trust, fewer tickets</h3>
        <p>You can use Fleet’s API to customize every aspect of conditional access – even the stuff your CISO hasn’t thought of yet.</p>
      </div>
      <div purpose="three-column-features" class="mx-auto">
        <div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-sm-start justify-content-center align-items-center align-items-sm-start">
          <div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
            <img alt="Get in front of the IdP" src="/images/device-management-icon-control-login-experience-48x48@2x.png" class="mx-auto mx-sm-0">
            <h5>Get in front of the IdP</h5>
            <p>Gate access with <a href="https://fleetdm.com/queries">common device trust policies</a> from industry peers, or roll out your own device health checks using system data and events.</p>
          </div>

          <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
            <img alt="Step-by-step instructions" src="/images/device-management-icon-step-by-step-48x48@2x.png" class="mx-auto mx-sm-0">
            <h5>Step-by-step instructions</h5>
            <p>Show resolution steps or use <a href="https://medium.com/pinterest-engineering/enforcing-device-authn-compliance-at-pinterest-a74938cb089b" target="_blank">custom HTML</a> to show employees what they need to do to restore their access without waiting on a ticket. Then give it back automatically, as soon as the problems are fixed.</p>
          </div>

          <div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4 mb-0">
            <img alt="Manage device posture" src="/images/device-management-icon-manage-device-posture-48x48@2x.png" class="mx-auto mx-sm-0">
            <h5>Live retry</h5>
            <p>Give people a way to get back to work quickly and minimize downtime. Fleet’s live query API instantly re-checks the OS version and other device state so users don’t get locked out.</p>
          </div>
        </div>
      </div>
    </div>
    <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
      <div purpose="feature-image">
        <img alt="Ship data to any platform" src="/images/endpoint-ops-feature-image-2-380x380@2x.png">
      </div>
      <div purpose="feature-text" class="d-flex flex-column">
        <h3>Osquery on easy mode</h3>
        <p>Accelerate deployment and get more out of osquery. You don’t need to be an osquery expert to get the answers you need from your <%= ['vm', 'eo-security'].includes(pagePersonalization) ? 'endpoints' : 'devices' %>.</p>
        <div purpose="checklist" class="flex-column d-flex">
          <p>Remotely disable/enable agent features, choose plugins, and keep osquery up to date.</p>
          <p>Import community queries from other security teams at top brands like Palantir and Fastly.</p>
          <p>Implement the Center for Internet Security (CIS) benchmarks (one click, 400+ queries, supported by Fleet). Or customize exactly the queries you need.</p>
          <p>Monitor sensitive production environments without enabling remote scripting by building the agent in "read-only" mode.</p>
        </div>
      </div>
    </div>

    <% if(!pagePersonalization || ['vm', 'eo-security'].includes(pagePersonalization)) {%>
    <div purpose="feature-headline" class="mr-auto">
      <h3>Open security tooling</h3>
      <p>Consolidate your security tooling on top of open data standards like YAML, SQL, and JSON.</p>
    </div>

    <div purpose="three-column-features" class="mx-auto">
      <div purpose="responsive-feature-row" class="row d-flex flex-sm-row flex-column justify-content-lg-between justify-content-center align-items-center align-items-sm-start">
        <div purpose="feature-item" class="pl-0 col-12 col-sm-6 col-lg-4">
          <img alt="Incident response (IR)" src="/images/icon-incident-response-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Incident response (IR)</h5>
          <p>Contain and recover from breaches using live data, remote commands, and automated workflows.</p>
        </div>

        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4" >
          <img alt="Detection and response" src="/images/icon-detection-and-response-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Detection and response</h5>
          <p>Ship logs and alerts when unusual behavior is detected. Run scripts on demand or when alerts trigger.</p>
        </div>

        <div purpose="feature-item" class="pl-0 pl-lg-4 pr-lg-0 col-12 col-sm-6 col-lg-4">
          <img alt="File access monitoring (FIM)" src="/images/icon-fim-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>File access monitoring (FIM)</h5>
          <p>Specify files to monitor for changes or deletions, then log those events to your SIEM or data lake.</p>
        </div>

        <div purpose="feature-item" class="pr-0 pr-lg-4 pl-lg-0 col-12 col-sm-6 col-lg-4 mb-lg-0">
          <img alt="Attack surface management" src="/images/icon-attack-surface-management-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Attack surface management</h5>
          <p>Discover security misconfigurations and vulnerabilities and prioritize risks that matter to your organization.</p>
        </div>

        <div purpose="feature-item" class="pl-0 pl-lg-4 col-12 col-sm-6 col-lg-4 mb-sm-0">
          <img alt="Malware detection" src="/images/icon-malware-detection-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Malware detection</h5>
          <p>Continuously scan host filesystems for indicators of compromise (IOC). Import malware signatures from threat intelligence sources.</p>
        </div>

        <div purpose="feature-item" class="pr-0 pr-lg-4 col-12 col-sm-6 col-lg-4 mb-0">
          <img alt="Osquery made easy" src="/images/icon-osquery-made-easy-48x48@2x.png" class="mx-auto mx-sm-0">
          <h5>Osquery made easy</h5>
          <p>Collect exactly the data you need from your production infrastructure across every cloud and data center*.</p>
        </div>
      </div>
      <p purpose="feature-footnote">*Companies like Fastly and Gusto use Fleet in production with hundreds of thousands of endpoints, including containers, OT, and laptops.</p>
    </div>
    <% }%>
  </div>
  </div>
  <%/* End of page gradient */%>
  <div purpose="bottom-gradient">
    <div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
      <div purpose="section-heading" class="mx-auto text-center">
        <h4>Who else uses Fleet?</h4>
        <h3>Empowering <%= ['mdm'].includes(pagePersonalization) ? 'IT and corporate engineering' : ['eo-it'].includes(pagePersonalization) ? 'IT and client platform' : ['eo-security'].includes(pagePersonalization) ? 'security and platform' : ['vm'].includes(pagePersonalization) ? 'security and IT' : 'IT and security' %> teams, globally</h3>
      </div>
    </div>

    <scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
    <div purpose="page-container" class="pb-0">

      <div purpose="section-heading" class="text-center">
        <h4>Observability</h4>
        <h3><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h3>
        <div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-md-row flex-column justify-content-center align-items-center mx-auto">
          <a purpose="cta-button" href="/register">Start now</a>
          <animated-arrow-button href="/contact">Talk to an engineer</animated-arrow-button>
        </div>
      </div>
    </div>
  </div>
  <%/* Cloud city banner */%>
  <parallax-city></parallax-city>
  <modal purpose="video-modal" v-if="modal === 'charles-zaffery'" @close="closeModal()">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/nRbZJflWqCo?si=c4M4iOXEZ03ahHaC&amp&autoplay=1;rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </modal>  
  <modal purpose="video-modal" v-if="modal === 'austin-anderson'" @close="closeModal()">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/G5Ry_vQPaYc?si=vv0AfRe30yssWWRM&amp&autoplay=1;rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </modal>
  <modal purpose="video-modal" v-if="modal === 'nick-fohs'" @close="closeModal()">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/fs5ULAR4e4A?si=pChZBt_sSNj13goP&amp&autoplay=1;rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </modal>
  <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() %>