portainer/app/docker/components/log-viewer/logViewer.html

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-header icon="fa-file-alt" title-text="Log viewer settings"></rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="form-group">
            <div class="col-sm-12">
              <label for="tls" class="control-label text-left">
                Auto-refresh logs
                <portainer-tooltip position="bottom" message="Disabling this option allows you to pause the log collection process and the auto-scrolling."></portainer-tooltip>
              </label>
              <label class="switch" style="margin-left: 20px">
                <input
                  type="checkbox"
                  ng-model="$ctrl.state.logCollection"
                  ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"
                /><i></i>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <label for="tls" class="control-label text-left"> Wrap lines </label>
              <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.state.wrapLines" /><i></i> </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <label for="tls" class="control-label text-left"> Display timestamps </label>
              <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.displayTimestamps" /><i></i> </label>
            </div>
          </div>
          <div class="form-group">
            <label for="logs_since" class="col-sm-1 control-label text-left"> Fetch </label>
            <div class="col-sm-2">
              <select class="form-control" ng-model="$ctrl.sinceTimestamp" id="logs_since">
                <option selected value="">All logs</option>
                <option ng-repeat="dt in $ctrl.state.availableSinceDatetime" ng-value="dt.value" title="{{ dt.value }}">{{ dt.desc }}</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="logs_search" class="col-sm-1 control-label text-left"> Search </label>
            <div class="col-sm-11">
              <input class="form-control" type="text" name="logs_search" ng-model="$ctrl.state.search" ng-change="$ctrl.state.selectedLines.length = 0;" placeholder="Filter..." />
            </div>
          </div>
          <div class="form-group">
            <label for="lines_count" class="col-sm-1 control-label text-left"> Lines </label>
            <div class="col-sm-11">
              <input class="form-control" type="number" name="lines_count" ng-model="$ctrl.lineCount" placeholder="Enter no of lines..." />
            </div>
          </div>
          <div class="form-group" ng-if="$ctrl.state.copySupported">
            <label class="col-sm-1 control-label text-left"> Actions </label>
            <div class="col-sm-11">
              <button class="btn btn-primary btn-sm" type="button" ng-click="$ctrl.downloadLogs()" style="margin-left: 0"><i class="fa fa-download"></i> Download logs</button>
              <button
                class="btn btn-primary btn-sm"
                ng-click="$ctrl.copy()"
                ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0].line) || !$ctrl.state.filteredLogs.length"
                ><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</button
              >
              <button
                class="btn btn-primary btn-sm"
                ng-click="$ctrl.copySelection()"
                ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0].line) || !$ctrl.state.filteredLogs.length || !$ctrl.state.selectedLines.length"
                ><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy selected lines</button
              >
              <button class="btn btn-primary btn-sm" ng-click="$ctrl.clearSelection()" ng-disabled="$ctrl.state.selectedLines.length === 0"
                ><i class="fa fa-times space-right" aria-hidden="true"></i>Unselect</button
              >
              <span>
                <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none"></i>
              </span>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" style="height: 54%">
  <div class="col-sm-12" style="height: 100%">
    <pre ng-class="{ wrap_lines: $ctrl.state.wrapLines }" class="log_viewer" scroll-glue="$ctrl.state.autoScroll" force-glue>
      <div ng-repeat="log in $ctrl.state.filteredLogs = ($ctrl.data | filter:{ 'line': $ctrl.state.search }) track by $index" class="line" ng-if="log.line"><p class="inner_line" ng-click="$ctrl.selectLine(log.line)" ng-class="{ 'line_selected': $ctrl.state.selectedLines.indexOf(log.line) > -1 }"><span ng-repeat="span in log.spans" ng-style="{ 'color': span.foregroundColor, 'background-color': span.backgroundColor }">{{ span.text }}</span></p></div>
      <div ng-if="!$ctrl.state.filteredLogs.length" class="line"><p class="inner_line">No log line matching the '{{ $ctrl.state.search }}' filter</p></div>
      <div ng-if="$ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0].line" class="line"><p class="inner_line">No logs available</p></div>
    </pre>
  </div>
</div>