fleet/website/views/pages/query-detail.ejs

<div id="query-detail" v-cloak>

  <div style="max-width: 1000px;" class="container-fluid justify-content-center p-0 px-4 pb-5 mb-lg-5 mx-auto">
    <div class="d-flex flex-column p-0">
      <a href="/queries" style="font-size: 14px; font-weight: 700; text-decoration: none;" class="pt-4 pt-lg-5">
        <img style="display: inline-block; width: 6px; height: 9px; transform: rotate(180deg); margin-bottom: 2px;" alt="back arrow" src="/images/chevron-right-6x9@2x.png"/>
        <span class="ml-1"> Back to queries</span>
      </a>
      <div purpose="title-mobile" class="d-flex d-md-none flex-column pb-4 mb-3">
        <h2 class="pt-4 pb-3 m-0">{{query.name}}</h2>
        <h6 class="pb-3 m-0">{{query.description ? query.description : '--'}}</h6>
      </div>
    </div>
    <div class="d-flex flex-column flex-md-row justify-content-md-between">
      <div class="container-fluid col-md-8 d-flex flex-column p-0 pr-md-3">
        <div purpose="title-widescreen" class="d-none d-md-flex flex-column">
          <h2 class="pt-4 pb-3 m-0">{{query.name}}</h2>
          <h6 class="pb-3 m-0">{{query.description ? query.description : '--'}}</h6>
        </div>
        <div purpose="body" class="pt-4 pt-md-3 mt-3 mt-md-0">
          <div purpose="query">
            <h3 class="pb-4 mb-3 m-0">Query</h3>
            <pre ><code class="sql hljs">{{query.query ? query.query : '--'}}</code></pre>
          </div>
          <div purpose="resolution" v-if="query.kind === 'policy' && query.resolution">
            <h3 class="pt-5 pb-3">Resolve</h3>
            <p>{{query.resolution}}</p>
          </div>
        </div>
      </div>
      <div purpose="summary-sidebar" class="col-md-4 order-first order-md-last p-0 pl-md-3 pt-md-4">
        <div class="pb-2">
          <div class="d-flex flex-md-column justify-content-between justify-content-md-start align-items-center align-items-md-start pb-1 pb-md-3">
            <h5 class="pb-md-2 m-0">Platforms</h5>
            <p class="pb-1" v-if="!query.platform || !query.platform.length">--</p>
            <div purpose="platforms" class="d-flex align-items-center align-items-md-start pb-1" v-else>
              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-macos-dark-24x24@2x.png" alt="macOS" v-if="query.platform.includes('darwin')"/>
              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-windows-dark-24x24@2x.png" alt="Windows" v-if="query.platform.includes('windows')"/>
              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-linux-dark-24x24@2x.png" alt="Linux" v-if="query.platform.includes('linux')"/>
              <img class="d-inline-flex ml-3 ml-md-0 mr-md-3" src="/images/os-chromeos-dark-24x24@2x.png" alt="ChromeOS" v-if="query.platform.includes('chrome')"/>
            </div>
          </div>
        </div>
        <div class="border-top py-2 pb-md-4">
          <div class="d-flex flex-md-column justify-content-between justify-content-md-start align-items-center align-items-md-start pt-md-3">
            <h5 class="pb-md-2 m-0">Tags</h5>
            <div :class="[query.tags.length > 2 ? 'mt-1' : '']"  class="d-flex flex-wrap align-items-center justify-content-end justify-content-sm-start">
              <div purpose="requires-mdm-badge" class="mr-md-1 ml-1 ml-md-0" :class="[query.tags.length > 2 ? 'mb-1' : '']" v-if="query.requiresMdm">requires mdm</div>
              <div purpose="critical-badge" class="mr-md-1 ml-1 ml-md-0" :class="[query.tags.length > 2 ? 'mb-1' : '']" v-if="query.critical">critical</div>
              <span class="mb-1" v-if="(!query.tags || !query.tags.length) && !query.critical && !query.requiresMdm">--</span>
              <div purpose="query-tag" class="mr-md-1 ml-1 ml-md-0" :class="[query.tags.length > 2 ? 'mb-1' : '']" v-for="tag in query.tags">
                {{tag}}
              </div>
            </div>
          </div>
        </div>
        <div class="border-top py-2">
          <div class="d-flex flex-md-column justify-content-between justify-content-md-start align-items-center align-items-md-start py-1 py-md-3">
            <h5 class="pb-md-2 m-0">Purpose</h5>
            <p class="m-0">{{query.kind === 'policy' ? 'Policy' : query.kind === 'query' ? 'Informational' : '--'}}</p>
          </div>
        </div>
        <div class="border-top py-2 pb-md-4">
          <div class="d-flex flex-md-column justify-content-between justify-content-md-start align-items-center align-items-md-start py-1 pt-md-3">
            <h5 class="pb-md-2 m-0">Contributors</h5>
            <div class="d-flex align-items-center">
              <span class="mb-1" v-if="!query.contributors || !query.contributors.length">--</span>
              <div class="d-flex pl-2 pl-md-0 pr-md-2" v-for="contributor in query.contributors">
                <div purpose="avatar-frame" class="d-flex avatar-frame" @click="clickAvatar(contributor)">
                  <img alt="a GitHub user avatar" :alt="contributor.name ? contributor.name : contributor.handle" :src="contributor.avatarUrl"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d-md-none border-top"></div>
        <div class="py-2 pt-md-0">
          <div class="d-flex flex-md-column justify-content-between justify-content-md-start align-items-center align-items-md-start py-1">
            <h5 class="d-flex pb-md-2 m-0 mr-3">Contribute to this page</h5>
            <p class="d-flex m-0"><a class="d-flex text-right m-0" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath">View source</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>