diff options
author | Ivan Topolnjak <ivantopo@gmail.com> | 2019-02-08 02:43:44 +0100 |
---|---|---|
committer | Ivan Topolnjak <ivantopo@gmail.com> | 2019-02-08 02:43:44 +0100 |
commit | 4ce838b1af6257625b27ea38d55947912cba00c9 (patch) | |
tree | 0641f5c44a108ded898b1d5ad72e093de6db6d65 /kamon-status/src/components/EnvironmentCard.vue | |
parent | c985537bfe1b352911aa3ba6247112dfac917171 (diff) | |
download | Kamon-4ce838b1af6257625b27ea38d55947912cba00c9.tar.gz Kamon-4ce838b1af6257625b27ea38d55947912cba00c9.tar.bz2 Kamon-4ce838b1af6257625b27ea38d55947912cba00c9.zip |
group metric series together in the same item, expand to see individual series
Diffstat (limited to 'kamon-status/src/components/EnvironmentCard.vue')
-rw-r--r-- | kamon-status/src/components/EnvironmentCard.vue | 58 |
1 files changed, 29 insertions, 29 deletions
diff --git a/kamon-status/src/components/EnvironmentCard.vue b/kamon-status/src/components/EnvironmentCard.vue index 97e79d28..98dc3f9f 100644 --- a/kamon-status/src/components/EnvironmentCard.vue +++ b/kamon-status/src/components/EnvironmentCard.vue @@ -1,47 +1,47 @@ <template> - <div class="row"> - <div class="col-12"> - <card> - <div class="row py-2 no-gutters"> - <div class="col-auto py-2 px-3"> - <div class="text-uppercase text-label pb-1">Service</div> - <h6>{{ service }}</h6> - </div> - <div class="col-auto py-2 px-3"> - <div class="text-uppercase text-label pb-1">Host</div> - <h6>{{ host }}</h6> - </div> - <div class="col-auto py-2 px-3"> - <div class="text-uppercase text-label pb-1">instance</div> - <h6>{{instance}}</h6> + <status-section title="Environment"> + <card> + <div class="row py-2 no-gutters"> + <div class="col-auto py-2 px-3"> + <div class="text-uppercase text-label pb-1">Service</div> + <h6>{{ service }}</h6> + </div> + <div class="col-auto py-2 px-3"> + <div class="text-uppercase text-label pb-1">Host</div> + <h6>{{ host }}</h6> + </div> + <div class="col-auto py-2 px-3"> + <div class="text-uppercase text-label pb-1">instance</div> + <h6>{{instance}}</h6> + </div> + <div class="col-12 col-md-3 py-2 px-3"> + <div class="text-uppercase text-label pb-1">tags</div> + <div class="tag-container" v-if="Object.keys(environmentTags).length > 0"> + <span class="tag" v-for="tag in Object.keys(environmentTags)" :key="tag"> + {{ tag }}=<span class="tag-value">{{ environmentTags[tag] }}</span> + </span> </div> - <div class="col-12 col-md-3 py-2 px-3"> - <div class="text-uppercase text-label pb-1">tags</div> - <div class="tag-container" v-if="Object.keys(environmentTags).length > 0"> - <span class="tag" v-for="tag in Object.keys(environmentTags)" :key="tag"> - {{ tag }}=<span class="tag-value">{{ environmentTags[tag] }}</span> - </span> - </div> - <div v-else> - <h6>None</h6> - </div> + <div v-else> + <h6>None</h6> </div> </div> - </card> - </div> - </div> + </div> + </card> + </status-section> </template> <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator' import {Environment} from '../api/StatusApi' import Card from './Card.vue' +import StatusSection from '../components/StatusSection.vue' import {Option, none} from 'ts-option' @Component({ components: { - card: Card + 'card': Card, + 'status-section': StatusSection } }) export default class EnvironmentCard extends Vue { |