@import '../lib/page.scss';
@import "../lib/plot.css";
@import "../../node_modules/@patternfly/patternfly/components/Button/button.css";
@import "../../node_modules/@patternfly/patternfly/components/Breadcrumb/breadcrumb.scss";
@import "../../node_modules/@patternfly/patternfly/layouts/Gallery/gallery.scss";
@import "../../node_modules/@patternfly/patternfly/components/Page/page.scss";
@import "../../node_modules/@patternfly/patternfly/components/Card/card.scss";

:root {
  /* Font size for titles */
  --ct-graph-title-FontSize: var(--pf-global--FontSize--xl);
}

.pf-c-page header {
  background-color: var(--pf-global--BackgroundColor--300);
}

.pf-c-page__main {
  height: 100%;

  /* Header, on this page, wraps both the breadcrumbs and optional history zooming toolbar */
  > div > header {
    display: flex;
    flex-flow: row wrap;
    // Set the background of the container to the same as the toolbars…
    // mobile causes a wrap; we want toolbars to visually extend 100% wide
    background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
    // Make the toolbar sticky, for mobile mode (when toolbars wrap)
    position: sticky;
    top: -3.5rem;
    z-index: 100;

    /* First child (breadcrumbs) should always take max space */
    > .pf-c-page__main-breadcrumb {
      flex: auto;
    }

    > .ct-page_main-toolbar {
      flex: none;
      // Remove padding and align to the center of the stretched parent
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
      display: flex;
      // Use a min-height of the text + padding of breadcrumbs to stack similarly
      // when wrapped due to content size
      min-height: 3.5rem;
    }
  }
}

#simple_graphs {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Fix dropdowns (locally) — not sure why these button-based dropdowns are odd otherwise */
.dropdown {
  > .dropdown-menu {
    padding: 0;
    margin: 0;
  }

  &-menu > li {
    list-style: none;
  }

  .fa-caret-down {
    margin-left: 0.5rem;
  }
}

.server-graph-toolbar {
  display: grid;
  flex: none;
  grid-auto-flow: column;
  grid-gap: 0.5rem;
  grid-template-columns: minmax(min-content, max-content);
  margin: 0 var(--pf-c-page__main-section--PaddingRight) 0 var(--pf-c-page__main-section--PaddingLeft);

  .ct-select,
  .dropdown {
    display: inline-flex;
  }

  #simple_graphs:not(.show-zoom-controls) & {
    /* Only show when show-zoom-controls is enabled */
    display: none;
  }
}

/* Build upon PF4's gallery, with mods */
.ct-graphs-layout {
  --graph-padding: var(--pf-l-gallery--m-gutter--GridGap);
  /* Mobile grid layout */
  grid-template: repeat(4, minmax(16rem,1fr)) / 1fr;
  width: 100%;
  height: 100%;

  .flot-base,
  .flot-text,
  .flot-overlay {
    height: 100% !important;
    width: 100% !important;
    display: block;
    flex: auto;
  }

  > * {
    overflow: hidden;
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  .ct-graphs-layout {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 641px) {
  :root {
    --ct-graph-title-FontSize: var(--pf-global--FontSize--2xl);
  }

  .ct-graphs-layout {
    /* Desktop layout */
    grid-template: repeat(2, minmax(15rem, 1fr)) / repeat(2, 1fr);
    /* Set a max height so graphs don't get too wonky vertically */
    max-height: 70rem;
  }
}

.server-graph {
  &-container {
    --graph-padding: var(--pf-l-gallery--m-gutter--GridGap);
    display: grid;
    grid-template-areas: "title" "graph" "legend";
    grid-template-rows: max-content 1fr max-content;
    padding: var(--graph-padding);
    height: 100%;
    max-height: 40rem;
  }

  &-graph {
    grid-area: graph;
    display: flex;
    min-height: 15rem;
    min-width: 15rem;

    > * {
      flex: auto;
      display: flex;
    }
  }

  &-legend {
    grid-area: legend;
    list-style-type: none;
    text-align: center;
    padding-top: 0.5rem;

    /* Add legend dots */

    i {
      font-size: 16px;
      margin: 0;
      padding: 0;
    }

    /* Set CPU colors for legend dots */

    .cpu-io-wait i {
      color: var(--color-red-1);
    }

    .cpu-kernel i {
      color: var(--color-gold);
    }

    .cpu-nice i {
      color: var(--color-green);
    }

    .cpu-user i {
      color: var(--color-purple-6);
    }

    /* Set memory colors for legend dots */

    .memory-cached i {
      color: #c8eb79;
    }

    .memory-free i {
      color: var(--color-green);
    }

    .memory-swap i {
      color: var(--color-red-1);
    }

    .memory-used i {
      color: var(--color-blue);
    }

    /* Lay out legend items */

    li {
      display: inline-block;

      + li {
        margin-left: 1rem;
      }
    }
  }

  &-title {
    grid-area: title;
  }
}

.ct-graph-simple {
  display: grid;
  grid: max-content 1fr / max-content 1fr;
  align-items: baseline;

  .server-graph {
    grid-column: 1 / -1;
    width: 100%;
    height: 100%;
  }
}

/* Style titles */
.server-graph-title,
.ct-graph-simple a {
    font-size: var(--ct-graph-title-FontSize);
}

#complicated_graphs {
  display: flex;
  flex-direction: column;
  flex: auto;
}

#complicated_graphs .pf-c-card {
  /* Fill all available space with detailed graph cards */
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
