Мы с моим коллегой Георгом уже какое-то время используем Splunk. Мы всегда стараемся использовать Simple XML как можно дольше. Но когда все становится сложно и Simple XML не может решить проблему, мы используем смесь jQuery и BackboneJS, поскольку это основные зависимости SplunkJS Stack. Backbone - это более старая библиотека, которая использует шаблон MVC, а jQuery (упрощенно) является манипулятором DOM. Поскольку я использую Vue при создании интерфейсов, я подумал, что было бы неплохо использовать его в панелях управления Splunk.
Чтобы не усложнять, мы будем использовать уменьшенную версию базовой библиотеки Vue и в качестве хорошего начала создадим простой текстовый фильтр, который фильтрует поиск по индексу _internal, задав sourcetype . Текстовый фильтр связан с представленной моделью токена. Поэтому мы должны продумать все случаи, когда нужно обновить токен и когда нужно обновить фильтр.
- Токен устанавливается через URL-адрес при загрузке панели управления.
- Токен изменен Vue.
- Токен заменен Splunk.
Подготовьте новое приложение Splunk
Импортировать Vue в панель управления Splunk очень просто. Создайте новое приложение Splunk (имя: Vue Demo, каталог: vue-demo) и подкаталог appserver/static в папке приложения. Обычно каталог default переименовывают в local, потому что все изменения через SplunkWeb будут сохраняться локально. Переключитесь на appserver/static, запустите проект с помощью yarn init -y и добавьте Vue: yarn add vue. Создайте файл с именем vue-demo.js и вставьте следующий код:
Комментарий в начале //# sourceURL=vue-demo.js предназначен для целей отладки, потому что тогда вы можете увидеть разделенный файл в DevTools вашего браузера. Зарегистрируйте Vue в требуемой конфигурации, добавив ее в свойство paths. В остальном стандартный RequireJS.
Простой XML
Создайте новую панель инструментов и сохраните ее в приложении Vue Demo. Замените что-либо следующим кодом. Скрипт добавлен в тег <form script="vue-demo.js">. Мы используем элемент div с идентификатором vue-app внутри тега html, чтобы вставить шаблон Vue в панель управления. Поиск довольно прост, поскольку он просто ищет определенный sourcetype в индексе _internal и возвращает первые 10 событий: index=_internal sourcetype=$sourcetype$ | head. События отображаются в простой таблице.
После перезапуска Splunk (Web) у вас должно появиться поле ввода и пустая таблица. Теперь, когда все готово, можно приступить к самому интересному.
1-й вариант: простой фильтр
Прежде всего, мы должны кэшировать представленную модель токена: const tokenModel = mvc.Components.get('submitted'). Как я сказал во введении, мы должны рассмотреть три случая. Сначала нам нужно получить токен, если он будет установлен через URL. Это можно сделать, вызвав tokenModel.get('sourcetype') при создании экземпляра istance, и чтобы сделать его реактивным, мы сохраняем его в data. Кстати: data также может быть объектом в корневых экземплярах Vue. Тип источника лениво привязан к вводу <input v-model.lazy="sourcetype” /> в шаблоне для синхронизации только после изменения, а не для каждого события ввода (ленивый модификатор).
Второй случай покрывается добавлением наблюдателя к типу источника, который устанавливает тип источника в модели токена после изменения.
В третьем случае все наоборот, потому что Splunk должен уведомлять Vue при изменении токена. Поэтому мы подписываемся на изменения типа источника в модели токена в created крючке жизненного цикла. Мы должны создать обратный вызов как именованную функцию для правильной отмены подписки, когда экземпляр destroyed. Некоторые могут задаться вопросом, как updateOnTokenChange сохраняет правильный this контекст, даже когда он вызывается внутри модели токена Splunk. Это потому, что: Все методы будут иметь свой this контекст автоматически, привязанный к экземпляру Vue. ("Документация")
Результатом нашего первого черновика стал следующий фрагмент, который действительно хорошо сработал.
2-й черновик: извлечение логики через Mixin
Проблема с нашим первым результатом заключалась в том, что вся логика была привязана к компоненту и поэтому не могла повторно использоваться где-либо еще. Мы решили проблему путем извлечения логики в Mixin, который можно использовать в нескольких компонентах.
3-й проект: фабрика миксин токенов
Мы отделили логику токена от компонента, используя Mixin во втором черновике. Однако миксин привязан к определенному токену. Это означает, что мы должны создать новый миксин для каждого токена, которым мы хотим управлять. У Георга возникла идея написать фабрику миксинов, которая принимает массив токенов (строк) и конкретную модель токенов. Фабрика миксинов возвращает массив миксинов, которые можно вставить в экземпляр Vue с помощью оператора распространения.
Шаблон фабрики миксинов выглядит как следующий фрагмент. Мы сохраняем выбранную модель токенов в локальной константе и возвращаем массив миксинов, используя функцию map массива токенов.
Как и в первом черновике, мы должны охватить все три случая обновления из введения. Чтобы создать объект с динамическими именами свойств, вы можете использовать синтаксис квадратных скобок { [name]: 'foobar' }. Остальное довольно просто, потому что нам нужно только заменить «sourcetype» на «token».
Последний шаг - вставить созданные миксины в экземпляр Vue с помощью оператора распространения.
Итак, давайте все вместе. Мы добавляем второй фильтр, который фильтрует источник. Поскольку в шаблоне должен быть единственный корневой элемент, мы заключаем оба ввода в div. Следующий фрагмент был нашим окончательным результатом.
Вот доказательство того, что это работает
Репо: https://github.com/bmacher/splunk-and-vue
// BMA
