fix: Fix custom monitor with cluster prefix

kubesphere · Jul 6, 2020 · bc16239 · bc16239
1 parent 1ccbaac
commit bc16239
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 20 deletions.
diff --git a/src/pages/projects/containers/CustomMonitoring/CreateDashborad/index.jsx b/src/pages/projects/containers/CustomMonitoring/CreateDashborad/index.jsx
@@ -35,13 +35,15 @@ export default class CrateDashboardModalContainer extends React.Component {
   }
 
   handleBasicConfirm = params => {
+    const { cluster } = this.props
     const kind = MODULE_KIND_MAP[this.props.store.module]
     const config = isArray(params) ? params[0] : params[kind]
 
     this.store = new CustomMonitoringTemplate({
       isEditing: true,
       name: get(config, 'metadata.name'),
       namespace: get(config, 'metadata.namespace'),
+      cluster,
       ...config.spec,
     })
 
@@ -64,7 +66,7 @@ export default class CrateDashboardModalContainer extends React.Component {
 
   render() {
     const { finishBasis } = this.state
-    const { namespace, store } = this.props
+    const { cluster, namespace, store } = this.props
     const { module } = store
     const kind = MODULE_KIND_MAP[module]
     const formTemplate = {
@@ -77,6 +79,7 @@ export default class CrateDashboardModalContainer extends React.Component {
       return (
         <CustomMonitoringModal
           store={this.store}
+          cluster={cluster}
           isSaving={this.props.isSubmitting}
           onCancel={this.props.onCancel}
           onSave={this.onSave}
@@ -89,6 +92,7 @@ export default class CrateDashboardModalContainer extends React.Component {
         visible
         module={module}
         name="CUSTOM_MONITORING_DASHBOARD"
+        cluster={cluster}
         namespace={namespace}
         formTemplate={formTemplate}
         steps={FORM_STEPS}

diff --git a/src/pages/projects/containers/CustomMonitoring/index.jsx b/src/pages/projects/containers/CustomMonitoring/index.jsx
@@ -136,7 +136,7 @@ export default class CustomMonitoringDashboards extends React.Component {
 
   createDashboard = async params => {
     await this.props.store.create({
-      namespace: this.props.match.params.namespace,
+      ...this.props.match.params,
       ...params,
     })
     this.hideCreateModal()
@@ -145,7 +145,7 @@ export default class CustomMonitoringDashboards extends React.Component {
 
   editDashboard = async params => {
     const result = await this.props.store.edit({
-      namespace: this.props.match.params.namespace,
+      ...this.props.match.params,
       ...params,
     })
     this.setState({ editData: result })
@@ -157,6 +157,7 @@ export default class CustomMonitoringDashboards extends React.Component {
   render() {
     const { bannerProps, tableProps } = this.props
     const { createModalVisiable, editModalVisiable, editData } = this.state
+    const { cluster, namespace } = this.props.match.params
 
     return (
       <div>
@@ -173,7 +174,8 @@ export default class CustomMonitoringDashboards extends React.Component {
         {createModalVisiable && (
           <CreateModal
             store={this.props.store}
-            namespace={this.props.match.params.namespace}
+            cluster={cluster}
+            namespace={namespace}
             isSaving={this.props.store.isSubmitting}
             onCancel={this.hideCreateModal}
             onSave={this.createDashboard}

diff --git a/src/stores/customMonitorDashboard.js b/src/stores/customMonitorDashboard.js
@@ -27,10 +27,10 @@ import Base from 'stores/base'
 export default class CustomMonitoringDashboardStore extends Base {
   module = 'dashboards'
 
-  getListUrl = ({ namespace }) =>
-    `${this.apiVersion}/namespaces/${namespace}/${this.module}`
+  getListUrl = ({ cluster, namespace }) =>
+    `${this.apiVersion}${this.getPath({ cluster, namespace })}/${this.module}`
 
-  create({ namespace, name, ...spec }) {
+  create({ cluster, namespace, name, ...spec }) {
     return super.create(
       {
         apiVersion: 'monitoring.kubesphere.io/v1alpha1',
@@ -41,13 +41,13 @@ export default class CustomMonitoringDashboardStore extends Base {
         },
         spec,
       },
-      { namespace }
+      { cluster, namespace }
     )
   }
 
-  edit({ namespace, name, resourceVersion, ...spec }) {
+  edit({ cluster, namespace, name, resourceVersion, ...spec }) {
     return this.update(
-      { namespace, name },
+      { cluster, namespace, name },
       {
         apiVersion: 'monitoring.kubesphere.io/v1alpha1',
         kind: 'Dashboard',

diff --git a/src/stores/monitoring/custom/monitor.js b/src/stores/monitoring/custom/monitor.js
@@ -125,7 +125,7 @@ export default class PanelMonitor {
 
   @action
   fetchMetrics = async ({ start, end }) => {
-    const { targets = [], namespace } = this.config
+    const { targets = [], cluster, namespace } = this.config
 
     this.timeRange = { start, end }
 
@@ -140,6 +140,7 @@ export default class PanelMonitor {
         targets.map(async target => {
           const { expr, step } = target
           const data = await this.fetchMetric({
+            cluster,
             namespace,
             expr,
             step,
@@ -193,13 +194,16 @@ export default class PanelMonitor {
     })
   }
 
-  fetchMetric = async ({ expr, step, start, end, namespace }) => {
+  fetchMetric = async ({ expr, step, start, end, cluster, namespace }) => {
     if (!expr) {
       return []
     }
+
     const response =
       (await request.get(
-        `${this.apiVersion}/namespaces/${namespace}/targets/query`,
+        `${this.apiVersion}${
+          cluster ? `/klusters/${cluster}` : ''
+        }/namespaces/${namespace}/targets/query`,
         {
           expr,
           step,

diff --git a/src/stores/monitoring/custom/template.js b/src/stores/monitoring/custom/template.js
@@ -96,6 +96,7 @@ export default class CustomMonitoringTemplate {
 
   constructor({
     title = '',
+    cluster = '',
     namespace = '' /** require */,
     datasource = DATASOURCE /** now ks only support prometheus */,
     description = '',
@@ -107,6 +108,7 @@ export default class CustomMonitoringTemplate {
     name = '',
   }) {
     this.title = title
+    this.cluster = cluster
     this.namespace = namespace
     this.datasource = datasource
     this.description = description
@@ -181,7 +183,12 @@ export default class CustomMonitoringTemplate {
 
   generateTextMonitors(panels) {
     const monitors = panels.map(
-      panel => new SinglestateMonitor({ ...panel, namespace: this.namespace })
+      panel =>
+        new SinglestateMonitor({
+          ...panel,
+          namespace: this.namespace,
+          cluster: this.cluster,
+        })
     )
     return new MonitorRow({ monitors })
   }
@@ -201,7 +208,11 @@ export default class CustomMonitoringTemplate {
         }
 
         const Constructor = MONITOR_MAP[panel.type] || Monitor
-        const monitor = new Constructor({ ...panel, namespace: this.namespace })
+        const monitor = new Constructor({
+          ...panel,
+          namespace: this.namespace,
+          cluster: this.cluster,
+        })
         const lastRow = rows.pop()
         lastRow.push(monitor)
         return [...rows, lastRow]
@@ -235,6 +246,7 @@ export default class CustomMonitoringTemplate {
       type: 'singlestat',
       decimals: 0,
       namespace: this.namespace,
+      cluster: this.cluster,
       valueName: 'last',
       targets: [
         {
@@ -255,6 +267,7 @@ export default class CustomMonitoringTemplate {
       bars,
       description: '',
       namespace: this.namespace,
+      cluster: this.cluster,
       stack: false,
       targets: [
         {
@@ -284,6 +297,7 @@ export default class CustomMonitoringTemplate {
       type: 'graph',
       decimals: 0,
       namespaces: this.namespace,
+      cluster: this.cluster,
       targets: [
         {
           expr: '',
@@ -314,9 +328,9 @@ export default class CustomMonitoringTemplate {
 
   async fetchMetadata() {
     const { data: targetsMetadata } = (await request.get(
-      `kapis/monitoring.kubesphere.io/v1alpha3/namespaces/${
-        this.namespace
-      }/targets/metadata`
+      `kapis/monitoring.kubesphere.io/v1alpha3${
+        this.cluster ? `/klusters/${this.cluster}` : ''
+      }/namespaces/${this.namespace}/targets/metadata`
     )) || { data: [] }
     this.targetsMetadata = targetsMetadata || []
   }
@@ -327,18 +341,19 @@ export default class CustomMonitoringTemplate {
     const unRowPanels = [
       ...unNameGraphRow.monitors,
       ...textMonitors.monitors,
-    ].map(monitor => omit(toJS(monitor.config), ['namespace']))
+    ].map(monitor => omit(toJS(monitor.config), ['cluster', 'namespace']))
 
     const inRowPanels = graphMonitorRows.reduce((panels, row) => {
       const monitorConfigs = row.monitors.map(monitor =>
-        omit(toJS(monitor.config), ['namespace'])
+        omit(toJS(monitor.config), ['cluster', 'namespace'])
       )
       return panels.concat(row.config, monitorConfigs)
     }, [])
 
     return {
       ...pick(this, [
         'title',
+        'cluster',
         'namespace',
         'datasource',
         'description',