rails_observatory 0.1.0

data/app/assets/stylesheets/application/side_nav.css

@@ -0,0 +1,62 @@
+.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);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/application/side_panel.css

@@ -0,0 +1,35 @@
+.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;
+    }
+  }
+}

data/app/assets/stylesheets/application/tab_nav.css

@@ -0,0 +1,64 @@
+.tabs {
+
+  display: grid;
+  grid-template-rows: min-content auto;
+  grid-template-columns: minmax(0, 1fr);
+
+  .tabs-nav {
+    border-bottom: 1px solid var(--divider);
+    /*border-top: 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 {
+    /* Mixin .mixin-nav-button */
+
+    & input {
+      position: absolute;
+      /*z-index: -100;*/
+      opacity: 0;
+
+    }
+
+    &:has(:focus-visible) {
+      outline: -webkit-focus-ring-color auto 1px;
+    }
+
+    &:has(:checked) {
+      background-color: var(--surface-active);
+    }
+  }
+
+    /*& label:has(:focus) {*/
+    /*  outline: -webkit-focus-ring-color auto 1px;*/
+    /*}*/
+
+  .tab-content {
+    display: none;
+    padding-bottom: 2rem;
+
+    & dd {
+      margin-left: 0;
+    }
+    & dt {
+      font-weight: 400;
+      color: var(--black-secondary);
+      margin-bottom: .75rem;
+    }
+  }
+}

data/app/assets/stylesheets/application/table_chart.css

@@ -0,0 +1,66 @@
+.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;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/application/tbd.css

@@ -0,0 +1,70 @@
+.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;
+  }
+}

data/app/assets/stylesheets/application/top_nav.css

@@ -0,0 +1,33 @@
+.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 {
+    /*color: #3ad23a;*/
+    background-color: #38a238;
+    padding: .25rem .5rem;
+    border-radius: .5rem;
+    font-size:1.25rem;
+  }
+}

data/app/assets/stylesheets/application.css

@@ -0,0 +1,42 @@
+/* Element override styling */
+@import url('elements/root.css');
+@import url('elements/a.css');
+@import url('elements/button.css');
+@import url('elements/details.css');
+@import url('elements/section.css');
+
+/* Layout */
+@import url('layout/app.css');
+@import url('layout/details-side-panel.css');
+@import url('layout/requests.css');
+@import url('layout/two-column.css');
+
+/* Application styles */
+@import url('application/global_modifiers.css');
+@import url('application/card.css');
+@import url('application/dropdown.css');
+@import url('application/side_nav.css');
+@import url('application/top_nav.css');
+@import url('application/tab_nav.css');
+@import url('application/side_panel.css');
+@import url('application/chart.css');
+@import url('application/table_chart.css');
+@import url("application/query_table.css");
+@import url("application/tbd.css");
+
+/* Mixins */
+@import url('mixins/nav_button.css');
+
+
+/* page styles */
+@import url('errors/show/details.css');
+
+@import url('requests/stats.css');
+
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;400&family=Roboto+Mono:wght@200;400&display=swap');
+
+
+main {
+  grid-area: main;
+  overflow: auto;
+}

data/app/assets/stylesheets/elements/a.css

@@ -0,0 +1,8 @@
+a {
+  color: var(--white);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

data/app/assets/stylesheets/elements/button.css

@@ -0,0 +1,21 @@
+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);
+    }
+  }
+}

data/app/assets/stylesheets/elements/details.css

@@ -0,0 +1,12 @@
+details {
+  .arrow-right {
+    transform: rotate(0deg);
+    transition: transform 100ms linear;
+  }
+
+  &[open] {
+    & >summary .arrow-right:first-child {
+      transform: rotate(90deg);
+    }
+  }
+}

data/app/assets/stylesheets/elements/root.css

@@ -0,0 +1,26 @@
+: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);
+}

data/app/assets/stylesheets/elements/section.css

@@ -0,0 +1,9 @@
+section {
+  h2 {
+    font-size: 1.5rem;
+    font-weight: 400;
+    margin: 0;
+    padding: 2rem;
+    border-bottom: 1px solid var(--divider);
+  }
+}

data/app/assets/stylesheets/errors/show/details.css

@@ -0,0 +1,13 @@
+.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;
+  }
+}

data/app/assets/stylesheets/layout/app.css

@@ -0,0 +1,23 @@
+@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;
+    }
+  }
+}

data/app/assets/stylesheets/layout/details-side-panel.css

@@ -0,0 +1,15 @@
+.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;
+  }
+}

data/app/assets/stylesheets/layout/requests.css

@@ -0,0 +1,45 @@
+@layer layout {
+  .layout-requests_index {
+    display: grid;
+
+    grid-template-areas:
+        'glance glance'
+        'chart chart'
+        /*'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);
+    }
+  }
+}

data/app/assets/stylesheets/layout/two-column.css

@@ -0,0 +1,17 @@
+@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;
+    }
+  }
+}

data/app/assets/stylesheets/mixins/nav_button.css

@@ -0,0 +1,19 @@
+/* Mixin: Nav Button*/
+
+@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);
+    }
+  }
+}

data/app/assets/stylesheets/requests/stats.css

@@ -0,0 +1,35 @@
+.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;
+  }
+}

data/app/controllers/rails_observatory/application_controller.rb

@@ -0,0 +1,24 @@
+module RailsObservatory
+  class ApplicationController < ::ActionController::Base
+
+    before_action :set_duration
+    around_action :set_time_range
+    def set_time_range
+      TimeSeries.with_slice(duration.seconds.ago..) do
+        yield
+      end
+    end
+
+    def set_duration
+      if params[:duration].presence
+        session[:duration] = params[:duration].to_i
+      end
+    end
+
+    def duration
+      ActiveSupport::Duration.build((session[:duration] || 1.hour).to_i)
+    end
+    helper_method :duration
+
+  end
+end

data/app/controllers/rails_observatory/errors_controller.rb

@@ -0,0 +1,27 @@
+module RailsObservatory
+  class ErrorsController < ApplicationController
+
+    before_action :set_duration
+
+    def index
+      Error.ensure_index
+      @errors = Error.all
+      @series_by_fingerprint = TimeSeries.where(name: "error.count", fingerprint: @errors.map(&:fingerprint))
+                                         .downsample(12, using: :sum)
+                                         .index_by { _1.labels[:fingerprint] }
+      @count_by_fingerprint = TimeSeries.where(name: "error.count", fingerprint: @errors.map(&:fingerprint)).group(:fingerprint).sum
+    end
+
+    def show
+      @time_range = (1.hour.ago..)
+      @error = Error.find(params[:id])
+      series = TimeSeries.where(name: "error.count", fingerprint: @error.fingerprint)
+                         .downsample(24, using: :sum)
+      @count = TimeSeries.where(name: "error.count", fingerprint: @error.fingerprint).slice(2.years.ago..).downsample(1, using: :sum).first.value
+      # puts series.slice(1.day.ago..).to_a.size
+      @past_24_hours = series.slice(24.hours.ago..).first
+      @past_7_days = series.slice(7.days.ago..).first
+      @past_30_days = series.slice(30.days.ago..).first
+    end
+  end
+end