github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/cluster/containers/clusterOverview/cluster.styl (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  @require "~styl/base/palette.styl"
    12  @require "~styl/base/layout-vars.styl"
    13  @require '~src/components/core/index.styl'
    14  
    15  .page
    16    padding-top 0
    17  
    18    &>.section
    19      padding 18px 24px 0
    20  
    21    &> div > .section
    22      padding 18px 24px 0
    23  
    24  .database-summary-title h2
    25    padding-top 0
    26  
    27  .cluster-page
    28    height 100%
    29    display flex
    30    flex-direction column
    31    overflow auto
    32  
    33  .cluster-overview
    34    .cluster-summary
    35      background-color white
    36      padding 24px
    37      margin-top 0
    38      border 1px solid $table-border-color
    39      font-family $font-family--base
    40  
    41      display grid
    42      align-items end
    43      grid-template-columns 6fr 8fr 6fr minmax(auto,8fr) minmax(10px, 2fr) 6fr 6fr 6fr 2fr 6fr 10fr 6fr
    44      grid-template-rows repeat(3, auto)
    45      grid-template-areas "cap-t cap-t cap-t cap-t . live-t live-t live-t . rep-t rep-t rep-t" "cap-m cap-c cap-c cap-c . live-a live-b live-c . rep-a rep-b rep-c" "cap-a1 cap-a2 cap-a3 cap-a4 . live-1 live-2 live-3 . rep-1 rep-2 rep-3"
    46  
    47      @media screen and (max-width: 960px)
    48        padding 18px 14px 10px
    49        align-items center
    50        grid-template-columns 4fr 5fr 4fr 3fr 5fr 4fr
    51        grid-template-rows repeat(4, auto)
    52        grid-template-areas "cap-t cap-t live-t live-t rep-t rep-t" "cap-m2 cap-m live-1 live-a rep-1 rep-a" "cap-a1 cap-a2 live-2 live-b rep-2 rep-b" "cap-a3 cap-a4 live-3 live-c rep-3 rep-c"
    53  
    54      @media screen and (min-width: 1400px)
    55        grid-template-columns 2fr 3fr 2fr 3fr 4fr 2fr 2fr 2fr 4fr 2fr 3fr 2fr
    56  
    57      @media screen and (min-width: 1720px)
    58        grid-template-columns 3fr 4fr 3fr 4fr 8fr 3fr 3fr 3fr 8fr 4fr 4fr 4fr
    59  
    60      .capacity-usage
    61        &.cluster-summary__title
    62          color $colors--neutral-7
    63          grid-area cap-t
    64  
    65        &.cluster-summary__chart
    66            grid-area cap-c
    67  
    68            @media screen and (max-width: 960px)
    69              display none
    70  
    71        &.cluster-summary__label.storage-percent
    72            grid-area cap-m2
    73  
    74            @media screen and (min-width: 960px)
    75              display none
    76  
    77        &.cluster-summary__metric.storage-percent
    78            grid-area cap-m
    79  
    80        &.cluster-summary__label.storage-used
    81            grid-area cap-a1
    82  
    83        &.cluster-summary__metric.storage-used
    84            grid-area cap-a2
    85  
    86        &.cluster-summary__label.storage-usable
    87            grid-area cap-a3
    88  
    89        &.cluster-summary__metric.storage-usable
    90            grid-area cap-a4
    91  
    92      .node-liveness
    93        &.cluster-summary__title
    94          color $colors--neutral-7
    95          grid-area live-t
    96  
    97        &.cluster-summary__metric.live-nodes
    98            grid-area live-a
    99  
   100        &.cluster-summary__metric.suspect-nodes
   101            grid-area live-b
   102  
   103        &.cluster-summary__metric.dead-nodes
   104            grid-area live-c
   105  
   106        &.cluster-summary__label.live-nodes
   107            grid-area live-1
   108  
   109        &.cluster-summary__label.suspect-nodes
   110            grid-area live-2
   111  
   112        &.cluster-summary__label.dead-nodes
   113            grid-area live-3
   114  
   115      .replication-status
   116        &.cluster-summary__title
   117          color $colors--neutral-7
   118          grid-area rep-t
   119  
   120        &.cluster-summary__metric.total-ranges
   121            grid-area rep-a
   122  
   123        &.cluster-summary__metric.under-replicated-ranges
   124            grid-area rep-b
   125  
   126        &.cluster-summary__metric.unavailable-ranges
   127            grid-area rep-c
   128  
   129        &.cluster-summary__label.total-ranges
   130            grid-area rep-1
   131  
   132        &.cluster-summary__label.under-replicated-ranges
   133            grid-area rep-2
   134  
   135        &.cluster-summary__label.unavailable-ranges
   136            grid-area rep-3
   137  
   138      &__title
   139        font-weight bold
   140        font-size 20px
   141        margin-bottom 20px
   142  
   143        @media screen and (max-width: 960px)
   144          margin-bottom 10px
   145          font-size 14px
   146          line-height 14px
   147  
   148        @media screen and (min-width: 960px) and (max-width: 1400px)
   149          font-size 18px
   150  
   151      &__metric
   152        font-size 30px
   153        font-weight bold
   154        color $colors--secondary-text
   155        white-space nowrap
   156        padding-right 12px
   157  
   158        @media screen and (max-width: 960px)
   159          font-size 22px
   160  
   161        @media screen and (min-width: 960px) and (max-width: 1400px)
   162          font-size 28px
   163          line-height 54px
   164  
   165        @media screen and (min-width: 1400px)
   166          line-height 64px
   167  
   168        @media screen and (min-width: 1720px)
   169          font-size 36px
   170  
   171        &.warning
   172          color $warning-color
   173  
   174        &.alert
   175          color $alert-color
   176  
   177        &.disabled
   178          color $colors--neutral-5
   179  
   180        &.storage-used, &.storage-usable
   181          color $colors--neutral-7
   182          @media screen and (min-width: 960px) and (max-width: 1400px)
   183            font-size 14px
   184            line-height 16px
   185  
   186          @media screen and (min-width: 1400px) and (max-width: 1720px)
   187            font-size 18px
   188            line-height 20px
   189  
   190          @media screen and (min-width: 1720px)
   191            font-size 22px
   192            line-height 24px
   193  
   194      &__label
   195        font-size 12px
   196        font-weight 500
   197        line-height 18px
   198        text-transform uppercase
   199        color $colors--neutral-5
   200        letter-spacing 2px
   201  
   202        @media screen and (max-width: 960px)
   203          margin-top 5px
   204          margin-bottom 5px
   205  
   206        @media screen and (max-width: 1400px)
   207          font-size 10px
   208          line-height 14px
   209  
   210        @media screen and (min-width: 960px)
   211          padding-top 10px
   212  
   213    .capacity-usage.cluster-summary__chart
   214      align-self start
   215      position relative
   216  
   217      svg
   218        position absolute
   219        shape-rendering crispEdges
   220        margin-left -20px
   221        margin-top 8px
   222  
   223        @media screen and (max-width: 1400px)
   224          margin-top 4px
   225  
   226      .axis path
   227        fill none
   228        stroke none
   229  
   230      .axis line
   231        fill none
   232        stroke #7382a2
   233        shape-rendering crispEdges
   234  
   235      .axis text
   236        font-size 12px
   237        fill #7382a2
   238  
   239      .axis .tick:nth-child(2n) text
   240        display none
   241  
   242      rect
   243        shape-rendering crispEdges
   244  
   245        &.bg-normal
   246          fill #e2e5ee
   247  
   248        &.bg-low-disk-space
   249          fill #cfd2dc
   250  
   251        &.bar
   252          fill $link-color
   253  
   254  
   255  .cluster-overview--fixed
   256    flex-grow 1
   257    max-width $max-window-width
   258    position relative
   259    padding $spacing-smaller $spacing-medium