Added script switch button to the query panel.

src/pxl_scripts.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2018- The Pixie Authors.
+ *
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const customQuery = require('./pxl_scripts/custom-query.json');
+const exampleQuery = require('pxl_scripts/example-query.json');
+const httpDataFiltered = require('pxl_scripts/http-data-filtered.json');
+const httpErrorsPerService = require('pxl_scripts/http-errors-per-service.json');
+
+interface Script {
+  name: string;
+  description: string;
+  script: string;
+}
+
+// Load predefined scripts
+const scriptsRaw: Script[] = [customQuery, exampleQuery, httpDataFiltered, httpErrorsPerService];
+
+// Make a map for easier access of scripts
+export const scripts = new Map(
+  scriptsRaw.map((script) => {
+    return [script.name, script];
+  })
+);
+
+// Construct options list which is injested by Select component in
+export const options = scriptsRaw.map((script: Script) => {
+  return {
+    label: script.name,
+    description: script.description,
+  };
+});

src/pxl_scripts/custom-query.json

@@ -0,0 +1,5 @@
+{
+    "name": "Custom Query",
+    "description": "Write your own pxl query.",
+    "script": ""
+}

src/pxl_scripts/example-query.json

@@ -0,0 +1,5 @@
+{
+    "name": "Example Query",
+    "description": "Example query from Pixie documentation.",
+    "script": "# Import Pixie's module for querying data.\nimport px\n# Load data from Pixie's \\`http_events\\` table into a Dataframe.\ndf = px.DataFrame(table='http_events', start_time=__time_from)\n# Add K8s metadata context.\ndf.service = df.ctx['service']\ndf.namespace = df.ctx['namespace']\n# Bin the 'time_' column using the interval provided by Grafana.\ndf.timestamp = px.bin(df.time_, __interval)\n# Group data by unique pairings of 'timestamp' and 'service'\n# and count the total number of requests per unique pairing.\nper_ns_df = df.groupby(['timestamp', 'service']).agg(\n throughput_total=('latency', px.count)\n )\n# Calculate throughput by dividing # of requests by the time interval.\nper_ns_df.request_throughput = per_ns_df.throughput_total / __interval\nper_ns_df.request_throughput = per_ns_df.request_throughput * 1e9\n# Rename 'timestamp' column to 'time_'. The Grafana plugin expects a 'time_'\n# column to display data in a Graph or Time series.\nper_ns_df.time_ = per_ns_df.timestamp\n# Output select columns of the DataFrame.\npx.display(per_ns_df['time_', 'service', 'request_throughput'])\n"
+}

src/pxl_scripts/http-data-filtered.json

@@ -0,0 +1,5 @@
+{
+    "name": "Raw HTTP Events (Long Format)",
+    "description": "Query for raw HTTP events. Shouldn't be used with time series.",
+    "script": "'''\nThis query outputs a table of HTTP events (request and response pairs).\nIt produces output identical to Pixie's \\`px/http_data_filtered\\` script in the Live UI.\n\nTo filter the HTTP events, uncomment lines 41-43. Alternatively, use Grafana's\ntable column filtering feature:\nhttps://grafana.com/docs/grafana/latest/visualizations/table/filter-table-columns/\n\nThis query is for use with Grafana's Pixie Datasource Plugin only,\nas it uses Grafana macros for adding Grafana dashboard context.\n'''\n\n# Import Pixie's module for querying data.\nimport px\n\n# Import HTTP events table.\ndf = px.DataFrame(table='http_events', start_time=__time_from)\n\n# Add columns for service, pod info.\ndf.svc = df.ctx['service']\ndf.pod = df.ctx['pod']\ndf = df.drop('upid')\n\n# EXAMPLE OPTIONAL FILTERS\n#df = df[px.contains(df.svc, 'catalogue')]\n#df = df[px.contains(df.pod, 'catalogue')]\n#df = df[df.req_path == '/healthz']\n\n# Avoid conversion to wide format\ndf.timestamp = df.time_\ndf = df.drop(columns=['time_'])\n\n# Keep only the selected columns (and order them in the following order)\ndf = df[['timestamp', 'remote_addr', 'remote_port', 'req_method', 'req_path', 'resp_status', 'resp_body', 'latency', 'svc', 'pod']]\n\n# Output the DataFrame\npx.display(df)\n" 
+}

src/pxl_scripts/http-errors-per-service.json

@@ -0,0 +1,5 @@
+{
+    "name": "HTTP Error Rate by Service (Wide Format)",
+    "description": "",
+    "script": "'''\nThis query outputs a table of HTTP error and total request count per service.\n\nThis query is for use with Grafana's Pixie Datasource Plugin only,\nas it uses Grafana macros for adding Grafana dashboard context.\n'''\n\n# Import Pixie's module for querying data.\nimport px\n\n# Import HTTP events table.\ndf = px.DataFrame(table='http_events', start_time=__time_from)\n\n# Add columns for service, namespace info.\ndf.namespace = df.ctx['namespace']\ndf.service = df.ctx['service']\n\n# Filter out requests that don't have a service defined.\ndf = df[df.service != '']\n\n# Filter out requests from the Pixie (pl) namespace.\ndf = df[df.namespace != 'pl']\n\n# Add column for HTTP response status errors.\ndf.error = df.resp_status >= 400\n\n# Group HTTP events by service, counting errors and total HTTP events.\ndf = df.groupby(['service']).agg(\n error_count=('error', px.sum),\n total_requests=('resp_status', px.count)\n)\n\n# Output the DataFrame.\npx.display(df)\n"
+}

src/query_editor.tsx

@@ -19,9 +19,10 @@
 import defaults from 'lodash/defaults';
 
 import React, { ChangeEvent, PureComponent } from 'react';
-import { TextArea } from '@grafana/ui';
-import { QueryEditorProps } from '@grafana/data';
+import { TextArea, Select } from '@grafana/ui';
+import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { DataSource } from './datasource';
+import { options, scripts } from 'pxl_scripts';
 import { defaultQuery, PixieDataSourceOptions, PixieDataQuery } from './types';
 
 type Props = QueryEditorProps<DataSource, PixieDataQuery, PixieDataSourceOptions>;
@@ -33,12 +34,26 @@ export class QueryEditor extends PureComponent<Props> {
     onRunQuery();
   }
 
+  onSelect(option: SelectableValue<number>) {
+    if (option.label != null) {
+      // Load in predefined scripts to the script text box
+
+      const script = scripts.get(option.label);
+      if (script !== undefined) {
+        const { onChange, query, onRunQuery } = this.props;
+        onChange({ ...query, pxlScript: script.script });
+        onRunQuery();
+      }
+    }
+  }
+
   render() {
     const query = defaults(this.props.query, defaultQuery);
     const { pxlScript } = query;
 
     return (
       <div className="gf-form">
+        <Select options={options} onChange={this.onSelect.bind(this)} />
         <TextArea
           id="PxL Script"
           name="PxL Script"