OctoprintKlipperPlugin/octoprint_klipper/templates/klipper_tab_main.jinja2

<div class="row-fluid">
  <div id="left-side">
    <label> <i class="icon-tasks"></i> {{ _("Messages") }} </label>
    <div class="plugin-klipper-log" data-bind="foreach: logMessages">
      <div class="log-item" data-bind="css: type">
        <div data-bind="text: time" class="ts"></div>
        <div data-bind="html: msg" class="msg"></div>
      </div>
    </div>
    &nbsp;
    <button class="btn btn-mini pull-right clear-btn" data-bind="click: onClearLog" title="{{ _('Clear Log') }}">
      <i class="fa fa-trash"></i> {{ _('Clear Log') }}
    </button>
  </div>
  <div id="right-side">
    <div class="control-group">
      <div class="control-group">
        <div class="controls">
          <label class="control-label"></label>
          <button class="btn btn-block btn-small" data-bind="click: onGetStatus, enable: isActive()"
            title="{{ _('Query Klipper for its current status') }}">
            <i class="fa icon-black fa-info-circle"></i> {{ _("Get Status") }}
          </button>
          <button class="btn btn-block btn-small"
            data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.PLUGIN_KLIPPER_CONFIG), click: openOctoKlipperSettings('klipper-basic')"
            title="{{ _('Open the OctoKlipper Settings') }}">
            {{ _("Open OctoKlipper Settings") }}
          </button>
          <button class="btn btn-block btn-small"
            data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.PLUGIN_KLIPPER_CONFIG), click: showEditorDialog"
            title="{{ _('Show the Editor') }}">
            <i class="fa icon-black fa-file-code-o"></i>
            {{ _("Show Editor") }}
          </button>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <label class="control-label small"><i class="icon-refresh"></i> {{ _("Restart") }}</label>
          <button class="btn btn-block btn-small" data-bind="click: onRestartHost, enable: isActive()"
            title="{{ _('This will cause the host software to reload its config and perform an internal reset') }}">
            {{ _("Host") }}
          </button>
          <button class="btn btn-block btn-small" data-bind="click: onRestartFirmware, enable: isActive()"
            title="{{ _('Similar to a host restart, but also clears any error state from the micro-controller') }}">
            {{ _("Firmware") }}
          </button>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <label class="control-label"><i class="icon-wrench"></i> {{ _("Tools") }}</label>
          <button class="btn btn-block btn-small" data-bind="click: showLevelingDialog, enable: isActive()"
            title="{{ _('Assists in manually leveling your printbed by moving the head to a configurable set of positions in sequence.') }}">
            {{ _("Assisted Bed Leveling") }}
          </button>
          <button class="btn btn-block btn-small" data-bind="click: showPidTuningDialog, enable: isActive()"
            title="{{ _('Determines optimal PID parameters by heat cycling the hotend/bed.') }}">
            {{ _("PID Tuning") }}
          </button>
          <button class="btn btn-block btn-small" data-bind="click: showOffsetDialog, enable: isActive()"
            title="{{ _('Sets a offset for subsequent GCODE coordinates.') }}">
            {{ _("Coordinate Offset") }}
          </button>
          <button class="btn btn-block btn-small" data-bind="click: showGraphDialog"
            title="{{ _('Assists in debugging performance issues by analyzing the Klipper log files.') }}">
            {{ _("Analyze Klipper Log") }}
          </button>
        </div>
      </div>
      <div class="controls" data-bind="visible: $root.loginState.hasPermissionKo($root.access.permissions.PLUGIN_KLIPPER_MACRO)">
        <label class="control-label"><i class="icon-list-alt"></i> {{ _("Macros") }}</label>
        <div data-bind="foreach: settings.settings.plugins.klipper.macros">
          <!-- ko if: tab -->
          <button class="btn btn-block btn-small" data-bind="text: name, click: $parent.executeMacro, enable: $parent.isActive()">
          </button>
          <!-- /ko -->
        </div>
      </div>
    </div>
  </div>
</div>