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

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

  <div class="d-flex justify-content-center">
    <div class="container justify-content-center library">
      <h2 class="mb-3">Standard query library</h2>
      <p class="pb-3 description">Fleet's standard query library includes a growing collection of useful queries
        for organizations deploying Fleet and osquery.</p>
      <div class="p-0 m-0">
        <div class="d-md-none">
          <div class="d-flex">
            <div class="input-group search-mobile">
              <div class="input-group-prepend border-right-0">
                <span class="input-group-text bg-transparent border-right-0 pl-2 pr-1"><img class="search" alt="search"
                    src="/images/icon-search-16x16@2x.png"></span>
              </div>
              <input class="form-control border-left-0 px-0" placeholder="Search queries" aria-label="Search queries"
                v-model="inputTextValue" @keydown.self="delayInput(setSearchString, 400, 'defaultTimer')()" />
            </div>
          </div>
          <div class="d-flex select-mobile">
            <div class="select-mobile-border">
              <select class="select-purpose mobile font-weight-bold" v-model="selectedKind">
                <option value="all queries" selected>All queries</option>
                <option value="query">Informational queries</option>
                <option value="policy">Policies</option>
              </select>
            </div>
          </div>
          <div class="d-flex select-mobile">
            <div class="select-mobile-border">
              <select class="select-purpose mobile font-weight-bold" v-model="selectedPlatform">
                <option value="all platforms" selected>All platforms</option>
                <option value="darwin">macOS</option>
                <option value="windows">Windows</option>
                <option value="linux">Linux</option>
              </select>
            </div>
          </div>
        </div>

        <div class="filter-and-search-bar d-none d-md-flex row align-items-center justify-content-between mb-3">
          <div class="d-flex px-0 align-items-center filters">
            <div class="d-flex">
              <div class="dropdown flex-wrap filter purpose">
                <p class="d-inline-flex mb-0 pr-1">Show</p>
                <button class="btn btn-secondary btn-sm dropdown-toggle p-0" type="button"
                  id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {{ selectedKind === 'query' ? 'informational' : selectedKind === 'policy' ? 'policies' : 'all queries'}}
                </button>
                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuSelectPurpose">
                  <button class="dropdown-item" type="button"
                    @click="clickSelectKind('all queries')">all queries</button>
                    <button class="dropdown-item" type="button"
                    @click="clickSelectKind('query')">informational</button>
                  <button class="dropdown-item" type="button"
                    @click="clickSelectKind('policy')">policies</button>
                </div>
              </div>
            </div>
            <div class="d-flex">
              <div class="dropdown d-flex flex-wrap filter platform">
                <p class="d-inline-flex flex-wrap px-2 mb-0">compatible with</p>
                <button class="btn btn-secondary btn-sm dropdown-toggle p-0" type="button"
                  id="dropdownMenuSelectPlatform" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {{selectedPlatform === 'windows' ? 'Windows' : selectedPlatform === 'darwin' ? 'macOS' : selectedPlatform === 'linux' ? 'Linux' : selectedPlatform}}
                </button>
                <div class="dropdown-menu p-2" aria-labelledby="dropdownMenuSelectPlatform">
                  <button class="dropdown-item" type="button" @click="clickSelectPlatform('all platforms')">all platforms</button>
                  <button class="dropdown-item" type="button" @click="clickSelectPlatform('darwin')">macOS</button>
                  <button class="dropdown-item" type="button"
                    @click="clickSelectPlatform('windows')">Windows</button>
                  <button class="dropdown-item" type="button" @click="clickSelectPlatform('linux')">Linux</button>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex px-0">
            <div class="d-flex justify-content-end">
              <div class="input-group search">
                <div class="input-group-prepend border-right-0 search">
                  <span class="input-group-text bg-transparent border-right-0 pl-2 pr-1"><img class="search"
                      alt="search" src="/images/icon-search-16x16@2x.png"></span>
                </div>
                <input class="form-control border-left-0 px-0" placeholder="Search queries" aria-label="Search queries"
                  v-model="inputTextValue" @keydown.self="delayInput(setSearchString, 400, 'defaultTimer')()" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="results">
        <div purpose="selected-tag" v-if="selectedTag">
          <p>Showing {{ selectedKind === 'query' ? 'informational queries' : selectedKind === 'policy' ? 'policies' : 'all queries'}} for <span purpose="query-tag" class="d-inline-block" style="cursor: pointer;" @click="clickSelectTag('')">{{selectedTag}}<span style="color: #8b8fa2;" class="fa fa-times-circle pl-2"></span></span></p>
        </div>
        <div class="category__informational">
          <div v-for="query of queriesList">
            <div class="card results" @click="clickCard(query.slug)">
              <div class="card-body">
                <div class="row justify-content-between align-items-center query-card">
                  <div class="col-12">
                    <div class="d-block d-sm-flex flex-wrap">
                      <h5 class="card-title m-0 mb-1 mr-sm-2">{{query.name}}</h5>
                      <div class="my-2 my-sm-0 flex-wrap">
                        <span class="mr-2 mb-1 text-nowrap d-inline-block" purpose="query-tag" v-for="tag in query.tags" @click.stop="clickSelectTag(tag)">{{tag}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-9 col-md-9">
                    <p class="font-italic mb-1 p-0 description">{{query.description}}</p>
                    <div class="contributors" v-if="query.contributors && query.contributors.length">
                      <div class="d-flex mb-2 mb-sm-1 align-items-center">
                        <div v-for="contributor in query.contributors">
                          <div class="d-flex m-1 avatar-frame" @click.stop="clickAvatar(contributor)">
                            <img alt="a GitHub user avatar" :alt="contributor" :src="contributor.avatarUrl" />
                          </div>
                        </div>
                        <p class="mb-0 ml-1">contributed by {{getContributorsString(query.contributors)}}</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3 col-md-auto align-self-start">
                    <div class="text-sm-right m-0">
                      <img class="d-inline-flex mr-1 mr-sm-0 ml-sm-1 ml-md-2 logo"
                        src="/images/os-macos-black-16x16@2x.png" alt="macOS"
                        v-if="query.platform.includes('darwin')" />
                      <img class="d-inline-flex mr-1 mr-sm-0 ml-sm-1 ml-md-2 logo"
                        src="/images/os-windows-black-16x16@2x.png" alt="Windows"
                        v-if="query.platform.includes('windows')" />
                      <img class="d-inline-flex mr-1 mr-ms-0 ml-sm-1 ml-md-2 logo"
                        src="/images/os-linux-black-16x16@2x.png" alt="Linux"
                        v-if="query.platform.includes('linux')" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="divider"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex justify-content-center p-3">
    <div class="card call-to-action col-6-grow my-5 library">
      <div class="card-body px-0">
        <h3 class="mb-3">Contributors</h3>
        <p><strong>Want to add your own query?</strong> Please submit a pull request
          <a href="https://github.com/fleetdm/fleet/edit/main/docs/01-Using-Fleet/standard-query-library/standard-query-library.yml">
            over on GitHub
          </a>.
        </p>
      </div>
    </div>
  </div>

</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>