aboutsummaryrefslogtreecommitdiff
path: root/kamon-status/src/components/ModuleCard.vue
diff options
context:
space:
mode:
Diffstat (limited to 'kamon-status/src/components/ModuleCard.vue')
-rw-r--r--kamon-status/src/components/ModuleCard.vue91
1 files changed, 0 insertions, 91 deletions
diff --git a/kamon-status/src/components/ModuleCard.vue b/kamon-status/src/components/ModuleCard.vue
deleted file mode 100644
index ea3a0c68..00000000
--- a/kamon-status/src/components/ModuleCard.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
- <card>
- <div class="row module-card">
- <div class="col-auto">
- <div class="status-indicator h-100 text-center pt-3" :class="runStatus.class">
- <i class="fas fa-fw" :class="runStatus.icon"></i>
- <div>
- {{ runStatus.message }}
- </div>
- </div>
- </div>
- <div class="col">
- <div class="py-3">
- <h5 class="mb-0">{{ moduleStatus.name }} </h5>
- <div class="text-label">
- {{ moduleStatus.description }}
- </div>
- </div>
- </div>
- </div>
- </card>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import {Module} from '../api/StatusApi'
-import Card from './Card.vue'
-
-
-@Component({
- components: {
- card: Card
- }
-})
-export default class ModuleCard extends Vue {
- @Prop({ default: true }) private showStatusIndicators!: boolean
- @Prop({ default: false }) private isSuggestion!: boolean
- @Prop() private moduleStatus!: Module
-
- get discoveryStatus(): { message: string, class: string } {
- return this.moduleStatus.isProgrammaticallyRegistered ?
- { message: 'manual', class: '' } :
- { message: 'automatic', class: '' }
- }
-
- get runStatus(): { message: string, class: string, icon: string } {
- if (this.isSuggestion) {
- return { message: 'suggested', class: 'suggested', icon: 'fa-plug' }
- } else {
- return this.moduleStatus.isStarted ?
- { message: 'started', class: 'healthy', icon: 'fa-check' } :
- { message: 'disabled', class: 'critical', icon: 'fa-power-off' }
- }
- }
-}
-</script>
-
-<style lang="scss">
-
-$indicator-size: 6rem;
-.module-card {
- min-height: $indicator-size;
-
- .status-indicator {
- text-transform: uppercase;
- min-width: $indicator-size;
- min-height: $indicator-size;
- line-height: 2rem;
- font-size: 0.9rem;
- font-weight: 600;
- color: white;
- background-color: #cccccc;
-
- i {
- font-size: 2.5rem;
- }
- }
-
- .critical {
- background-color: #dadada;
- }
-
- .healthy {
- background-color: #7ade94;
- }
-
- .suggested {
- background-color: #5fd7cc;
- }
-}
-</style>