Blog & Details page

In the world of networking, the command line interface (CLI) has long been the go-to tool for managing and configuring networks. However, as networks have become more complex and user-friendly interfaces have become increasingly important, graphical user interfaces (UIs) have emerged as a popular alternative. While the CLI will always have its place in networking, a UI can provide a more intuitive and user-friendly way for users to manage and configure networks. In this post, we will explore the benefits of using a user interface (UI) for network management to improve the user experience. We will also briefly discuss how we at LogicVein have implemented these benefits in our own work. In future posts, we will delve more deeply into each individual implementation.

One of the biggest advantages of a UI is that it is generally easier for users to understand and navigate than a CLI. With a UI, users can access different features and options through clearly labeled buttons, menus, and other visual elements. This can make it easier for users to perform tasks and find the information they need, especially if they are not familiar with the specific commands required by a CLI.

At LogicVein, we use React.js to build our client application. One of the main advantages of React is its composability. Once we have developed the main components for our design system, we can create a wide range of feature-rich interfaces with minimal code. We use the same set of buttons, fields, tables, and dialogs throughout our UI to make it easier for users to become familiar with it. This also ensures that when we make a change to a single atomic component, it is applied consistently throughout the interface. While there are many excellent component libraries available, we chose to build our own from scratch to achieve maximum customisability.

Easing the task burden on users has always been a primary consideration in the development of all our products, particularly when it comes to our client application. Based on our own experience and customer feedback, we have continually improved our UI to provide the best user experience possible. Here are a few examples:

1. When navigating to a page, all major action items are visible without being hidden behind a menu. This makes it clear to users what actions are available and reduces the need for them to hunt around or try to remember where specific options are located.
2. Users do not have to perform the same type of actions repeatedly. For example, if a user wants to back up 10 devices, they can select them all at once and click the backup button instead of doing so one by one. This saves time and effort for users and makes it easier for them to complete tasks efficiently.
3. Destructive actions such as deletes always come with a confirmation dialog. While this may add an additional step, it ensures that users do not accidentally delete something important due to a misclick. This can help prevent costly errors and save users time and effort in the long run.
4. With role-based permissions, an administrator can assign someone with less experience to perform simple tasks without worrying about potential issues they might cause. The assignee will also have a great experience because we remove all the pages and menu items for which they do not have permission. As a result, they have a much simpler UI to work with, which can make it easier for them to learn and use the application. This can be particularly helpful for new users or those with limited technical knowledge.

In network management applications, providing a visual representation of the network is crucial as it enables users to understand the relationships between different components and identify potential issues more easily. This can be especially helpful for users who are trying to troubleshoot problems or make changes to the network, as it allows them to have an overview of the entire network and decide what needs to be done, rather than looking at the metrics of each device separately. Visual representations can take various forms. Here are a few that are included in LogicVein products:

1. A fully customisable map feature that allows users to check the location of devices, how they are connected, and which devices are experiencing incidents, all in one view. This can be particularly helpful for users who are trying to understand the overall layout and connectivity of the network.
2. Graphs that represent various metrics from devices. These metrics can be obtained directly from devices or derived by combining multiple original metrics. Metrics from different devices can also be combined into a single graph for improved comparison. This can be helpful for users who want to see how different metrics are performing over time or compare the performance of different devices.
3. Color-coded status messages that help users visually identify devices with issues more quickly. This can be useful for users who are monitoring the network and want to quickly see which devices are experiencing problems or need attention.

In any good user interface (UI) with a large customer base, it is important to provide users with customization options to fit their needs and improve their productivity. However, this is not as straightforward as it may seem. When we offer a large number of configuration options, users with less experience may struggle to complete even simple tasks.

Another issue is that implementing a high level of customizability can be challenging for developers, as they must consider all the different ways users may use it. Without careful consideration, this can result in undesired behaviors.

At LogicVein, we take a more progressive approach to customizability. We pre-configure many of our features based on industry best practices and the best look and feel, so that new users can easily become familiar with our UI. However, we also allow users to change most of these configurations, so they can experiment and find the best configuration for themselves.

One of the key advantages of a user interface (UI) is the ability to provide real-time updates on the status of the network and any changes made to it. This can help users stay informed about what is happening on the network and make it easier to identify and resolve issues as they arise.

At LogicVein, we use real-time updates in most places of our UI. As described in the previous section user permission changes updates the UI in real time to ensure security. In incidents/violations tables, new events are added to the table instantly based on sorting/filter conditions, enabling users to take necessary actions immediately. All the graphs also update in real time, so there is no need to refresh the page for new updates.

Implementing real-time updates can be relatively easier with a framework like React, as it allows you to change only part of the UI while the rest remains the same. However, there are some challenges to consider as well.

1. Our application can be used by many users simultaneously, so we can’t block all other users from accessing a feature while waiting for one user to make changes. At the same time, we must ensure that changes made at the same time do not cause conflicts or other issues. To address this, we use a combination of optimistic updates and real-time data synchronization to ensure that changes made by one user are reflected in the UI for all users, while also minimizing the risk of conflicts.
2. If a table has sorting or filtering applied, you can’t simply put the new events at the top and be done with it. With the correct sorting or filtering applied, the new event could be several pages away from the actual page the user is on. You also can’t fetch all the page data at every new event because if you receive hundreds of new events per second, you need to fetch as little data as possible to avoid performance issues.
3. While real-time updates can be helpful for users, they can also be annoying if the UI changes too frequently while the user is working on something. It is therefore important to give users the ability to pause real-time updates in certain areas of the UI, or to adjust the frequency at which updates are received. This can help users focus on their tasks without being interrupted by constant UI changes.

A good network management user interface (UI) should be able to support a wide range of network sizes and configurations, from small local networks to large enterprise networks. It should be able to handle large amounts of data and traffic and should be able to scale up or down as the needs of the network change. However, scalability is meaningless if the system suffers from major performance issues as it scales up. Therefore, it is important to pay attention to every detail and piece of code when implementing scalability, as even small bottlenecks can cause the whole system to perform poorly when scaled up.

At LogicVein, we continually work on improving the scalability and performance of both the client-side and server-side of the application. React itself provides many performance benefits, but in a large application like ours, we must go the extra mile to ensure scalability and performance. Here are a few examples of how we do this in our application:

1. React is effective at determining what should and should not be updated on the HTML DOM, but in larger components, it requires additional guidance from the developer in this process. To minimize unnecessary re-renders, we have implemented various strategies such as memoizing functions, optimizing the number of props passed to a component, and moving dynamic styling out of the main component. These approaches help ensure that our UI remains efficient and performs well.
2. Optimizing payloads for better performance To improve the performance of our UI, we have optimized our payloads to ensure that the client application only receives the data it needs to display or make decisions. While this may seem like a no-brainer, many web applications fetch unnecessary information that can impact performance. By optimizing our payloads, we can reduce the amount of data transmitted between the client and server and improve the overall efficiency of our UI.
3. Usage of generic components To reduce package sizes and avoid code repetition, we use generic components in our UI. This helps create a consistent look and feel throughout the application, while still allowing us to customize components as needed. However, we also ensure that these generic components are not too large to fit all scenarios, as this can impact performance. In some cases, we may use a wrapper around a generic component or write a new component entirely to achieve the desired result.
4. Displaying only what the user needs To ensure that our UI is efficient and easy to use, we only display important columns in tables, rather than showing every column in the database. We also provide users with the ability to choose additional columns if needed, and offer extensive search functionality to filter results.
5. Sharing data between components To reduce the amount of data that needs to be fetched from the backend, we use a state management library Redux to share data between multiple components. This helps improve performance and ensures that our UI remains responsive and efficient.