garafana介面樣式修改

2021-09-29 13:48:54 字數 2066 閱讀 8390

frame引入garafana介面,部分可編輯操作不對外暴露,需要自定義樣式,隱藏選單和頂部編輯欄;但是garafana引入屬於跨域引入,不可以直接獲取garafana介面元素,本文章對具體實現做一總結。

iframe的src位址為garafana位址,新增引數&monitorflag=true讓使用者區分引入與未引入

import react,  from 'react';

import from 'dva';

import from 'antd';

import jquery from 'jquery';

import styles from './monitoring.less';

const $ = jquery;

@connect(() => ())

class monitoring extends purecomponent ;

componentdidmount() );

// 傳送訊息 新增監聽

window.addeventlistener('message', this.messageevent);

} componentwillunmount()

// iframe傳來的資料,初始loading為true,什麼時候iframe傳來資料,改為false,體現乙個載入過程,使用者體驗良好

messageevent = event => );}};

render() = this.state;

return (

id="monitorbox"

classname="monitorbox"

title="monitor"

src=$&monitorflag=true`}

width="100%"

height=

frameborder="0"

/>

);}}

export default monitoring;

iframe不跨域的話,可以通過以下方法直接獲得子元素內容

$("iframe")[0].contentwindow.document
但是如果是跨域的話,是獲取不到的,所以不能直接修改元素樣式,需要從引入的介面本身去修改**

如果是引入伺服器的garafana,沒有辦法直接檢視修改結果,所以需要在本地搭建garafana=>localhost:3000,並修改本地配置,在本地修改原始碼測試,然後替換伺服器的garafana原始碼;

原始碼目錄

修改/grafana/public/views目錄下的index.html,確認**無誤後,對應複製到index-template.html

/*iframe-different為父元素,對子元素樣式修改*/

雙擊grafana-cli.exe服務,如果重啟可在任務管理器中找到對應服務重啟,檢視對應修改結果

雙擊grafana-server.exe,會開啟乙個命令視窗,關掉視窗,服務對應關閉

埠可以配置,預設3000,開啟:localhost:3000,開啟garafana頁面

配置引數

biee登入介面樣式修改

1 修改背景 3 修改登入的登入提示 d biee oraclebi web msgdb l zh messages logonmessages.xml 4 修改登陸介面下的title oraclebi web msgdb l zh messages productmessages.xml orac...

django pagination 樣式修改

預設 django pagination 樣式 使用bootstrap後樣式 有些瑕疵,下面來完善一下 修改後 效果還不錯吧。那麼講下如何修改。首先找到其原始碼 路徑 site packages django pagination 1.0.7 py2.7.egg pagination templat...

jqgrid樣式修改

1.單元格內的文字自動換行 加入樣式 ui jqgrid tr.jqgrow td 2.保持顯示垂直滾動條和水平滾動條 在ie中記錄比較少的時候,預設情況下不顯示垂直滾動條,會出現標題行與資料行位置對不齊的情況,通過保持顯示垂直滾動條可以解決這個問題 pgridid closest ui jqgri...