CC BY
8
экономического развития наблюдается становление и развитие управленческого учета [5].
Использованные источники:
1. Управленческий учет / Под ред. В. Палия и Р. Вандер Виля. - М.: ИНФРА-М, 2004. - 442 с.
2. Булгакова С.В. Управленческий учет: проблемы теории: монография, С.В. Булгакова - Воронеж: Изд-во Воронежского государственного ун-та, 2006. -160 с.
3. Валебникова Н.В. Современные тенденции управленческого учета, Н.В. Валебникова, И.П. Василевич : Бухгалтерский учет. - 2000. - № 18. - С. 5358.
4. Ивашкевич В.Б. Современные тенденции развития управленческого учета В.Б. Ивашкевич, С.Н. Зайцев : Бухгалтерский учет. - 1996. - №2 12. - С. 34-35.
5. Палий В.Ф. Развитие методологии управленческого учета, В.Ф. Палий : Бухгалтерский учет. - 2004. - № 12. - С. 52-55.
Капустин И.В. студент магистратуры 2 курса направление подготовки «Информационные системы и
технологии» Полукаров Д.Ю., к. техн. н. научный руководитель, доцент кафедра «Информационных систем и технологий» Поволжский Государственный Университет Телекоммуникаций и
Информатики Россия, г. Самара
РАЗРАБОТКА ГРАФИЧЕСКОГО РЕДАКТОРА СЕТЕЙ СРЕДСТВАМИ
ЯЗЫКА JAVASCRIPT
Статья посвящена особенностям разработки визуального редактора компьютерных сетей. Рассматривается библиотека SigmaJS и процесс разработки отображения графа с ее использованием.
Ключевые слова: телекоммуникации, программирование, JavaScript, сетевое оборудование, графический редактор, граф.
Проектирование компьютерной сети является едва ли не самой сложной задачей стоящей перед системным администратором. Ошибки на данном этапе могут привести к катастрофическим последствиям в будущем. Чтобы предотвратить это, необходимо произвести детальный анализ требований предъявляемых к компьютерной сети на этапе проектирования, а так же спрогнозировать ее дальнейшее развитие, например, масштабирование сети в связи с увеличением числа пользователей. К основным сетевым решениям, которые проектировщик должен выбрать для проектируемой компьютерной сети, относятся:
1. Выбор сетевой архитектуры, что подразумевает:
• выбор топологии сети, то есть схемы соединения компьютеров, кабельной системы и других сетевых компонентов;
• выбор протокола передачи данных;
• выбор типа кабельной системы;
• выбор сетевого оборудования.
2. Определение параметров серверного оборудования.
3. Определение характеристик рабочих станций.
4. Планирование мер по обеспечению информационной безопасности.
5. Планирование мер защиты от перебоев электропитания.
6. Выбор концепции совместного использования периферийных устройств.
7. Выбор сетевого программного обеспечения.
Человеку намного проще воспринимать информацию визуально в виде графиков, схем и таблиц, поэтому в сфере разработки информационных систем большую популярность приобрели WYSIWYG (от англ. What You See is What You Get, «что видишь, то и получишь») редакторы. Для простоты обозначения все чаще их называют просто - визуальные редакторы. Суть данного редактора заключается в том, что при проектировании можно выбирать необходимые элементы из заранее определенного набора, перенося его на рабочее поле, редактор, автоматически генерирует код, соответствующий визуальному представлению. Наибольшее распространения подобного рода редакторы получили в веб разработке, поскольку создание HTML страниц упростилось в разы. Так же технология WYSIWYG получила распространение и в телекоммуникационных технологиях, в частности при проектировании сети, где системы мониторинга перешли на принципиально новый уровень по качеству отображаемой информации. Если раньше системы мониторинга представляли собой список из названий имеющегося сетевого оборудования и их текущего состояния, то теперь такие системы получили богатый графический интерфейс, где каждый тип оборудования, а в некоторых случаях даже модель, имели свое графическое представление, в виде 2D и 3D моделей. Критические неисправности и возникающие события на узлах телекоммуникационной сети и в каналах связи стали отображаться так же графически, возле виртуальных отображений физических элементов.
Процесс проектирования компьютерной сети упростился и перешел от ручного создания узлов сети и их размещения относительно друг друга к автоматическому. Все это позволило сократить время проектирования и позволило в сжатые сроки создать несколько вариантов сетевых архитектур, с целью в дальнейшем выбрать наиболее подходящую под выдвинутые требования. Проанализировав существующие на данный момент популярные веб-сервисы предоставляющие возможность построить схему сети при помощи визуального редактора [1], мною был сделан вывод, о
целесообразности реализации собственного визуального редактора. Далее в статье излагается материал посвящённый особенностям реализации визуального редактора средствами языка JavaScript.
Мы будем рассматривать компьютерную сеть как граф, где узлами являются активное сетевое оборудование, в частности маршрутизаторы, а ребрами - линии связи между узлами сети [2]. Требования, выдвигаемые к разрабатываемому визуальному редактору:
1. Отображение элементов сети (маршрутизаторов и линий связи) общепонятными и принятыми графическими объектами (рисунок 1 и рисунок 2).
2. Маршрутизатор должен иметь следующие свойства:
• уникальное название;
• количество портов.
3. Линия связи должна иметь следующие свойства:
• пропускная способность;
• тип среды передачи.
4. Возможность конвертации законченной схемы сети в текстовый файл в формате JSON либо XML.
Рис. 1. - Графическое отображение маршрутизатора.
Рис. 2. - Графическое отображение линии связи. Конечный файл передается на вход модулю-интерпретатору, который на выходе формирует файл конфигурации для узлов сети, т.е. маршрутизаторов. Использование формата JSON является более удобным в силу своей лаконичности по сравнению с XML и более подходящим для сериализации сложных структур. Поскольку формат JSON является подмножеством синтаксиса языка JavaScript, то JavaScipt объект может быть быстро десериализован встроенной функцией eval(). Так же это облегчает разработку серверной части общей системы, в частности модуль-интерпретатор можно реализовать на языке PHP. В языке PHP, начиная с версии 5.2.0, поддержка JSON включена в ядро в виде функций json_decode() и json_encode(), которые сами преобразуют типы данных JSON в соответствующие типы PHP и наоборот. Таким образом, мы получаем следующую схему:
1. Пользователь в браузере строит сеть посредством графического редактора, реализованного на языке JavaScript.
2. Схема сериализуется в формат JSON и передается AJAX-запросом на сервер.
3. Сервер обрабатывает файл и в соответствии со своей логикой выдает на выходе файл либо файлы конфигурации сетевого оборудования, которые должны быть загружены в реальные маршрутизаторы, смоделированные ранее.
Временные затраты, в данном контексте, представляют собой время потраченное сетевым инженером на проектирование сети вручную на бумаге, а так же время потраченное на конфигурацию каждого маршрутизатора по отдельности.
Финансовые затраты состоят в найме сертифицированного сетевого инженера, даже тогда когда сеть не является большой и не требует глубоких знаний о правильном построении сети. Например, это может быть сеть малого офиса (SOHO), в которой количество маршрутизаторов не будет превышать трех. Нанимать для столь тривиальной задачи сетевого инженера не рентабельно, равно как и передавать эту задачу аутсорсинговой компании. Таким образом разрабатываемая система позволит избежать вышеозначенных затрат и решить задачу построения и конфигурирования сети специалисту знакомому лишь с азами компьютерных сетей.
Разрабатывать визуальный редактор компьютерной сети или же, проще говоря, графов, только средствами языка JavaScript очень трудоемкий процесс. Однако, существует ряд библиотек, которые позволяют создавать граф, используя готовые объекты, такие как узел и ребро. Самой популярной является SigmaJS.
Библиотека SigmaJS
SigmaJS - это JavaScript библиотека, предназначенная для создания графов. Она легко позволяет опубликовать графы на веб-страницах, и позволяет разработчикам интегрировать, исследование и построение графов в веб-приложения. Основные возможности:
• SigmaJS предоставляет много возможностей из коробки, такие как рендеринг на Canvas и WebGL или поддержка мышки и тачапада, что делает взаимодействие пользователя с графом простым и удобным;
• конфигурация по умолчанию, имеет поддержку мыши и тачапада, перерисовка и масштабирования графа, в ответ на изменения размера контейнера, рендер на WebGL Canvas, если поддерживает браузер, либо на 2D Canvas, адаптация размеров узлов графа и ребер к размеру экрана;
• практически все аспекты работы SigmaJS можно настроить, как необходимо через настройки, включить или выключить интерактивное взаимодействие с графом для конечного пользователя. Также присутствует возможность написать свой функционал рендера узлов и ребер;
• SigmaJS библиотека для рендеринга графов, в первую очередь, поэтому разработчик сам выбирает, насколько будет граф интерактивным для пользователя, будет ли он интерактивным вообще. API SigmaJS позволяет
изменять данные для графа, двигать камеру, подписаться на события и т.д.
Код, простейшего графа с тремя вершинами и связующими их ребрами,
реализованный с помощью SigmaJS выглядит следующим образом: {
"nodes": [
{ "id": "routerl", "label": "Маршрутизатор_1", "x": 0, "y": 0, "size": 3}, { "id": "router_2", "label": "Маршрутизатор_2", "x": 3, "y": 1, "size": 3},
{ "id": "router_3", "label": "Маршрутизатор_3", "x": 1, "y": 3, "size": 3} ],
"edges": [
{ "id": "eth0", "source": "router l", "target": "router_2"}, { "id": "ethl", "source": "router_2", "target": "router_3"},
{ "id": "eth2", "source": "router_3", "target": "router l"} ]
}
Массив объектов «nodes» представляет собой набор узлов графа с полями, отражающими название, которое помещено поверх его визуального отображения, положение на экране определяемое координатами X и Y, а так же размер(size) и уникальный идентификатор узла (id). Ребра графа задаются массивом объектов «edges», поля которого определяют уникальный идентификатор^) и узел начала и конца дуги. Таким образом, граф, созданный с помощью библиотеки SigmaJS, является ориентированным уже на программном уровне, что, однако не мешает отобразить его как неориентированный в графическом отображении. Все возможные варианты реализации узлов графа находятся в файле sigma.classes.graph.js. Однако статично заданный граф едва ли можно назвать полезным с точки зрения проектирования сети пользователем несведущим в телекоммуникациях и тем более в программировании. Однако созданные объекты не имеют всех необходимых свойств, определенных нами в начале, поскольку библиотека SigmaJS даёт лишь каркас для реализации графов. Чтобы устранить это, необходимо создавать свои объекты узлов и ребер, и указывать в качестве прототипа соответствующие объекты библиотеки SigmaJS, расширяя, таким образом, набор свойств, предназначенных изначально только для отображения. Чтобы «оживить» граф, сделать его более интерактивным, нам понадобиться добавить в систему обработчики событий. Поскольку элементов графа всего два - узел и ребро - то следующие события могут быть связанны только с этими двумя элементами:
• clickNode;
• clickEdge;
• rightClickNode;
• rightClickEdge;
• doubleClickNode;
• doubleClickEdge;
Не обязательно реализовывать все события на всех элементах, в нашей задаче достаточно событий связанных с кликом. Событие doubleClickNode на элементе «узел» вызывает модальное окно с полями этого объекта, событие rightClickNode создает объект класса «edge» со значением поля «source» равным «id» узла на котором это событие было сгенерировано. Событие rightClickEdge на ребре графа предназначено для удаления ребра, а событие doubleClickEdge вызывает модальное окно с возможностью редактирования и заполнения свойств ребра. Все обработчики событий имеют своим прототипом sigma.classes.dispatcher, иначе говоря, наследуют все его свойства и функции. Самый главный метод, который используется - bind(events, handler), принимающий в качестве параметров событие и обработчик. Обработчик может быть вынесен в отдельную функцию, а может быть реализован в том же месте где и объявляется связывание:
sigInst.bind("clickNode", function () {... });
Таким образом, мы получаем визуальный редактор, с помощью которого можно проектировать сеть (граф) с элементами узлы -маршрутизаторы и ребра - линии связи, каждый из которых обладает дополнительными свойствами. Свойства необходимые для визуального отображения элементов и интерактивного взаимодействия пользователя с ними мы получаем путем прототипного наследования от соответствующих объектов «nodes» и «edges» библиотеки SigmaJS. Построение сети на базе JavaScript-объектов позволяет легко декодировать построенный граф в формат JSON, с целью дальнейшей обработки его модулем на стороне сервера.
Использованные источники:
1. Полукаров Д.Ю., Капустин И.В. Сравнительный анализ систем визуального проектирования компьютерных сетей // XXIII российская научная конференция профессорско-преподавательского состава, научных сотрудников и аспирантов, Самара, 2016 г., с.226-227
2. Стуликова К.А., Полукаров Д.Ю. Проблемы отображения автономных систем с помощью графов // Известия самарского научного центра российской академии наук. Том - 16, номер - 4-2, год - 2014., с. 459-464.
3. Дронов В., JavaScript и AJAX в Web-дизайне [Текст] / В. Дронов. - Изд. 3-е. - БХВ-Петербург, 2012. - 736 с.
