Show networks

[charypar]

Show overlay network attachments to with lines and dots.

to do

• [x] first cut implementation
• [x] refactor
• [x] add colors from a predefined palette for better readability

[clmntnbrn]

try this in your stylesheet and see what you think

body {
      background-color: #254356;
      color: #fff;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: lighter;
    }

    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      table-layout: fixed;
    }

    th {
      padding: 5px 7px;
      font-weight: lighter;
    }

    thead th {
      border-width: 0;
      border-bottom: 6px solid #547287;
    }

    thead th strong {
      line-height: 2.0;
      font-size: 120%;
      font-weight: normal;
    }

    thead th.networks {
      position: relative;
      border-bottom-width: 0;
      padding: 0 4px 0 0;
    }

    thead th.networks svg {
      position: absolute;
      bottom: 0;
      left: 0;
    }

    thead th.manager {
      border-bottom: 6px solid rgb(0, 117, 242);
    }

    thead th.leader {
      border-bottom: 6px solid rgb(0, 255, 197);
    }

    thead th.down {
      border-bottom: 6px solid rgb(228, 0, 102);
    }

    thead img {
      height: 50px
    }

    thead th:first-child {
      border-bottom-width: 0;
      width: 220px;
    }

    tbody th {
      background-color: #254356;
      padding-top: 1.4em;
      text-align: right;
      vertical-align: top;
    }

    tbody tr:nth-child(2n) {
      background-color: rgba(84, 114, 135, 0.2);
    }

    td {
      padding: 3px;
      vertical-align: top;
    }

    td.networks {
      position: relative;
      padding: 0;
      border-width: 0;
      border-right: 2px solid #547287;
      background-color: #254356;
      text-align: right;
      vertical-align: top;
    }

    td.networks div {
       position: absolute;
       top: 62px;
       left: 0;
       bottom: 0;
    }

    td.networks > svg {
      position: absolute;
      left: 0;
    }

    td ul {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    td li {
      text-align: center;
      margin: 3px;
      padding: 5px 7px;
      list-style: none;
      border: 2px solid #fff;
      border-radius: 3px;
      border-color: rgb(255, 255, 255);
    }

    td svg {
      display: block;
    }

    li.desired-ready {
      border-color: rgb(255, 149, 0);
    }

    li.desired-running {
      border-color: rgb(255, 149, 0);
      background-color: rgba(255, 149, 0, 0.8);
    }

    li.running {
      border-color: rgb(0, 255, 197);
      background-color: rgba(0, 255, 197, 0.8);
    }

    li.running-old {
      border-color: rgb(0, 117, 242);
      background-color: rgba(0, 117, 242, 0.8);
    }

    li.desired-shutdown {
      border-color: rgb(191, 191, 191);
      background-color: rgba(191, 191, 191, 0.6);
    }

    li.failed {
      border-color: rgb(228, 0, 102);
      background-color: rgba(228, 0, 102, 0.8);
    }

[clmntnbrn]

I tested the pallet for all types of colour blindness - there should be enough difference in brightness and hue to be accessible to everyone! Results below

[clmntnbrn]

New colours and suggestion for the network attachments:

[charypar]

@clmntnbrn This is amazing! Thank you so much.

I have only one small request - can we make the new green a little greener? With this shade I'm having a hard time telling whether it's green or blue (especially on the dark blue background) and it's not entirely clear to me the colour means "ok".

The higher opacity also makes it slightly harder to read text, but I'm in a dark room right now, so that may not be a real problem. 😄

[clmntnbrn]

Super! I'll have a go at the green later. It's hard to figure out without being able to see it locally, being a visual person and all 😉

[clmntnbrn]

Ok try this, better more readable green!

body {
      background-color: #254356;
      color: #fff;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: lighter;
    }

    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      table-layout: fixed;
    }

    th {
      padding: 5px 7px;
      font-weight: lighter;
    }

    thead th {
      border-width: 0;
      border-bottom: 6px solid #547287;
    }

    thead th strong {
      line-height: 2.0;
      font-size: 120%;
      font-weight: normal;
    }

    thead th.networks {
      position: relative;
      border-bottom-width: 0;
      padding: 0 4px 0 0;
    }

    thead th.networks svg {
      position: absolute;
      bottom: 0;
      left: 0;
    }

    thead th.manager {
      border-bottom: 6px solid rgb(0, 117, 242);
    }

    thead th.leader {
      border-bottom: 6px solid rgb(0, 255, 120);
    }

    thead th.down {
      border-bottom: 6px solid rgb(228, 0, 102);
    }

    thead img {
      height: 50px
    }

    thead th:first-child {
      border-bottom-width: 0;
      width: 220px;
    }

    tbody th {
      background-color: #254356;
      padding-top: 1.4em;
      text-align: right;
      vertical-align: top;
    }

    tbody tr:nth-child(2n) {
      background-color: rgba(84, 114, 135, 0.2);
    }

    td {
      padding: 3px;
      vertical-align: top;
    }

    td.networks {
      position: relative;
      padding: 0;
      border-width: 0;
      border-right: 2px solid #547287;
      background-color: #254356;
      text-align: right;
      vertical-align: top;
    }

    td.networks div {
       position: absolute;
       top: 62px;
       left: 0;
       bottom: 0;
    }

    td.networks > svg {
      position: absolute;
      left: 0;
    }

    td ul {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    td li {
      text-align: center;
      margin: 3px;
      padding: 5px 7px;
      list-style: none;
      border: 2px solid #fff;
      border-radius: 3px;
      border-color: rgb(255, 255, 255);
    }

    td svg {
      display: block;
    }

    li.desired-ready {
      border-color: rgb(255, 149, 0);
    }

    li.desired-running {
      border-color: rgb(255, 149, 0);
      background-color: rgba(255, 149, 0, 0.6);
    }

    li.running {
      border-color: rgb(0, 255, 120);
      background-color: rgba(0, 255, 120, 0.6);
    }

    li.running-old {
      border-color: rgb(0, 117, 242);
      background-color: rgba(0, 117, 242, 0.6);
    }

    li.desired-shutdown {
      border-color: rgb(191, 191, 191);
      background-color: rgba(191, 191, 191, 0.6);
    }

    li.failed {
      border-color: rgb(228, 0, 102);
      background-color: rgba(228, 0, 102, 0.6);
    }

[charypar]

Final look (for the time being at least):