Implement Status Page UX

Problem/Motivation

Designs are basically finalized as of 1/10/2020. The designs need to be translated into the actual UX for the status pages.

Data model changes

 The follow components should be built to support the approved designs:

• Header
  • Menu
• Container
  • Header
    • Allow right and left text in the header
• Timeline
  • Uses container
    • Header
      • Title + Last Checked
      • Statuses + Colors
    • Content
      • Use timespan to define month markers
      • Events
        • Title + URL
        • Reported Date
        • Resolved Date
•  Cards
  • Card
    • Title + URL
    • Image (icon)
    • Status + Color
    • Detail - For open state
      • Description
      • Status (again)
      • Table of tasks
        • Task title
        • Status + Color
      • Link to Issues Page
• Issue Item
  • Use as row in the Issue History List
    • Title + URL
    • Description
    • Status + Color
    • Date
• History
  • Uses container
    • Header
      • Title
    • Content
      • Issue Items
      • Link to Issue History page
• Footer
  • Logo
    • Link to logo image
  • Menu
    • Title + URL
  • Copyright message
    • "Copyright (c) {{ year }} {{ copyright }}"

Data Model Values (from Issue #3105815)

#3105815: Build backend data support for front end design Assigned to: merauluka

{
  "header": {
    "title": "Status Page Title",
    "menu": [
      {
        "title": "Dashboard",
        "url": "path to status page"
      },
      {
        "title": "Issues",
        "url": "path to issues page"
      }
    ],
    "status": "Healthy", // Healthy, Experiencing an issue, or experiencing downtime.
    "last_checked": "Since {date}"
  },
  "content": {
    "timeline": {
      "title": "History",
      "timespan": "Past XX days/hours/etc", // Pulled from system monitor log truncation value.
      "statuses": {
        "outage": "Downtime",
        "issue": "Issue",
        "healthy": "Healthy"
      },
      "date_span": {
        "start": "start date",
        "end": "end date"
      },
      "events": [ // Only events that are non-healthy and part of montiors that are tracked by the status page
        {
          "title": "title of issue",
          "url": "link to issue page",
          "reported_date": "last reported date",
          "resolved_date": "next OK reported date after reported outage"
        },
        {
          "title": "title of issue",
          "url": "link to issue page",
          "reported_date": "last reported date",
          "resolved_date": "next OK reported date after reported outage"
        },
        {
          "title": "title of issue",
          "url": "link to issue page",
          "reported_date": "last reported date",
          "resolved_date": "next OK reported date after reported outage"
        }
      ]
    },
    "cards": [ // monitors tracked by the status page that are active.
      {
        "title": "monitor name",
        "image": "monitor icon",
        "status": "overall status of the monitor",
        "detail": {
          "description": "description",
          "tasks": [
            {
              "title": "task name",
              "status": "task status based on system monitor status"
            },
            {
              "title": "task name",
              "status": "task status based on system monitor status"
            }
          ]
        }
      },
      {
        "title": "monitor name",
        "image": "monitor icon",
        "status": "overall status of the monitor",
        "detail": {
          "description": "description",
          "tasks": [
            {
              "title": "task name",
              "status": "task status"
            },
            {
              "title": "task name",
              "status": "task status"
            }
          ]
        }
      }
    ],
    "history": {
      "title": "Issue History",
      "issues": [
        {
          "title": "title",
          "description": "description",
          "status": "Resolved",
          "date": "last updated date",
          "url": "link to issue page"
        },
        {
          "title": "title",
          "description": "description",
          "status": "Resolved",
          "date": "last updated date",
          "url": "link to issue page"
        }
      ],
      "url": "link to issue history page"
    }
  },
  "footer": {
    "logo": "path to logo",
    "menu": [
      {
        "title": "link title",
        "url": "path to link"
      },
      {
        "title": "link title",
        "url": "path to link"
      }
    ],
    "copyright": "copyright text" // Appended like so: "Copyright (c) {auto_year} {copyright}
  }
}