Commit 91ebd5f0 authored by VLaroye's avatar VLaroye

doc(template-variable-changes): Resolved merge conflicts + Minor gramme fix

parents 6896a7f0 7540e221
Pipeline #4431 passed with stage
in 1 minute and 37 seconds
......@@ -32,12 +32,12 @@ build_next:
stage: test
tags: ["canopsis"]
script:
- docker build -t canopsis/uiv3:develop -f docker/Dockerfile.next-nightly .
- docker build -t canopsis/uiv3:develop -f docker/Dockerfile.canopsis-next-develop .
- docker-compose -f docker-compose_next.yml -p ${COMPOSE_PROJECT_NAME}-next up -d
- docker push canopsis/uiv3:develop
only:
changes:
- sources/webcore/src/canopsis-next
- sources/webcore/src/canopsis-next/**/*
refs:
- develop
after_script:
......
FROM node:8.12-alpine
WORKDIR /canopsis-next
ADD ./ /canopsis-next/
ADD ./sources/webcore/src/canopsis-next/ /canopsis-next/
RUN cd /canopsis-next/ && \
yarn install
EXPOSE 8080
CMD ["yarn", "run", "serve"]
\ No newline at end of file
CMD ["yarn", "run", "serve"]
# connector-centreon-engine : module (Event Broker) Centreon pour Canopsis
!!! note
Ce module est maintenant disponible dans l'édition open-source de Canopsis.
## Description
Ce dépôt contient un module Broker Centreon pour l'envoi d'évènements à Canopsis. Il est écrit en C++, et des modules pré-compilés sont disponibles pour certains environnements.
Le connecteur `connector-centreon-engine` est un module Broker permettant l'envoi d'évènements de Centreon vers Canopsis. Il est écrit en C++, et des modules pré-compilés sont disponibles pour certains environnements. Ce module est open-source et disponible sous la licence Apache 2.0.
Ce module vient s'ajouter dans une instance Centreon existante, et doit ensuite être configuré depuis l'interface web de Centreon afin de rediriger le trafic vers Canopsis.
**Pré-requis réseau :** la transmission de flux réseau doit être permise entre Centreon et Canopsis (port 5672 par défaut).
!!! attention
**Pré-requis réseau :** la transmission de flux réseau doit être permise entre Centreon et l'instance RabbitMQ de Canopsis (port TCP `5672` par défaut).
## Installation
!!! note
Toutes les manipulations suivantes doivent être réalisées sur le nœud Centreon que vous souhaitez relier à Canopsis.
## Installation d'un module pré-compilé
### Récupération du connecteur
### Récupération du module
Vous devez récupérer la dernière version du connecteur, disponible à l'adresse suivante : https://git.canopsis.net/canopsis-connectors/connector-centreon-engine.
Clôner le dépôt Git contenant le module (**note :** activer votre proxy HTTP si nécessaire) :
```shell
# Installation de Git sur Debian / Ubuntu
$ sudo apt-get install git-core
# Installation de Git sur Red Hat / CentOS
$ sudo yum install git-core
Vous pouvez pour cela cloner le dépôt Git, ou lancer la commande suivante pour récupérer une archive :
# Clône du dépôt
$ git clone https://VOTRE-UTILISATEUR-GITLAB-ICI@git.canopsis.net/canopsis-connectors/connector-centreon-engine.git
$ cd connector-centreon-engine
```sh
wget https://git.canopsis.net/canopsis-connectors/connector-centreon-engine/-/archive/master/connector-centreon-engine-master.tar.bz2 && tar xjf connector-centreon-engine-master.tar.bz2
```
### Installation du module
Le reste de cette procédure part du principe que vous disposez de ce contenu dans un répertoire `connector-centreon-engine*/`.
Il faut ensuite installer deux composants : le module `.so` et l'extension web.
### Installation du module `.so`
Des modules pré-compilés sont disponibles dans le répertoire `precompiled/` de ce dépôt Git.
Il faut, pour cela, connaître votre environnement (CentOS 6, CentOS 7…) et votre version du Centreon Broker sur le système cible :
```shell
$ cat /etc/centos-release
```sh
cat /etc/centos-release
CentOS Linux release 7.4.1708 (Core)
$ cbd -v
cbd -v
[1513786864] info: Centreon Broker 3.0.11
```
Dans cet exemple, on est sur une CentOS 7 avec un Centreon Broker (CBD) 3.0.11. Le module qui nous intéresse est donc `precompiled/Centos7/85-amqp-cbd-3.0.11.so`.
Il faut ensuite l'envoyer dans le répertoire d'installation des modules Centreon (attention : le nom `85-amqp.so` est attendu en destination) :
```shell
```sh
# À adapter en fonction du système cible !
$ sudo cp precompiled/Centos7/85-amqp-cbd-3.0.11.so /usr/share/centreon/lib/centreon-broker/85-amqp.so
sudo cp precompiled/Centos7/85-amqp-cbd-[VOTRE-VERSION-CBD-ICI].so /usr/share/centreon/lib/centreon-broker/85-amqp.so
```
### Installation de l'extension web
Il faut ensuite ajouter l'extension `centreon-extension/connector-centreon-canopsis` présente dans ce dépôt Git dans l'installation Centreon, afin de pouvoir finaliser l'installation du module.
Il faut ensuite ajouter l'extension `centreon-extension/connector-centreon-canopsis` sur le nœud Centreon, afin de pouvoir finaliser l'installation du module.
```shell
$ sudo cp -r centreon-extension/connector-centreon-canopsis/ /usr/share/centreon/www/modules/
$ sudo chown -R apache:apache /usr/share/centreon/www/modules/connector-centreon-canopsis/
```sh
sudo cp -r centreon-extension/connector-centreon-canopsis/ /usr/share/centreon/www/modules/
sudo chown -R apache:apache /usr/share/centreon/www/modules/connector-centreon-canopsis
```
On peut alors installer le module depuis les menus suivants de l'interface web Centreon (Administration > Extensions > Modules > connector-centreon-canopsis et cliquer sur le bouton Action, sur la droite du tableau) :
Il faut ensuite installer ce module depuis les menus suivants de l'interface web Centreon (Administration > Extensions > Modules > connector-centreon-canopsis et cliquer sur le bouton Action, sur la droite du tableau) :
![Installation du module depuis l'interface web : étape 1](img/webextension_install.png)
......@@ -61,12 +71,12 @@ Puis, valider l'installation de ce module en cliquant sur « Install Module » 
![Installation du module depuis l'interface web : étape 2](img/webextension_install2.png)
Le module est maintenant installé, mais vous devez obligatoirement le configurer.
## Configuration du module
### Configuration
**Attention :** la transmission de flux réseau entre Centreon et Canopsis doit être permise sur vos équipements réseau (port 5672 par défaut, à ajuster en fonction de votre configuration Canopsis/Centreon).
Aller dans Configuration > Pollers > Broker Configuration > central-broker-master.
![Configuration du module AMQP Canopsis : étape 1](img/module_parameters.png)
......@@ -75,20 +85,25 @@ Puis, dans la nouvelle page qui apparaît, aller dans l'onglet Output, choisir l
![Configuration du module AMQP Canopsis : étape 2](img/module_parameters2.png)
Des options de configuration « Canopsis AMQP bus » apparaissent alors en bas de page. Il faut alors renseigner les informations de connexion à l'instance AMQP Canopsis voulue (adresse, port, identifiants, nom de l'Exchange et du Virtual Host...). Valider ces changements avec le bouton « Save ».
Des options de configuration « Canopsis AMQP bus » apparaissent alors en bas de page. Il faut alors renseigner les informations de connexion à l'instance RabbitMQ de Canopsis (adresse, port, identifiants, nom de l'Exchange et du Virtual Host...). Valider ces changements avec le bouton « Save ».
![Configuration du module AMQP Canopsis : étape 3](img/module_parameters3.png)
### Redémarrage
### Redémarrage obligatoire pour charger la configuration
!!! attention
**Attention :** les redémarrages suivants occasionnent une interruption de service le temps du redémarrage du Broker et des Engines Centron.
On redémarre ensuite le service pour s'assurer du bon chargement de la nouvelle configuration.
**Attention :** les redémarrages suivants occasionnent une interruption de service le temps du redémarrage du Broker et des Engines Centron.
Cette étape est **OBLIGATOIRE**, votre connecteur Centreon ne fonctionnera **PAS** dans Canopsis tant que vous n'effectuerez pas cette procédure de redémarrage.
On redémarre ensuite le service pour s'assurer du bon chargement de la nouvelle configuration. Pour cela, aller dans Configuration > Pollers > cocher les éléments concernés > cliquer sur « Export configuration ».
Pour cela, aller dans Configuration > Pollers > cocher les éléments concernés > cliquer sur « Export configuration ».
![Redémarrage du service : étape 1](img/module_restart1.png)
Sur la nouvelle page qui s'affiche, il faut ensuite cocher les cases « Move Export Files » et « Restart Monitoring Engine », puis choisir la méthode « Restart » dans le menu déroulant, et enfin cliquer sur le bouton « Export ».
![Redémarrage du service : étape 2](img/module_restart1.png)
![Redémarrage du service : étape 2](img/module_restart2.png)
**ATTENTION :** Il faut bien faire un `restart` et non pas un simple `reload` ! Sans quoi vous risquez des problèmes de cohérence sur les évènements échangés avec Canopsis.
......@@ -73,7 +73,7 @@ Le filtre par période permet de filtre les alarmes en ne conservant que les ala
Ce filtre est disponible en cliquant sur l'icone ![Filtre par période](./img/period-filter.png "Filtre par période") présente à droite du sélecteur de filtre. Une fenêtre apparaît.
![Modal filtre par période](./img/modal-filtre-periode.png "Modal filtre par période")
![modale filtre par période](./img/modal-filtre-periode.png "modale filtre par période")
Il suffit alors de sélectionner la période souhaitée parmi les périodes prédéfinies, ou d'en créer une personalisé en sélectionnant 'Personnalisé', puis en renseignant les dates de début et de fin.
Cliquez ensuite sur 'Appliquer'.
......@@ -105,7 +105,7 @@ Durant la configuration de votre widget Bac à alarmes, notamment paramètres "I
Exemple: Il vous sera possible d'afficher, dans la fenêtre "Plus d'infos", l'état de l'alarme.
Afin de connaitre les variables disponibles, une modal d'aide est disponible.
Afin de connaitre les variables disponibles, une modale d'aide est disponible.
Pour y accèder, entrez dans le mode d'édition (*Cf: [Vues - Mode d'édition](../../vues#mode-edition)*).
......
......@@ -137,7 +137,7 @@ Pour ajouter un comportement périodique sur une sélection d'entités, sélecti
Durant la configuration de votre widget Exporateur de contexte, notamment la liste des colonnes, il vous sera possible d'accéder à des variables concernant les entités.
Afin de connaitre les variables disponibles, une modal d'aide est disponible.
Afin de connaitre les variables disponibles, une modale d'aide est disponible.
Pour y accéder, entrez dans le mode d'édition (*Cf: [Vues - Mode d'édition](../../vues#mode-edition)*).
......
......@@ -7,8 +7,7 @@
### Guide utilisateur
1. [Présentation générale](#presentation-generale)
2. [Les tuiles](#les-tuiles)
3. [La fenêtre 'Plus d'infos'](#la-fenetre-plus-dinfos)
4. [Les détails d'une entité d'un service](#les-details-dune-entite-dun-service)
3. [La modale](#la-modale)
### Guide exploitant
1. [Aide sur les variables](#aide-variables)
......@@ -28,31 +27,62 @@ Le contenu de texte de cette tuile est personnalisable (*Cf: [Guide exploitant](
La couleur de la tuile et l'icône présente sur celle-ci permettent d'obtenir des informations sur **l'état** de l'observateur:
### 1. La couleur
#### La couleur
La couleur de la tuile correspond à l'état de l'observateur. Cet état est calculé en prenant en compte le pire état parmi les entités surveillées par cet observateur.
Exemple :
Un observateur surveille deux entités, A et B. A a un état de 1. B a un état de 3. L'état de l'observateur sera alors égal à 3.
- Vert : Etat = 0 => Ok
- Jaune : Etat = 1 => Mineur
- Orange : Etat = 2 => Majeur
- Rouge : Etat = 3 => Critique
- Gris :
- Vert: Etat = 0 => Ok
- Jaune: Etat = 1 => Mineur
- Orange: Etat = 2 => Majeur
- Rouge: Etat = 3 => Critique
- Gris: L'observateur (ou toutes les entités de l'observateur) possède un comportement périodique actif (pause, maintenance, ...).
### 2. L'icone
#### L'icone
- Soleil
- Soleil + Nuage
- Nuage
- Pluie
- Clé
- Lune
- Pause
- Soleil: L'observateur possède un état "Ok" (égal à 0)
- Personne: L'observateur possède un état Mineur (égal à 1) ou Majeur (égal à 2)
- Nuage: L'observateur possède un état: "Critique" (égal à 3)
- Clé: L'observateur possède un comportement périodique actif, de type "Maintenance"
- Lune: L'observateur possède un comportement périodique actif, de type "Hors plage de surveillance"
- Pause: L'observateur ne possède pas de comportement périodique, mais toutes les entités liées à cet observateur possèdent un comportement périodique actif.
### La fenêtre 'Plus d'infos'
### Les détails d'une entité d'un service
#### Le clignotement
Une tuile de la météo de service clignotera si une des entités lui appartenant possède une alarme non acquittée, et que celui-ci n'est pas en pause/ne possède pas d'entité en pause.
### La modale
Au clic sur une tuile de la météo de services, une fenêtre s'ouvre.
Le contenu de cette fenêtre est configurable depuis les paramètres du widget.
Celle-ci contient, au choix :
- "Plus d'infos": Cette fenêtre présente des informations supplémentaires concernant l'observateur sur lequel vous avez cliqué. Celle-ci peut, notamment, contenir la liste des entités concernées par l'observateur. Le template de cette fenêtre est configurable depuis les paramètres du widget.
![modale - Plus d'infos](./img/modal_more_infos.png "modale - Plus d'infos")
- "Bac à alarmes": Cette fenêtre contient un widget Bac à alarmes. Ce Bac à alarmes regroupe toutes les alarmes dans le spectre de l'observateur. Celui-ci est configurable depuis les paramètres du widget.
![modale - Bac à alarmes](./img/modal_alarmlist.png "modale - Bac à alarmes")
### Les actions
Dans [la modale "Plus d'infos"](#la-modale), il vous est possible d'afficher la liste des entités concernées par l'observateur (*Cf: [Template - modale](#template-modale)*).
Si la liste d'entités est affichée, des actions sont disponibles sur chacune d'entre elles. Les actions disponibles dépendent de l'état de l'entité.
Au clic sur les icônes d'actions, celles-ci sont mises en attente. Elles ne sont exécutées qu'au clic sur le bouton ```Envoyer``` de la modale "Plus d'infos".
- ![Action: Déclarer un incident](./img/action_declareTicket.png "Action: Déclarer un incident") *Déclarer un incident*: Cette action vous permet de déclarer un numéro de ticket, associé à un incident. Au clic sur cette action, une fenêtre s'ouvre, vous permettant d'indiquer un numéro de ticket. Cette action déclenche également automatiquement une action d'acquittement.
- ![Action: Pause](./img/action_pause.png "Action: Pause") *Pause*: Cette action vous permet de mettre une entité en pause. Au clic, une fenêtre s'ouvre. Celle-ci vous permet de renseigner un commentaire, ainsi que la raison de la pause. Cette action n'est disponible que pour les entités qui ne sont pas déjà en pause.
- ![Action: Play](./img/action_play.png "Action: Play") *Play*: Cette action vous permet de retirer la mise en pause d'une entité. Cette action n'est disponible que pour les entités en pause.
- ![Action: acquittement](./img/action_ack.png "Action: acquittement") *Acquittement*: Cette action vous permet d'acquitter une alarme présente sur une entité. Cette action n'est disponible que pour les entités ayant un état différent de "Ok" (0), et ayant une alarme non acquittée.
- ![Action: Validate](./img/action_validate.png "Action: Validate") *Valider*: Cette action déclenche un changement d'état de l'alarme, de majeur (2) à critique (3). Elle entraîne également automatiquement une action d'acquittement. Celle-ci n'est disponible que pour les entités ayant un état majeur (2).
- ![Action: Invalidate](./img/action_invalidate.png "Action: Invalidate") *Invalider*: Cette action déclenche une action d'annulation de l'alarme. Elle entraîne également automatiquement une action d'acquittement. Celle-ci n'est disponible que pour les entités ayant un état majeur (2).
## Guide exploitant
......@@ -75,12 +105,15 @@ Au clic sur ce bouton, une fenêtre s'ouvre. Celle-ci liste toutes les variables
2. Titre
3. Editeur de filtre
4. Paramètres avancés
1. Template - Tuiles
2. Template - modale
3. Template - Entités
4. Colonnes - Petit
5. Colonnes - Moyen
6. Colonnes - Large
1. Template - Tuiles
2. Template - modale
3. Template - Entités
4. Colonnes - Petit
5. Colonnes - Moyen
6. Colonnes - Large
7. Marges
8. Hauteur
9. Type de modale
#### Taille du widget (*requis*)
......@@ -173,3 +206,30 @@ Il suffit de faire glisser le curseur pour sélectionner le nombre de colonne pa
Ce paramètre permet de définir la proportion de l'écran, en largeur, prise par chaque tuile de la météo de services. Ce paramètre concerne les écrans d'ordinateurs (largeur > 900px). Une tuile occupe au minimum une colonne (1/12 de la largeur de la page), et au maximum 12 colonnes (100 % de la largeur de la page).
Il suffit de faire glisser le curseur pour sélectionner le nombre de colonne par tuile souhaité.
##### Marges
Ce paramètre permet de régler les espaces séparant les tuiles de la Météo de services.
Celui-ci est séparé en quatre, vous permettant de régler l'espace que vous souhaitez pour chaque côté des tuiles (haut, bas, droite et gauche).
Pour modifier ce paramètre, faites glisser le sélecteur, afin de choisir une valeur entre 0 et 5 (0 correspondant à l'absence de marge, 5 le maximum de marge).
Par défaut, ce paramètre est réglé sur une valeur de 1 pour chacuns des côtés des tuiles.
##### Hauteur
Ce paramètre permet de régler la hauteur des tuiles de la Météo de services.
Pour le modifier, faites glisser le sélecteur, afin de choisir une valeur entre 1 (hauteur minimale) et 20 (hauteur maximale).
Par défaut, ce paramètre est réglé sur une valeur de 1.
##### Type de modale
Ce paramètre vous permet de sélectionner le type de modale que vous souhaitez ouvrir au clic sur une tuile de la Météo de services.
Les types de modale disponibles sont :
- "Plus d'infos": Cette modale vous permet d'afficher (grâce à un template configurable) des détails supplémentaires sur l'observateur sur lequel vous cliquez.
- "Bac à alarmes": Cette modale vous permet d'afficher un widget Bac à alarmes, regroupant les alarmes liées à l'observateur. Ce widget est configurable grace aux [Paramètres du bac à alarmes](#parametres-du-bac-a-alarmes).
......@@ -38,6 +38,7 @@
"vue-i18n": "^7.6.0",
"vue-mq": "^0.2.1",
"vue-quill-editor": "^3.0.6",
"vue-resize-text": "^0.1.0",
"vue-router": "^3.0.1",
"vuedraggable": "^2.17.0",
"vuetify": "^1.3.15",
......
......@@ -49,23 +49,14 @@
v-layout(justify-space-between)
span.black--text {{ $t('common.parameters') }}
v-icon settings
v-menu(bottom, offset-y)
v-menu(bottom, offset-y, offset-x)
v-btn.white--text(slot="activator", flat) {{ currentUser._id }}
v-list.pb-0
v-list-tile
v-list-tile-title
v-layout
div {{ $t('user.firstName') }} :
div.px-1(v-if="currentUser.firstname") {{ currentUser.firstname }}
div.px-1.font-italic(v-else) {{ $t('common.undefined') }}
v-divider
v-list-tile
v-list-tile-title
v-layout
div {{ $t('user.lastName') }} :
div.px-1(v-if="currentUser.lastname") {{ currentUser.lastname }}
div.px-1.font-italic(v-else) {{ $t('common.undefined') }}
v-divider
template(v-if="currentUser.firstname && currentUser.lastname")
v-list-tile
v-list-tile-title
p {{ currentUser.firstname }} {{ currentUser.lastname }}
v-divider
v-list-tile
v-list-tile-title
v-layout
......@@ -81,14 +72,14 @@
div.px-1 {{ defaultViewTitle }}
v-flex(v-else)
div.px-1.font-italic {{ $t('common.undefined') }}
v-btn.primary(@click.stop="editDefaultView", small, fab, depressed)
v-btn(@click.stop="editDefaultView", small, fab, icon, depressed)
v-icon edit
v-divider
v-list-tile.error.white--text(@click.prevent="logout")
v-list-tile(@click.prevent="logout")
v-list-tile-title
v-layout(align-center)
div {{ $t('common.logout') }}
v-icon.pl-1.white--text exit_to_app
div.error--text {{ $t('common.logout') }}
v-icon.pl-1(color="error") exit_to_app
template(v-if="isShownGroupsTopBar", slot="extension")
groups-top-bar
</template>
......
......@@ -111,6 +111,7 @@ export default {
[MODALS.createWidget]: { maxWidth: 500, lazy: true },
[MODALS.alarmsList]: { fullscreen: true, lazy: true },
[MODALS.createFilter]: { maxWidth: 920, lazy: true },
[MODALS.watcher]: { maxWidth: 920, lazy: true },
},
defaultDialogProps: { maxWidth: 700, lazy: true },
};
......
<template lang="pug">
.weather-watcher-entity-expansion-panel
v-expansion-panel
v-expansion-panel-content(hide-actions)
v-layout.pa-2(slot="header", :class="entityClass", justify-space-between)
span.pl-1.white--text.subheading.entity-title {{ entity | get(entityNameField, false, entityNameField) }}
v-layout(justify-end)
div(v-for="action in availableActions", :key="action.name")
v-btn.secondary(
@click.stop="action.action(action.name)",
:disabled="!isActionBtnEnable(action.name)",
small,
fab,
depressed
)
v-icon {{ action.icon }}
v-card
v-expansion-panel(dark)
v-expansion-panel-content(:style="{ backgroundColor: color }")
v-layout(slot="header", justify-space-between, align-center)
v-flex.pa-2(v-for="(icon, index) in mainIcons", :key="index")
v-icon(color="white", small) {{ icon }}
v-flex.pl-1.white--text.subheading.entity-title(
xs12,
)
v-layout(align-center)
div.mr-1.entityName(
v-resize-text="{maxFontSize: '16px'}",
) {{ { entity } | get(entityNameField, false, entityNameField) }}
v-btn.mx-1.white(v-for="icon in extraIcons", :key="icon.icon", :color="icon.color", small, dark, icon)
v-icon(small) {{ icon.icon }}
v-card(color="white black--text")
v-card-text
v-layout(row, align-center)
div {{ $t('common.actionsLabel') }}:
div(v-for="action in availableActions", :key="action.name")
v-btn(
@click.stop="action.action(action.name)",
:disabled="!isActionBtnEnable(action.name)",
depressed,
small,
light,
)
v-icon {{ action.icon }}
div(v-html="compiledTemplate")
v-divider
</template>
<script>
import find from 'lodash/find';
import {
MODALS,
WATCHER_PBEHAVIOR_COLOR,
WATCHER_STATES_COLORS,
WEATHER_ICONS,
WEATHER_ACK_EVENT_OUTPUT,
EVENT_ENTITY_STYLE,
EVENT_ENTITY_TYPES,
......@@ -90,7 +103,7 @@ export default {
};
},
computed: {
entityClass() {
color() {
if (this.hasActivePbehavior) {
return WATCHER_PBEHAVIOR_COLOR;
}
......@@ -98,18 +111,57 @@ export default {
return WATCHER_STATES_COLORS[this.state];
},
mainIcons() {
const mainIcons = [];
if (!this.isPaused && !this.hasActivePbehavior) {
mainIcons.push(WEATHER_ICONS[this.entity.state.val]);
}
const pausePbehavior = find(this.entity.pbehavior, { type_: PBEHAVIOR_TYPES.pause });
const maintenancePbehavior = find(this.entity.pbehavior, { type_: PBEHAVIOR_TYPES.maintenance });
const outOfSurveillancePbehavior = find(this.entity.pbehavior, { type_: PBEHAVIOR_TYPES.outOfSurveillance });
if (maintenancePbehavior) {
mainIcons.push(WEATHER_ICONS.maintenance);
}
if (outOfSurveillancePbehavior) {
mainIcons.push(WEATHER_ICONS.outOfSurveillance);
}
if (pausePbehavior) {
mainIcons.push(WEATHER_ICONS.pause);
}
return mainIcons;
},
extraIcons() {
const extraIcons = [];
if (this.entity.ack) {
extraIcons.push({
icon: EVENT_ENTITY_STYLE[EVENT_ENTITY_TYPES.fastAck].icon,
color: 'purple',
});
}
if (this.entity.ticket) {
extraIcons.push({
icon: EVENT_ENTITY_STYLE[EVENT_ENTITY_TYPES.assocTicket].icon,
color: 'blue',
});
}
return extraIcons;
},
hasActivePbehavior() {
if (!this.entity.pbehavior || !this.entity.pbehavior.length) {
return false;
}
return this.entity.pbehavior.filter((value) => {
const start = value.dtstart * 1000;
const end = value.dtend * 1000;
const now = Date.now();
return start <= now && now < end;
}).length;
return this.entity.pbehavior.filter(value => value.isActive).length;
},
compiledTemplate() {
......@@ -221,4 +273,8 @@ export default {
float: right;
}
}
.entityName {
line-height: 1.5em;
}
</style>
......@@ -44,7 +44,7 @@ export default {
},
beforeCreate() {
registerHelper('entities', ({ hash }) => {
const entityNameField = hash.name || 'name';
const entityNameField = hash.name || 'entity.name';
return new Handlebars.SafeString(`
<div class="mt-2" v-for="watcherEntity in watcherEntities">
......
<template lang="pug">
v-card.white--text.cursor-pointer(
:class="getItemClasses",
:style="{ height: itemHeight + 'em'}",
:style="{ height: itemHeight + 'em', backgroundColor: format.color}",
tile,
@click.native="showAdditionalInfoModal"
)
......@@ -11,9 +11,8 @@
v-layout(justify-start)
v-icon.px-3.py-2.white--text(size="2em") {{ format.icon }}
div.watcherName.pt-3(v-html="compiledTemplate")
v-btn.pauseIcon.white(v-if="watcher.active_pb_some && !watcher.active_pb_all", fab, icon, small)
v-icon pause
v-btn.pauseIcon(v-if="watcher.active_pb_some && !watcher.active_pb_all", icon)
v-icon(color="white") {{ secondaryIcon }}
</template>
<script>
......@@ -64,6 +63,9 @@ export default {
hasWatcherPbehavior() {
return this.watcher.active_pb_watcher;
},
isPbehavior() {
return this.watcher.pbehavior.some(pbehavior => pbehavior.isActive);
},
format() {
if (!this.isPaused && !this.hasWatcherPbehavior) {
const state = this.watcher.state.val;
......@@ -87,21 +89,25 @@ export default {
icon = WEATHER_ICONS.outOfSurveillance;
}
if (this.isPaused && !this.hasWatcherPbehavior) {
icon = WEATHER_ICONS.pause;
}
return {
color: WATCHER_PBEHAVIOR_COLOR,
icon,
};
},
secondaryIcon() {
if (this.watcher.pbehavior.some(value => value.type_ === PBEHAVIOR_TYPES.maintenance)) {
return WEATHER_ICONS.maintenance;
} else if (this.watcher.pbehavior.every(value => value.type_ === PBEHAVIOR_TYPES.outOfSurveillance)) {
return WEATHER_ICONS.outOfSurveillance;
}
return WEATHER_ICONS.pause;
},
compiledTemplate() {
return compile(this.template, { entity: this.watcher });
},
getItemClasses() {
return [
this.format.color,
`mt-${this.widget.parameters.margin.top}`,
`mr-${this.widget.parameters.margin.right}`,
`mb-${this.widget.parameters.margin.bottom}`,
......@@ -115,8 +121,7 @@ export default {
return (
this.watcher.alerts_not_ack
&& !this.hasWatcherPbehavior
&& !this.isPaused
&& !this.watcher.active_pb_some
&& !this.isPbehavior
);
},
},
......@@ -205,7 +210,7 @@ export default {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1em;
line-height: 1.2em;
}
@keyframes blink {
......@@ -225,5 +230,6 @@ export default {
position: absolute;
right: 0.2em;
top: 0;
z-index: 1;
}
</style>
......@@ -3,7 +3,7 @@
ref="tabs",
:key="vTabsKey",
:value="value",
:class="{ hidden: this.tabs.length < 2, 'tabs-editing': isEditingMode }",
:class="{ hidden: this.tabs.length < 2 && !isEditingMode, 'tabs-editing': isEditingMode }",
:hide-slider="isTabsChanged",
color="secondary lighten-2",
slider-color="primary",
......@@ -31,6 +31,14 @@
small,
flat,
icon,
@click.stop="showDuplicateTabModal(tab)"
)
v-icon(small) file_copy
v-btn(
v-show="hasUpdateAccess && isEditingMode",
small,
flat,
icon,
@click.stop="showDeleteTabModal(tab)"
)
v-icon(small) delete
......@@ -45,17 +53,33 @@
</template>
<script>
import omit from 'lodash/omit';
import Draggable from 'vuedraggable';
import { createNamespacedHelpers } from 'vuex';