Migrate dynamic scripted Grafana Dashboards to Scenes

docs/source/admin/traffic_stats.rst

@@ -91,35 +91,9 @@ To easily create databases, retention policies, and continuous queries, run :pro
 
 Configuring Grafana
 -------------------
-In Traffic Portal the :menuselection:`Other --> Grafana` menu item can be configured to display Grafana graphs using InfluxDB data (when not configured, this menu item will not appear). In order for this to work correctly, you will need two things:
-
-#. A :term:`Parameter` with the graph URL (more information below)
-#. The graphs created in Grafana. See below for how to create some simple graphs in Grafana. These instructions assume that InfluxDB has been configured and that data has been written to it. If this is not true, you will not see any graphs.
-
-To create a graph in Grafana, you can follow these basic steps:
-
-#. Login to Grafana as an administrative user
-#. Click on :menuselection:`Data Sources --> Add New`
-#. Enter the necessary information to configure your data source
-#. Click on :menuselection:`Home --> New` at the bottom
-#. Click on :menuselection:`"Collapsed Menu Icon" Button --> Add Panel --> Graph`
-#. Where it says :guilabel:`No Title (click here)` click and choose edit
-#. Choose your data source at the bottom
-#. You can have Grafana help you create a query, or you can create your own.
-
-	.. code-block:: postgresql
-		:caption: Sample Query
-
-		SELECT sum(value)*1000 FROM "monthly"."bandwidth.cdn.1min" GROUP BY time(60s), cdn;
-
-#. Once you have the graph the way you want it, click the :guilabel:`Save Dashboard` button at the top
-#. You should now have a new saved graph
-
-In order for Traffic Portal users to see Grafana graphs, Grafana will need to allow anonymous access. Information on how to configure anonymous access can be found on the configuration page of the `Grafana Website  <http://docs.grafana.org/installation/configuration/#authanonymous>`_.
-
-Traffic Portal uses custom dashboards to display information about individual :term:`Delivery Services` or :term:`Cache Groups`. In order for the custom graphs to display correctly, the Javascript files in :atc-file:`traffic_stats/grafana/`  need to be in the :file:`/usr/share/grafana/public/dashboards/` directory on the Grafana server. If your Grafana server is the same as your Traffic Stats server the RPM install process will take care of putting the files in place. If your Grafana server is different from your Traffic Stats server, you will need to manually copy the files to the correct directory.
-
-.. seealso:: More information on custom scripted graphs can be found in the `scripted dashboards <http://docs.grafana.org/reference/scripting/>`_ section of the Grafana documentation.
+- Traffic Control using Scenes for building dynamic Grafana dashboards, the Scenes app is built under: :file:`/var/lib/grafana/plugins/trafficcontrol-scenes-app`
+- To see Traffic Control dashboards, go to: :file:`https://grafanaHost/a/trafficcontrol-scenes-app`
+.. seealso:: More information on Grafana Scenes can be found in `Grafana Scenes introduction <https://grafana.com/blog/2023/08/03/new-in-grafana-10-grafana-scenes-for-building-dynamic-dashboarding-experiences/>`_
 
 Configuring Traffic Portal for Traffic Stats
 --------------------------------------------

infrastructure/cdn-in-a-box/optional/grafana/Dockerfile

@@ -15,7 +15,21 @@
 # specific language governing permissions and limitations
 # under the License.
 
-FROM grafana/grafana:10.1.5-ubuntu
+FROM node:16-alpine as plugin-build-stage
+
+WORKDIR /app
+
+COPY optional/grafana/trafficcontrol-scenes/package*.json ./
+
+RUN npm install
+
+COPY optional/grafana/trafficcontrol-scenes/ ./
+
+# COPY ../../misc/logos/ATC-PNG.png ./img/logo-atc.svg
+
+RUN npm run build
+
+FROM grafana/grafana:10.2.3-ubuntu
 
 USER root
 ARG TRAFFIC_TS_RPM=traffic_stats/traffic_stats.rpm
@@ -28,19 +42,21 @@ ADD enroller/server_template.json \
     traffic_ops/to-access.sh \
     optional/grafana/run-grafana.sh \
     optional/grafana/datasources.yml.template \
+    optional/grafana/app.yaml.template \
     $TRAFFIC_TS_RPM \
     /
 
 RUN cd ~ \
     && 7z x /traffic_stats.rpm \
     && 7z e traffic_stats-*.cpio *.js -r \
-    && mv *.js /usr/share/grafana/public/dashboards \
     && rm /traffic_stats.rpm \
     && rm ~/traffic_stats-*.cpio
 
 COPY dns/set-dns.sh \
      dns/insert-self-into-dns.sh \
      /usr/local/sbin/
 
+COPY --from=plugin-build-stage /app/dist /var/lib/grafana/plugins/trafficcontrol-scenes-app
+
 ENTRYPOINT [ "/run-grafana.sh" ]
 EXPOSE 443

infrastructure/cdn-in-a-box/optional/grafana/app.yaml.template

@@ -0,0 +1,30 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+# Refer to "http://docs.grafana.org/administration/provisioning/#example-datasource-config-file"
+# for the variables usages
+
+apiVersion: 1
+
+apps:
+  - type: 'trafficcontrol-scenes-app'
+    org_id: 1
+    org_name: 'apache'
+    disabled: false
+    jsonData:
+      apiUrl: https://trafficcontrol.apache.org/
+      isApiKeySet: true

infrastructure/cdn-in-a-box/optional/grafana/datasources.yml.template

@@ -51,3 +51,14 @@ datasources:
   database: deliveryservice_stats
   basicAuth: false
   isDefault: false
+
+- name: telegraf
+  type: influxdb
+  access: proxy
+  orgId: 1
+  url: http://$INFLUXDB_HOST:$INFLUXDB_PORT
+  password: $INFLUXDB_ADMIN_PASSWORD
+  user: $INFLUXDB_ADMIN_USER
+  database: telegraf
+  basicAuth: false
+  isDefault: false

infrastructure/cdn-in-a-box/optional/grafana/run-grafana.sh

@@ -58,6 +58,8 @@ export GF_SERVER_PROTOCOL="https"
 export GF_SERVER_HTTP_PORT=$GRAFANA_PORT
 export GF_SERVER_CERT_FILE=$X509_INFRA_CERT_FILE
 export GF_SERVER_CERT_KEY=$X509_INFRA_KEY_FILE
+export GF_DEFAULT_APP_MODE="development"
 envsubst < "/datasources.yml.template" > "$GF_PATHS_PROVISIONING/datasources/datasources.yml"
+envsubst < "/app.yaml.template" > "$GF_PATHS_PROVISIONING/plugins/app.yaml"
 
 /run.sh

infrastructure/cdn-in-a-box/optional/grafana/trafficcontrol-scenes/.editorconfig

@@ -0,0 +1,34 @@
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = double
+
+[*.html]
+indent_size = 2
+
+[*.json]
+indent_size = 2
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false