github.com/manicqin/nomad@v0.9.5/ui/app/templates/components/freestyle/sg-metrics.hbs (about)

     1  {{#freestyle-usage "metrics" title="Metrics"}}
     2    <div class="metric-group">
     3      <div class="metric">
     4        <h3 class="label">Label</h3>
     5        <p class="value">12</p>
     6      </div>
     7    </div>
     8  {{/freestyle-usage}}
     9  {{#freestyle-annotation}}
    10    <p>Metrics are a way to show simple values (generally numbers). Labels are smaller than numbers to put emphasis on the data.</p>
    11  {{/freestyle-annotation}}
    12  
    13  {{#freestyle-usage "metric-groups" title="Metric Groups"}}
    14    <div class="metric-group">
    15      <div class="metric">
    16        <h3 class="label">Label</h3>
    17        <p class="value">1 / 2</p>
    18      </div>
    19      <div class="metric">
    20        <h3 class="label">Number</h3>
    21        <p class="value">1,300</p>
    22      </div>
    23      <div class="metric">
    24        <h3 class="label">Datacenter</h3>
    25        <p class="value">dc1</p>
    26      </div>
    27    </div>
    28  
    29    <div class="metric-group">
    30      <div class="metric">
    31        <h3 class="label">Today</h3>
    32        <p class="value">81º</p>
    33      </div>
    34      <div class="metric">
    35        <h3 class="label">Tomorrow</h3>
    36        <p class="value">73º</p>
    37      </div>
    38    </div>
    39  {{/freestyle-usage}}
    40  {{#freestyle-annotation}}
    41    <p>Related metrics should be lumped together in metric groups. All metrics have to be in a metric group. By putting multiple metrics in a single group, they will be visually lumped together.</p>
    42  {{/freestyle-annotation}}
    43  
    44  {{#freestyle-usage "metric-colors" title="Metric Colors"}}
    45    <div class="metric-group">
    46      <div class="metric is-info">
    47        <h3 class="label">Info</h3>
    48        <p class="value">1</p>
    49      </div>
    50      <div class="metric is-success">
    51        <h3 class="label">Success</h3>
    52        <p class="value">2</p>
    53      </div>
    54      <div class="metric is-warning">
    55        <h3 class="label">Warning</h3>
    56        <p class="value">3</p>
    57      </div>
    58      <div class="metric is-danger">
    59        <h3 class="label">Danger</h3>
    60        <p class="value">4</p>
    61      </div>
    62    </div>
    63  
    64    <div class="metric-group">
    65      <div class="metric is-white">
    66        <h3 class="label">White</h3>
    67        <p class="value">5</p>
    68      </div>
    69      <div class="metric is-light">
    70        <h3 class="label">Light</h3>
    71        <p class="value">6</p>
    72      </div>
    73      <div class="metric is-primary">
    74        <h3 class="label">Primary</h3>
    75        <p class="value">7</p>
    76      </div>
    77      <div class="metric is-dark">
    78        <h3 class="label">Dark</h3>
    79        <p class="value">8</p>
    80      </div>
    81      <div class="metric is-black">
    82        <h3 class="label">Black</h3>
    83        <p class="value">9</p>
    84      </div>
    85    </div>
    86  {{/freestyle-usage}}
    87  {{#freestyle-annotation}}
    88    <p>All color-modifiers work for metrics, but some work better than others.</p>
    89    <p>Emotive colors work well and are put to use when applicable. Other colors have worse support and less utility.</p>
    90  {{/freestyle-annotation}}
    91  
    92  {{#freestyle-usage "metric-states" title="Metric States"}}
    93    <div class="metric-group">
    94      <div class="metric is-primary is-faded">
    95        <h3 class="label">One</h3>
    96        <p class="value">A</p>
    97      </div>
    98      <div class="metric is-primary">
    99        <h3 class="label">Two</h3>
   100        <p class="value">B</p>
   101      </div>
   102      <div class="metric is-primary is-faded">
   103        <h3 class="label">Three</h3>
   104        <p class="value">C</p>
   105      </div>
   106    </div>
   107  
   108    <div class="metric-group">
   109      <div class="metric is-danger is-faded">
   110        <h3 class="label">One</h3>
   111        <p class="value">A</p>
   112      </div>
   113      <div class="metric is-danger is-faded">
   114        <h3 class="label">Two</h3>
   115        <p class="value">B</p>
   116      </div>
   117      <div class="metric is-danger">
   118        <h3 class="label">Three</h3>
   119        <p class="value">C</p>
   120      </div>
   121    </div>
   122  {{/freestyle-usage}}
   123  {{#freestyle-annotation}}
   124    <p>Metrics have a disabled state. This is used when a metric is non-existent or irrelevant. It's just as important to show the lack of value as it is to show a value, so simply not rendering non-existent or irrelevant metrics would be worse.</p>
   125  {{/freestyle-annotation}}