我如何 disable/hide Kibana 中的 Dev Tools 插件

Question

我想在 Kibana 中隐藏 Dev Tools 菜单项，但根据他们的路线图，他们的权限系统无法做到这一点，而且短期内也不会。 （参见 https://discuss.elastic.co/t/disable-hide-management-plugin-kibana-5/72763）

Kibana 位于 iFrame 中，该 iFrame 托管容器域中的站点。

Answer 1

我最终在 JavaScript 中使用 MutationObservers 来监视 iFrame 中 DOM 的变化，以隐藏我不想让非管理员看到的菜单。用 AngularJS 1.2 编写的解决方案，已知可与 Kibana 6.2 和 6.3 一起使用。这将隐藏几个 "left side" 菜单以及一堆管理子菜单。您可以使用或修改代码以 hide/show 个额外的 UI 个元素。不幸的是，我不得不非常依赖 类，因为很少有元素包含我可以参考的 ID。

我希望这至少能帮助您想出自己的解决方案来管理权限结构之外的 Kibana 显示元素。

HTML:

    <iframe id="AnalysisFrame" ng-src="{{kibanaUrl}}" ng-init="setupFrame()"></iframe>

JavaScript:

    $scope.setupFrame = function() {
        //iframes are excluded from mutation observation, so we will
        //  need to create an observer _inside_ the iframe content.
        var theFrame = document.querySelector('#AnalysisFrame');
        //once the frame is loaded, that is when we can now attach our
        //  observer to the frame's content.
        theFrame.onload = function() {
            //console.log('[TRACE] iframe is completely loaded');
            var bIsKibanaAdmin = $scope.bIsKibanaAdmin;
            //the above is TRUE|FALSE set by some outside logic
            //  which does not pertain to this exercise.

            //create an observer instance for Management sub-menus
            var observerMan = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    //console.log('[TRACE] ', mutation);
                    //sub-menus of the Management console area
                    var manArea = theFrame.contentDocument.body.querySelector('kbn-management-landing');
                    if ( manArea ) {
                        //Management area is divided up by panels of related subjects
                        var manPanels = manArea.querySelectorAll('div[class*="page-row"]');
                        if ( manPanels ) manPanels.forEach(function(aPanel) {
                            //console.log('[TRACE] panel=', aPanel);
                            //6.2.4 had <div> titles, 6.3.x has <h3> titles, select based on their class only
                            var panelTitle = aPanel.querySelector('.kuiPanelHeader__title');
                            //if a panel has a title (version panel does not have one), see if hide or not.
                            if ( panelTitle ) switch ( panelTitle.innerText ) {
                                case 'Kibana':
                                    //only hide the Advanced Settings item off this panel
                                    var panelItem = aPanel.querySelector('li > a[href*="#/management/kibana/settings"]');
                                    if ( panelItem ) panelItem.parentElement.hidden = !bIsKibanaAdmin;
                                    break;
                                default:
                                    //most management panels are hidden from non-admins
                                    aPanel.hidden = !bIsKibanaAdmin;
                            }//switch
                        });
                    }
                });
            });
            //configuration of the left menu becomes active observer
            var configMan = {
                    attributes: true, //for when Management becomes the Active menu
                    attributeFilter: ['class'],
                    //attributeOldValue: true,
                    childList: false,
                    characterData: false,
                    //characterDataOldValue: false,
                    //subtree: true,
            };
            //the Management menu item does not exist yet, cannot start observing until later.

            //create an observer instance for left menu
            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    //console.log('[TRACE] ', mutation);
                    var leftMenus = mutation.target.querySelectorAll('.global-nav-link');
                    //since the menus do not have IDs, we are searching for their outer
                    //  DIV class unique to all left menu items. Their first element child
                    //  will be the <a href> link we can use to filter out ones we
                    //  wish to show or not.
                    if ( leftMenus ) leftMenus.forEach(function(aMenu) {
                        if ( aMenu.firstElementChild ) {
                            switch ( aMenu.firstElementChild.hash ) {
                                case "#/dev_tools":
                                    aMenu.hidden = !bIsKibanaAdmin;
                                    break;
                                case "#/account":
                                    aMenu.hidden = true;
                                    break;
                                case "":
                                    if ( aMenu.innerText=='Logout' ) {
                                        aMenu.hidden = true;
                                    }
                                    //else console.log('[TRACE] menu=', aMenu);
                                    break;
                                case "#/management":
                                    //we only want to hide certain sub-menus
                                    //  our menu item exists, attach observer for when
                                    //  user clicks it to make it "active"
                                    observerMan.observe(aMenu, configMan);
                                    break;
                                default:
                                    //console.log('[TRACE] menu=', aMenu);
                            }//switch
                        }
                    });
                });
            });
            //configuration of the left menu creation observer
            var configLM = {
                    attributes: false,
                    //attributeFilter: ['src'],
                    //attributeOldValue: true,
                    childList: true,
                    characterData: false,
                    //characterDataOldValue: false,
                    //subtree: true,
            };
            //start observing the contents of the iframe changes
            observer.observe(theFrame.contentDocument.body, configLM);
        };
    };