energylink/public/sass/pages/_explore.scss

.explore {
  width: 100%;

  &-container {
    padding: $dashboard-padding;
  }

  &-wrapper {
    display: flex;

    > .explore-split {
      width: 50%;
    }
  }

  // Push split button a bit
  .explore-first-button {
    margin-left: 15px;
  }

  .explore-panel {
    margin-top: $panel-margin;
  }

  .explore-panel__body {
    padding: $panel-padding;
  }

  .explore-panel__header {
    padding: $panel-padding;
    padding-top: 5px;
    padding-bottom: 0;
    display: flex;
    cursor: pointer;
    margin-bottom: 5px;
    transition: all 0.1s linear;
  }

  .explore-panel__header-label {
    font-weight: 500;
    margin-right: $panel-margin;
    font-size: $font-size-h6;
    box-shadow: $text-shadow-faint;
  }

  .explore-panel__header-buttons {
    margin-right: $panel-margin;
    font-size: $font-size-lg;
    line-height: $font-size-h6;
  }

  // Make sure wrap buttons around on small screens
  .navbar {
    flex-wrap: wrap;
    height: auto;
  }

  .navbar-page-btn {
    margin-right: 1rem;

    // Explore icon in header
    .fa {
      font-size: 100%;
      opacity: 0.75;
      margin-right: 0.5em;
    }
  }

  // Toggle mode
  .navbar-button.active {
    color: $btn-active-text-color;
    background-color: $btn-active-bg;
  }

  .navbar-button--no-icon {
    line-height: 18px;
  }

  .result-options {
    margin: 2 * $panel-margin 0;
  }

  .time-series-disclaimer {
    width: 300px;
    margin: $panel-margin auto;
    padding: 10px 0;
    border-radius: $border-radius;
    text-align: center;
    background-color: $panel-bg;

    .disclaimer-icon {
      color: $yellow;
      margin-right: $panel-margin/2;
    }

    .show-all-time-series {
      cursor: pointer;
      color: $external-link-color;
    }
  }

  .navbar .elapsed-time {
    position: absolute;
    left: 0;
    right: 0;
    top: 3.5rem;
    text-align: center;
    font-size: 0.8rem;
  }

  .graph-legend {
    flex-wrap: wrap;
  }

  .explore-panel__loader {
    height: 2px;
    position: relative;
    overflow: hidden;
    background: none;
    margin: $panel-margin / 2;
    transition: background-color 1s ease;
  }

  .explore-panel__loader--active {
    background: $text-color-faint;
  }

  .explore-panel__loader--active:after {
    content: ' ';
    display: block;
    width: 25%;
    top: 0;
    top: -50%;
    height: 250%;
    position: absolute;
    animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    animation-iteration-count: 100;
    z-index: 2;
    background: $blue;
  }

  @keyframes loader {
    from {
      left: -25%;
    }
    to {
      left: 100%;
    }
  }

  .datasource-picker {
    min-width: 200px;
  }

  .timepicker {
    display: flex;

    &-rangestring {
      margin-left: 0.5em;
    }
  }

  .run-icon {
    margin-left: 0.5em;
    transform: rotate(90deg);
  }

  .relative {
    position: relative;
  }

  .link {
    text-decoration: underline;
  }
}

.explore + .explore {
  border-left: 1px dotted $table-border;
}

.query-row {
  display: flex;
  position: relative;

  & + & {
    margin-top: 0.5rem;
  }
}

.query-row-tools {
  white-space: nowrap;
}

.query-row-status {
  position: absolute;
  top: 0;
  right: 90px;
  z-index: 1015;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 34px;
}

.query-row-field {
  margin-right: 3px;
  width: 100%;
}

.query-transactions {
  display: table;
}

.query-transaction {
  display: table-row;
  color: $text-color-faint;
  line-height: 1.44;
}

.query-transaction--loading {
  animation: query-loading-color-change 1s alternate 100;
}

@keyframes query-loading-color-change {
  from {
    color: $text-color-faint;
  }
  to {
    color: $blue;
  }
}

.query-transaction__type,
.query-transaction__duration {
  display: table-cell;
  font-size: $font-size-xs;
  text-align: right;
  padding-right: 0.25em;
}

.explore {
  .logs {
    .logs-controls {
      display: flex;
      background-color: $page-bg;
      padding: $panel-padding;
      padding-top: 10px;
      border-radius: $border-radius;
      margin: 2*$panel-margin 0;
      border: $panel-border;
      justify-items: flex-start;
      align-items: flex-start;

      > * {
        margin-right: 1em;
      }
    }

    .logs-nodata {
      > * {
        margin-left: 0.5em;
      }
    }

    .logs-meta {
      flex: 1;
      color: $text-color-weak;
      // Align first line with controls labels
      margin-top: -2px;
    }

    .logs-meta-item {
      margin-right: 1em;
    }

    .logs-meta-item__label {
      margin-right: 0.5em;
      font-size: 0.9em;
      font-weight: 500;
    }

    .logs-meta-item__value {
      font-family: $font-family-monospace;
    }

    .logs-meta-item__value-labels {
      // compensate for the labels padding
      position: relative;
      top: 4px;
    }

    .logs-entries {
      display: grid;
      grid-column-gap: 1rem;
      grid-row-gap: 0.1rem;
      font-family: $font-family-monospace;
      font-size: 12px;
    }

    .logs-row-match-highlight {
      // Undoing mark styling
      background: inherit;
      padding: inherit;

      color: $typeahead-selected-color;
      border-bottom: 1px solid $typeahead-selected-color;
      background-color: rgba($typeahead-selected-color, 0.1);
    }

    .logs-row-match-highlight--preview {
      background-color: rgba($typeahead-selected-color, 0.2);
      border-bottom-style: dotted;
    }

    .logs-row-level {
      background-color: transparent;
      margin: 2px 0;
      position: relative;
      opacity: 0.8;
    }

    .logs-row-level-critical,
    .logs-row-level-crit {
      background-color: #705da0;
    }

    .logs-row-level-error,
    .logs-row-level-err {
      background-color: #e24d42;
    }

    .logs-row-level-warning,
    .logs-row-level-warn {
      background-color: #eab839;
    }

    .logs-row-level-info {
      background-color: #7eb26d;
    }

    .logs-row-level-debug {
      background-color: #1f78c1;
    }

    .logs-row-level-trace {
      background-color: #6ed0e0;
    }

    .logs-row-duplicates {
      text-align: right;
    }

    .logs-label {
      display: inline-block;
      padding: 0 2px;
      background-color: $btn-inverse-bg;
      border-radius: $border-radius;
      margin: 0 4px 2px 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
    }

    .logs-label__icon {
      border-left: $panel-border;
      padding: 0 2px;
      cursor: pointer;
      margin-left: 2px;
    }

    .logs-label__stats {
      position: absolute;
      top: 1.25em;
      left: -10px;
      z-index: 100;
      background-color: $popover-bg;
      color: $popover-color;
      border: 1px solid $popover-border-color;
      padding: 10px;
      border-radius: $border-radius;
      justify-content: space-between;
      box-shadow: $popover-shadow;
    }

    .logs-row-labels {
      line-height: 1.2;
    }

    .logs-stats__info {
      margin-bottom: $spacer / 2;
    }

    .logs-stats__icon {
      margin-left: 0.5em;
      cursor: pointer;
    }

    .logs-stats-row {
      margin: $spacer/1.75 0;

      &--active {
        color: $blue;
        position: relative;
      }

      &--active:after {
        display: inline;
        content: '*';
        position: absolute;
        top: 0;
        left: -8px;
      }

      &__label {
        display: flex;
        margin-bottom: 1px;
      }

      &__value {
        flex: 1;
      }

      &__count,
      &__percent {
        text-align: right;
        margin-left: 0.5em;
      }

      &__percent {
        width: 3em;
      }

      &__bar,
      &__innerbar {
        height: 4px;
        overflow: hidden;
        background: $text-color-faint;
      }

      &__innerbar {
        background-color: $blue;
      }
    }
  }
}

// Prometheus-specifics, to be extracted to datasource soon

.explore {
  .prom-query-field {
    display: flex;
  }

  .prom-query-field-wrapper {
    width: 100%;
  }

  .prom-query-field-info {
    margin: 0.25em 0.5em 0.5em;
    display: flex;

    details {
      margin-left: 1em;
    }
  }
}

// ReactTable basic overrides (does not include pivot/groups/filters)
// When integrating ReactTable as new panel plugin, move to _panel_table.scss

.ReactTable {
  border: none;
}

.ReactTable .rt-table {
  // Allow some space for the no-data text
  min-height: 90px;
}

.ReactTable .rt-thead.-header {
  box-shadow: none;
  background: $list-item-bg;
  border-top: 2px solid $body-bg;
  border-bottom: 2px solid $body-bg;
  height: 2em;
}
.ReactTable .rt-thead.-header .rt-th {
  text-align: left;
  color: $blue;
  font-weight: 500;
}
.ReactTable .rt-thead .rt-td,
.ReactTable .rt-thead .rt-th {
  padding: 0.45em 0 0.45em 1.1em;
  border-right: none;
  box-shadow: none;
}
.ReactTable .rt-tbody .rt-td {
  padding: 0.45em 0 0.45em 1.1em;
  border-bottom: 2px solid $body-bg;
  border-right: 2px solid $body-bg;
}
.ReactTable .rt-tbody .rt-td:last-child {
  border-right: none;
}
.ReactTable .-pagination {
  border-top: none;
  box-shadow: none;
  margin-top: $panel-margin;
}
.ReactTable .-pagination .-btn {
  color: $blue;
  background: $list-item-bg;
}
.ReactTable .-pagination input,
.ReactTable .-pagination select {
  color: $input-color;
  background-color: $input-bg;
}
.ReactTable .-loading {
  background: $input-bg;
}
.ReactTable .-loading.-active {
  opacity: 0.8;
}
.ReactTable .-loading > div {
  color: $input-color;
}
.ReactTable .rt-tr .rt-td:last-child {
  text-align: right;
}
.ReactTable .rt-noData {
  top: 60px;
  z-index: inherit;
}

// React-component cascade fix: show "loading" even though item can expand

.rc-cascader-menu-item-loading:after {
  position: absolute;
  right: 12px;
  content: 'loading';
  color: #767980;
  font-style: italic;
}

// TODO Experimental

.cheat-sheet-item {
  margin: 2*$panel-margin 0;
  width: 50%;
}

.cheat-sheet-item__title {
  font-size: $font-size-h3;
}

.cheat-sheet-item__expression {
  margin: $panel-margin/2 0;
  cursor: pointer;
}