+
@@ -16,7 +20,11 @@ export default {
that: {},
detailList: Boolean,
alertTableDialog: Boolean,
- isTopoInfo: Boolean
+ isTopoInfo: Boolean,
+ width: {
+ type: Number,
+ default: 150
+ }
},
data () {
return {
@@ -28,31 +36,62 @@ export default {
computed: {
calcPosition () {
return function (position) {
- const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
- const leftOffSetView = this.detailList ? -80 : 10
- const leftOffSet = this.detailList ? -80 : 10
- const topOffSet = this.detailList ? 60 : 22
- const topoOffset = this.isTopoInfo ? 155 : 0
- if (position.top + this.heightList > clientHeight) {
- return {
- left: `${position.left + position.width + leftOffSet - topoOffset}px`,
- top: `${position.top - this.heightList + topOffSet}px`
+ if (this.$refs.alertLabels) {
+ this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+ this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+ } else {
+ this.heightList = 0
+ this.boxWidth = 0
+ }
+ const clientHeight =
+ document.body.clientHeight < document.documentElement.clientHeight
+ ? document.body.clientHeight
+ : document.documentElement.clientHeight
+ const clientWidth =
+ document.body.clientWidth < document.documentElement.clientWidth
+ ? document.body.clientWidth
+ : document.documentElement.clientWidth
+ let leftOffSetView = 0
+ let leftOffSet = this.detailList ? -80 : 10
+ let topOffSet = this.detailList ? 60 : 22
+ let topOffSetView = 0
+ let labelPosition = {
+ top: 0,
+ left: 0,
+ right: 0,
+ }
+ if (this.alertTableDialog) {
+ let dialog = document.querySelector(
+ '#dialog-alert-massage .el-dialog'
+ )
+ if (!dialog) {
+ dialog = document.querySelector('#viewGraphDialog .el-dialog')
}
- } else if (this.alertTableDialog) {
- const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
const dialogHeight = dialog.getBoundingClientRect()
- if (dialogHeight) {
- return {
- left: `${position.left + position.width + 10 - dialogHeight.x}px`,
- top: `${position.top - dialogHeight.y}px`
- }
+ leftOffSet = leftOffSet - 3 * dialogHeight.x
+ leftOffSetView = dialogHeight.x
+ topOffSet = topOffSet - dialogHeight.y
+ topOffSetView = topOffSet
+ }
+ if (position.top > clientHeight / 2) {
+ labelPosition = {
+ left: `${position.left + position.width + leftOffSet}px`,
+ top: this.that.type === 'chartTopology' ? `${position.top - this.heightList - topOffSetView}px` : `${position.top - this.heightList - topOffSetView + position.height / 2}px`
}
} else {
- return {
- left: `${position.left + position.width + leftOffSet - topoOffset}px`,
- top: `${position.top}px`
+ labelPosition = {
+ left: `${position.left + position.width + leftOffSet}px`,
+ top: this.that.type === 'chartTopology' ? `${position.top + topOffSet}px` : `${position.top + position.height / 2}px`
}
}
+ if (position.left > clientWidth / 2) {
+ delete labelPosition.left
+
+ labelPosition.right =
+ clientWidth - position.left - leftOffSetView + 'px'
+ }
+ labelPosition.width = this.width + 'px'
+ return labelPosition
}
},
calcHeight () {
@@ -69,13 +108,23 @@ export default {
}
},
methods: {
- tooltipHover (show) {
- if (show) {
- clearTimeout(this.that.timeout)
- this.that.timeout = null
- } else {
- this.that.loading = false
+ tooltipHover (item, flag, e) {
+ if (e) {
+ const dom = e.currentTarget
+ const position = dom.getBoundingClientRect()
+ this.position.left = position.left
+ this.$set(this.position, 'left', position.left)
+ if (position.top > window.innerHeight / 2) {
+ this.$set(this.position, 'top', position.top - 55)
+ } else {
+ this.$set(this.position, 'top', position.top + 30)
+ }
+ // this.$set(item, 'alertNumtooltipShow', flag)
+ this.alertNumtooltipShow = flag
}
+ },
+ tipHover (tipLoading) {
+ this.$emit('tipHover', tipLoading)
}
},
mounted () {
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 2434caf9d..5db71b662 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -68,6 +68,7 @@
+
@@ -109,6 +110,7 @@ import processBottomTab from '@/components/common/bottomBox/tabs/processBottomTa
import networkBottomTab from '@/components/common/bottomBox/tabs/networkBottomTab'
import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
import cortexDetail from '@/components/common/bottomBox/tabs/cortexDetail'
+import lokiStatus from '@/components/common/bottomBox/tabs/lokiStatus'
import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
import routerPathParams from '@/components/common/mixin/routerPathParams'
@@ -119,6 +121,7 @@ export default {
components: {
scrapeEndpoint,
cortexDetail,
+ lokiStatus,
LogBottomTab,
processBottomTab,
networkBottomTab,
@@ -251,11 +254,18 @@ export default {
agent: {
scrapeEndpoint: [
{ prop: 'scrapeEndpoint', name: this.$t('config.agent.scrapeEndpoint'), active: true },
- { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: false }
+ { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: false },
+ { prop: 'lokiStatus', name: this.$t('config.agent.lokiStatus'), active: false }
],
cortexDetail: [
{ prop: 'scrapeEndpoint', name: this.$t('config.agent.scrapeEndpoint'), active: false },
- { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: true }
+ { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: true },
+ { prop: 'lokiStatus', name: this.$t('config.agent.lokiStatus'), active: false }
+ ],
+ lokiStatus: [
+ { prop: 'scrapeEndpoint', name: this.$t('config.agent.scrapeEndpoint'), active: false },
+ { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: false },
+ { prop: 'lokiStatus', name: this.$t('config.agent.lokiStatus'), active: true }
]
},
ipam: [
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue b/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
index ffff26698..6968894f3 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
@@ -52,6 +52,7 @@ export default {
await this.getReadyTableData()
await this.getIngesterTableData()
await this.getStoreGatewayTableData()
+ await this.getCompactorTableData()
await this.getConfigTableData()
this.getservicesTableData()
}
@@ -86,6 +87,12 @@ export default {
this.ringTableData.push(response.data.list)
}
},
+ async getCompactorTableData () {
+ const response = await this.$get('agent/' + this.obj.id + '/cortex/compactor/ring')
+ if (response.code === 200) {
+ this.ringTableData.push(response.data.list)
+ }
+ },
async getConfigTableData () {
const response = await this.$get('agent/' + this.obj.id + '/cortex/config?mode=' + this.configMode)
if (response.code === 200) {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
new file mode 100644
index 000000000..6112fcade
--- /dev/null
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
@@ -0,0 +1,108 @@
+
+
+ {{obj.name}}
+
+
+
+
+
+
+
+
diff --git a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
index 73a46d1ef..f89311fff 100644
--- a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
+++ b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
@@ -62,6 +62,8 @@ export default {
case 'dc':
case 'user':
case 'recordRule':
+ case 'response':
+ case 'params':
return false
default: return true
}
diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js
index 92337c906..2fa3427cc 100644
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -1,8 +1,9 @@
import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
-import { requestsArr } from '@/http'
+import nzTooltip from '@/components/common/alert/nzTooltip'
export default {
components: {
- alertDaysInfo
+ alertDaysInfo,
+ nzTooltip
},
props: {
tableData: {
diff --git a/nezha-fronted/src/components/common/table/settings/cortexDetailTable.vue b/nezha-fronted/src/components/common/table/settings/cortexDetailTable.vue
index 73916e65e..636e95e73 100644
--- a/nezha-fronted/src/components/common/table/settings/cortexDetailTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/cortexDetailTable.vue
@@ -1,6 +1,5 @@
-
{{$t('cortex.serviceStatus')}}
- {{indexs? $t('cortex.storeGateway'):$t('cortex.ingester')}}
+ {{indexs==0?$t('cortex.storeGateway'):(indexs==1?$t('cortex.ingester'):$t('cortex.compactor'))}}
{{scope.row[item.prop]}}
-
@@ -111,21 +110,10 @@