Source code adapted to typescript convention

Author: Mario Mann

coverage/junit.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<testsuites name="jest tests" tests="1" failures="0" time="2.58">
-  <testsuite name="placeholder test" errors="0" failures="0" skipped="0" timestamp="2021-01-08T10:02:59" time="1.625" tests="1">
-    <testcase classname="placeholder test should return true" name="placeholder test should return true" time="0.003">
+<testsuites name="jest tests" tests="1" failures="0" time="2.039">
+  <testsuite name="placeholder test" errors="0" failures="0" skipped="0" timestamp="2021-01-12T08:03:35" time="0.786" tests="1">
+    <testcase classname="placeholder test should return true" name="placeholder test should return true" time="0.002">
     </testcase>
   </testsuite>
 </testsuites>

dist/README.md

@@ -1,41 +1,173 @@
-# Grafana Panel Plugin Template
+## Novatec Service Dependency Graph Panel
 
-<!-- 
-[![CircleCI](https://circleci.com/gh/grafana/simple-react-panel.svg?style=svg)](https://circleci.com/gh/grafana/simple-react-panel)
-[![David Dependency Status](https://david-dm.org/grafana/simple-react-panel.svg)](https://david-dm.org/grafana/simple-react-panel)
-[![David Dev Dependency Status](https://david-dm.org/grafana/simple-react-panel/dev-status.svg)](https://david-dm.org/grafana/simple-react-panel/?type=dev)
-[![Known Vulnerabilities](https://snyk.io/test/github/grafana/simple-react-panel/badge.svg)](https://snyk.io/test/github/grafana/simple-react-panel)
-[![Maintainability](https://api.codeclimate.com/v1/badges/1dee2585eb412f913cbb/maintainability)](https://codeclimate.com/github/grafana/simple-react-panel/maintainability)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/1dee2585eb412f913cbb/test_coverage)](https://codeclimate.com/github/grafana/simple-react-panel/test_coverage) -->
+[![Downloads](https://img.shields.io/badge/dynamic/json?color=orange&label=downloads&query=%24.items%5B%3F%28%40.slug%20%3D%3D%20%22novatec-sdg-panel%22%29%5D.downloads&url=https%3A%2F%2Fgrafana.com%2Fapi%2Fplugins)](https://grafana.com/grafana/plugins/novatec-sdg-panel)
+[![License](https://img.shields.io/github/license/NovatecConsulting/novatec-service-dependency-graph-panel)](LICENSE)
 
-This template is a starting point for building Grafana Panel Plugins in Grafana 7.0+
 
+![Service Dependency Graph In Action](https://novatecconsulting.github.io/novatec-service-dependency-graph-panel/images/service-dependency-graph-panel.gif)
 
-## What is Grafana Panel Plugin?
-Panels are the building blocks of Grafana. They allow you to visualize data in different ways. While Grafana has several types of panels already built-in, you can also build your own panel, to add support for other visualizations.
+The Service Dependency Graph Panel by [Novatec](https://www.novatec-gmbh.de/en/) provides you with many features such as monitoring 
+your latencies, errors and requests of your desired service. This interactive panel for [Grafana](https://grafana.com/) will help you
+visualize the processes of your application much better. 
 
-For more information about panels, refer to the documentation on [Panels](https://grafana.com/docs/grafana/latest/features/panels/panels/)
+___
+### How to build
+
+Due to dependency issues please install, if needed with `yarn install`
+
+To build a production build with minification: `yarn build`
+
+Run the following for hot-reloading during development: `yarn watch`
+
+___
+
+## Configuration of the Data Source
+
+### Using Static Dummy Data
+
+If you want to get a first impression of this panel without having your own data source yet, the panels provides you some dummy data to play around with.
+
+The dummy data is basically a snapshot of multiple query results in the table format. You'll find its source [here](https://github.com/NovatecConsulting/novatec-service-dependency-graph-panel/blob/master/src/dummy_data_frame.ts), in the panel's GitHub repository.
+
+Depending on the query result, the data provides the following tags:
+* **service**: The service (application) the data is realted to.
+* **protocol**: The communication type (e.g. HTTP, JMS, ...).
+* **origin_service**: In case of an incoming communication, this is the origin service.
+* **target_service**: In case of an outgoing communication, this is the target service.
+* **origin_external**: The origin of an incoming communication, which cannot be correlated to a known serive (e.g. HTTP request of a third party application).
+* **target_external**: The target of an outgoing communication, which cannot be correlated to a known serive (e.g. third party HTTP endpoint).
+
+Depending on the query result, the data provides the following fields:
+* **in_timesum**: The total sum of all incoming request response times. (Prometheus style)
+* **in_count**: The total amount of incoming requests.
+* **error_in**: The amount of incoming requests which produced an error.
+* **out_timesum**: The total sum of all outgoing request response times. (Prometheus style)
+* **out_count**: The total amount of outgoing requests.
+* **error_out**: The amount of outgoing requests which produced an error.
+* **threshold**: The critical threshold in miliseconds for the response times of incoming requests.
+
+
+In order to use this data you simply have to follow the following steps:
+
+1. Add a `template variable` in Grafana called `aggregationType` having the constant value `service`.
+2. After selecting the Novatec Service Dependency Graph in your panels' settings check the box called `Show Dummy Data`.
+3. Adapt the panel's `Data Mapping` according to the dummy data. You can use the following settings. Note: at least you have to specify the `Request Rate` mapping!
+
+| key | value |
+| --- | --- |
+| Response Time | in_timesum |
+| Request Rate  | in_count |
+| Error Rate    | error_in |
+| Response Time (Outgoing) | out_timesum |
+| Request Rate (Outgoing) | out_count |
+| Error Rate (Outgoing) | error_out |
+| Response Time Baseline (Upper) | threshold |
+
+_Note that you may have to refresh the dashboard or reload the page in order for it to work._
+
+##### Live example dummy data
+
+Downloading and launching the [inspectIT Ocelot demo #1](https://inspectit.github.io/inspectit-ocelot/docs/getting-started/docker-examples) will provide you with live dummy data rather than static one. 
+Just open the docker images' Grafana and choose the dashboard `Service Graph` to see the fully functional Service Dependency Graph.
+___
+
+### Use your own Data Source
+
+If you now want to use your own data source you have make sure, that the data received is in the `TABLE` format and is structured as follows:
+
+* The table requires a column which is named equal to the value of the `aggregationType` template variable. This column defines the component to which the data refers.
+**Example**: Assuming the `aggregationType` template variable is set to `app`, the data table has to provide a column named `app`.
+* The table requires at least one column which specifies the connection's origin or target. This column has the following requirements for its naming:
+    * It requires a suffix which has to be equal to the `aggregationType` template variable.
+    * In case an incoming connection should be represented, a prefix is required which is equal to the `Source Component Column Prefix` panel option. By default it is `origin_`.
+    * In case an outcoming connection should be represented, a prefix is required which is equal to the `Target Component Column Prefix` panel option. By default it is `target_`.
+    
+    **Example**: Assuming the `aggregationType` template variable is set to `app`, the previously mentioned column prefix options are in its default state (`origin_` or `target_`) and we want to represent an outgoing connection. In this case, the data table has to provide a column named: `target_app`
+* The data table can contain multiple value columns. These columns have to be mapped on specifc attributes using the panel's `Data Mappings` options. 
+**Example**: Assuming the data table contains a column named `req_rate` which values represents a request rate for the related connection in the current time window. In order to correctly visualize these values as a request rate, the `Request Rate Column` option has to be set to `req_rate` - the column's name.
+
+#### Examples
+
+##### Example 1
+
+If the previously described requirements are respected, a minimal table can be as follows:
+
+| app | target_app | req_rate |
+| --- | --- | --- | 
+| service a | service b | 50 | 
+| service a | service c | 75 |
+| service c | service d | 25 |
+
+Assuming a `aggregationType` template variable is provided and set to `app` and the panel's settings are specified as seen in the screenshot, the panel will visualize the data as following:
+
+![Visualization of the minimal data table.](https://raw.githubusercontent.com/NovatecConsulting/novatec-service-dependency-graph-panel/master/src/img/data-example-1.png)
+
+> Note: It is important to know that connections can only be generated if at least one request-rate column (incoming or outgoing) is defined.
+
+The data mapping represents always the data from the point of view of the component which is specified by the column which name is equal to the `aggregationType` template variable. This means that if we want to represent an outgoing connection in this example, the `app` and `target_app` columns must be present. In case an incoming connection should be represented, the `app` and `origin_app` columns must be present.
+
+##### Example 2
+
+In this example, we extend the data table of example 1 by another column, representing the total sum of all request response times of a specific connection (e.g. sum of all HTTP request response times).
+
+| app | target_app | req_rate | resp_time |
+| --- | --- | --- | --- | 
+| service a | service b | 50 | 4000 |
+| service a | service c | 75 | 13650 |
+| service c | service d | 25 | 750 |
+
+Now, the panel's `Data Mappings` option `Response Time Column` is set to `resp_time`. This specifies that the value in the `resp_time` column should be handled as the response time for a connection. By default, the values in this column will be handled as a sum of all response times - kind of a Prometheus style metric. This behavior can be changed by using the `Handle Timings as Sums` option. This table will result in the following visualization.
+
+![Visualization of a data table including request rate and response times.](https://raw.githubusercontent.com/NovatecConsulting/novatec-service-dependency-graph-panel/master/src/img/data-example-2.png)
+
+___
+
+### Service Icons
+
+The service dependency graph plugin allows you to display your own symbols in the drawn nodes.
+For this purpose the option 'Service Icon Mapping' can be used.
+Here you can specify an assignment of icons to certain name patterns.
+All nodes that match the specified pattern (regular expression) will get the icon.
+
+![Custom service icons in the graph.](https://raw.githubusercontent.com/NovatecConsulting/novatec-service-dependency-graph-panel/master/src/img/service-icons.png)
+
+##### Example
+
+A sample assignment is included by default: `Pattern: java // Icon: java`.
+This means that all nodes which have `java` in their name get the `java` icon.
+
+#### Custom Service Icons
+
+You can add custom icons, by putting them into the plugin's `/assets/service_icons/` directory.
+The file type **has to be `PNG`** and the icon itself and **has to be square**.
+In order to be able to use the icon, its name (without its ending) has to be put into the array contained in the `icon_index.json` file located in the `/assets/service_icons/` directory.
+
+##### Example
+
+If the `icon_index.json` has the following content:
 
-## Getting started
-1. Install dependencies
-```BASH
-yarn install
-```
-2. Build plugin in development mode or run in watch mode
-```BASH
-yarn dev
-```
-or
-```BASH
-yarn watch
 ```
-3. Build plugin in production mode
-```BASH
-yarn build
+["java", "star_trek"]
 ```
 
-## Learn more
-- [Build a panel plugin tutorial](https://grafana.com/tutorials/build-a-panel-plugin)
-- [Grafana documentation](https://grafana.com/docs/)
-- [Grafana Tutorials](https://grafana.com/tutorials/) - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
-- [Grafana UI Library](https://developers.grafana.com/ui) - UI components to help you build interfaces using Grafana Design System
+it is assumed that the files `java.png` and `star_trek.png` is existing in the `/assets/service_icons/` directory.
+___
+
+### Tracing Drilldown
+
+The service dependency graph plugin allows you to specify a backend URL for each drawn node.
+For this purpose the option 'Tracing Drilldown' can be used.
+Here you can specify a backend URL. An open and closed curly bracket `{}` is the placeholder for the selected node.
+Each node will get an arrow icon in the details view. This icon is a link to your backend, specified in the options.
+The curly brackets `{}` will be replaced with the selected node.
+
+#### Example
+
+`http://{}/my/awesome/path` will end up to `http://customers-service/my/awesome/path` when you select the `customers-service`.
+
+___
+
+### Found a bug? Have a question? Wanting to contribute?
+
+Feel free to open up an issue. We will take care of you and provide as much help as needed. Any suggestions/contributions are being very much appreciated.
+

dist/module.js

@@ -1,3 +1,9 @@
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
 /*!
 Embeddable Minimum Strictly-Compliant Promises/A+ 1.1.1 Thenable
 Copyright (c) 2013-2014 Ralf S. Engelschall (http://engelschall.com)

dist/module.js.LICENSE.txt

@@ -56,6 +56,7 @@
     "react-native": "^0.63.3",
     "style-loader": "^2.0.0",
     "typescript": "^4.0.5",
-    "webpack": "^5.9.0"
+    "webpack": "^5.9.0",
+    "react-bootstrap-table-next": "^4.0.3"
   }
 }

dist/module.js.map

@@ -1,69 +1,69 @@
-import { PanelSettings} from '../types';
+import { PanelSettings } from '../types';
 
-export const DefaultSettings: PanelSettings =  {
-    animate: true,
+export const DefaultSettings: PanelSettings = {
+  animate: true,
 
-    dataMapping: {
-        sourceComponentPrefix: 'origin_',
-        targetComponentPrefix: 'target_',
-    
-        responseTimeColumn: 'response-time',
-        requestRateColumn: 'request-rate',
-        errorRateColumn: 'error-rate',
-        responseTimeOutgoingColumn: 'response-time-out',
-        requestRateOutgoingColumn: 'request-rate-out',
-        errorRateOutgoingColumn: 'error-rate-out',
-    
-        extOrigin: 'external_origin',
-        extTarget: 'external_target',
-        type: 'type',
-    
-        baselineRtUpper: 'threshold',
-    
-        showDummyData: false,
-    },
+  dataMapping: {
+    sourceComponentPrefix: 'origin_',
+    targetComponentPrefix: 'target_',
 
-    sumTimings: {value: true},
-    filterEmptyConnections: {value: true},
-    showDebugInformation: {value: false},
-    showConnectionStats: {value: true},
-    showBaselines: {value: false},
+    responseTimeColumn: 'response-time',
+    requestRateColumn: 'request-rate',
+    errorRateColumn: 'error-rate',
+    responseTimeOutgoingColumn: 'response-time-out',
+    requestRateOutgoingColumn: 'request-rate-out',
+    errorRateOutgoingColumn: 'error-rate-out',
 
-    style: {
-        healthyColor: 'rgb(87, 148, 242)',
-        dangerColor:  'rgb(196, 22, 42)',
-        unknownColor: 'rgb(123, 123, 138)',
-    },
+    extOrigin: 'external_origin',
+    extTarget: 'external_target',
+    type: 'type',
+
+    baselineRtUpper: 'threshold',
+
+    showDummyData: false,
+  },
+
+  sumTimings: { value: true },
+  filterEmptyConnections: { value: true },
+  showDebugInformation: { value: false },
+  showConnectionStats: { value: true },
+  showBaselines: { value: false },
+
+  style: {
+    healthyColor: 'rgb(87, 148, 242)',
+    dangerColor: 'rgb(196, 22, 42)',
+    unknownColor: 'rgb(123, 123, 138)',
+  },
 
-    serviceIcons: [
-        {
-            pattern: 'java',
-            filename: 'java'
-        },
-        {
-            pattern: 'spok|star trek',
-            filename: 'star_trek'
-        },
-    ],
+  serviceIcons: [
+    {
+      pattern: 'java',
+      filename: 'java',
+    },
+    {
+      pattern: 'spok|star trek',
+      filename: 'star_trek',
+    },
+  ],
 
-    externalIcons: [
-        {
-            pattern: 'web',
-            filename: 'web'
-        },
-        {
-            pattern: 'jms',
-            filename: 'message'
-        },
-        {
-            pattern: 'jdbc',
-            filename: 'database'
-        },
-        {
-            pattern: 'http',
-            filename: 'http'
-        }
-    ],
+  externalIcons: [
+    {
+      pattern: 'web',
+      filename: 'web',
+    },
+    {
+      pattern: 'jms',
+      filename: 'message',
+    },
+    {
+      pattern: 'jdbc',
+      filename: 'database',
+    },
+    {
+      pattern: 'http',
+      filename: 'http',
+    },
+  ],
 
-    drillDownLink: "",
-}
+  drillDownLink: '',
+};

package.json

@@ -24,7 +24,7 @@ export class TypeaheadTextField extends React.PureComponent<Props, State> {
     super(props);
 
     var value = props.value;
-    if(value === undefined) {
+    if (value === undefined) {
       value = props.item.defaultValue;
     }
     this.state = {

src/options/DefaultSettings.tsx

@@ -23,7 +23,7 @@ export class DummyDataSwitch extends React.PureComponent<Props, State> {
     super(props);
 
     var dataMapping = this.props.context.options.dataMapping;
-    if(dataMapping === undefined) {
+    if (dataMapping === undefined) {
       dataMapping = this.props.item.defaultValue;
     }
     this.state = {
@@ -64,9 +64,9 @@ export class DummyDataSwitch extends React.PureComponent<Props, State> {
   };
 
   render() {
-    if(this.props.context.options.dataMapping === undefined){
+    if (this.props.context.options.dataMapping === undefined) {
       this.props.context.options.dataMapping = this.props.item.defaultValue;
-  }
+    }
 
     return (
       <div>