rails_observatory 0.1.0

data/public/assets/stylesheets/application.css

@@ -0,0 +1,757 @@
+@import "https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;400&family=Roboto+Mono:wght@200;400&display=swap";
+
+/* app/assets/stylesheets/elements/root.css */
+:root {
+  --red: #ba181b;
+  --black: #161a1d;
+  --black-secondary: color-mix(in oklab, var(--black) 60%, white);
+  --blue: #003a61;
+  --gray: #b1a7a6;
+  --white: #eee;
+  --divider: color-mix(in oklab, var(--black) 88%, white);
+  --divider-active: color-mix(in oklab, var(--black) 75%, white);
+  --surface-active: color-mix(in oklab, var(--black) 92%, white);
+  --surface-hover: color-mix(in oklab, var(--black) 96%, white);
+  --surface-dropdown: color-mix(in oklab, var(--black) 88%, white);
+  --surface-card: color-mix(in oklab, var(--black) 96%, white);
+  --font-mono: "Roboto Mono", monospace;
+  --font-weight-bold: 400;
+}
+html,
+body {
+  font-family: "Fira Sans", sans-serif;
+  font-weight: 200;
+  color: var(--white);
+  height: 100%;
+  background-color: var(--black);
+}
+
+/* app/assets/stylesheets/elements/a.css */
+a {
+  color: var(--white);
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+/* app/assets/stylesheets/elements/button.css */
+button {
+  font-family: inherit;
+  display: flex;
+  font-size: 1rem;
+  align-items: center;
+  padding: .5rem .75rem;
+  border-radius: .5rem;
+  gap: .5rem;
+  font-weight: 400;
+  &.secondary {
+    background-color: transparent;
+    border: 1px solid var(--divider);
+    color: var(--white);
+    &:hover,
+    &:focus-within {
+      border: 1px solid var(--divider-active);
+      background-color: var(--surface-hover);
+    }
+  }
+}
+
+/* app/assets/stylesheets/elements/details.css */
+details {
+  .arrow-right {
+    transform: rotate(0deg);
+    transition: transform 100ms linear;
+  }
+  &[open] {
+    & > summary .arrow-right:first-child {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+/* app/assets/stylesheets/elements/section.css */
+section {
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 400;
+    margin: 0;
+    padding: 2rem;
+    border-bottom: 1px solid var(--divider);
+  }
+}
+
+/* app/assets/stylesheets/layout/app.css */
+@layer layout {
+  .layout-app {
+    display: grid;
+    grid-template-areas: "side-nav top-nav" "side-nav main";
+    grid-template-columns: 16rem 1fr;
+    grid-template-rows: auto 1fr;
+    margin: 0;
+    & > .layout-app-side-nav {
+      grid-area: side-nav;
+    }
+    & > .layout-app-top-nav {
+      grid-area: top-nav;
+    }
+    & > .layout-app-main {
+      grid-area: main;
+      overflow: auto;
+    }
+  }
+}
+
+/* app/assets/stylesheets/layout/details-side-panel.css */
+.layout\/details-side-panel {
+  padding: 0;
+  display: grid;
+  grid-template-areas: "details side-panel";
+  grid-template-columns: minmax(400px, 1fr) 300px;
+  & > .details {
+    grid-area: details;
+  }
+  & > .side-panel {
+    grid-area: side-panel;
+  }
+}
+
+/* app/assets/stylesheets/layout/requests.css */
+@layer layout {
+  .layout-requests_index {
+    display: grid;
+    grid-template-areas: "glance glance" "chart chart" "bycontroller bycontroller" "events events";
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content min-content auto auto;
+    gap: 2rem;
+    & > .layout-requests_index-glance {
+      grid-area: glance;
+    }
+    & > .layout-requests_index-chart {
+      grid-area: chart;
+      display: grid;
+      grid-template-columns: subgrid;
+      padding-inline: 2rem;
+    }
+    & > .layout-requests_index-by_controller {
+      grid-area: bycontroller;
+    }
+    & > .layout-requests_index-events {
+      grid-area: events;
+    }
+  }
+  .layout-events-breakdown {
+    display: grid;
+    grid-template-rows: min-content auto;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    & > .layout-events-breakdown-details {
+      border-top: 1px solid var(--divider);
+    }
+  }
+}
+
+/* app/assets/stylesheets/layout/two-column.css */
+@layer layout {
+  .layout-two-column {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+    grid-template-areas: "main side-panel";
+    gap: 2rem;
+    & > .layout-two-column-main {
+      grid-area: main;
+      padding: 1rem;
+    }
+    & > .layout-two-column-side-panel {
+      grid-area: side-panel;
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/global_modifiers.css */
+.--scrollable {
+  overflow: auto;
+}
+.--sticky {
+  position: sticky;
+  top: 0;
+  background-color: var(--black);
+  z-index: 1;
+}
+
+/* app/assets/stylesheets/application/card.css */
+.card {
+  border-radius: 0.5rem;
+  background-color: var(--surface-card);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--divider);
+  padding: 0;
+  & h2 {
+    padding: 1rem;
+    margin: 0;
+  }
+  &:has(> table, > .\~scrollable > table) {
+    & table {
+      width: 100%;
+      border-spacing: 0;
+      white-space: nowrap;
+      & th {
+        text-align: left;
+        font-weight: 400;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid var(--divider);
+        &:first-child {
+          border-top-left-radius: .5rem;
+        }
+        &:last-child {
+          border-top-right-radius: .5rem;
+        }
+      }
+      & tr:last-child td {
+        border-bottom: none;
+      }
+      & td {
+        padding: .5rem 1rem;
+        border-bottom: 1px solid var(--divider);
+        & + & {
+          border-left: 1px solid var(--divider);
+        }
+      }
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/dropdown.css */
+.dropdown {
+  position: relative;
+  & > ul {
+    background-color: var(--surface-dropdown);
+    opacity: 0;
+    visibility: hidden;
+    transform: translate(0, -1rem);
+    transition:
+      opacity .2s ease-in-out,
+      visibility .2s ease-in-out,
+      transform .2s ease-in-out;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    & > li {
+      border-bottom: 1px solid var(--divider);
+      text-align: left;
+      &:last-child {
+        border-bottom: none;
+      }
+      & > a {
+        color: var(--white);
+        text-decoration: none;
+        font-weight: 200;
+        padding: .5rem .75rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        & svg {
+          display: none;
+        }
+        &.active {
+          font-weight: 400;
+          & svg {
+            display: block;
+          }
+        }
+        &:not(.active):hover {
+          background-color: var(--surface-hover);
+        }
+      }
+    }
+  }
+  &:focus-within {
+    & > ul {
+      opacity: 100;
+      visibility: visible;
+      transform: translate(0, 0);
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/side_nav.css */
+.side-nav {
+  border-right: 1px solid var(--divider);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: stretch;
+  background: rgb(0, 144, 255);
+  background:
+    radial-gradient(
+      ellipse 100% 4rem at top,
+      rgba(0, 144, 255, 0.4) 0%,
+      rgba(22, 26, 29, 1) 100%);
+  ._active {
+    background-color: var(--surface-active);
+    color: var(--white);
+    &:hover {
+      background-color: var(--surface-active);
+    }
+  }
+  ._redis-stats {
+    align-self: center;
+    color: var(--black-secondary);
+    font-size: .85rem;
+  }
+  & > img {
+    align-self: start;
+    padding-inline: .75rem;
+    transition: all 500ms ease-in-out;
+    &:hover {
+      filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, .8));
+    }
+  }
+  & > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+    flex-grow: 1;
+    & a {
+      display: flex;
+      align-items: center;
+      padding: .5rem .75rem;
+      gap: .5rem;
+      border-radius: .5rem;
+      text-decoration: none;
+      font-weight: 400;
+      color: color-mix(in oklab, var(--black) 20%, white);
+      &:is(:hover, :focus-visible) {
+        background-color: var(--surface-hover);
+      }
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/top_nav.css */
+.top-nav {
+  grid-area: top-nav;
+  border-bottom: 1px solid var(--divider);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  ._subtitle {
+    font-weight: 200;
+    color: var(--black-secondary);
+  }
+  & > span {
+    display: flex;
+    align-items: baseline;
+    gap: .5rem;
+    & h1 {
+      margin: 0;
+      align-items: baseline;
+    }
+  }
+  .status-success {
+    background-color: #38a238;
+    padding: .25rem .5rem;
+    border-radius: .5rem;
+    font-size: 1.25rem;
+  }
+}
+
+/* app/assets/stylesheets/application/tab_nav.css */
+.tabs {
+  display: grid;
+  grid-template-rows: min-content auto;
+  grid-template-columns: minmax(0, 1fr);
+  .tabs-nav {
+    border-bottom: 1px solid var(--divider);
+    padding-block: .5rem;
+    padding-inline: 1.25rem;
+    display: flex;
+    gap: .25rem;
+  }
+  &:has(:nth-child(1 of .tabs-button) input:checked) {
+    :nth-child(1 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(2 of .tabs-button) input:checked) {
+    :nth-child(2 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(3 of .tabs-button) input:checked) {
+    :nth-child(3 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(4 of .tabs-button) input:checked) {
+    :nth-child(4 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(5 of .tabs-button) input:checked) {
+    :nth-child(5 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(6 of .tabs-button) input:checked) {
+    :nth-child(6 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(7 of .tabs-button) input:checked) {
+    :nth-child(7 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(8 of .tabs-button) input:checked) {
+    :nth-child(8 of .tab-content) {
+      display: block;
+    }
+  }
+  &:has(:nth-child(9 of .tabs-button) input:checked) {
+    :nth-child(9 of .tab-content) {
+      display: block;
+    }
+  }
+  .tabs-button {
+    & input {
+      position: absolute;
+      opacity: 0;
+    }
+    &:has(:focus-visible) {
+      outline: -webkit-focus-ring-color auto 1px;
+    }
+    &:has(:checked) {
+      background-color: var(--surface-active);
+    }
+  }
+  .tab-content {
+    display: none;
+    padding-bottom: 2rem;
+    & dd {
+      margin-left: 0;
+    }
+    & dt {
+      font-weight: 400;
+      color: var(--black-secondary);
+      margin-bottom: .75rem;
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/side_panel.css */
+.side-panel {
+  color: var(--white);
+  padding: 2rem;
+  ._occurrence_count {
+    font-size: 1.5rem;
+    font-weight: 400;
+  }
+  & dl {
+    margin: 0;
+    & dt {
+      font-weight: 400;
+      margin: 0;
+      color: var(--black-secondary);
+      font-size: 1.15rem;
+    }
+    & dd {
+      margin: 0;
+      padding-block: .5rem;
+      &[title] {
+        text-decoration: underline;
+        text-decoration-style: dotted;
+        text-decoration-color: var(--black-secondary);
+      }
+    }
+    & dd + dt {
+      margin-top: 2.5rem;
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/chart.css */
+[data-chart-type-value=icicle] {
+  .apexcharts-legend-series {
+    display: flex;
+    gap: .25rem;
+    align-items: center;
+  }
+  .apexcharts-legend-text {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    padding-block: .25rem;
+    .percent {
+      display: flex;
+      gap: .5rem;
+    }
+    .bar {
+      width: 2rem;
+      height: 14px;
+      background-color: var(--surface-card);
+      & > div {
+        height: 100%;
+        background-color: var(--blue);
+      }
+    }
+  }
+}
+.chart {
+  overflow: hidden;
+}
+
+/* app/assets/stylesheets/application/table_chart.css */
+.table-chart {
+  .table-chart-title {
+    font-size: 1.5rem;
+    font-weight: 400;
+    margin: 0;
+    padding: 1rem;
+    border-bottom: 1px solid var(--divider);
+  }
+  & tr:has(a.table-chart-row-action:hover) {
+    background-color: var(--surface-hover);
+  }
+  & a.table-chart-row-action::before {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  & > table {
+    width: 100%;
+    border-spacing: 0;
+    white-space: nowrap;
+    & th {
+      text-align: left;
+      font-weight: 400;
+      padding: 0.5rem 1rem;
+      border-bottom: 1px solid var(--divider);
+      & + & {
+        border-left: 1px solid var(--divider);
+      }
+      &:first-child {
+        padding-left: 2rem;
+      }
+      &:last-child {
+        padding-right: 2rem;
+      }
+    }
+    & tr {
+      position: relative;
+    }
+    & td {
+      padding: .5rem 1rem;
+      border-bottom: 1px solid var(--divider);
+      & + & {
+        border-left: 1px solid var(--divider);
+      }
+      &:first-child {
+        padding-left: 2rem;
+      }
+      &:last-child {
+        padding-right: 2rem;
+      }
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/query_table.css */
+.query-table {
+  display: grid;
+  --column-count: 10;
+  grid-template-columns: repeat(var(--column-count), auto);
+  grid-template-rows: min-content auto;
+  & .query-table-column {
+    padding: .5rem 1rem;
+    border-bottom: 1px solid var(--divider);
+    white-space: nowrap;
+    & + & {
+      border-left: 1px solid var(--divider);
+    }
+    &:first-child {
+      padding-left: 2rem;
+    }
+    &:last-child {
+      padding-right: 2rem;
+    }
+  }
+  & > header {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: -1 / 1;
+    flex-wrap: nowrap;
+    font-weight: var(--font-weight-bold);
+  }
+  .query-table-body {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: -1 / 1;
+  }
+  .query-table-row {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: -1 / 1;
+  }
+  & > table {
+    width: 100%;
+    border-spacing: 0;
+    white-space: nowrap;
+    & th {
+      text-align: left;
+      font-weight: 400;
+      padding: 0.5rem 1rem;
+      border-bottom: 1px solid var(--divider);
+    }
+    & td {
+      padding: .5rem 1rem;
+      border-bottom: 1px solid var(--divider);
+      & + & {
+        border-left: 1px solid var(--divider);
+      }
+    }
+  }
+}
+
+/* app/assets/stylesheets/application/tbd.css */
+.simple-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  flex-grow: 1;
+  .simple-list-title {
+    font-weight: var(--font-weight-bold);
+  }
+  & li {
+    padding: 2rem;
+  }
+  & li + li {
+    border-top: 1px solid var(--divider);
+  }
+  & a {
+    color: color-mix(in oklab, var(--black) 20%, white);
+    &:is(:hover, :focus-visible) {
+      background-color: var(--surface-hover);
+    }
+  }
+}
+.event-detail {
+  &:not([hidden]) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  max-width: 120ch;
+  .highlight {
+    border: 1px solid var(--divider);
+    .line {
+      padding: 0 1rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &:hover {
+        background-color: var(--surface-hover);
+      }
+    }
+  }
+}
+text-gauge {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-block: 1rem;
+  padding-inline: 2rem;
+  white-space: nowrap;
+  & text-gauge-title {
+  }
+  & text-gauge-value {
+    font-size: 3rem;
+    font-weight: 400;
+  }
+}
+
+/* app/assets/stylesheets/mixins/nav_button.css */
+@layer mixin {
+  .tabs .tabs-button,
+  .mixin-nav-button {
+    display: flex;
+    align-items: center;
+    padding: .5rem .75rem;
+    gap: .5rem;
+    border-radius: .5rem;
+    text-decoration: none;
+    font-weight: 400;
+    color: color-mix(in oklab, var(--black) 20%, white);
+    &:is(:hover, :focus-visible) {
+      background-color: var(--surface-hover);
+    }
+  }
+}
+
+/* app/assets/stylesheets/errors/show/details.css */
+.errors\/show\/details {
+  grid-area: details;
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  & > h2 {
+    margin-block: 1rem;
+    padding-left: 1rem;
+    font-size: 1.25rem;
+  }
+}
+
+/* app/assets/stylesheets/requests/stats.css */
+.table-bar-chart {
+  display: grid;
+  grid-template-columns: auto min-content min-content;
+  column-gap: 1rem;
+  .table-bar-row {
+    position: relative;
+    background-color: transparent;
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    padding: .5rem;
+    &:hover {
+      background-color: var(--surface-hover);
+    }
+  }
+  .table-bar-header {
+    grid-column: 1 / -1;
+    border-bottom: 1px solid var(--divider);
+    font-weight: var(--font-weight-bold);
+    padding: .5rem 0;
+  }
+  .bar {
+    background-color: var(--blue);
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    mix-blend-mode: lighten;
+    z-index: 0;
+  }
+}
+
+/* app/assets/stylesheets/application.css */
+main {
+  grid-area: main;
+  overflow: auto;
+}