Feature-9904: Enhancing NG-UI to enable Juju operational view dashboard
* NG-UI able to show the Juju Operational view dashboard of launched NS.
Change-Id: I9c7feadce8dbfca00e4e9321dffed3818a2e4510
Signed-off-by: Barath Kumar R <barath.r@tataelxsi.co.in>
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 8e24408..5d67b03 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -140,6 +140,7 @@
"SUBMIT": "Submit",
"REFRESH": "Aktualisierung",
"OPEN": "Öffnen",
+ "CLOSE": "Schließen",
"UPLOADCONFIG": "Upload Config",
"FILEUPLOADLABEL": "Oder aus Datei laden",
"CONFIG": "Konfig",
@@ -154,6 +155,16 @@
"SCALEIN": "Scale In",
"SCALING": "Manuelle Skalierung",
"SCALINGNOTFOUND": "scaling-aspect nicht in vnfd gefunden",
+ "NODATA": "Derzeit sind keine Daten verfügbar",
+ "STATUS": "Status",
+ "PUBLICADDRESS": "Öffentliche Adresse",
+ "EXECUTEDACTIONS": "Ausgeführte Aktionen",
+ "OUTPUT": "Ausgabe",
+ "VERIFIED": "Verifiziert",
+ "CODE": "Code",
+ "SCALE": "Rahmen",
+ "DEFAULT": "Standard",
+ "SOURCE": "Quelle",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "Instrumententafel",
@@ -429,6 +440,36 @@
"OSMREPOTITLE": "Registriertes OSM-Repository",
"CREATEDSUCCESSFULLY": "OSM-Repository erfolgreich hinzugefügt",
"UPDATEDSUCCESSFULLY": "OSM-Repository erfolgreich aktualisiert"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Betriebs-Dashboard",
+ "MODELSUMMARY": "Modellzusammenfassung",
+ "MODEL": "Modell",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Einheit",
+ "UNITSTITLE": "Einheiten",
+ "RELATIONS": "Beziehungen",
+ "NOAPPLICATION": "Es gibt keine Anwendung in diesem Modell",
+ "NOUNITS": "Es gibt keine Einheiten in diesem Modell",
+ "NORELATIONS": "In diesem Modell gibt es keine Beziehungen",
+ "NOMACHINES": "Es gibt keine Maschinen in diesem Modell",
+ "NOEXECUTEDACTIONS": "In diesem Modell sind keine Aktionen ausgeführt",
+ "MACHINE": "Maschine",
+ "MACHINETITLE": "Maschinen",
+ "MESSAGE": "Botschaft",
+ "WORKLOAD": "Arbeitsbelastung",
+ "AGENT": "Agent",
+ "ADDRESS": "Adresse",
+ "INTERFACE": "Interface",
+ "REQUIRER": "Requerente",
+ "RELATIONPROVIDER": "Provedor de relacionamento",
+ "CHARM": "Charm",
+ "STORE": "Loja",
+ "LEADER": "Führer",
+ "LIVELOAD": "Live-Laden",
+ "SETSECONDS": "Timer einstellen",
+ "SERIES": "Serie"
}
},
"HTTPERROR": {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 11cbc54..c412e15 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -140,6 +140,7 @@
"SUBMIT": "Submit",
"REFRESH": "Refresh",
"OPEN": "Open",
+ "CLOSE": "Close",
"UPLOADCONFIG": "Upload Config",
"FILEUPLOADLABEL": "Or load from file",
"CONFIG": "Config",
@@ -154,6 +155,16 @@
"SCALEIN": "Scale In",
"SCALING": "Manual Scaling",
"SCALINGNOTFOUND": "scaling-aspect not found in vnfd",
+ "NODATA": "Currently data not available",
+ "STATUS": "Status",
+ "PUBLICADDRESS": "Public Address",
+ "EXECUTEDACTIONS": "Executed Actions",
+ "OUTPUT": "Output",
+ "VERIFIED": "Verified",
+ "CODE": "Code",
+ "SCALE": "Scale",
+ "DEFAULT": "Default",
+ "SOURCE": "Source",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "Dashboard",
@@ -429,6 +440,36 @@
"OSMREPOTITLE": "Registered OSM repository",
"CREATEDSUCCESSFULLY": "OSM Repository Added Successfully",
"UPDATEDSUCCESSFULLY": "OSM Repository Updated Successfully"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Operational Dashboard",
+ "MODELSUMMARY": "Model Summary",
+ "MODEL": "Model",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Unit",
+ "UNITSTITLE": "Units",
+ "RELATIONS": "Relations",
+ "NOAPPLICATION": "There are no application in this model",
+ "NOUNITS": "There are no units in this model",
+ "NORELATIONS": "There are no relations in this model",
+ "NOMACHINES": "There are no machines in this model",
+ "NOEXECUTEDACTIONS": "There are no executed actions in this model",
+ "MACHINE": "Machine",
+ "MACHINETITLE": "Machines",
+ "MESSAGE": "Message",
+ "WORKLOAD": "Workload",
+ "AGENT": "Agent",
+ "ADDRESS": "Address",
+ "INTERFACE": "Interface",
+ "REQUIRER": "Requirer",
+ "RELATIONPROVIDER": "Relation Provider",
+ "CHARM": "Charm",
+ "STORE": "Store",
+ "LEADER": "Leader",
+ "LIVELOAD": "Live Loading",
+ "SETSECONDS": "Set Timer",
+ "SERIES": "Series"
}
},
"HTTPERROR": {
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index a74a931..55c9490 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -139,7 +139,8 @@
"CURRENTPROJECT": "Proyecto actual",
"SUBMIT": "Entrar",
"REFRESH": "Actualizar",
- "OPEN": "Abierto",
+ "OPEN": "Abrir",
+ "CLOSE": "Cerrar",
"UPLOADCONFIG": "Subir configuración",
"FILEUPLOADLABEL": "O cargar desde el archivo",
"CONFIG": "Config",
@@ -154,6 +155,16 @@
"SCALEIN": "Escalar",
"SCALING": "Escalado manual",
"SCALINGNOTFOUND": "scaling-aspect no encontrado en vnfd",
+ "NODATA": "Actualmente datos no disponibles",
+ "STATUS": "Estado",
+ "PUBLICADDRESS": "Dirección pública",
+ "EXECUTEDACTIONS": "Acciones ejecutadas",
+ "OUTPUT": "Salida",
+ "VERIFIED": "Verificada",
+ "CODE": "Código",
+ "SCALE": "Escala",
+ "DEFAULT": "por defecto",
+ "SOURCE": "Fuente",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "Tablero",
@@ -429,6 +440,36 @@
"OSMREPOTITLE": "Repositorio OSM registrado",
"CREATEDSUCCESSFULLY": "Repositorio OSM agregado correctamente",
"UPDATEDSUCCESSFULLY" : "Repositorio OSM actualizado correctamente"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Tablero operativo",
+ "MODELSUMMARY": "Resumen de modelo",
+ "MODEL": "Modelo",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Unidad",
+ "UNITSTITLE": "Unidades",
+ "RELATIONS": "Relaciones",
+ "NOAPPLICATION": "No hay aplicación en este modelo.",
+ "NOUNITS": "No hay unidades en este modelo",
+ "NORELATIONS": "No hay relaciones en este modelo.",
+ "NOMACHINES": "No hay máquinas en este modelo.",
+ "NOEXECUTEDACTIONS": "No hay acciones ejecutadas en este modelo",
+ "MACHINE": "Máquina",
+ "MACHINETITLE": "Máquinas",
+ "MESSAGE": "Mensaje",
+ "WORKLOAD": "Carga de trabajo",
+ "AGENT": "Agente",
+ "ADDRESS": "Dirección",
+ "INTERFACE": "Interfaz",
+ "REQUIRER": "Solicitante",
+ "RELATIONPROVIDER": "Proveedor de relaciones",
+ "CHARM": "Charm",
+ "STORE": "Tienda",
+ "LEADER": "Líder",
+ "LIVELOAD": "Cargando en vivo",
+ "SETSECONDS": "Configurar temporizador",
+ "SERIES": "serie"
}
},
"HTTPERROR": {
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
index d4ebbfc..b0f7985 100644
--- a/src/assets/i18n/pt.json
+++ b/src/assets/i18n/pt.json
@@ -140,6 +140,7 @@
"SUBMIT": "Enviar",
"REFRESH": "Atualizar",
"OPEN": "Aberto",
+ "CLOSE": "Fechar",
"UPLOADCONFIG": "Upload Config",
"FILEUPLOADLABEL": "Ou carregue do arquivo",
"CONFIG": "Config",
@@ -154,6 +155,16 @@
"SCALEIN": "Escala em",
"SCALING": "Escalonamento Manual",
"SCALINGNOTFOUND": "scaling-aspect não encontrado no vnfd",
+ "NODATA": "Atualmente, os dados não estão disponíveis",
+ "STATUS": "Status",
+ "PUBLICADDRESS": "Endereço público",
+ "EXECUTEDACTIONS": "Ações Executadas",
+ "OUTPUT": "Resultado",
+ "VERIFIED": "Verificada",
+ "CODE": "Code",
+ "SCALE": "Escala",
+ "DEFAULT": "Padrão",
+ "SOURCE": "Fonte",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "painel de controle",
@@ -429,6 +440,36 @@
"OSMREPOTITLE": "Repositório OSM registrado",
"CREATEDSUCCESSFULLY": "registrado OSM adicionado com sucesso",
"UPDATEDSUCCESSFULLY": "registrado OSM atualizado com sucesso"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Painel Operacional",
+ "MODELSUMMARY": "Resumo do modelo",
+ "MODEL": "Modelo",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Unidade",
+ "UNITSTITLE": "Unidades",
+ "RELATIONS": "Relações",
+ "NOAPPLICATION": "Não há aplicação neste modelo",
+ "NOUNITS": "Não há unidades neste modelo",
+ "NORELATIONS": "Não há relações neste modelo",
+ "NOMACHINES": "Não há máquinas neste modelo",
+ "NOEXECUTEDACTIONS": "Não há ações executadas neste modelo",
+ "MACHINE": "Máquina",
+ "MACHINETITLE": "Maquinas",
+ "MESSAGE": "mensagem",
+ "WORKLOAD": "Carga de trabalho",
+ "AGENT": "Agente",
+ "ADDRESS": "Endereço",
+ "INTERFACE": "Interface",
+ "REQUIRER": "Requerente",
+ "RELATIONPROVIDER": "Provedor de relacionamento",
+ "CHARM": "Charm",
+ "STORE": "Loja",
+ "LEADER": "Líder",
+ "LIVELOAD": "Carregando ao vivo",
+ "SETSECONDS": "Definir temporizador",
+ "SERIES": "Series"
}
},
"HTTPERROR": {
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 38318a7..8dd8399 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -128,9 +128,6 @@
color: $gray-400;
}
}
- .modal-dialog {
- max-width: 600px;
- }
.header-style {
@include font(null, 1.2rem, 700);
color: $primary;
@@ -182,6 +179,37 @@
}
}
}
+ .juju-section {
+ .card {
+ @include roundedCorners(4);
+ margin-bottom: 0.25rem;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ .bg-secondary {
+ @include background(null, $primary !important, null, null, null);
+ b,
+ span {
+ color: $white;
+ }
+ }
+ .card-body {
+ .seconds-btn-group .active {
+ color: $white;
+ @include background(null, $primary !important, null, null, null);
+ }
+ @include border(all, 2, dashed, $primary);
+ @include padding-value(5, 5, 5, 5);
+ border-top: 0;
+ table {
+ thead th {
+ font-size: 12px;
+ }
+ tbody th i.active-icon {
+ font-size: 10px;
+ }
+ }
+ }
+ }
+ }
.card {
margin-bottom: 1rem;
}
@@ -694,6 +722,93 @@
}
}
}
+ /** Switch Design **/
+ .switch {
+ @include position_value(relative, null, null, null, null);
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(50px, 15px);
+ @include margin-value(0, 0, 0, 0);
+ input {
+ opacity: 0;
+ @include wh-value(0px, 0px);
+ &:checked + .slider {
+ @include background(null, $gray-400, null, null, null);
+ &:before {
+ @include background(null, $pure-red, null, null, null);
+ left: 5px;
+ animation: pulse 2s infinite;
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+ .on {
+ @include flexbox(block, null, null, null, null, null);
+ }
+ .off {
+ @include flexbox(none, null, null, null, null, null);
+ }
+ }
+ }
+ .slider {
+ @include position_value(absolute, 0, 0, 0, 0);
+ cursor: pointer;
+ @include background(null, $gray-400, null, null, null);
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 0 1px $gray-400;
+ &.round {
+ @include roundedCorners(30);
+ &:before {
+ @include roundedCornersPercentage(50%);
+ }
+ }
+ &:before {
+ @include position_value(absolute, null, null, -2px, 0px);
+ @include wh-value(20px, 20px);
+ @include background(null, $white, null, null, null);
+ content: "";
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+ }
+ .on {
+ @include flexbox(none, null, null, null, null, null);
+ @include position_value(absolute, 50%, null, null, 35% !important);
+ }
+ .on,
+ .off {
+ @include position_value(absolute, 50%, null, null, 65%);
+ color: $primary;
+ transform: translate(-50%, -50%);
+ @include font(null, 11px, bold);
+ }
+ }
+ @-webkit-keyframes pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ @keyframes pulse {
+ 0% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ }
}
/****************************************************************************/
/************************** MEDIA QUERIES ***********************************/
@@ -709,6 +824,25 @@
.text-captilize {
text-transform: capitalize;
}
-.text-info{
+.text-info {
color: $secondary !important;
}
+.hide {
+ @include flexbox(none, null, null, null, null, null);
+}
+.title-bar {
+ .name-width {
+ @include wh-value(20%, null);
+ }
+ .id-width {
+ @include wh-value(25%, null);
+ }
+}
+.filter-actions {
+ button {
+ @include roundedCorners(10);
+ @include padding-percentage-value(0.2rem, 1rem, 0.2rem, 1rem);
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ border: none;
+ }
+}