github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/statements/statements.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 '~src/views/shared/util/table.styl'
    13  @require '~src/components/core/index'
    14  
    15  .statements-table
    16    &__col-query-text
    17      font-family $font-family--monospace
    18      white-space pre-wrap
    19  
    20  .statements
    21    &__last-hour-note
    22      margin-left 3px
    23      font-style italic
    24      color $body-color
    25  
    26  .back-link
    27    text-decoration none
    28    color $link-color
    29  
    30  .cl-count-title, .last-cleared-title
    31    font-family SourceSansPro-Regular
    32    font-size 14px
    33    padding 0px
    34    margin 0px
    35    color $placeholder
    36    line-height 1.57
    37    letter-spacing 0.1px
    38    .label
    39      font-family $font-family--bold
    40      color $colors--neutral-7
    41  
    42  .last-cleared-tooltip, .numeric-stats-table, .plan-view-table
    43    &__tooltip
    44      width 36px  // Reserve space for 10px padding around centered 16px icon
    45      height 16px
    46      display inline-block
    47  
    48      // Overrides to let the tooltip sit inside a table header.
    49      text-transform none
    50      font-weight normal
    51      white-space normal
    52      letter-spacing normal
    53      font-size 14px
    54  
    55    &__tooltip-hover-area
    56      width 100%
    57      padding 0px 10px
    58  
    59    &__info-icon
    60      width 16px
    61      height 16px
    62      border-radius 50%
    63      border 1px solid $tooltip-color
    64      font-size 12px
    65      line-height 14px  // Visual tweak to vertically center the "i"
    66      text-align center
    67      color $tooltip-color
    68  
    69    .hover-tooltip--hovered &__info-icon
    70      border-color $body-color
    71      color $body-color
    72  
    73  .app-name
    74    white-space nowrap
    75  
    76    &__unset
    77      color $tooltip-color
    78      font-style italic
    79  
    80  .statements-table__col-time
    81    white-space nowrap
    82  
    83  .statements-table__col-count
    84    .bar-chart
    85      width 100px
    86  
    87  .statements-table__col-retries
    88    .bar-chart
    89      width 80px
    90  
    91  .numeric-stats-table
    92    .bar-chart
    93      width 200px
    94  
    95  .statements-table__col-rows, .statements-table__col-latency
    96    .bar-chart
    97      min-width 150px
    98  
    99  .statements-table__col-count, .statements-table__col-retries, .statements-table__col-rows
   100    .bar-chart
   101      margin-left 0
   102  
   103      &__label
   104        left 0
   105        width 40px
   106        min-width 40px
   107  
   108  .bar-chart
   109    height 14px
   110    position relative
   111    display flex
   112    align-items center
   113    flex-direction row
   114    > span
   115      width 100%
   116      display flex
   117      align-items center
   118      flex-direction row
   119      
   120    &__multiplebars
   121      width calc(100% - 75px)
   122      border-radius 3px
   123      position relative
   124      display flex
   125      align-items center
   126    
   127    &__label
   128      position relative
   129      font-family SourceSansPro-Regular
   130      font-size 12px
   131      line-height 1.83
   132      color $adminui-grey-1
   133      width 75px
   134  
   135    &__bar
   136      display inline-block
   137      height 13px
   138      border-radius 3px
   139  
   140      &--dev
   141        position absolute
   142        height 3px
   143  
   144    .count-first-try, .count-total, .count-retry, .count-max-retries
   145      border-radius 3px
   146      position absolute
   147      left 40px
   148  
   149    .count-first-try, .count-total
   150      background-color $grey-light
   151    .count-retry, .count-max-retries
   152      background-color $alert-color
   153  
   154    .rows
   155      background-color $grey-light
   156      border-radius 3px
   157  
   158    .rows-dev
   159      background-color $colors--primary-blue-3
   160  
   161    .bar-chart
   162      &__parse, &__plan, &__run, &__overhead, &__overall
   163        background-color $colors--neutral-4
   164    
   165    &-red
   166      .bar-chart
   167        &__parse, &__plan, &__run, &__overhead, &__overall
   168          background-color $colors--functional-red-2
   169  
   170    &__parse-dev, &__plan-dev, &__run-dev, &__overhead-dev, &__overall-dev
   171        background-color $colors--primary-blue-3
   172  
   173  .numeric-stats-table
   174    @extend $table-base
   175  
   176    &__row--summary
   177      color black
   178      font-weight bold
   179  
   180  .details-bar
   181    margin 12px 0
   182  
   183  .numeric-stat-legend
   184    white-space nowrap
   185    width 282px
   186    font-family SourceSansPro-SemiBold
   187    font-size 12px
   188    line-height 1.67
   189    letter-spacing 0.3px
   190    color $adminui-grey-1
   191    font-weight 600
   192  
   193    th
   194      position relative
   195      display flex
   196      align-items center
   197  
   198    td
   199      text-align right
   200  
   201    &__bar
   202      width 41px
   203      border-radius 10px
   204      margin-right 14px
   205  
   206      &--mean
   207        height 13px
   208        background-color $grey-light
   209  
   210      &--dev
   211        height 3px
   212        background-color $colors--primary-blue-3
   213  
   214  $plan-node-warning-background-color = rgba(209, 135, 55, 0.06)  // light orange
   215  
   216  .plan-view-table
   217    @extend $table-base
   218    .plan-view-table__cell
   219      padding 0
   220    .summary--card__title
   221      font-size 16px
   222      display inline-block
   223      margin-bottom 10px
   224      padding 0
   225      text-transform none
   226    &__row
   227      &--body
   228        border-top none
   229        &:hover
   230          background-color $adminui-white
   231    &__tooltip
   232      .hover-tooltip__text
   233        width 520px
   234        margin-left 15px
   235  
   236  .plan-view
   237    color $body-color
   238    position relative
   239  
   240    .plan-view-container
   241      height 100%
   242      max-height 100%
   243      overflow hidden
   244  
   245      .plan-view-container-scroll
   246        max-height 400px
   247        overflow-y scroll
   248  
   249      .plan-view-container-directions
   250        text-align center
   251        cursor pointer
   252        text-transform uppercase
   253        color $main-blue-color
   254        font-size smaller
   255  
   256    .node-icon
   257      margin 0 10px 0 0
   258      color $grey-light
   259    .warning-icon
   260      margin 0 4px 0 4px
   261      position relative
   262      top 3px
   263      path
   264        fill $colors--functional-orange-4
   265  
   266    .warn
   267      position relative
   268      left -5px
   269      color $colors--functional-orange-4
   270      background-color $plan-node-warning-background-color
   271      border-radius 2px
   272      padding 2px
   273  
   274    .nodeDetails
   275      position relative
   276      padding 6px 0
   277      border 1px solid transparent
   278      b
   279        font-family SourceSansPro-SemiBold
   280        font-size 12px
   281        font-weight 600
   282        line-height 1.67
   283        letter-spacing 0.3px
   284        color $text-color
   285  
   286    .nodeAttributes
   287      color $adminui-grey-2
   288      padding 7px 16px 0px 18px
   289      margin-left 3px
   290      border-left 1px solid $grey-light
   291      font-family RobotoMono-Medium
   292      font-size 12px
   293      font-weight 500
   294      line-height 1.83
   295  
   296      .nodeAttributeKey
   297        color $colors--primary-green-3
   298  
   299    ul
   300      padding 0
   301      margin 0
   302      li
   303        padding 0
   304        margin 0
   305        position relative
   306        list-style-type none
   307  
   308        // vertical line, to previous node (above)
   309        &:not(:first-child):after
   310          content ''
   311          width 1px
   312          height 19px
   313          background-color $grey-light
   314          position absolute
   315          top -10px
   316          left 4px
   317  
   318        ul
   319          padding-left 27px
   320          position relative
   321          &:last-child
   322            &:before
   323              content ''
   324              width 28px
   325              height 29px
   326              position absolute
   327              border-left 1px solid $grey-light
   328              border-bottom 1px solid $grey-light
   329              top -10px
   330              left 4px
   331              border-bottom-left-radius 10px
   332            li
   333              &:before
   334                content none
   335              &:first-child:after
   336                content none
   337          li
   338            // first node: horizontal line, to parent
   339            .nodeDetails
   340              margin-left 12px
   341            &:not(:first-child):after
   342              left 16px
   343            &:last-child
   344              .nodeAttributes
   345                border-color transparent
   346            &:first-child
   347              &:after
   348                content ''
   349                height 1px
   350                width 27px
   351                background-color $grey-light
   352                position absolute
   353                top 18px
   354                left -22px
   355            &:before
   356              content ''
   357              width 1px
   358              height 100%
   359              background-color $grey-light
   360              position absolute
   361              top -10px
   362              left -23px
   363  
   364  .cl-table-statistic
   365    display flex
   366    justify-content space-between
   367    align-items center
   368    margin-bottom 7px
   369  
   370  ._pg-jump
   371    width 32px
   372    height 24px
   373    position relative
   374    justify-content center
   375    align-items center
   376    ._jump-dots
   377      position absolute
   378      top 50%
   379      left 50%
   380      transform: translate(-50%, -50%)
   381      color $colors--neutral-5
   382      font-size 14px
   383      letter-spacing 1.5px
   384    .anticon
   385      position absolute
   386      top 50%
   387      left 50%
   388      transform: translate(-50%, -50%)
   389      display none
   390      font-size 10px
   391      color #3a7ce1
   392    &:hover
   393      ._jump-dots
   394        display none
   395      .anticon
   396        display block
   397  
   398  .cl-table__col-query-text a
   399    font-family RobotoMono-Medium
   400    font-size 12px
   401    line-height 1.83
   402    color $adminui-grey-1
   403    width 400px
   404    text-decoration none
   405    cursor pointer
   406    &:hover
   407      color $colors--primary-blue-3
   408      text-decoration underline
   409    ._text-bold
   410      font-family RobotoMono-Bold
   411  
   412  .cl-table-link__statement-tooltip--fixed-width
   413    max-width max-content
   414    .ant-tooltip-content
   415      max-width 500px