Идём по киберследу: Анализ защищенности Active Directory c помощью утилиты BloodHound — страница 42 из 46

'Template':
icon.className = 'fa fa-id-card';
break;
case 'CA':
icon.className = 'fa fa-landmark';
break;
…

Сохраняем измененный файл.

Кроме отображения самой метки нужно добавить визуализацию свойств узла. В той же директории открываем файл TabContainer.jsx и добавим импорт вкладки:

…
import ShareNodeData from './Tabs/ShareNodeData';
import TemplateNodeData from './Tabs/TemplateNodeData';
import CANodeData from './Tabs/CANodeData';
…

До нажатия на сам узел его свойства будут скрыты. Для этого в классе TabContainer находим строку this.state и добавляем строку:

…
class TabContainer extends Component {
constructor(props) {
super(props);
this.state = {
…
templateVisible: false,
caVisible: false,
…

Дальше нужно добавить обработку при нажатии на узел. Для этого находим строку nodeClickHandler(type) и добавляем код:

…
nodeClickHandler(type) {
…
} else if (type === 'Template') {
this._templateNodeClicked();
} else if (type === 'CA') {
this._caNodeClicked();
…

Ниже находим изменение состояния видимости вкладки для каждой метки. Код начинается с _labelNodeClicked. Для локального пользователя код будет выглядеть следующим образом:

…
_templateNodeClicked() {
this.clearVisible()
this.setState({
templateVisible: true,
selected:2
});
}
_caNodeClicked() {
this.clearVisible()
this.setState({
caVisible: true,
selected:2
});
}
…

Ниже в функции отображения render() находим строку NoNodeData и добавляем следующий код:

…
render() {
…
visible={
…
!this.state.shareVisible &&
!this.state.templateVisible &&
!this.state.caVisible &&
…

И еще ниже добавим отображение вкладки со свойствами для CANodeData:

…
…

Сохраняем измененный файл.

Переходим в директорию src\components\Spotlight и открываем на редактирование файл SpotlightRow.jsx. В функции render находим строку switch (this.props.nodeType) и добавляем код:

…
render() {
let nodeIcon;
let parentIcon = '';
switch (this.props.nodeType) {
…
case 'Template':
nodeIcon = 'fa fa-id-card';
break;
case 'CA':
nodeIcon = 'fa fa-landmark';
break;
default:
nodeIcon = '';
break;
}
…

Ниже находим строку switch (this.props.parentNodeType) и добавляем отображение родительской иконки:

…
switch (this.props.parentNodeType) {
…
case 'Template':
parentIcon = 'fa fa-id-card';
break;
case 'CA':
parentIcon = 'fa fa-landmark';
break;
default:
parentIcon = '';
break;
}
…

Сохраняем измененный файл.

B завершение создадим вкладку с отображением свойств центра сертификации. Переходим в директорию src\components\SearchContainer\Tabs. Сделаем копию файла UserNodeData.jsx и назовем его CANodeData.jsx:

import React, {useEffect, useState} from 'react';
import clsx from 'clsx';
import CollapsibleSection from './Components/CollapsibleSection';
import NodeCypherLinkComplex from './Components/NodeCypherLinkComplex';
import NodeCypherLink from './Components/NodeCypherLink';
import NodeCypherNoNumberLink from './Components/NodeCypherNoNumberLink';
import MappedNodeProps from './Components/MappedNodeProps';
import ExtraNodeProps from './Components/ExtraNodeProps';
import NodePlayCypherLink from './Components/NodePlayCypherLink';
import {withAlert} from 'react-alert';
import {Table} from 'react-bootstrap';
import styles from './NodeData.module.css';
import {useContext} from 'react';
import {AppContext} from '../../../AppContext';
const 
CANodeData
 = () => {
const [visible, setVisible] = useState(false);
const [objectId, setObjectId] = useState(null);
const [label, setLabel] = useState(null);
const [domain, setDomain] = useState(null);
const [nodeProps, setNodeProps] = useState({});
const context = useContext(AppContext);
useEffect(() => {
emitter.on('nodeClicked', nodeClickEvent);
return () => {
emitter.removeListener('nodeClicked', nodeClickEvent);
};
}, []);
const nodeClickEvent = (type, id, blocksinheritance, domain) => {
if (type === '
CA
') {
setVisible(true);
setObjectId(id);
setDomain(domain);
let session = driver.session();
session
.run('MATCH (n:
CA

{objectid:$objectid}) RETURN n AS node