Saltar a contenido

Elementos de la interfaz Netin DS

La estructura de la interfaz de NetinDS está compuesta por diferentes elementos informativos y de navegación, pantallas para la visualización de información a través de tablas, gráficos, etc. y mensajes de acción.

Cabecera

NetinDS_UB_Cabecera

Logotipo de NetinDS

NetinDS_Logo Situado a la izquierda de la cabecera, navega a la pantalla de Alarmas.

Iconos de estado

Situados a la derecha de la cabecera, facilitan información gráfica y resumida sobre el estado general del sistema:

  • Alarmas de tipo Error activas en el sistema Netin WebUI Icon_error.
  • Alarmas de tipo Advertencia activas en el sistema Netin WebUI Icon_alert.
  • Agentes:
    • Conectados al sistema Netin WebUI Icon_link.
    • Desconectados del sistema Netin WebUI Icon_link-off.
  • Estado del servidor:
    • Correcto Netin WebUI Icon_server-network.
    • Fallo Netin WebUI Icon_server-network-off.

NetinDS_UB_Menu Nav

Es el menú principal que aparece en la parte superior de todas las pantallas de NetinDS para dar acceso a las áreas principales del sistema.

Los elementos disponibles en el Menú de Navegación dependerán del rol de la persona que inicia sesión (Administrador de Usuarios, Administrador de Configuración o Usuario).

Cuando la pantalla del navegador se reduce mucho o se visualiza la web de NetinDS en un dispositivo móvil (tableta o teléfono), las opciones del menú de navegación se ocultan bajo el icono Netin WebUI Icon_Menu responsive y aparecen en un desplegable al hacer clic sobre él.

Área del Perfil de Usuario

Mediante el icono que se encuentra a la derecha de la barra del menú de navegación se accede al área de Perfil de usuario.

NetinDS_UB_Menu Nav_Perfil Usuario

El usuario puede cerrar la sesión haciendo clic en la opción "Desconexión" del desplegable.

Buscador

Este elemento, situado a la derecha de la línea del menú de navegación, permite realizar búsquedas sobre la base de datos del sistema y acceder desde sus resultados a información sobre dispositivos, localizaciones e instalaciones, direcciones IP, etc.

Al hacer clic sobre el icono Netin WebUI Icon_magnify se despliega una caja de texto hacia la izquierda para introducir los términos de búsqueda.

NetinDS_UB_Menu Nav_Buscador_01

Debajo del buscador se abre un panel con el listado de resultados sobre los que se puede hacer clic para navegar a la ventana con la información correspondiente.

Enlaces a pantallas

Los enlaces que aparecen en el menú de navegación permiten acceder a las pantallas que presentan la información sobre:

NetinDS_UB_Menu Nav_Enlaces

Haciendo clic en el icono Netin WebUI Icon_menu que aparece a la izquierda en el menú de navegación, se despliega la estructura de localizaciones definida en el sistema previamente por los usuarios con rol Administrador de Configuración.

NetinDS_UB_Menu Nav_Selector Localizaciones_01.png

El panel de localizaciones permite navegar por los diferentes niveles y seleccionar una localización determinada haciendo clic sobre las flechas (Netin WebUI Icon_menu-down) y los nombres que se sombrean según se pasa el ratón sobre ellos.

El icono Netin WebUI_Icon_Earth, que se encuentra a la derecha del desplegable, permite seleccionar las localizaciones que forman el primer nivel organizativo.

La selección de una localización o instalación determinada mostrará, por ejemplo, la información de alarmas para esa localización.

Cuando el menú de navegación no es visible por el tamaño reducido de la pantalla, la estructura de localizaciones se despliega progresivamente, una vez abierto el menú con el icono Netin WebUI Icon_Menu responsive, haciendo clic en el icono Netin WebUI Icon_chevron-right de cada nivel. Para volver a un nivel superior, hacer clic en el icono Netin WebUI Icon_chevron-left. Para seleccionar una localización determinada, hacer clic en su nombre.

Área de visualización de información

El área de la pantalla que queda bajo la cabecera y el menú de navegación muestra información en función del enlace seleccionado en el menú de navegación, o de la opción elegida en los menús desplegables.

Al iniciar sesión se muestra por defecto la pantalla de Alarmas.

Línea de migas de pan (Breadcrumbs)

Este elemento se encontrará presente en la parte superior de todas las pantallas en las que el usuario necesite conocer para qué elemento de la estructura de localizaciones se está mostrando información.

NetinDS_UB_AV_Breadcrumbs_01

Presenta, en una línea, la jerarquía de la localización o instalación previamente seleccionada por el usuario, y permite navegar haciendo clic en los nombres de los diferentes niveles, o haciendo clic en los separadores (Netin WebUI Icon_chevron-right) que se despliegan para mostrar y poder acceder a las otras localizaciones o instalaciones existentes en ese nivel.

El icono Netin WebUI_Icon_Earth navega al nivel más alto.

Elementos gráficos de visualización de información

Los elementos gráficos permiten visualizar de forma sencilla y rápida la información del sistema representándola por medio de tarjetas, mapas, gráficos y topologías, y aplicando códigos de color e iconos informativos para facilitar su comprensión.

La elección del modo de visualización en tarjetas Netin WebUI Icon_view-module o mapa Netin WebUI Icon_map-outline se realiza mediante los botones selectores que aparecen a la izquierda de la pantalla bajo la línea de migas de pan.

NetinDS_UB_AV_Botones Selectores.png


Tarjetas

Cada tarjeta representa gráficamente una localización/instalación de la estructura del sistema.
Este modo de visualización permite al usuario elegir, con los botones de selección de tamaño que aparecen a la derecha de la pantalla:

  • El número de tarjetas que se mostrará por fila (tres, cuatro o seis).
  • Desplegar el área de visualización de información a pantalla completa (desaparecen los iconos de estado de la cabecera y el menú de navegación).

NetinDS_UB_AV_Selectores Tamano_01


Mapas

Un mapa es una imagen que representa la estructura de localizaciones en una superficie bidimensional, facilitando la ubicación física de las alarmas.

El mapa se ajusta al tamaño de la pantalla, por lo que es posible que parte de la información aparezca al pasar el ratón sobre las distintas localizaciones.

NetinDS_UB_AV_Mapa


Cada tarjeta o zona del mapa presenta la siguiente información:

  • Título: nombre de la localización.
  • Color: varía en función de las alarmas que tenga esa localización/instalación:
    • Verde: no hay avisos de alarma.
    • Amarillo: hay avisos de alarma de tipo Advertencia.
    • Rojo: hay avisos de alarma de tipo Error.
  • Número y Tipo de aviso: icono del tipo de aviso y número de alarmas de cada uno.

    • Alarmas de tipo Error Netin WebUI Icon_error.

    • Alarmas de tipo Advertencia Netin WebUI Icon_alert.

Tanto las tarjetas como los mapas permiten navegar, haciendo clic sobre ellos, hacia los niveles inferiores de la estructura de localizaciones. Para volver a un nivel superior utilizar la Línea de migas de pan (Breadcrumbs) o el Menú Selector de Localizaciones.


Topologías

La topología es la representación gráfica de los dispositivos y las conexiones que forman una red.

NetinDS utiliza las topologías para mostrar todos los elementos interconectados que forman el último nivel de la estructura del sistema.

Cada dispositivo o nodo de la red se representa por una tarjeta con la siguiente información:

  • Nombre del dispositivo.
  • Tipo de dispositivo.
  • Dirección IP del dispositivo.
  • Icono de tipo de equipo.

Las conexiones entre dispositivos se representan con una línea continua entre nodos. Al poner el ratón sobre ellas se muestra una etiqueta con la siguiente información:

  • Identificador del puerto de salida.
  • Identificador del puerto de entrada.

Tanto las tarjetas (nodos) como las líneas (conexiones) y los grupos se representan con el código de color de Netin:

  • Verde: no hay avisos de alarmas.
  • Azul: hay avisos de alarmas de tipo Informativo.
  • Amarillo: hay avisos de alarmas de tipo Advertencia.
  • Rojo: hay avisos de alarmas de tipo Error.

Las topologías permiten al usuario diferentes formas de interacción con la información que presentan:

  • Seleccionar dispositivos y conexiones colocando el ratón sobre ellos. El resto de la topología se desvanece ligeramente destacando la selección.
  • Ordenar los elementos alineándolos respecto a una cuadrícula que se activa pulsando la tecla Mayúsculas (Shift).
  • Hacer zoom para ampliar Netin WebUI Icon_magnify-plus-outline, reducir Netin WebUI Icon_magnify-minus-outline o ajustar la topología Netin WebUI Icon_arrow-expand-all a la pantalla.
  • Contraer todos los grupos Netin WebUI Icon_arrow-collapse creados en la topología.
  • Expandir todos los grupos Netin WebUI Icon_arrow-expand creados en la topología.
  • Contraer o Expandir un grupo determinado, haciendo doble clic sobre uno de sus nodos para contraerlo o sobre la tarjeta del grupo para expandirlo.
  • Guardar Netin WebUI Icon_content-save la ordenación de nodos y grupos realizada por el usuario.
Grupos

Los dispositivos de una red se pueden organizar en grupos para facilitar la visualización de la topología:

  1. Hacer clic en el icono Netin WebUI Icon_chevron-right que aparece a la izquierda bajo la línea de migas de pan (Breadcrumbs).
  2. Se despliega el panel para la creación, edición y eliminación de grupos.
    Para cerrar el panel hacer clic en el icono Netin WebUI Icon_chevron-left.

Para crear un grupo:

  1. Una vez desplegado el panel Grupos, hacer clic en el botón Netin WebUI Icon_plusNuevo grupo.
  2. En la caja de texto de la ventana Nuevo grupo, escribir el nombre del grupo y hacer clic en el botón Netin WebUI Icon_checkAceptar.
    Si el nombre del grupo ya existe aparece un mensaje de aviso.
  3. En el panel aparece un control desplegable con el nombre del nuevo grupo.
  4. Hacer clic en el icono Netin WebUI Icon_chevron-down para abrir la edición del grupo.
    Para cerrarla hacer clic en el icono Netin WebUI Icon_chevron-up.
  5. Hacer clic en el icono Netin WebUI Icon_plusAñadir nodo para añadir un dispositivo al grupo.
  6. En la ventana Añadir nodo a ......, hacer clic en el icono Netin WebUI Icon_menu-down de la caja de texto para abrir el desplegable con la lista de los dispositivos sin agrupar de la topología.
  7. Seleccionar un elemento y hacer clic en el botón Netin WebUI Icon_checkAceptar.
    Repetir los pasos del 4 al 7 para añadir tantos nodos al grupo como se necesite.

Para eliminar un nodo del grupo:

  1. Una vez desplegado el panel Grupos, hacer clic en el icono Netin WebUI Icon_chevron-down del control del grupo para abrir su edición.
  2. En el listado de nodos que forman el grupo, pasar el ratón sobre el nodo a eliminar y hacer clic en la X que aparece en la esquina superior derecha.
  3. El nodo desaparece del listado y se cierra la edición del grupo.

Para cambiar el nombre del grupo:

  1. Una vez desplegado el panel Grupos, hacer clic en el icono Netin WebUI Icon_chevron-down del control del grupo para abrir su edición.
  2. Hacer clic en el botón Editar nombre.
  3. En la ventana Cambiar nombre de grupo, escribir el nuevo nombre y hacer clic en el botón Netin WebUI Icon_checkAceptar.
    Si el nombre del grupo ya existe aparece un mensaje de aviso.

Para eliminar un grupo:

  1. Una vez desplegado el panel Grupos, hacer clic en el icono Netin WebUI Icon_chevron-down del control del grupo para abrir su edición.
  2. Hacer clic en el botón Netin WebUI Icon_deleteEliminar grupo.


Gráficos

NetinDS utiliza diferentes tipos de gráficos para presentar información adicional de las alarmas del sistema y KPIs, por ejemplo, en la ventana de diálogo de Alarma y en la pantalla de Dashboard.


Tablas

La web de Netin DS presenta gran parte de su información en forma de tablas ya que permiten visualizar grandes cantidades de datos de manera clara y compacta.

El usuario con rol de Administrador de Configuración define qué campos mostrarán las tablas, configurando previamente las columnas que se incluyen en cada una según las necesidades de información y preferencias previstas para los usuarios de NetinDS.

Estas tablas permiten al usuario interactuar con la información que presentan de distintas formas:

Pestañas

Cuando la opción seleccionada en el menú de navegación puede presentar la información desde distintas perspectivas en diferentes tablas, estas se organizan en pestañas.

Las pestañas permiten cambiar rápidamente de una tabla a otra, seleccionando el enfoque informativo que más interese al usuario en cada momento.

NetinDS_UB_AV_Tablas_Pestanas_01

Ordenación

Las columnas de las tablas se pueden ordenar alfabéticamente haciendo clic en el título. Una flecha hacia arriba o hacia abajo swap_vert indica si este orden es ascendente o descendente.

Filtros

Los filtros son consultas temporales que permiten limitar la cantidad de información que presenta una tabla aplicando un criterio o combinación de criterios en una columna determinada.

NetinDS_Tablas_Filtros.png

Cuando se aplica un filtro, la información de la tabla se actualiza mostrando solo las filas que cumplen los criterios definidos.
El icono de la columna que tiene el filtro aparece destacado en color azul.

  1. Hacer clic sobre el icono Netin WebUI Icon_filter.
  2. En el desplegable:
    • Seleccionar el tipo de filtro que se quiera aplicar.
    • Escribir el texto a filtrar. Si se quiere combinar con otro filtro:
      • Seleccionar el operador que se quiera usar.
      • Escribir el texto del segundo filtro.
    • Hacer clic sobre el botón Filter.
  3. La tabla se actualiza con la información filtrada.

Para anular/quitar el filtro:

  1. Hacer clic sobre el icono Netin WebUI Icon_filter.
  2. Hacer clic sobre el botón Clear.
  3. La tabla se actualiza con la información sin filtrar.
Tipos de filtros

Los tipos de filtros que se pueden aplicar en una columna dependen del tipo de datos que contenga.

Filtro Datos Descripción
Is equal to Texto/Fecha El contenido de la celda tiene que ser exactamente igual a la cadena de caracteres definida en el filtro, no puede contener ningún otro valor.
Is not equal to Texto/Fecha El contenido de la celda no puede ser igual a la cadena de caracteres definida en el filtro.
Contains Texto/Fecha La cadena de caracteres introducida en el filtro es parte del contenido completo de la celda.
Does not contain Texto/Fecha La cadena de caracteres introducida en el filtro no es parte del contenido completo de la celda.
Starts with Texto/Fecha El contenido de la celda empieza con la cadena de caracteres introducida en el filtro.
Ends with Texto/Fecha El contenido de la celda termina con la cadena de caracteres introducida en el filtro.
Is null Texto/Fecha Este campo no existe en el equipo.
Is not null Texto/Fecha Este campo existe en el equipo.
Is empty Texto La celda está vacía.
Is not empty Texto La celda tiene contenido.
Operadores

Los operadores disponibles para combinar filtros son:

Operador Descripción
AND Filtra los resultados que incluyan las dos condiciones de los dos filtros, ambas tienen que aparecer para que se ejecute la consulta.
OR Filtra los resultados que incluyan una de las dos condiciones de los filtros.

Detalles bajo demanda

Es posible que los elementos de la información que presentan ciertas tablas en sus filas o celdas permitan, haciendo clic sobre ellos:

  • Navegar a otras pantallas.
  • Desplegar tablas adicionales con información relacionada.
  • Abrir ventanas emergentes de diálogo.

Botones de acción

Permiten realizar determinadas acciones sobre tablas enteras, un conjunto de filas seleccionadas en una tabla, filas individuales o elementos de listados. La disponibilidad de estos botones dependerá de la pantalla en la que se encuentre el usuario.

Botón Nombre Descripción
NetinWebUI_56_Exportar Exportar a Excel Descarga un archivo Excel con la información que presenta la tabla.
NetinWebUI_44_ACK ACK Cambia el estado de todas las alarmas de la tabla de "Inicial" a "ACK", mostrando la hora en la que se registra el cambio de estado para cada alarma.
NetinWebUI_45_ACK ACK Cambia el estado de cada alarma individualmente de "Inicial" a "ACK"y muestra la hora en la que se registra el cambio.

Herramientas de navegación

  • Barra de desplazamiento (Scroll): aparece en el lateral derecho de la tabla y permite desplazarse verticalmente por ella.
  • Paginación: botones situados en el pie de la tabla que permiten navegar hacia delante o hacia atrás, cargando nueva información. A la derecha aparece el número total de filas de la tabla y el intervalo mostrado en cada página.

NetinDS_UB_AV_Tablas_Navegacion_01