diff --git a/grafana-dashboards/common.libsonnet b/grafana-dashboards/common.libsonnet
new file mode 100644
index 0000000000..6fe4a4dd2d
--- /dev/null
+++ b/grafana-dashboards/common.libsonnet
@@ -0,0 +1,37 @@
+local grafonnet = import 'grafonnet/main.libsonnet';
+local var = grafonnet.dashboard.variable;
+
+{
+  // grafonnet ref: https://grafana.github.io/grafonnet/API/dashboard/variable.html
+  variables: {
+    infinity_datasource:
+      var.datasource.new('infinity_datasource', 'yesoreyeram-infinity-datasource')
+      + var.datasource.generalOptions.showOnDashboard.withNothing()
+    ,
+    hub:
+      var.query.new(
+        'hub',
+        {
+          query: "",
+          queryType: "infinity",
+          infinityQuery: {
+            format: "table",
+            parser: "backend",
+            refId: "variable",
+            source: "url",
+            type: "json",
+            url: "http://aws-ce-grafana-backend.support.svc.cluster.local/hub-names?from=${__from:date}&to=${__to:date}",
+            url_options: {
+              data: "",
+              method: "GET"
+            }
+          },
+        }
+      )
+      + var.query.withDatasourceFromVariable(self.infinity_datasource)
+      + var.query.selectionOptions.withIncludeAll(value=true)
+      + var.query.generalOptions.showOnDashboard.withNothing()
+      + var.query.refresh.onTime()
+    ,
+  },
+}
diff --git a/grafana-dashboards/cost-attribution.jsonnet b/grafana-dashboards/cost-attribution.jsonnet
index 09d36e780e..51943c975f 100644
--- a/grafana-dashboards/cost-attribution.jsonnet
+++ b/grafana-dashboards/cost-attribution.jsonnet
@@ -1,9 +1,12 @@
 #!/usr/bin/env -S jsonnet -J ../vendor
-local grafonnet = import 'github.com/grafana/grafonnet/gen/grafonnet-v10.4.0/main.libsonnet';
+local grafonnet = import 'grafonnet/main.libsonnet';
 local dashboard = grafonnet.dashboard;
 local ts = grafonnet.panel.timeSeries;
 local var = grafonnet.dashboard.variable;
 
+local common = import './common.libsonnet';
+
+
 local totalDailyCosts =
   ts.new('Total daily costs')
   + ts.panelOptions.withDescription(
@@ -30,17 +33,28 @@ local totalDailyCosts =
   + ts.standardOptions.withUnit('currencyUSD')
   + ts.queryOptions.withTargets([
     {
-      datasource: { type: 'yesoreyeram-infinity-datasource', uid: 'fdsrfvebctptsf' },
+      datasource: {
+        type: 'yesoreyeram-infinity-datasource',
+        uid: '${infinity_datasource}',
+      },
       url: "http://aws-ce-grafana-backend.support.svc.cluster.local/total-costs?from=${__from:date}&to=${__to:date}",
       format: "table",
       refId: "A",
       columns: [
         {selector: "cost", text: "Cost", type: "number", unit: "currencyUSD"},
         {selector: "date", text: "Date", type: "timestamp"}
-      ]
+      ],
+      parser: "backend",
+      type: "json",
+      source: "url",
+      url_options: {
+        "method": "GET",
+        "data": "",
+      },
     }
   ]);
 
+
 local totalDailyCostsPerHub =
   ts.new('Total daily costs per hub')
   + ts.panelOptions.withDescription(
@@ -75,7 +89,10 @@ local totalDailyCostsPerHub =
   + ts.standardOptions.withUnit('currencyUSD')
   + ts.queryOptions.withTargets([
     {
-      datasource: { type: 'yesoreyeram-infinity-datasource', uid: 'fdsrfvebctptsf' },
+      datasource: {
+        type: 'yesoreyeram-infinity-datasource',
+        uid: '${infinity_datasource}',
+      },
       url: "http://aws-ce-grafana-backend.support.svc.cluster.local/total-costs-per-hub?from=${__from:date}&to=${__to:date}",
       format: "timeseries",
       refId: "A",
@@ -84,20 +101,16 @@ local totalDailyCostsPerHub =
         {selector: "name", text: "Name", type: "string"},
         {selector: "cost", text: "Cost", type: "number"}
       ],
+      parser: "backend",
+      type: "json",
+      source: "url",
+      url_options: {
+        "method": "GET",
+        "data": "",
+      },
     }
   ]);
 
-local hubQueryVar =
-  var.query.new('hub')
-  + var.query.queryTypes.withLabelValues(
-    'Hub',
-  )
-  + var.query.withDatasource(
-      type= 'yesoreyeram-infinity-datasource', uid='fdsrfvebctptsf'
-    
-  )
-  + var.query.selectionOptions.withIncludeAll();
-
 
 local totalDailyCostsPerComponent =
   ts.new('Total daily costs per component')
@@ -133,7 +146,10 @@ local totalDailyCostsPerComponent =
   + ts.standardOptions.withUnit('currencyUSD')
   + ts.queryOptions.withTargets([
     {
-      datasource: { type: 'yesoreyeram-infinity-datasource', uid: 'fdsrfvebctptsf' },
+      datasource: {
+        type: 'yesoreyeram-infinity-datasource',
+        uid: '${infinity_datasource}',
+      },
       url: "http://aws-ce-grafana-backend.support.svc.cluster.local/total-costs-per-component?from=${__from:date}&to=${__to:date}",
       format: "timeseries",
       refId: "A",
@@ -142,17 +158,26 @@ local totalDailyCostsPerComponent =
         {selector: "name", text: "Name", type: "string"},
         {selector: "cost", text: "Cost", type: "number"}
       ],
+      parser: "backend",
+      type: "json",
+      source: "url",
+      url_options: {
+        "method": "GET",
+        "data": "",
+      },
     }
   ]);
 
 
-local totalDailyCostsPerComponentandHub =
+local totalDailyCostsPerComponentAndHub =
   ts.new('Total daily costs per component, for ${hub}')
   + ts.panelOptions.withDescription(
     |||
       Total daily costs per component, for ${hub}
     |||
   )
+  + ts.panelOptions.withRepeat('hub')
+  + ts.panelOptions.withMaxPerRow(2)
   + ts.options.withTooltip({ mode: 'single', sort: "none" })
   + ts.options.withLegend({
     "calcs": [
@@ -180,7 +205,10 @@ local totalDailyCostsPerComponentandHub =
   + ts.standardOptions.withUnit('currencyUSD')
   + ts.queryOptions.withTargets([
     {
-      datasource: { type: 'yesoreyeram-infinity-datasource', uid: 'fdsrfvebctptsf' },
+      datasource: {
+        type: 'yesoreyeram-infinity-datasource',
+        uid: '${infinity_datasource}',
+      },
       url: "http://aws-ce-grafana-backend.support.svc.cluster.local/total-costs-per-component?from=${__from:date}&to=${__to:date}&hub=${hub}",
       format: "timeseries",
       refId: "A",
@@ -189,22 +217,32 @@ local totalDailyCostsPerComponentandHub =
         {selector: "name", text: "Name", type: "string"},
         {selector: "cost", text: "Cost", type: "number"}
       ],
+      parser: "backend",
+      type: "json",
+      source: "url",
+      url_options: {
+        "method": "GET",
+        "data": "",
+      },
     }
   ]);
 
 
 dashboard.new('Cloud cost attribution')
-+ dashboard.withUid('edw06h7udjwg0b')
++ dashboard.withUid('cloud-cost-attribution')
 + dashboard.withEditable(true)
 + dashboard.time.withFrom('now-30d')
-+ dashboard.withVariables(hubQueryVar)
++ dashboard.withVariables([
+    common.variables.hub,
+    common.variables.infinity_datasource,
+  ])
 + dashboard.withPanels(
   grafonnet.util.grid.makeGrid(
     [
       totalDailyCosts,
       totalDailyCostsPerHub,
       totalDailyCostsPerComponent,
-      totalDailyCostsPerComponentandHub
+      totalDailyCostsPerComponentAndHub
     ],
     panelWidth=24,
     panelHeight=12,