open-consul/ui/packages/consul-ui/app/components/consul/server/card
Michael Klein f58fca2048
ui: upgrade ember composable helper (#13394)
Upgrade ember-composable-helpers to version 5.x. This version contains the pick-helper which makes composition in the template layer easier with Octane.

{{!-- this is usually hard to do with Octane --}}
<input {{on "input" (pick "target.value" this.updateText)}} .../>
Version 5.x also fixes a regression with sort-by that according to @johncowen was the reason why the version was pinned to 4.0.0 at the moment.

Version 5 of ember-composable-helpers removes the contains-helper in favor of includes which I changed all occurences for.
2022-06-08 16:07:51 +01:00
..
README.mdx ui: Tile CSS component (#12570) 2022-03-23 10:34:26 +00:00
index.hbs ui: upgrade ember composable helper (#13394) 2022-06-08 16:07:51 +01:00
index.scss ui: Tile CSS component (#12570) 2022-03-23 10:34:26 +00:00
layout.scss ui: Initial Server Status Overview Page (#12599) 2022-04-04 09:45:03 +01:00
skin.scss ui: Tile CSS component (#12570) 2022-03-23 10:34:26 +00:00

README.mdx

<!-- START component-docs:@tagName -->
# Consul::Server::Card
<!-- END component-docs:@tagName -->

<!-- START component-docs:@description -->
A presentational component representing a Consul Server
<!-- END component-docs:@description -->

```hbs preview-template
<figure>
  <figcaption>
    Read Replicas just show the name of the Server
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=true
        ReadReplica=true
        Status="voter"
      }}
    >
    </Consul::Server::Card>
</figure>

<figure>
  <figcaption>
    Leaders have a special icon-tile
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=true
        ReadReplica=false
        Status="leader"
      }}
    >
    </Consul::Server::Card>
</figure>

<figure>
  <figcaption>
    Unhealthy voters have a differently colored badge
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=false
        ReadReplica=false
        Status="voter"
      }}
    >
    </Consul::Server::Card>
</figure>

<figure>
  <figcaption>
    Non-voters have different text and coloring
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=true
        ReadReplica=false
        Status="non-voter"
      }}
    >
    </Consul::Server::Card>
</figure>
<figure>
    <Consul::Server::Card
      style={{style-map
        (array 'width' '200px')
      }}
      @item={{hash
        Name="Server Name which happens to be a big long name"
        Healthy=false
        ReadReplica=false
        Status="non-voter"
      }}
    >
    </Consul::Server::Card>
</figure>
```

## Attributes

<!-- START component-docs:@attrs -->
<!-- END component-docs:@attrs -->

## Arguments

<!-- START component-docs:@args -->

| Argument | Type   | Default | Description                                |
| :------- | :----- | :------ | :----------------------------------------- |
| item     | object |         | Consul Server shaped object                |

<!-- END component-docs:@args -->

## Slots

<!-- START component-docs:@slots -->
<!-- END component-docs:@slots -->

## CSS Parts

<!-- START component-docs:@cssparts -->
<!-- END component-docs:@cssparts -->

## CSS Properties

<!-- START component-docs:@cssprops -->
<!-- END component-docs:@cssprops -->

## Contextual Components

<!-- START component-docs:@components -->
<!-- END component-docs:@components -->