Add JSONPath docs

Author: marcusolsson

website/docs/jsonpath.md

@@ -0,0 +1,49 @@
+---
+id: jsonpath
+title: JSONPath
+---
+
+[JSONPath](https://goessner.net/articles/JsonPath/) is a query language for JSON structures.
+
+For example, to query the titles of all the books in a store:
+
+```js
+$.store.book[*].title
+```
+
+- `$` selects the root element
+- `.` selects a child of the current element
+- `*` selects all elements within an object or array
+
+:::note JSONPath Plus
+The JSON API data source uses the [JSONPath Plus](https://www.npmjs.com/package/jsonpath-plus) package to evaluate JSONPath expressions. JSONPath Plus extends the original specification with additional features.
+
+For more information on the supported syntax, refer to the [project page](https://github.com/JSONPath-Plus/JSONPath).
+:::
+
+## Filters
+
+Filters let you query elements based on a logical expression.
+
+For example, to query the titles of the books that cost more than 10:
+
+```js
+$.store.book[?(@.price > 10)].title
+```
+
+- `?()` defines a filter expression
+- `@` selects the element that's currently being processed
+
+Filter expressions support a set of boolean and logical operations:
+
+- Boolean operations: `!`, `&&`, `||`
+- Comparison: `>`, `<`, `>=`, `<=`
+- Equality: `==`, `!=`
+
+```js
+$.store.book[?(@.price < 10)]            // Books that are cheaper than 10
+$.store.book[?(@.category == 'fiction')] // Books that have the fiction category
+$.store.book[?(@.isbn)]                  // Books that have a ISBN number
+
+$.store.book[?(@.price < 10 && @.category == 'fiction')] // Cheap fiction books
+```

website/docs/query-editor.md

@@ -13,7 +13,7 @@ The query editor for the JSON API data source consists of a number of tabs. Each
 
 The **Fields** tab is where you select the data to extract from the JSON document returned by the URL configured in the data source configuration.
 
-- **Field** must contain a valid JSONPath expression and can return one or more elements.
+- **Field** must contain a valid [JSONPath](./jsonpath.md) expression and can return one or more elements.
 - **Type** defines the JSON type of the elements returned by the **Field** expression. By default, Grafana uses the types in the JSON document. If **Type** is set to a different type than the original property type, Grafana tries to parse the value.
 
   This can be useful in cases where the API returns quoted numbers, e.g. `"price": "3.49"`.

website/sidebars.js

@@ -10,9 +10,16 @@ module.exports = {
       items: ['installation', 'configuration'],
     },
     {
-      type: 'category',
-      label: 'Basics',
-      items: ['query-editor', 'macros'],
+      type: 'doc',
+      id: 'query-editor',
+    },
+    {
+      type: 'doc',
+      id: 'macros',
+    },
+    {
+      type: 'doc',
+      id: 'jsonpath',
     },
   ],
 };