@spotinst/spinnaker-deck/app/scripts/modules/core/src/search/infrastructure/infrastructure.html

Spinnaker-Deck service, forked with support to Spotinst

<div class="infrastructure">
  <div class="infrastructure-section search-header">
    <div class="container">
      <h2 class="header-section">
        <i class="fa fa-search"></i>
        <span class="search-label">Search</span>
        <input
          type="search"
          class="form-control input-lg"
          placeholder="projects, applications, clusters, load balancers, server groups, {{firewallsLabel}}"
          autofocus
          ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 300, 'blur': 0 } }"
          ng-model="query"
        />
        <div ng-if="query && query.length && query.length < viewState.minCharactersToSearch">
          <p style="margin: 10px 20px 0">
            Please enter at least {{viewState.minCharactersToSearch}} characters to begin searching.
          </p>
        </div>
      </h2>
      <div class="header-actions">
        <search-insight-menu create-app="true" createProject="true" refresh-caches="false" />
      </div>
    </div>
  </div>
  <div ng-if="ctrl.hasResults()" class="container">
    <div class="row" ng-if="moreResults">
      <div class="col-md-12">
        <p style="margin: 10px 20px 0">Only showing the first {{pageSize}} results found.</p>
      </div>
    </div>
    <div class="row infrastructure-section">
      <div class="col-md-3" ng-if="projects.length">
        <div class="row">
          <div class="col-md-12">
            <h3>Projects</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="no-results" ng-if="!projects.length">
              No projects found matching "{{query}}".<br />
              <a href ng-click="ctrl.createProject()">Create a new project</a>
            </div>
            <project-summary-pod
              ng-repeat="project in projects[0].results"
              project-name="project.name"
              applications="project.config.applications"
            >
            </project-summary-pod>
          </div>
        </div>
      </div>
      <div class="col-md-{{projects.length ? 9 : 12}}">
        <div class="row">
          <div class="col-md-12">
            <h3>Results matching "{{query}}"</h3>
          </div>
        </div>
        <div class="row" ng-if="!categories.length">
          <div class="col-md-12">
            <h4>No Infrastructure results found.</h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 category-container" ng-repeat="category in categories | orderBy:'order'">
            <div class="panel category row">
              <div class="summary">
                <span class="category-icon" ng-if="category.icon || category.iconClass">
                  <i ng-if="category.icon" class="fa fa-{{category.icon}}"></i>
                  <span ng-if="category.iconClass" class="{{category.iconClass}}"></span>
                </span>
                {{ category.type.displayName }} ({{category.results.length}})
              </div>
              <div class="details-container list-group">
                <a
                  class="list-group-item"
                  ng-repeat="result in ::category.results | searchRank: query"
                  ng-click="ctrl.clearFilters(result)"
                  href="{{ ::result.href }}"
                >
                  <search-result display-name="::result.displayName" account="::result.account"></search-result>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div ng-if="viewState.searching" class="horizontal center middle flex-1" style="margin: 25px 0; height: 100%">
    <loading-spinner size="'large'"></loading-spinner>
  </div>
  <div ng-if="ctrl.noMatches() && !viewState.searching" class="container">
    <div class="row">
      <div class="col-md-12">
        <h4 class="no-results">No results matching "{{ query }}".</h4>
      </div>
    </div>
  </div>

  <div ng-if="ctrl.showRecentResults()" class="infrastructure-section container">
    <recently-viewed-items></recently-viewed-items>
  </div>
</div>