upright 0.1.0

data/app/assets/stylesheets/upright/header.css

@@ -0,0 +1,124 @@
+@layer components {
+  .header {
+    align-items: center;
+    background-color: var(--color-ink-lightest);
+    border-bottom: var(--border);
+    display: flex;
+    gap: calc(var(--inline-space) * 2);
+    justify-content: space-between;
+    padding: var(--block-space) calc(var(--inline-space) * 2);
+  }
+
+  .header__left {
+    align-items: center;
+    display: flex;
+    gap: var(--inline-space);
+  }
+
+  .header__logo {
+    color: var(--color-ink);
+    font-size: var(--text-normal);
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    &:hover {
+      color: var(--color-link);
+      text-decoration: none;
+    }
+  }
+
+  .header__site {
+    color: var(--color-positive);
+    font-size: var(--text-x-small);
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    margin-right: calc(var(--inline-space) * 2);
+    text-transform: uppercase;
+  }
+
+  .header__nav {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    gap: calc(var(--inline-space) * 3);
+  }
+
+  .header__link {
+    align-items: center;
+    color: var(--color-ink-dark);
+    display: flex;
+    font-size: var(--text-x-small);
+    font-weight: 500;
+    gap: 0.25em;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+
+    &:hover {
+      color: var(--color-ink);
+    }
+
+    &.active {
+      color: var(--color-positive);
+    }
+  }
+
+  .header__divider {
+    background: var(--color-ink-light);
+    height: 1em;
+    width: 1px;
+  }
+
+  .header__user {
+    align-items: center;
+    display: flex;
+    gap: var(--inline-space);
+  }
+
+  .main {
+    padding: calc(var(--block-space) * 2);
+  }
+
+  @media (max-width: 85ch) {
+    .header {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--block-space);
+      padding: var(--block-space);
+    }
+
+    .header__left {
+      justify-content: space-between;
+    }
+
+    .header__nav {
+      flex-wrap: wrap;
+      gap: calc(var(--inline-space) * 2);
+    }
+
+    .header__user {
+      justify-content: space-between;
+      padding-top: var(--block-space);
+      border-top: var(--border);
+    }
+  }
+
+  @media (max-width: 55ch) {
+    .header {
+      padding: calc(var(--block-space) * 0.75);
+    }
+
+    .header__nav {
+      gap: var(--inline-space);
+    }
+
+    .header__link {
+      font-size: calc(var(--text-x-small) * 0.9);
+    }
+
+    .main {
+      padding: var(--block-space);
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+@layer components {
+  .service-frame {
+    border: none;
+    display: block;
+    height: calc(100dvh - 3.5rem);
+    width: 100%;
+  }
+
+  .main:has(.service-frame) {
+    overflow: hidden;
+    padding: 0;
+  }
+
+  body:has(.service-frame) {
+    overflow: hidden;
+  }
+
+  .container {
+    display: flex;
+    gap: calc(var(--inline-space) * 2);
+    margin: 0 auto;
+    max-width: var(--main-width);
+  }
+
+  aside {
+    background: oklch(var(--lch-ink-lightest) / 85%);
+    border-radius: 0.25rem;
+    box-shadow: var(--shadow);
+    height: fit-content;
+    min-width: 180px;
+    padding: var(--block-space);
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: 2px;
+    }
+
+    a {
+      border-radius: 0.125rem;
+      display: block;
+      font-size: var(--text-small);
+      padding: calc(var(--block-space) / 2);
+      transition: background-color 100ms;
+
+      &:hover {
+        background-color: var(--color-ink-lighter);
+        text-decoration: none;
+      }
+
+      &.active {
+        background-color: var(--color-ink);
+        color: var(--color-ink-inverted);
+        font-weight: 500;
+
+        &:hover {
+          background-color: var(--color-link);
+        }
+      }
+    }
+  }
+
+  main {
+    flex: 1;
+  }
+
+  @media (max-width: 140ch) {
+    .container {
+      flex-direction: column;
+    }
+
+    aside {
+      min-width: auto;
+      width: 100%;
+    }
+
+    aside ul {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 0.25em;
+    }
+
+    aside li {
+      margin-bottom: 0;
+    }
+
+    aside a {
+      padding: 0.4em 0.6em;
+      font-size: var(--text-x-small);
+    }
+
+    .main {
+      padding: var(--block-space);
+    }
+  }
+}

data/app/assets/stylesheets/upright/map.css

@@ -0,0 +1,25 @@
+@layer components {
+  #sites-map {
+    border-radius: 0.25rem;
+    box-shadow: var(--shadow);
+    height: 400px;
+    margin-bottom: calc(var(--block-space) * 2);
+    width: 100%;
+
+    .leaflet-tile-pane img {
+      max-width: none !important;
+    }
+  }
+
+  @media (max-width: 140ch) {
+    #sites-map {
+      height: 300px;
+    }
+  }
+
+  @media (max-width: 55ch) {
+    #sites-map {
+      height: 250px;
+    }
+  }
+}

data/app/assets/stylesheets/upright/pagination.css

@@ -0,0 +1,45 @@
+@layer components {
+  .pagination {
+    align-items: center;
+    display: flex;
+    gap: calc(var(--inline-space) * 2);
+    justify-content: center;
+    margin-top: calc(var(--block-space) * 2);
+  }
+
+  .pagination__prev,
+  .pagination__next {
+    background: var(--color-ink-lightest);
+    border-radius: 0.125rem;
+    border: var(--border);
+    color: var(--color-ink);
+    font-size: var(--text-x-small);
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    padding: 0.5em 1em;
+    text-transform: uppercase;
+
+    &:hover:not(.pagination__prev--disabled):not(.pagination__next--disabled) {
+      background: var(--color-ink-lighter);
+      text-decoration: none;
+    }
+  }
+
+  .pagination__prev--disabled,
+  .pagination__next--disabled {
+    color: var(--color-ink-medium);
+    cursor: not-allowed;
+  }
+
+  .pagination__info {
+    color: var(--color-ink-dark);
+    font-size: var(--text-small);
+  }
+
+  @media (max-width: 140ch) {
+    .pagination {
+      flex-wrap: wrap;
+      gap: var(--block-space);
+    }
+  }
+}

data/app/assets/stylesheets/upright/probes.css

@@ -0,0 +1,72 @@
+@layer components {
+  .probe__cell {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  .probe__icon {
+    flex-shrink: 0;
+  }
+
+  .probe__name {
+    font-weight: 500;
+  }
+
+  .probe__target {
+    color: var(--color-ink-medium);
+    font-size: var(--text-x-small);
+    margin-top: 0.125em;
+  }
+
+  .probe__badge {
+    background: var(--color-ink-lighter);
+    border-radius: 0.125rem;
+    color: var(--color-ink-dark);
+    font-size: var(--text-x-small);
+    padding: 0.25em 0.5em;
+    text-transform: uppercase;
+  }
+
+  .status--ok {
+    color: var(--color-positive);
+    font-weight: 500;
+  }
+
+  .status--fail {
+    color: var(--color-negative);
+    font-weight: 600;
+  }
+
+  .probe-results__chart {
+    background: oklch(var(--lch-ink-lightest) / 85%);
+    border-radius: 0.25rem;
+    box-shadow: var(--shadow);
+    margin-bottom: calc(var(--block-space) * 1.5);
+    padding: var(--block-space);
+
+    circle {
+      stroke: none;
+    }
+
+    text {
+      font-family: var(--font-mono);
+      font-size: var(--text-x-small);
+    }
+  }
+
+  @media (max-width: 140ch) {
+    .probe__target {
+      display: none;
+    }
+
+    .probe__cell {
+      gap: 0.25em;
+    }
+  }
+
+  @media (max-width: 55ch) {
+    .probe__name {
+      word-break: break-word;
+    }
+  }
+}

data/app/assets/stylesheets/upright/reset.css

@@ -0,0 +1,26 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p {
+    margin: 0;
+  }
+
+  summary {
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      content: "";
+    }
+  }
+}

data/app/assets/stylesheets/upright/tables.css

@@ -0,0 +1,63 @@
+@layer components {
+  table {
+    background: oklch(var(--lch-ink-lightest) / 85%);
+    border-collapse: collapse;
+    border-radius: 0.25rem;
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    width: 100%;
+  }
+
+  thead {
+    background: var(--color-ink-lighter);
+  }
+
+  th {
+    font-size: var(--text-x-small);
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    padding: calc(var(--block-space) * 0.75) var(--block-space);
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  td {
+    border-top: var(--border);
+    font-size: var(--text-small);
+    padding: calc(var(--block-space) * 0.75) var(--block-space);
+  }
+
+  tbody tr {
+    cursor: pointer;
+    transition: background-color 100ms;
+
+    &:hover {
+      background-color: var(--color-canvas);
+    }
+  }
+
+  @media (max-width: 140ch) {
+    th, td {
+      padding: calc(var(--block-space) * 0.5) calc(var(--block-space) * 0.5);
+      font-size: var(--text-x-small);
+    }
+
+    /* Hide Duration column (3rd column) */
+    th:nth-child(3),
+    td:nth-child(3) {
+      display: none;
+    }
+  }
+
+  @media (max-width: 55ch) {
+    /* Hide Time column (4th column) */
+    th:nth-child(4),
+    td:nth-child(4) {
+      display: none;
+    }
+
+    th, td {
+      padding: calc(var(--block-space) * 0.4) calc(var(--block-space) * 0.4);
+    }
+  }
+}

data/app/assets/stylesheets/upright/typography.css

@@ -0,0 +1,27 @@
+@layer base {
+  h1 {
+    font-size: var(--text-x-large);
+    font-weight: 500;
+    letter-spacing: -0.02em;
+    margin-bottom: var(--block-space);
+    text-transform: uppercase;
+  }
+
+  h2 {
+    font-size: var(--text-large);
+    font-weight: 500;
+    letter-spacing: -0.01em;
+    margin-bottom: var(--block-space);
+  }
+
+  p {
+    color: var(--color-ink-dark);
+    margin-bottom: calc(var(--block-space) * 1.5);
+  }
+
+  @media (max-width: 55ch) {
+    h1 {
+      font-size: var(--text-large);
+    }
+  }
+}

data/app/assets/stylesheets/upright/uptime-bars.css

@@ -0,0 +1,154 @@
+@layer components {
+  .uptime-bars {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .uptime-bars__header {
+    background: var(--color-ink-lighter);
+    display: grid;
+    font-size: var(--text-x-small);
+    font-weight: 500;
+    gap: var(--block-space);
+    grid-template-columns: minmax(200px, 1fr) 1fr auto;
+    letter-spacing: 0.04em;
+    padding: calc(var(--block-space) * 0.75) var(--block-space);
+    text-transform: uppercase;
+  }
+
+
+  .uptime-bars__row {
+    border-top: 1px solid var(--color-ink-lighter);
+    display: grid;
+    gap: var(--block-space);
+    grid-template-columns: minmax(200px, 1fr) 1fr auto;
+    padding: calc(var(--block-space) * 0.75) var(--block-space);
+    transition: background-color 100ms;
+  }
+
+  .uptime-bars__row:hover {
+    background: var(--color-canvas);
+  }
+
+  .uptime-bars__probe {
+    align-items: center;
+    color: inherit;
+    display: flex;
+    gap: 0.75em;
+    min-width: 0;
+
+    &:hover {
+      color: var(--color-link);
+      text-decoration: none;
+    }
+  }
+
+  .uptime-bars__probe .probe__badge {
+    flex-shrink: 0;
+  }
+
+  .uptime-bars__probe .probe__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .uptime-bars__days {
+    align-items: center;
+    display: flex;
+    gap: 2px;
+  }
+
+  .uptime-bars__uptime {
+    font-size: var(--text-small);
+    font-weight: 500;
+    text-align: right;
+    width: 7ch;
+  }
+
+  .uptime-bars__uptime--excellent {
+    color: var(--color-positive);
+  }
+
+  .uptime-bars__uptime--good {
+    color: oklch(70% 0.12 145);
+  }
+
+  .uptime-bars__uptime--warning {
+    color: oklch(75% 0.15 85);
+  }
+
+  .uptime-bars__uptime--critical,
+  .uptime-bars__uptime--down {
+    color: var(--color-negative);
+  }
+
+  /* Individual uptime bar (separate block) */
+  .uptime-bar {
+    border-radius: 2px;
+    cursor: default;
+    flex: 1;
+    height: 24px;
+    max-width: 12px;
+    min-width: 4px;
+    transition: transform 100ms, filter 100ms;
+  }
+
+  .uptime-bar:hover {
+    filter: brightness(1.1);
+    transform: scaleY(1.15);
+  }
+
+  .uptime-bar--excellent {
+    background: var(--color-positive);
+  }
+
+  .uptime-bar--good {
+    background: oklch(70% 0.14 145);
+  }
+
+  .uptime-bar--warning {
+    background: oklch(75% 0.15 85);
+  }
+
+  .uptime-bar--critical {
+    background: oklch(65% 0.16 42);
+  }
+
+  .uptime-bar--down {
+    background: var(--color-negative);
+  }
+
+  .uptime-bar--no-data {
+    background: var(--color-ink-light);
+    opacity: 0.4;
+  }
+
+  @media (max-width: 85ch) {
+    .uptime-bars__header,
+    .uptime-bars__row {
+      grid-template-columns: minmax(120px, 150px) 1fr auto;
+      gap: calc(var(--block-space) * 0.5);
+    }
+
+    .uptime-bars__probe .probe__badge {
+      display: none;
+    }
+  }
+
+  @media (max-width: 55ch) {
+    .uptime-bars__header,
+    .uptime-bars__row {
+      grid-template-columns: minmax(80px, 120px) 1fr auto;
+      padding: calc(var(--block-space) * 0.5);
+    }
+
+    .uptime-bar {
+      height: 18px;
+    }
+
+    .uptime-bars__days .uptime-bar:not(:nth-last-child(-n+7)) {
+      display: none;
+    }
+  }
+}

data/app/controllers/concerns/upright/authentication.rb

@@ -0,0 +1,21 @@
+module Upright::Authentication
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :authenticate_user
+    helper_method :signed_in?
+  end
+
+  private
+    def authenticate_user
+      if session[:user_info].present?
+        Upright::Current.user = Upright::User.new(session[:user_info])
+      else
+        redirect_to new_admin_session_url(default_url_options.merge(subdomain: Upright.configuration.global_subdomain)), allow_other_host: true
+      end
+    end
+
+    def signed_in?
+      Upright::Current.user.present?
+    end
+end

data/app/controllers/concerns/upright/subdomain_scoping.rb

@@ -0,0 +1,18 @@
+module Upright::SubdomainScoping
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :redirect_to_app_subdomain, if: -> { request.subdomain.blank? }
+    before_action :set_current_subdomain
+  end
+
+  private
+    def redirect_to_app_subdomain
+      redirect_to root_url(default_url_options.merge(subdomain: Upright.configuration.global_subdomain)), allow_other_host: true
+    end
+
+    def set_current_subdomain
+      Upright::Current.subdomain = request.subdomain.presence
+      Upright::Current.site = Upright.find_site(Upright::Current.subdomain)
+    end
+end

data/app/controllers/upright/alertmanager_proxy_controller.rb

@@ -0,0 +1,21 @@
+class Upright::AlertmanagerProxyController < Upright::ApplicationController
+  skip_forgery_protection
+
+  def show
+  end
+
+  def proxy
+    proxy_to_alertmanager request.fullpath.delete_prefix("/alertmanager")
+  end
+
+  private
+    def proxy_to_alertmanager(path, method: request.method, body: nil)
+      response = Faraday.new(url: alertmanager_url).run_request(method.downcase.to_sym, path, body, { "Content-Type" => request.content_type })
+
+      render body: response.body, status: response.status, content_type: response.headers["content-type"]
+    end
+
+    def alertmanager_url
+      ENV.fetch("ALERTMANAGER_URL", "http://localhost:9093")
+    end
+end

data/app/controllers/upright/application_controller.rb

@@ -0,0 +1,12 @@
+class Upright::ApplicationController < ActionController::Base
+  include Upright::SubdomainScoping
+  include Upright::Authentication
+
+  helper :all
+  protect_from_forgery with: :exception
+
+  private
+    def default_url_options
+      Rails.application.routes.default_url_options
+    end
+end