Element-UIアコーディオン効果(初回は「詳細を表示」をクリックして開き、再度クリックして閉じます)
7013 ワード
テクノロジースタック:フロントエンドはvue、バックエンドはjava springbootです.
シーン:filebeatはdockerログファイルの内容を収集し、logstashに転送してフィルタ処理し、Elasticsearchインデックスライブラリに送信します.フロントエンドは,ページに検索条件をいくつか追加してバックエンドにESページングおよびマルチ条件検索を行い,最後に結果をフロントエンドページに示す.
知らないで、他の会社の(ELK)ログの採集と展示はどのようにしたのですか?今のところ、KibanaのXXの需要はありません.
シーン:filebeatはdockerログファイルの内容を収集し、logstashに転送してフィルタ処理し、Elasticsearchインデックスライブラリに送信します.フロントエンドは,ページに検索条件をいくつか追加してバックエンドにESページングおよびマルチ条件検索を行い,最後に結果をフロントエンドページに示す.
知らないで、他の会社の(ELK)ログの採集と展示はどのようにしたのですか?今のところ、KibanaのXXの需要はありません.
{{(pageIndex - 1) * pageSize + scope.$index + 1}}
{{ props.row.ip}}
{{ props.row.hostname}}
{{ props.row.filepath}}
{{ props.row.message}}
{{ props.row.logLevel}}
{{ props.row.dockerId}}
{{ props.row.logTime}}
{{ props.row.timestamp}}
export default {
data () {
return {
dataForm: {
logLevel: '',
dockerId: '',
ip: '',
filename: '',
filepath: '',
fromTime: '',
endTime: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate
},
activated () {
this.getDataList()
},
methods: {
// の
toogleExpand (row) {
let $table = this.$refs.table
this.dataList.map((item) => {
if (row.id !== item.id) {
$table.toggleRowExpansion(item, false)
}
})
$table.toggleRowExpansion(row)
},
//データリストの
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/damon/log/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'pageSize': this.pageSize,
'logLevel': this.dataForm.logLevel,
'dockerId': this.dataForm.dockerId,
'ip': this.dataForm.ip,
'filename': this.dataForm.filename,
'filepath': this.dataForm.filepath,
'fromTime': this.dataForm.fromTime,
'endTime': this.dataForm.endTime
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
//ページあたり
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// ページ
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
}
}
}
pre{
white-space:pre-wrap;/* css3.0 */
white-space:-moz-pre-wrap;/* Firefox */
white-space:-o-pre-wrap;/* Opera 7 */
word-wrap:break-word;/* Internet Explorer 5.5+ */
font-size: 14px;
font-family: "Arial";
color:black;
}