diff --git a/.circleci/config.yml b/.circleci/config.yml index 90f736fc211a5..a783c8641a9f5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -96,7 +96,7 @@ jobs: destination: expected-screenshots - store_artifacts: path: public/e2e-test/screenShots/theOutput - destination: output-screenshots + destination: output-screenshots codespell: docker: @@ -653,7 +653,7 @@ workflows: - mysql-integration-test - postgres-integration-test - build-oss-msi - filters: *filter-only-master + filters: *filter-only-master - grafana-docker-master: requires: - build-all diff --git a/conf/defaults.ini b/conf/defaults.ini index e37fe54f148c1..2d7bfd7275060 100644 --- a/conf/defaults.ini +++ b/conf/defaults.ini @@ -287,6 +287,9 @@ signout_redirect_url = # This setting is ignored if multiple OAuth providers are configured. oauth_auto_login = false +# limit of api_key seconds to live before expiration +api_key_max_seconds_to_live = -1 + #################################### Anonymous Auth ###################### [auth.anonymous] # enable anonymous access diff --git a/devenv/docker/blocks/openldap/Dockerfile b/devenv/docker/blocks/openldap/Dockerfile index b0d23b9e0c91d..0200045e6071e 100644 --- a/devenv/docker/blocks/openldap/Dockerfile +++ b/devenv/docker/blocks/openldap/Dockerfile @@ -19,6 +19,8 @@ EXPOSE 389 VOLUME ["/etc/ldap", "/var/lib/ldap"] +COPY ldap.conf /etc/ldap.dist/ldap.conf + COPY modules/ /etc/ldap.dist/modules COPY prepopulate/ /etc/ldap.dist/prepopulate diff --git a/devenv/docker/blocks/openldap/docker-compose.yaml b/devenv/docker/blocks/openldap/docker-compose.yaml index d11858ccfb9d0..8874a6a96b8f5 100644 --- a/devenv/docker/blocks/openldap/docker-compose.yaml +++ b/devenv/docker/blocks/openldap/docker-compose.yaml @@ -1,4 +1,5 @@ openldap: + container_name: ldap build: docker/blocks/openldap environment: SLAPD_PASSWORD: grafana diff --git a/devenv/docker/blocks/openldap/entrypoint.sh b/devenv/docker/blocks/openldap/entrypoint.sh index d202ed14b31f9..dac56daf10d9a 100755 --- a/devenv/docker/blocks/openldap/entrypoint.sh +++ b/devenv/docker/blocks/openldap/entrypoint.sh @@ -49,10 +49,6 @@ EOF dc_string="$dc_string,dc=$dc_part" done - base_string="BASE ${dc_string:1}" - - sed -i "s/^#BASE.*/${base_string}/g" /etc/ldap/ldap.conf - if [[ -n "$SLAPD_CONFIG_PASSWORD" ]]; then password_hash=`slappasswd -s "${SLAPD_CONFIG_PASSWORD}"` diff --git a/devenv/docker/blocks/openldap/ldap.conf b/devenv/docker/blocks/openldap/ldap.conf new file mode 100644 index 0000000000000..6fab0c3182141 --- /dev/null +++ b/devenv/docker/blocks/openldap/ldap.conf @@ -0,0 +1,16 @@ +# +# LDAP Defaults +# + +# See ldap.conf(5) for details +# This file should be world readable but not world writable. + +BASE dc=grafana,dc=org +#URI ldap://ldap.example.com ldap://ldap-master.example.com:666 + +SIZELIMIT 1000 +#TIMELIMIT 15 +#DEREF never + +# TLS certificates (needed for GnuTLS) +TLS_CACERT /etc/ssl/certs/ca-certificates.crt diff --git a/devenv/docker/blocks/opentsdb/docker-compose.yaml b/devenv/docker/blocks/opentsdb/docker-compose.yaml index ee064bb107d85..d366c9b1b30cf 100644 --- a/devenv/docker/blocks/opentsdb/docker-compose.yaml +++ b/devenv/docker/blocks/opentsdb/docker-compose.yaml @@ -1,5 +1,5 @@ opentsdb: - image: opower/opentsdb:latest + image: petergrace/opentsdb-docker:latest ports: - "4242:4242" diff --git a/devenv/docker/blocks/saml/users.php b/devenv/docker/blocks/saml/users.php index 498d86f5734e1..8ffa693c3e740 100644 --- a/devenv/docker/blocks/saml/users.php +++ b/devenv/docker/blocks/saml/users.php @@ -3,7 +3,7 @@ 'admin' => array( 'core:AdminPassword', ), - 'grafana-userpass' => array( + 'example-userpass' => array( 'exampleauth:UserPass', 'saml-admin:grafana' => array( 'groups' => array('admins'), diff --git a/docs/sources/administration/provisioning.md b/docs/sources/administration/provisioning.md index df1c909dc0c74..1299b7577522a 100644 --- a/docs/sources/administration/provisioning.md +++ b/docs/sources/administration/provisioning.md @@ -149,6 +149,8 @@ Since not all datasources have the same configuration settings we only have the | esVersion | number | Elasticsearch | Elasticsearch version as a number (2/5/56/60/70) | | timeField | string | Elasticsearch | Which field that should be used as timestamp | | interval | string | Elasticsearch | Index date time format. nil(No Pattern), 'Hourly', 'Daily', 'Weekly', 'Monthly' or 'Yearly' | +| logMessageField | string | Elasticsearch | Which field should be used as the log message | +| logLevelField | string | Elasticsearch | Which field should be used to indicate the priority of the log message | | authType | string | Cloudwatch | Auth provider. keys/credentials/arn | | assumeRoleArn | string | Cloudwatch | ARN of Assume Role | | defaultRegion | string | Cloudwatch | AWS region | diff --git a/docs/sources/alerting/notifications.md b/docs/sources/alerting/notifications.md index b3a7e10b2a4fa..061587688708b 100644 --- a/docs/sources/alerting/notifications.md +++ b/docs/sources/alerting/notifications.md @@ -167,8 +167,8 @@ Notifications can be sent by setting up an incoming webhook in Google Hangouts c ### All supported notifiers -Name | Type | Supports images |Support alert rule tags ------|------------ | ------ +Name | Type | Supports images | Support alert rule tags +-----|------|---------------- | ----------------------- DingDing | `dingding` | yes, external only | no Discord | `discord` | yes | no Email | `email` | yes | no @@ -199,6 +199,8 @@ Notification services which need public image access are marked as 'external onl # Use alert rule tags in notifications {#alert-rule-tags} +> Only available in Grafana v6.3+. + Grafana can include a list of tags (key/value) in the notification. It's called alert rule tags to contrast with tags parsed from timeseries. It currently supports only the Prometheus Alertmanager notifier. diff --git a/docs/sources/auth/auth-proxy.md b/docs/sources/auth/auth-proxy.md index 2274771b91a4b..1608d0fb17d32 100644 --- a/docs/sources/auth/auth-proxy.md +++ b/docs/sources/auth/auth-proxy.md @@ -34,7 +34,7 @@ ldap_sync_ttl = 60 # Example `whitelist = 192.168.1.1, 192.168.1.0/24, 2001::23, 2001::0/120` whitelist = # Optionally define more headers to sync other user attributes -# Example `headers = Name:X-WEBAUTH-NAME Email:X-WEBAUTH-EMAIL` +# Example `headers = Name:X-WEBAUTH-NAME Email:X-WEBAUTH-EMAIL Groups:X-WEBAUTH-GROUPS` headers = ``` diff --git a/docs/sources/auth/overview.md b/docs/sources/auth/overview.md index fc22d6b2d7fb7..f00438e1c4ab1 100644 --- a/docs/sources/auth/overview.md +++ b/docs/sources/auth/overview.md @@ -63,6 +63,9 @@ login_maximum_lifetime_days = 30 # How often should auth tokens be rotated for authenticated users when being active. The default is each 10 minutes. token_rotation_interval_minutes = 10 + +# The maximum lifetime (seconds) an api key can be used. If it is set all the api keys should have limited lifetime that is lower than this value. +api_key_max_seconds_to_live = -1 ``` ### Anonymous authentication diff --git a/docs/sources/features/datasources/elasticsearch.md b/docs/sources/features/datasources/elasticsearch.md index 9d4d65e3699d8..8c07a187a5e8c 100644 --- a/docs/sources/features/datasources/elasticsearch.md +++ b/docs/sources/features/datasources/elasticsearch.md @@ -79,6 +79,18 @@ Identifier | Description `s` | second `ms` | millisecond +### Logs (BETA) + +> Only available in Grafana v6.3+. + +There are two parameters, `Message field name` and `Level field name`, that can optionally be configured from the data source settings page that determine +which fields will be used for log messages and log levels when visualizing logs in [Explore](/features/explore). + +For example, if you're using a default setup of Filebeat for shipping logs to Elasticsearch the following configuration should work: + +- **Message field name:** message +- **Level field name:** fields.level + ## Metric Query editor ![Elasticsearch Query Editor](/img/docs/elasticsearch/query_editor.png) @@ -162,6 +174,28 @@ Time | The name of the time field, needs to be date field. Text | Event description field. Tags | Optional field name to use for event tags (can be an array or a CSV string). +## Querying Logs (BETA) + +> Only available in Grafana v6.3+. + +Querying and displaying log data from Elasticsearch is available via [Explore](/features/explore). + +![](/img/docs/v63/elasticsearch_explore_logs.png) + +Select the Elasticsearch data source, change to Logs using the Metrics/Logs switcher, and then optionally enter a lucene query into the query field to filter the log messages. + +Finally, press the `Enter` key or the `Run Query` button to display your logs. + +### Log Queries + +Once the result is returned, the log panel shows a list of log rows and a bar chart where the x-axis shows the time and the y-axis shows the frequency/count. + +Note that the fields used for log message and level is based on an [optional datasource configuration](#logs-beta). + +### Filter Log Messages + +Optionally enter a lucene query into the query field to filter the log messages. For example, using a default Filebeat setup you should be able to use `fields.level:error` to only show error log messages. + ## Configure the Datasource with Provisioning It's now possible to configure datasources using config files with Grafana's provisioning system. You can read more about how it works and all the settings you can set for datasources on the [provisioning docs page](/administration/provisioning/#datasources) @@ -181,3 +215,22 @@ datasources: interval: Daily timeField: "@timestamp" ``` + +or, for logs: + +```yaml +apiVersion: 1 + +datasources: + - name: elasticsearch-v7-filebeat + type: elasticsearch + access: proxy + database: "[filebeat-]YYYY.MM.DD" + url: http://localhost:9200 + jsonData: + interval: Daily + timeField: "@timestamp" + esVersion: 70 + logMessageField: message + logLevelField: fields.level +``` diff --git a/docs/sources/features/datasources/influxdb.md b/docs/sources/features/datasources/influxdb.md index 3d905f75713e9..63ca063d3c229 100644 --- a/docs/sources/features/datasources/influxdb.md +++ b/docs/sources/features/datasources/influxdb.md @@ -117,6 +117,26 @@ You can switch to raw query mode by clicking hamburger icon and then `Switch edi You can remove the group by time by clicking on the `time` part and then the `x` icon. You can change the option `Format As` to `Table` if you want to show raw data in the `Table` panel. +## Querying Logs (BETA) + +> Only available in Grafana v6.3+. + +Querying and displaying log data from InfluxDB is available via [Explore](/features/explore). + +![](/img/docs/v63/influxdb_explore_logs.png) + +Select the InfluxDB data source, change to Logs using the Metrics/Logs switcher, +and then use the `Measurements/Fields` button to display your logs. + +### Log Queries + +The Logs Explorer (the `Measurements/Fields` button) next to the query field shows a list of measurements and fields. Choose the desired measurement that contains your log data and then choose which field Explore should use to display the log message. + +Once the result is returned, the log panel shows a list of log rows and a bar chart where the x-axis shows the time and the y-axis shows the frequency/count. + +### Filter search + +To add a filter click the plus icon to the right of the `Measurements/Fields` button or a condition. You can remove tag filters by clicking on the first select and choosing `--remove filter--`. ## Templating diff --git a/docs/sources/features/panels/graph.md b/docs/sources/features/panels/graph.md index 95a07da6cc2b1..97a9c7c9e0e1e 100644 --- a/docs/sources/features/panels/graph.md +++ b/docs/sources/features/panels/graph.md @@ -37,6 +37,8 @@ Repeat a panel for each value of a variable. Repeating panels are described in ### Data link +> Only available in Grafana v6.3+. + Data link in graph settings allows adding dynamic links to the visualization. Those links can link to either other dashboard or to an external URL. {{< docs-imagebox img="/img/docs/data_link.png" max-width= "800px" >}} diff --git a/docs/sources/http_api/auth.md b/docs/sources/http_api/auth.md index e87d3571322ce..fd5007f8af716 100644 --- a/docs/sources/http_api/auth.md +++ b/docs/sources/http_api/auth.md @@ -82,7 +82,8 @@ Content-Type: application/json { "id": 1, "name": "TestAdmin", - "role": "Admin" + "role": "Admin", + "expiration": "2019-06-26T10:52:03+03:00" } ] ``` @@ -101,7 +102,8 @@ Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk { "name": "mykey", - "role": "Admin" + "role": "Admin", + "secondsToLive": 86400 } ``` @@ -109,6 +111,12 @@ JSON Body schema: - **name** – The key name - **role** – Sets the access level/Grafana Role for the key. Can be one of the following values: `Viewer`, `Editor` or `Admin`. +- **secondsToLive** – Sets the key expiration in seconds. It is optional. If it is a positive number an expiration date for the key is set. If it is null, zero or is omitted completely (unless `api_key_max_seconds_to_live` configuration option is set) the key will never expire. + +Error statuses: + +- **400** – `api_key_max_seconds_to_live` is set but no `secondsToLive` is specified or `secondsToLive` is greater than this value. +- **500** – The key was unable to be stored in the database. **Example Response**: diff --git a/docs/sources/installation/configuration.md b/docs/sources/installation/configuration.md index 755b4615a5064..d3a87a979d53c 100644 --- a/docs/sources/installation/configuration.md +++ b/docs/sources/installation/configuration.md @@ -304,7 +304,7 @@ The number of days the keep me logged in / remember me cookie lasts. ### secret_key -Used for signing some datasource settings like secrets and passwords. Cannot be changed without requiring an update +Used for signing some datasource settings like secrets and passwords, the encryption format used is AES-256 in CFB mode. Cannot be changed without requiring an update to datasource settings to re-encode them. ### disable_gravatar diff --git a/docs/sources/installation/upgrading.md b/docs/sources/installation/upgrading.md index 22195cb9df503..027af100f7b94 100644 --- a/docs/sources/installation/upgrading.md +++ b/docs/sources/installation/upgrading.md @@ -154,7 +154,7 @@ The default cookie name for storing the auth token is `grafana_session`. you can ### Ensure encryption of datasource secrets -Datasources store passwords and basic auth passwords in secureJsonData encrypted by default. Existing datasource +Datasources store passwords and basic auth passwords in secureJsonData encrypted (AES-256 in CFB mode) by default. Existing datasource will keep working with unencrypted passwords. If you want to migrate to encrypted storage for your existing datasources you can do that by: @@ -175,3 +175,10 @@ this new setting. In 6.2 we completely removed the backend session storage since we replaced the previous login session implementation with an auth token. If you are using Auth proxy with LDAP an shared cached is used in Grafana so you might want configure [remote_cache] instead. If not Grafana will fallback to using the database as an shared cache. + +### Upgrading Elasticsearch to v7.0+ + +The semantics of `max concurrent shard requests` changed in Elasticsearch v7.0, see [release notes](https://www.elastic.co/guide/en/elasticsearch/reference/7.0/breaking-changes-7.0.html#semantics-changed-max-concurrent-shared-requests) for reference. + +If you upgrade Elasticsearch to v7.0+ you should make sure to update the datasource configuration in Grafana so that version +is `7.0+` and `max concurrent shard requests` properly configured. 256 was the default in pre v7.0 versions. In v7.0 and above 5 is the default. diff --git a/go.mod b/go.mod index 869d9fd70acf8..46dda5b945da6 100644 --- a/go.mod +++ b/go.mod @@ -11,6 +11,7 @@ require ( github.com/bradfitz/gomemcache v0.0.0-20180710155616-bc664df96737 github.com/codahale/hdrhistogram v0.0.0-20161010025455-3a0bb77429bd // indirect github.com/codegangsta/cli v1.20.0 + github.com/davecgh/go-spew v1.1.1 github.com/denisenkom/go-mssqldb v0.0.0-20190315220205-a8ed825ac853 github.com/facebookgo/ensure v0.0.0-20160127193407-b4ab57deab51 // indirect github.com/facebookgo/inject v0.0.0-20180706035515-f23751cae28b diff --git a/package.json b/package.json index 9d80b5d39a22c..ffe32b1400806 100644 --- a/package.json +++ b/package.json @@ -19,14 +19,11 @@ "@emotion/core": "10.0.10", "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1", "@types/angular": "1.6.54", - "@types/chalk": "2.2.0", "@types/classnames": "2.2.7", "@types/clipboard": "2.0.1", - "@types/commander": "2.12.2", "@types/d3": "4.13.1", "@types/enzyme": "3.9.0", "@types/expect-puppeteer": "3.3.1", - "@types/inquirer": "0.0.43", "@types/jest": "24.0.13", "@types/jquery": "1.10.35", "@types/lodash": "4.14.123", @@ -42,7 +39,6 @@ "@types/react-transition-group": "2.0.16", "@types/react-virtualized": "9.18.12", "@types/react-window": "1.7.0", - "@types/remarkable": "1.7.4", "angular-mocks": "1.6.6", "autoprefixer": "9.5.0", "axios": "0.19.0", @@ -50,16 +46,13 @@ "babel-jest": "24.8.0", "babel-loader": "8.0.5", "babel-plugin-angularjs-annotate": "0.10.0", - "chalk": "2.4.2", "clean-webpack-plugin": "2.0.0", - "concurrently": "4.1.0", "css-loader": "2.1.1", "enzyme": "3.9.0", "enzyme-adapter-react-16": "1.11.2", "enzyme-to-json": "3.3.5", "es6-promise": "3.3.1", "es6-shim": "0.35.5", - "execa": "1.0.0", "expect-puppeteer": "4.1.1", "expect.js": "0.2.0", "expose-loader": "0.7.5", @@ -84,7 +77,6 @@ "html-webpack-harddisk-plugin": "1.0.1", "html-webpack-plugin": "3.2.0", "husky": "1.3.1", - "inquirer": "6.2.2", "jest": "24.8.0", "jest-date-mock": "1.0.7", "lint-staged": "8.1.5", @@ -99,7 +91,6 @@ "node-sass": "4.11.0", "npm": "6.9.0", "optimize-css-assets-webpack-plugin": "5.0.1", - "ora": "3.2.0", "phantomjs-prebuilt": "2.1.16", "pixelmatch": "4.0.2", "pngjs": "3.4.0", @@ -116,8 +107,6 @@ "rimraf": "2.6.3", "sass-lint": "1.12.1", "sass-loader": "7.1.0", - "semver": "5.7.0", - "simple-git": "^1.112.0", "sinon": "1.17.6", "style-loader": "0.23.1", "systemjs": "0.20.19", @@ -141,9 +130,9 @@ }, "scripts": { "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js", - "start": "npm run cli -- core:start --watchTheme", - "start:hot": "npm run cli -- core:start --hot --watchTheme", - "start:ignoreTheme": "npm run cli -- core:start --hot", + "start": "grafana-toolkit core:start --watchTheme", + "start:hot": "grafana-toolkit core:start --hot --watchTheme", + "start:ignoreTheme": "grafana-toolkit core:start --hot", "watch": "yarn start -d watch,start core:start --watchTheme ", "build": "grunt build", "test": "grunt test", @@ -154,16 +143,15 @@ "api-tests": "jest --notify --watch --config=devenv/e2e-api-tests/jest.js", "storybook": "cd packages/grafana-ui && yarn storybook", "storybook:build": "cd packages/grafana-ui && yarn storybook:build", - "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts", "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\"", "prettier:write": "prettier --list-different \"**/*.{ts,tsx,scss}\" --write", - "cli": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts", "gui:tslint": "tslint -c ./packages/grafana-ui/tslint.json --project ./packages/grafana-ui/tsconfig.json", - "gui:build": "npm run cli -- gui:build", - "gui:releasePrepare": "npm run cli -- gui:release", + "gui:build": "grafana-toolkit gui:build", + "gui:releasePrepare": "grafana-toolkit gui:release", "gui:publish": "cd packages/grafana-ui/dist && npm publish --access public", - "gui:release": "npm run cli -- gui:release -p --createVersionCommit", - "precommit": "npm run cli -- precommit" + "gui:release": "grafana-toolkit gui:release -p --createVersionCommit", + "precommit": "grafana-toolkit precommit", + "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts" }, "husky": { "hooks": { @@ -192,10 +180,13 @@ "@types/angular-route": "1.7.0", "@types/d3-scale-chromatic": "1.3.1", "@types/enzyme-adapter-react-16": "1.0.5", + "@types/marked": "0.6.5", "@types/react-redux": "^7.0.8", + "@types/react-test-renderer": "16.8.2", "@types/redux-logger": "3.0.7", "@types/reselect": "2.2.0", "@types/slate": "0.44.11", + "@types/tinycolor2": "1.4.2", "angular": "1.6.6", "angular-bindonce": "0.3.1", "angular-native-dragdrop": "1.2.2", @@ -214,6 +205,7 @@ "immutable": "3.8.2", "jquery": "3.4.1", "lodash": "4.17.11", + "marked": "0.6.2", "moment": "2.24.0", "mousetrap": "1.6.3", "mousetrap-global-bind": "1.1.0", @@ -238,7 +230,6 @@ "redux-logger": "3.0.6", "redux-observable": "1.1.0", "redux-thunk": "2.3.0", - "remarkable": "1.7.1", "reselect": "4.0.0", "rst2html": "github:thoward/rst2html#990cb89", "rxjs": "6.4.0", diff --git a/packages/grafana-data/src/utils/index.ts b/packages/grafana-data/src/utils/index.ts index 57f9f48d8bdec..0174d82b35b0e 100644 --- a/packages/grafana-data/src/utils/index.ts +++ b/packages/grafana-data/src/utils/index.ts @@ -1 +1,2 @@ export * from './string'; +export * from './markdown'; diff --git a/packages/grafana-data/src/utils/markdown.ts b/packages/grafana-data/src/utils/markdown.ts new file mode 100644 index 0000000000000..8a0ce6c839f73 --- /dev/null +++ b/packages/grafana-data/src/utils/markdown.ts @@ -0,0 +1,20 @@ +import marked, { MarkedOptions } from 'marked'; + +const defaultMarkedOptions: MarkedOptions = { + renderer: new marked.Renderer(), + pedantic: false, + gfm: true, + tables: true, + sanitize: true, + smartLists: true, + smartypants: false, + xhtml: false, +}; + +export function setMarkdownOptions(optionsOverride?: MarkedOptions) { + marked.setOptions({ ...defaultMarkedOptions, ...optionsOverride }); +} + +export function renderMarkdown(str: string): string { + return marked(str); +} diff --git a/packages/grafana-toolkit/CHANGELOG.md b/packages/grafana-toolkit/CHANGELOG.md new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/packages/grafana-toolkit/README.md b/packages/grafana-toolkit/README.md new file mode 100644 index 0000000000000..5655afcb2ad47 --- /dev/null +++ b/packages/grafana-toolkit/README.md @@ -0,0 +1,52 @@ +# Grafana Toolkit + +Make sure to run `yarn install` before trying anything! Otherwise you may see unknown command grafana-toolkit and spend a while tracking that down. + +## Internal development +For development use `yarn link`. First, navigate to `packages/grafana-toolkit` and run `yarn link`. Then, in your project use `yarn link @grafana/toolkit` to use linked version. + +## Grafana extensions development with grafana-toolkit overview + +### Typescript +To configure Typescript create `tsconfig.json` file in the root dir of your app. grafana-toolkit comes with default tsconfig located in `packages/grafana-toolkit/src/config/tsconfig.plugin.ts`. In order for Typescript to be able to pickup your source files you need to extend that config as follows: + +```json +{ + "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json", + "include": ["src"], + "compilerOptions": { + "rootDir": "./src", + "typeRoots": ["./node_modules/@types"] + } +} +``` + +### TSLint +grafana-toolkit comes with default config for TSLint, that's located in `packages/grafana-toolkit/src/config/tslint.plugin.ts`. As for now there is now way to customise TSLint config. + +### Tests +grafana-toolkit comes with Jest as a test runner. It runs tests according to common config locted in `packages/grafana-toolkit/src/config/jest.plugin.config.ts`. + +For now the config is not extendable, but our goal is to enable custom jest config via jest.config or package.json file. This might be required in the future if you want to use i.e. `enzyme-to-json` snapshots serializer. For that particular serializer we can also utilise it's API and add initialisation in the setup files (https://github.com/adriantoine/enzyme-to-json#serializer-in-unit-tests). We need to test that approach first. + +#### Jest setup +We are not opinionated about tool used for implmenting tests. Internally at Grafana we use Enzyme. If you want to configure Enzyme as a testing utility, you need to configure enzyme-adapter-react. To do so, you need to create `[YOUR_APP]/config/jest-setup.ts` file that will provide React/Enzyme setup. Simply copy following code into that file to get Enzyme working with React: + +```ts +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); +``` + +grafana-toolkit will use that file as Jest's setup file. You can also setup Jest with shims of your needs by creating `jest-shim.ts` file in the same directory: `[YOUR_APP]/config/jest-shim.ts` + +Adidtionaly, you can also provide additional Jest config via package.json file. For more details please refer to [Jest docs](https://jest-bot.github.io/jest/docs/configuration.html#verbose-boolean). Currently we support following properties: +- [`snapshotSerializers`](https://jest-bot.github.io/jest/docs/configuration.html#snapshotserializers-array-string) + +## Prettier [todo] + +## Development mode [todo] +TODO +- Enable rollup watch on extension sources + diff --git a/packages/grafana-toolkit/bin/grafana-toolkit.dist.js b/packages/grafana-toolkit/bin/grafana-toolkit.dist.js new file mode 100755 index 0000000000000..d6498f3d3a49d --- /dev/null +++ b/packages/grafana-toolkit/bin/grafana-toolkit.dist.js @@ -0,0 +1,5 @@ +#!/usr/bin/env node + +// This bin is used for cli installed from npm + +require('../src/cli/index.js').run(); diff --git a/packages/grafana-toolkit/bin/grafana-toolkit.js b/packages/grafana-toolkit/bin/grafana-toolkit.js new file mode 100755 index 0000000000000..6cab0391954df --- /dev/null +++ b/packages/grafana-toolkit/bin/grafana-toolkit.js @@ -0,0 +1,13 @@ +#!/usr/bin/env node + +var path = require('path') ; + +// This bin is used for cli executed internally + +var tsProjectPath = path.resolve(__dirname, '../tsconfig.json'); + +require('ts-node').register({ + project: tsProjectPath +}); + +require('../src/cli/index.ts').run(true); diff --git a/packages/grafana-toolkit/package.json b/packages/grafana-toolkit/package.json new file mode 100644 index 0000000000000..e602f60dcf1ae --- /dev/null +++ b/packages/grafana-toolkit/package.json @@ -0,0 +1,71 @@ +{ + "name": "@grafana/toolkit", + "version": "6.3.0-alpha.2", + "description": "Grafana Toolkit", + "keywords": [ + "typescript", + "react", + "react-component" + ], + "bin": { + "grafana-toolkit": "./bin/grafana-toolkit.js" + }, + "scripts": { + "tslint": "tslint -c tslint.json --project tsconfig.json", + "typecheck": "tsc --noEmit", + "precommit": "npm run tslint & npm run typecheck", + "clean": "rimraf ./dist ./compiled" + }, + "author": "Grafana Labs", + "license": "Apache-2.0", + "dependencies": { + "@types/execa": "^0.9.0", + "@types/inquirer": "^6.0.3", + "@types/jest": "24.0.13", + "@types/jest-cli": "^23.6.0", + "@types/node": "^12.0.4", + "@types/prettier": "^1.16.4", + "@types/semver": "^6.0.0", + "axios": "0.19.0", + "chalk": "^2.4.2", + "commander": "^2.20.0", + "concurrently": "4.1.0", + "execa": "^1.0.0", + "glob": "^7.1.4", + "inquirer": "^6.3.1", + "jest-cli": "^24.8.0", + "lodash": "4.17.11", + "ora": "^3.4.0", + "prettier": "^1.17.1", + "replace-in-file": "^4.1.0", + "rollup": "^1.14.2", + "rollup-plugin-commonjs": "^10.0.0", + "rollup-plugin-copy-glob": "^0.3.0", + "rollup-plugin-json": "^4.0.0", + "rollup-plugin-node-builtins": "^2.1.2", + "rollup-plugin-node-globals": "^1.4.0", + "rollup-plugin-node-resolve": "^5.1.0", + "rollup-plugin-sourcemaps": "^0.4.2", + "rollup-plugin-terser": "^5.0.0", + "rollup-plugin-typescript2": "^0.21.1", + "rollup-plugin-visualizer": "^1.1.1", + "semver": "^6.1.1", + "simple-git": "^1.112.0", + "ts-node": "^8.2.0", + "tslint": "5.14.0" + }, + "peerDependencies": { + "jest": "24.8.0", + "ts-jest": "24.0.2", + "tslib": "1.10.0", + "typescript": "3.5.1" + }, + "resolutions": { + "@types/lodash": "4.14.119", + "rollup-plugin-typescript2": "0.21.1" + }, + "devDependencies": { + "@types/glob": "^7.1.1", + "rollup-watch": "^4.3.1" + } +} diff --git a/scripts/cli/index.d.ts b/packages/grafana-toolkit/src/cli/index.d.ts similarity index 100% rename from scripts/cli/index.d.ts rename to packages/grafana-toolkit/src/cli/index.d.ts diff --git a/packages/grafana-toolkit/src/cli/index.ts b/packages/grafana-toolkit/src/cli/index.ts new file mode 100644 index 0000000000000..c457983ef7aa4 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/index.ts @@ -0,0 +1,166 @@ +// @ts-ignore +import program from 'commander'; +import { execTask } from './utils/execTask'; +import chalk from 'chalk'; +import { startTask } from './tasks/core.start'; +import { buildTask } from './tasks/grafanaui.build'; +import { releaseTask } from './tasks/grafanaui.release'; +import { changelogTask } from './tasks/changelog'; +import { cherryPickTask } from './tasks/cherrypick'; +import { precommitTask } from './tasks/precommit'; +import { templateTask } from './tasks/template'; +import { pluginBuildTask } from './tasks/plugin.build'; +import { toolkitBuildTask } from './tasks/toolkit.build'; +import { pluginTestTask } from './tasks/plugin.tests'; +import { searchTestDataSetupTask } from './tasks/searchTestDataSetup'; +import { closeMilestoneTask } from './tasks/closeMilestone'; +import { pluginDevTask } from './tasks/plugin.dev'; + +export const run = (includeInternalScripts = false) => { + if (includeInternalScripts) { + program.option('-d, --depreciate ', 'Inform about npm script deprecation', v => v.split(',')); + program + .command('core:start') + .option('-h, --hot', 'Run front-end with HRM enabled') + .option('-t, --watchTheme', 'Watch for theme changes and regenerate variables.scss files') + .description('Starts Grafana front-end in development mode with watch enabled') + .action(async cmd => { + await execTask(startTask)({ + watchThemes: cmd.watchTheme, + hot: cmd.hot, + }); + }); + + program + .command('gui:build') + .description('Builds @grafana/ui package to packages/grafana-ui/dist') + .action(async cmd => { + // @ts-ignore + await execTask(buildTask)(); + }); + + program + .command('gui:release') + .description('Prepares @grafana/ui release (and publishes to npm on demand)') + .option('-p, --publish', 'Publish @grafana/ui to npm registry') + .option('-u, --usePackageJsonVersion', 'Use version specified in package.json') + .option('--createVersionCommit', 'Create and push version commit') + .action(async cmd => { + await execTask(releaseTask)({ + publishToNpm: !!cmd.publish, + usePackageJsonVersion: !!cmd.usePackageJsonVersion, + createVersionCommit: !!cmd.createVersionCommit, + }); + }); + + program + .command('changelog') + .option('-m, --milestone ', 'Specify milestone') + .description('Builds changelog markdown') + .action(async cmd => { + if (!cmd.milestone) { + console.log('Please specify milestone, example: -m '); + return; + } + + await execTask(changelogTask)({ + milestone: cmd.milestone, + }); + }); + + program + .command('cherrypick') + .description('Helps find commits to cherry pick') + .action(async cmd => { + await execTask(cherryPickTask)({}); + }); + + program + .command('precommit') + .description('Executes checks') + .action(async cmd => { + await execTask(precommitTask)({}); + }); + + program + .command('debug:template') + .description('Just testing') + .action(async cmd => { + await execTask(templateTask)({}); + }); + + program + .command('toolkit:build') + .description('Prepares grafana/toolkit dist package') + .action(async cmd => { + // @ts-ignore + await execTask(toolkitBuildTask)(); + }); + + program + .command('searchTestData') + .option('-c, --count ', 'Specify number of dashboards') + .description('Setup test data for search') + .action(async cmd => { + await execTask(searchTestDataSetupTask)({ count: cmd.count }); + }); + + program + .command('close-milestone') + .option('-m, --milestone ', 'Specify milestone') + .description('Helps ends a milestone by removing the cherry-pick label and closing it') + .action(async cmd => { + if (!cmd.milestone) { + console.log('Please specify milestone, example: -m '); + return; + } + + await execTask(closeMilestoneTask)({ + milestone: cmd.milestone, + }); + }); + } + + program + .command('plugin:build') + .description('Prepares plugin dist package') + .action(async cmd => { + await execTask(pluginBuildTask)({}); + }); + + program + .command('plugin:dev') + .description('Starts plugin dev mode') + .action(async cmd => { + await execTask(pluginDevTask)({ + watch: true, + }); + }); + + program + .command('plugin:test') + .option('-u, --updateSnapshot', 'Run snapshots update') + .option('--coverage', 'Run code coverage') + .description('Executes plugin tests') + .action(async cmd => { + await execTask(pluginTestTask)({ + updateSnapshot: !!cmd.updateSnapshot, + coverage: !!cmd.coverage, + }); + }); + + program.on('command:*', () => { + console.error('Invalid command: %s\nSee --help for a list of available commands.', program.args.join(' ')); + process.exit(1); + }); + + program.parse(process.argv); + + if (program.depreciate && program.depreciate.length === 2) { + console.log( + chalk.yellow.bold( + `[NPM script depreciation] ${program.depreciate[0]} is deprecated! Use ${program.depreciate[1]} instead!` + ) + ); + } +}; diff --git a/scripts/cli/tasks/changelog.ts b/packages/grafana-toolkit/src/cli/tasks/changelog.ts similarity index 77% rename from scripts/cli/tasks/changelog.ts rename to packages/grafana-toolkit/src/cli/tasks/changelog.ts index e2cb9da7e55d1..004ea46603a10 100644 --- a/scripts/cli/tasks/changelog.ts +++ b/packages/grafana-toolkit/src/cli/tasks/changelog.ts @@ -1,4 +1,6 @@ -import _ from 'lodash'; +import axios from 'axios'; +// @ts-ignore +import * as _ from 'lodash'; import { Task, TaskRunner } from './task'; import GithubClient from '../utils/githubClient'; @@ -27,11 +29,11 @@ const changelogTaskRunner: TaskRunner = async ({ milestone }) const issues = res.data; const bugs = _.sortBy( - issues.filter(item => { + issues.filter((item: any) => { if (item.title.match(/fix|fixes/i)) { return true; } - if (item.labels.find(label => label.name === 'type/bug')) { + if (item.labels.find((label: any) => label.name === 'type/bug')) { return true; } return false; @@ -39,7 +41,7 @@ const changelogTaskRunner: TaskRunner = async ({ milestone }) 'title' ); - const notBugs = _.sortBy(issues.filter(item => !bugs.find(bug => bug === item)), 'title'); + const notBugs = _.sortBy(issues.filter((item: any) => !bugs.find((bug: any) => bug === item)), 'title'); let markdown = ''; @@ -65,7 +67,7 @@ const changelogTaskRunner: TaskRunner = async ({ milestone }) function getMarkdownLineForIssue(item: any) { const githubGrafanaUrl = 'https://github.com/grafana/grafana'; let markdown = ''; - const title = item.title.replace(/^([^:]*)/, (match, g1) => { + const title = item.title.replace(/^([^:]*)/, (_match: any, g1: any) => { return `**${g1}**`; }); @@ -78,6 +80,4 @@ function getMarkdownLineForIssue(item: any) { return markdown; } -export const changelogTask = new Task(); -changelogTask.setName('Changelog generator task'); -changelogTask.setRunner(changelogTaskRunner); +export const changelogTask = new Task('Changelog generator task', changelogTaskRunner); diff --git a/scripts/cli/tasks/cherrypick.ts b/packages/grafana-toolkit/src/cli/tasks/cherrypick.ts similarity index 88% rename from scripts/cli/tasks/cherrypick.ts rename to packages/grafana-toolkit/src/cli/tasks/cherrypick.ts index 3e5a7addf4259..38ce9b4a5891e 100644 --- a/scripts/cli/tasks/cherrypick.ts +++ b/packages/grafana-toolkit/src/cli/tasks/cherrypick.ts @@ -15,7 +15,7 @@ const cherryPickRunner: TaskRunner = async () => { }); // sort by closed date ASC - res.data.sort(function(a, b) { + res.data.sort((a: any, b: any) => { return new Date(a.closed_at).getTime() - new Date(b.closed_at).getTime(); }); @@ -42,6 +42,4 @@ const cherryPickRunner: TaskRunner = async () => { console.log(commands); }; -export const cherryPickTask = new Task(); -cherryPickTask.setName('Cherry pick task'); -cherryPickTask.setRunner(cherryPickRunner); +export const cherryPickTask = new Task('Cherry pick task', cherryPickRunner); diff --git a/scripts/cli/tasks/closeMilestone.ts b/packages/grafana-toolkit/src/cli/tasks/closeMilestone.ts similarity index 94% rename from scripts/cli/tasks/closeMilestone.ts rename to packages/grafana-toolkit/src/cli/tasks/closeMilestone.ts index 9873863dc253c..3bdbbd46a21dd 100644 --- a/scripts/cli/tasks/closeMilestone.ts +++ b/packages/grafana-toolkit/src/cli/tasks/closeMilestone.ts @@ -70,6 +70,7 @@ const closeMilestoneTaskRunner: TaskRunner = async ({ mil } }; -export const closeMilestoneTask = new Task(); -closeMilestoneTask.setName('Close Milestone generator task'); -closeMilestoneTask.setRunner(closeMilestoneTaskRunner); +export const closeMilestoneTask = new Task( + 'Close Milestone generator task', + closeMilestoneTaskRunner +); diff --git a/scripts/cli/tasks/core.start.ts b/packages/grafana-toolkit/src/cli/tasks/core.start.ts similarity index 87% rename from scripts/cli/tasks/core.start.ts rename to packages/grafana-toolkit/src/cli/tasks/core.start.ts index dbd2dfe711917..2132ea33a8e46 100644 --- a/scripts/cli/tasks/core.start.ts +++ b/packages/grafana-toolkit/src/cli/tasks/core.start.ts @@ -1,3 +1,4 @@ +//@ts-ignore import concurrently from 'concurrently'; import { Task, TaskRunner } from './task'; @@ -33,6 +34,4 @@ const startTaskRunner: TaskRunner = async ({ watchThemes, hot } }; -export const startTask = new Task(); -startTask.setName('Core startTask'); -startTask.setRunner(startTaskRunner); +export const startTask = new Task('Core startTask', startTaskRunner); diff --git a/scripts/cli/tasks/grafanaui.build.ts b/packages/grafana-toolkit/src/cli/tasks/grafanaui.build.ts similarity index 68% rename from scripts/cli/tasks/grafanaui.build.ts rename to packages/grafana-toolkit/src/cli/tasks/grafanaui.build.ts index 1a48bb1a7243b..6dbbc7b1d3609 100644 --- a/scripts/cli/tasks/grafanaui.build.ts +++ b/packages/grafana-toolkit/src/cli/tasks/grafanaui.build.ts @@ -1,34 +1,45 @@ -import execa from 'execa'; -import fs from 'fs'; +import execa = require('execa'); +// @ts-ignore +import * as fs from 'fs'; import { changeCwdToGrafanaUi, restoreCwd } from '../utils/cwd'; import chalk from 'chalk'; import { useSpinner } from '../utils/useSpinner'; import { Task, TaskRunner } from './task'; -let distDir, cwd; +let distDir: string, cwd: string; +// @ts-ignore export const clean = useSpinner('Cleaning', async () => await execa('npm', ['run', 'clean'])); +// @ts-ignore const compile = useSpinner('Compiling sources', () => execa('tsc', ['-p', './tsconfig.build.json'])); +// @ts-ignore const rollup = useSpinner('Bundling', () => execa('npm', ['run', 'build'])); -export const savePackage = useSpinner<{ +interface SavePackageOptions { path: string; pkg: {}; -}>('Updating package.json', async ({ path, pkg }) => { - return new Promise((resolve, reject) => { - fs.writeFile(path, JSON.stringify(pkg, null, 2), err => { - if (err) { - reject(err); - return; - } - resolve(); +} + +// @ts-ignore +export const savePackage = useSpinner( + 'Updating package.json', + // @ts-ignore + async ({ path, pkg }: SavePackageOptions) => { + return new Promise((resolve, reject) => { + fs.writeFile(path, JSON.stringify(pkg, null, 2), err => { + if (err) { + reject(err); + return; + } + resolve(); + }); }); - }); -}); + } +); -const preparePackage = async pkg => { +const preparePackage = async (pkg: any) => { pkg.main = 'index.js'; pkg.types = 'index.d.ts'; await savePackage({ @@ -39,6 +50,7 @@ const preparePackage = async pkg => { const moveFiles = () => { const files = ['README.md', 'CHANGELOG.md', 'index.js']; + // @ts-ignore return useSpinner(`Moving ${files.join(', ')} files`, async () => { const promises = files.map(file => { return new Promise((resolve, reject) => { @@ -71,6 +83,4 @@ const buildTaskRunner: TaskRunner = async () => { restoreCwd(); }; -export const buildTask = new Task(); -buildTask.setName('@grafana/ui build'); -buildTask.setRunner(buildTaskRunner); +export const buildTask = new Task('@grafana/ui build', buildTaskRunner); diff --git a/scripts/cli/tasks/grafanaui.release.ts b/packages/grafana-toolkit/src/cli/tasks/grafanaui.release.ts similarity index 84% rename from scripts/cli/tasks/grafanaui.release.ts rename to packages/grafana-toolkit/src/cli/tasks/grafanaui.release.ts index dd7c441a53bfc..eb8da0da1c28c 100644 --- a/scripts/cli/tasks/grafanaui.release.ts +++ b/packages/grafana-toolkit/src/cli/tasks/grafanaui.release.ts @@ -1,14 +1,15 @@ -import execa from 'execa'; +import execa = require('execa'); import { execTask } from '../utils/execTask'; import { changeCwdToGrafanaUiDist, changeCwdToGrafanaUi, restoreCwd } from '../utils/cwd'; -import semver from 'semver'; -import inquirer from 'inquirer'; +import { ReleaseType, inc } from 'semver'; +import { prompt } from 'inquirer'; import chalk from 'chalk'; import { useSpinner } from '../utils/useSpinner'; import { savePackage, buildTask, clean } from './grafanaui.build'; import { TaskRunner, Task } from './task'; type VersionBumpType = 'prerelease' | 'patch' | 'minor' | 'major'; + interface ReleaseTaskOptions { publishToNpm: boolean; usePackageJsonVersion: boolean; @@ -16,43 +17,29 @@ interface ReleaseTaskOptions { } const promptBumpType = async () => { - return inquirer.prompt<{ type: VersionBumpType }>([ + return prompt<{ type: VersionBumpType }>([ { type: 'list', message: 'Select version bump', name: 'type', choices: ['prerelease', 'patch', 'minor', 'major'], - validate: answer => { - if (answer.length < 1) { - return 'You must choose something'; - } - - return true; - }, }, ]); }; const promptPrereleaseId = async (message = 'Is this a prerelease?', allowNo = true) => { - return inquirer.prompt<{ id: string }>([ + return prompt<{ id: string }>([ { type: 'list', message: message, name: 'id', choices: allowNo ? ['no', 'alpha', 'beta'] : ['alpha', 'beta'], - validate: answer => { - if (answer.length < 1) { - return 'You must choose something'; - } - - return true; - }, }, ]); }; const promptConfirm = async (message?: string) => { - return inquirer.prompt<{ confirmed: boolean }>([ + return prompt<{ confirmed: boolean }>([ { type: 'confirm', message: message || 'Is that correct?', @@ -64,11 +51,18 @@ const promptConfirm = async (message?: string) => { // Since Grafana core depends on @grafana/ui highly, we run full check before release const runChecksAndTests = async () => + // @ts-ignore useSpinner(`Running checks and tests`, async () => { - await execa('npm', ['run', 'test']); + try { + await execa('npm', ['run', 'test']); + } catch (e) { + console.log(e); + throw e; + } })(); const bumpVersion = (version: string) => + // @ts-ignore useSpinner(`Saving version ${version} to package.json`, async () => { changeCwdToGrafanaUi(); await execa('npm', ['version', version]); @@ -79,6 +73,7 @@ const bumpVersion = (version: string) => })(); const publishPackage = (name: string, version: string) => + // @ts-ignore useSpinner(`Publishing ${name} @ ${version} to npm registry...`, async () => { changeCwdToGrafanaUiDist(); await execa('npm', ['publish', '--access', 'public']); @@ -95,6 +90,7 @@ const ensureMasterBranch = async () => { }; const prepareVersionCommitAndPush = async (version: string) => + // @ts-ignore useSpinner('Commiting and pushing @grafana/ui version update', async () => { await execa.stdout('git', ['commit', '-a', '-m', `Upgrade @grafana/ui version to v${version}`]); await execa.stdout('git', ['push']); @@ -106,6 +102,7 @@ const releaseTaskRunner: TaskRunner = async ({ createVersionCommit, }) => { changeCwdToGrafanaUi(); + // @ts-ignore await clean(); // Clean previous build if exists restoreCwd(); @@ -117,7 +114,7 @@ const releaseTaskRunner: TaskRunner = async ({ await runChecksAndTests(); - await execTask(buildTask)(); + await execTask(buildTask)({} as any); let releaseConfirmed = false; let nextVersion; @@ -133,13 +130,13 @@ const releaseTaskRunner: TaskRunner = async ({ console.log(type); if (type === 'prerelease') { const { id } = await promptPrereleaseId('What kind of prerelease?', false); - nextVersion = semver.inc(pkg.version, type, id); + nextVersion = inc(pkg.version, type, id as any); } else { const { id } = await promptPrereleaseId(); if (id !== 'no') { - nextVersion = semver.inc(pkg.version, `pre${type}`, id); + nextVersion = inc(pkg.version, `pre${type}` as ReleaseType, id as any); } else { - nextVersion = semver.inc(pkg.version, type); + nextVersion = inc(pkg.version, type as ReleaseType); } } } else { @@ -190,6 +187,4 @@ const releaseTaskRunner: TaskRunner = async ({ } }; -export const releaseTask = new Task(); -releaseTask.setName('@grafana/ui release'); -releaseTask.setRunner(releaseTaskRunner); +export const releaseTask = new Task('@grafana/ui release', releaseTaskRunner); diff --git a/packages/grafana-toolkit/src/cli/tasks/plugin.build.ts b/packages/grafana-toolkit/src/cli/tasks/plugin.build.ts new file mode 100644 index 0000000000000..eeccb7d10f997 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/plugin.build.ts @@ -0,0 +1,84 @@ +import { Task, TaskRunner } from './task'; +// @ts-ignore +import execa = require('execa'); +import path = require('path'); +import fs = require('fs'); +import glob = require('glob'); +import * as rollup from 'rollup'; +import { inputOptions, outputOptions } from '../../config/rollup.plugin.config'; + +import { useSpinner } from '../utils/useSpinner'; +import { Linter, Configuration, RuleFailure } from 'tslint'; +import { testPlugin } from './plugin/tests'; +interface PrecommitOptions {} + +// @ts-ignore +export const clean = useSpinner('Cleaning', async () => await execa('rimraf', ['./dist'])); + +// @ts-ignore +const typecheckPlugin = useSpinner('Typechecking', async () => { + await execa('tsc', ['--noEmit']); +}); + +// @ts-ignore +const lintPlugin = useSpinner('Linting', async () => { + let tsLintConfigPath = path.resolve(process.cwd(), 'tslint.json'); + if (!fs.existsSync(tsLintConfigPath)) { + tsLintConfigPath = path.resolve(__dirname, '../../config/tslint.plugin.json'); + } + const globPattern = path.resolve(process.cwd(), 'src/**/*.+(ts|tsx)'); + const sourcesToLint = glob.sync(globPattern); + const options = { + fix: true, // or fail + formatter: 'json', + }; + + const configuration = Configuration.findConfiguration(tsLintConfigPath).results; + + const lintResults = sourcesToLint + .map(fileName => { + const linter = new Linter(options); + const fileContents = fs.readFileSync(fileName, 'utf8'); + linter.lint(fileName, fileContents, configuration); + return linter.getResult(); + }) + .filter(result => { + return result.errorCount > 0 || result.warningCount > 0; + }); + + if (lintResults.length > 0) { + console.log('\n'); + const failures = lintResults.reduce((failures, result) => { + return [...failures, ...result.failures]; + }, []); + failures.forEach(f => { + // tslint:disable-next-line + console.log( + `${f.getRuleSeverity() === 'warning' ? 'WARNING' : 'ERROR'}: ${f.getFileName().split('src')[1]}[${ + f.getStartPosition().getLineAndCharacter().line + }:${f.getStartPosition().getLineAndCharacter().character}]: ${f.getFailure()}` + ); + }); + console.log('\n'); + throw new Error(`${failures.length} linting errors found in ${lintResults.length} files`); + } +}); + +const bundlePlugin = useSpinner('Bundling plugin', async () => { + // @ts-ignore + const bundle = await rollup.rollup(inputOptions()); + // TODO: we can work on more verbose output + await bundle.generate(outputOptions); + await bundle.write(outputOptions); +}); + +const pluginBuildRunner: TaskRunner = async () => { + await clean(); + // @ts-ignore + await lintPlugin(); + await testPlugin({ updateSnapshot: false, coverage: false }); + // @ts-ignore + await bundlePlugin(); +}; + +export const pluginBuildTask = new Task('Build plugin', pluginBuildRunner); diff --git a/packages/grafana-toolkit/src/cli/tasks/plugin.dev.ts b/packages/grafana-toolkit/src/cli/tasks/plugin.dev.ts new file mode 100644 index 0000000000000..1793d7ddbc073 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/plugin.dev.ts @@ -0,0 +1,9 @@ +import { Task, TaskRunner } from './task'; +import { bundlePlugin, PluginBundleOptions } from './plugin/bundle'; + +const pluginDevRunner: TaskRunner = async options => { + const result = await bundlePlugin(options); + return result; +}; + +export const pluginDevTask = new Task('Dev plugin', pluginDevRunner); diff --git a/packages/grafana-toolkit/src/cli/tasks/plugin.tests.ts b/packages/grafana-toolkit/src/cli/tasks/plugin.tests.ts new file mode 100644 index 0000000000000..7840512892268 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/plugin.tests.ts @@ -0,0 +1,8 @@ +import { Task, TaskRunner } from './task'; +import { testPlugin, PluginTestOptions } from './plugin/tests'; + +const pluginTestRunner: TaskRunner = async options => { + await testPlugin(options); +}; + +export const pluginTestTask = new Task('Test plugin', pluginTestRunner); diff --git a/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.ts b/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.ts new file mode 100644 index 0000000000000..4c905764b4710 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/plugin/bundle.ts @@ -0,0 +1,29 @@ +import path = require('path'); +import * as jestCLI from 'jest-cli'; +import * as rollup from 'rollup'; +import { inputOptions, outputOptions } from '../../../config/rollup.plugin.config'; + +export interface PluginBundleOptions { + watch: boolean; +} + +export const bundlePlugin = async ({ watch }: PluginBundleOptions) => { + if (watch) { + const watcher = rollup.watch([ + { + ...inputOptions(), + output: outputOptions, + watch: { + chokidar: true, + clearScreen: true, + }, + }, + ]); + } else { + // @ts-ignore + const bundle = await rollup.rollup(inputOptions()); + // TODO: we can work on more verbose output + await bundle.generate(outputOptions); + await bundle.write(outputOptions); + } +}; diff --git a/packages/grafana-toolkit/src/cli/tasks/plugin/tests.ts b/packages/grafana-toolkit/src/cli/tasks/plugin/tests.ts new file mode 100644 index 0000000000000..eba45d6c24afd --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/plugin/tests.ts @@ -0,0 +1,22 @@ +import path = require('path'); +import * as jestCLI from 'jest-cli'; +import { useSpinner } from '../../utils/useSpinner'; +import { jestConfig } from '../../../config/jest.plugin.config'; + +export interface PluginTestOptions { + updateSnapshot: boolean; + coverage: boolean; +} + +export const testPlugin = useSpinner('Running tests', async ({ updateSnapshot, coverage }) => { + const testConfig = jestConfig(); + + testConfig.updateSnapshot = updateSnapshot; + testConfig.coverage = coverage; + + const results = await jestCLI.runCLI(testConfig as any, [process.cwd()]); + + if (results.results.numFailedTests > 0 || results.results.numFailedTestSuites > 0) { + throw new Error('Tests failed'); + } +}); diff --git a/scripts/cli/tasks/precommit.ts b/packages/grafana-toolkit/src/cli/tasks/precommit.ts similarity index 70% rename from scripts/cli/tasks/precommit.ts rename to packages/grafana-toolkit/src/cli/tasks/precommit.ts index b759aa414f20c..6431b486451f8 100644 --- a/scripts/cli/tasks/precommit.ts +++ b/packages/grafana-toolkit/src/cli/tasks/precommit.ts @@ -1,6 +1,8 @@ import { Task, TaskRunner } from './task'; import chalk from 'chalk'; +// @ts-ignore import get from 'lodash/get'; +// @ts-ignore import flatten from 'lodash/flatten'; import execa = require('execa'); const simpleGit = require('simple-git/promise')(process.cwd()); @@ -28,13 +30,18 @@ const tasks = { const precommitRunner: TaskRunner = async () => { const status = await simpleGit.status(); const sassFiles = status.files.filter( - file => (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\.scss)$/g) || file.path.indexOf('.sass-lint.yml') > -1 + (file: any) => + (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\.scss)$/g) || file.path.indexOf('.sass-lint.yml') > -1 ); - const tsFiles = status.files.filter(file => (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\.(ts|tsx))$/g)); - const testFiles = status.files.filter(file => (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\.test.(ts|tsx))$/g)); - const goTestFiles = status.files.filter(file => (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\_test.go)$/g)); - const grafanaUiFiles = tsFiles.filter(file => (file.path as string).indexOf('grafana-ui') > -1); + const tsFiles = status.files.filter((file: any) => (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\.(ts|tsx))$/g)); + const testFiles = status.files.filter((file: any) => + (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\.test.(ts|tsx))$/g) + ); + const goTestFiles = status.files.filter((file: any) => + (file.path as string).match(/^[a-zA-Z0-9\_\-\/]+(\_test.go)$/g) + ); + const grafanaUiFiles = tsFiles.filter((file: any) => (file.path as string).indexOf('grafana-ui') > -1); const grafanaUIFilesChangedOnly = tsFiles.length > 0 && tsFiles.length - grafanaUiFiles.length === 0; const coreFilesChangedOnly = tsFiles.length > 0 && grafanaUiFiles.length === 0; @@ -69,13 +76,13 @@ const precommitRunner: TaskRunner = async () => { const task = execa('grunt', gruntTasks); // @ts-ignore const stream = task.stdout; - stream.pipe(process.stdout); + if (stream) { + stream.pipe(process.stdout); + } return task; } console.log(chalk.yellow('Skipping precommit checks, not front-end changes detected')); return; }; -export const precommitTask = new Task(); -precommitTask.setName('Precommit task'); -precommitTask.setRunner(precommitRunner); +export const precommitTask = new Task('Precommit task', precommitRunner); diff --git a/scripts/cli/tasks/searchTestDataSetup.ts b/packages/grafana-toolkit/src/cli/tasks/searchTestDataSetup.ts similarity index 93% rename from scripts/cli/tasks/searchTestDataSetup.ts rename to packages/grafana-toolkit/src/cli/tasks/searchTestDataSetup.ts index 2bac9b6c903c1..915f431a9578c 100644 --- a/scripts/cli/tasks/searchTestDataSetup.ts +++ b/packages/grafana-toolkit/src/cli/tasks/searchTestDataSetup.ts @@ -1,5 +1,4 @@ import axios from 'axios'; -import _ from 'lodash'; import { Task, TaskRunner } from './task'; interface SearchTestDataSetupOptions { @@ -14,7 +13,7 @@ const client = axios.create({ }, }); -export async function getUser(user): Promise { +export async function getUser(user: any): Promise { console.log('Creating user ' + user.name); const search = await client.get('/users/search', { params: { query: user.login }, @@ -112,6 +111,7 @@ const searchTestDataSetupRunnner: TaskRunner = async } }; -export const searchTestDataSetupTask = new Task(); -searchTestDataSetupTask.setName('Search test data setup'); -searchTestDataSetupTask.setRunner(searchTestDataSetupRunnner); +export const searchTestDataSetupTask = new Task( + 'Search test data setup', + searchTestDataSetupRunnner +); diff --git a/scripts/cli/tasks/task.ts b/packages/grafana-toolkit/src/cli/tasks/task.ts similarity index 62% rename from scripts/cli/tasks/task.ts rename to packages/grafana-toolkit/src/cli/tasks/task.ts index cc7d77a0664e9..4524508bd83c3 100644 --- a/scripts/cli/tasks/task.ts +++ b/packages/grafana-toolkit/src/cli/tasks/task.ts @@ -1,11 +1,10 @@ export type TaskRunner = (options: T) => Promise; export class Task { - name: string; - runner: (options: TOptions) => Promise; - options: TOptions; + options: TOptions = {} as any; - setName = name => { + constructor(public name: string, public runner: TaskRunner) {} + setName = (name: string) => { this.name = name; }; @@ -13,7 +12,7 @@ export class Task { this.runner = runner; }; - setOptions = options => { + setOptions = (options: TOptions) => { this.options = options; }; diff --git a/packages/grafana-toolkit/src/cli/tasks/template.ts b/packages/grafana-toolkit/src/cli/tasks/template.ts new file mode 100644 index 0000000000000..4a965e05f9721 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/template.ts @@ -0,0 +1,9 @@ +import { Task, TaskRunner } from './task'; + +interface TemplateOptions {} + +const templateRunner: TaskRunner = async () => { + console.log('Template task'); +}; + +export const templateTask = new Task('Template task', templateRunner); diff --git a/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts b/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts new file mode 100644 index 0000000000000..975b1d6fa7920 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts @@ -0,0 +1,91 @@ +import execa = require('execa'); +import * as fs from 'fs'; +import { changeCwdToGrafanaUi, restoreCwd, changeCwdToGrafanaToolkit } from '../utils/cwd'; +import chalk from 'chalk'; +import { useSpinner } from '../utils/useSpinner'; +import { Task, TaskRunner } from './task'; + +let distDir: string, cwd: string; + +// @ts-ignore +export const clean = useSpinner('Cleaning', async () => await execa('npm', ['run', 'clean'])); + +// @ts-ignore +const compile = useSpinner('Compiling sources', async () => { + try { + await execa('tsc', ['-p', './tsconfig.json']); + } catch (e) { + console.log(e); + throw e; + } +}); + +// @ts-ignore +export const savePackage = useSpinner<{ + path: string; + pkg: {}; + // @ts-ignore +}>('Updating package.json', async ({ path, pkg }) => { + return new Promise((resolve, reject) => { + fs.writeFile(path, JSON.stringify(pkg, null, 2), err => { + if (err) { + reject(err); + return; + } + resolve(); + }); + }); +}); + +const preparePackage = async (pkg: any) => { + pkg.bin = { + 'grafana-toolkit': './bin/grafana-toolkit.dist.js', + }; + + await savePackage({ + path: `${cwd}/dist/package.json`, + pkg, + }); +}; + +const moveFiles = () => { + const files = [ + 'README.md', + 'CHANGELOG.md', + 'bin/grafana-toolkit.dist.js', + 'src/config/tsconfig.plugin.json', + 'src/config/tslint.plugin.json', + ]; + // @ts-ignore + return useSpinner(`Moving ${files.join(', ')} files`, async () => { + const promises = files.map(file => { + return new Promise((resolve, reject) => { + fs.copyFile(`${cwd}/${file}`, `${distDir}/${file}`, err => { + if (err) { + reject(err); + return; + } + resolve(); + }); + }); + }); + + await Promise.all(promises); + })(); +}; + +const toolkitBuildTaskRunner: TaskRunner = async () => { + cwd = changeCwdToGrafanaToolkit(); + distDir = `${cwd}/dist`; + const pkg = require(`${cwd}/package.json`); + console.log(chalk.yellow(`Building ${pkg.name} (package.json version: ${pkg.version})`)); + + await clean(); + await compile(); + await preparePackage(pkg); + fs.mkdirSync('./dist/bin'); + await moveFiles(); + restoreCwd(); +}; + +export const toolkitBuildTask = new Task('@grafana/toolkit build', toolkitBuildTaskRunner); diff --git a/packages/grafana-toolkit/src/cli/tsconfig.json b/packages/grafana-toolkit/src/cli/tsconfig.json new file mode 100644 index 0000000000000..475f3aa406f83 --- /dev/null +++ b/packages/grafana-toolkit/src/cli/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "module": "commonjs" + } +} diff --git a/scripts/cli/utils/cwd.ts b/packages/grafana-toolkit/src/cli/utils/cwd.ts similarity index 70% rename from scripts/cli/utils/cwd.ts rename to packages/grafana-toolkit/src/cli/utils/cwd.ts index 9b4241b136903..48ca39e5da2ba 100644 --- a/scripts/cli/utils/cwd.ts +++ b/packages/grafana-toolkit/src/cli/utils/cwd.ts @@ -5,6 +5,11 @@ export const changeCwdToGrafanaUi = () => { return process.cwd(); }; +export const changeCwdToGrafanaToolkit = () => { + process.chdir(`${cwd}/packages/grafana-toolkit`); + return process.cwd(); +}; + export const changeCwdToGrafanaUiDist = () => { process.chdir(`${cwd}/packages/grafana-ui/dist`); }; diff --git a/scripts/cli/utils/execTask.ts b/packages/grafana-toolkit/src/cli/utils/execTask.ts similarity index 100% rename from scripts/cli/utils/execTask.ts rename to packages/grafana-toolkit/src/cli/utils/execTask.ts diff --git a/scripts/cli/utils/githubClient.test.ts b/packages/grafana-toolkit/src/cli/utils/githubClient.test.ts similarity index 96% rename from scripts/cli/utils/githubClient.test.ts rename to packages/grafana-toolkit/src/cli/utils/githubClient.test.ts index 95c67cb3111c4..dbdadda0d92c6 100644 --- a/scripts/cli/utils/githubClient.test.ts +++ b/packages/grafana-toolkit/src/cli/utils/githubClient.test.ts @@ -20,6 +20,7 @@ describe('GithubClient', () => { describe('#client', () => { it('it should contain a client', () => { + // @ts-ignore const spy = jest.spyOn(GithubClient.prototype, 'createClient').mockImplementation(() => fakeClient); const github = new GithubClient(); @@ -40,6 +41,7 @@ describe('GithubClient', () => { process.env.GITHUB_USERNAME = username; process.env.GITHUB_ACCESS_TOKEN = token; + // @ts-ignore const spy = jest.spyOn(GithubClient.prototype, 'createClient').mockImplementation(() => fakeClient); const github = new GithubClient(true); @@ -57,6 +59,7 @@ describe('GithubClient', () => { describe('when the credentials are not defined', () => { it('should throw an error', () => { expect(() => { + // tslint:disable-next-line new GithubClient(true); }).toThrow(/operation needs a GITHUB_USERNAME and GITHUB_ACCESS_TOKEN environment variables/); }); diff --git a/scripts/cli/utils/githubClient.ts b/packages/grafana-toolkit/src/cli/utils/githubClient.ts similarity index 100% rename from scripts/cli/utils/githubClient.ts rename to packages/grafana-toolkit/src/cli/utils/githubClient.ts diff --git a/scripts/cli/utils/useSpinner.ts b/packages/grafana-toolkit/src/cli/utils/useSpinner.ts similarity index 91% rename from scripts/cli/utils/useSpinner.ts rename to packages/grafana-toolkit/src/cli/utils/useSpinner.ts index 298a6516689d6..b901ed96d9c12 100644 --- a/scripts/cli/utils/useSpinner.ts +++ b/packages/grafana-toolkit/src/cli/utils/useSpinner.ts @@ -10,7 +10,7 @@ export const useSpinner = (spinnerLabel: string, fn: FnToSpin, killProcess await fn(options); spinner.succeed(); } catch (e) { - spinner.fail(e); + spinner.fail(e.message || e); if (killProcess) { process.exit(1); } diff --git a/packages/grafana-toolkit/src/config/jest.plugin.config.ts b/packages/grafana-toolkit/src/config/jest.plugin.config.ts new file mode 100644 index 0000000000000..685791bd984ec --- /dev/null +++ b/packages/grafana-toolkit/src/config/jest.plugin.config.ts @@ -0,0 +1,45 @@ +import path = require('path'); +import fs = require('fs'); + +const whitelistedJestConfigOverrides = ['snapshotSerializers']; + +export const jestConfig = () => { + const jestConfigOverrides = require(path.resolve(process.cwd(), 'package.json')).jest; + const blacklistedOverrides = jestConfigOverrides + ? Object.keys(jestConfigOverrides).filter(override => whitelistedJestConfigOverrides.indexOf(override) === -1) + : []; + if (blacklistedOverrides.length > 0) { + console.error("\ngrafana-toolkit doesn't support following Jest options: ", blacklistedOverrides); + console.log('Supported Jest options are: ', JSON.stringify(whitelistedJestConfigOverrides)); + throw new Error('Provided Jest config is not supported'); + } + + const shimsFilePath = path.resolve(process.cwd(), 'config/jest-shim.ts'); + const setupFilePath = path.resolve(process.cwd(), 'config/jest-setup.ts'); + + const setupFile = fs.existsSync(setupFilePath) ? setupFilePath : undefined; + const shimsFile = fs.existsSync(shimsFilePath) ? shimsFilePath : undefined; + const setupFiles = [setupFile, shimsFile].filter(f => f); + const defaultJestConfig = { + preset: 'ts-jest', + verbose: false, + transform: { + '^.+\\.(ts|tsx)$': 'ts-jest', + }, + moduleDirectories: ['node_modules', 'src'], + rootDir: process.cwd(), + roots: ['/src'], + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], + setupFiles, + globals: { 'ts-jest': { isolatedModules: true } }, + coverageReporters: ['json-summary', 'text', 'lcov'], + collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/node_modules/**', '!**/vendor/**'], + updateSnapshot: false, + passWithNoTests: true, + }; + + return { + ...defaultJestConfig, + ...jestConfigOverrides, + }; +}; diff --git a/packages/grafana-toolkit/src/config/rollup.plugin.config.ts b/packages/grafana-toolkit/src/config/rollup.plugin.config.ts new file mode 100644 index 0000000000000..2636ed6b685e1 --- /dev/null +++ b/packages/grafana-toolkit/src/config/rollup.plugin.config.ts @@ -0,0 +1,160 @@ +// @ts-ignore +import resolve from 'rollup-plugin-node-resolve'; +// @ts-ignore +import commonjs from 'rollup-plugin-commonjs'; +// @ts-ignore +import sourceMaps from 'rollup-plugin-sourcemaps'; +// @ts-ignore +import typescript from 'rollup-plugin-typescript2'; +// @ts-ignore +import json from 'rollup-plugin-json'; +// @ts-ignore +import copy from 'rollup-plugin-copy-glob'; +// @ts-ignore +import { terser } from 'rollup-plugin-terser'; +// @ts-ignore +import visualizer from 'rollup-plugin-visualizer'; + +// @ts-ignore +const replace = require('replace-in-file'); +const pkg = require(`${process.cwd()}/package.json`); +const path = require('path'); +const fs = require('fs'); +const tsConfig = require(`${__dirname}/tsconfig.plugin.json`); +import { OutputOptions, InputOptions, GetManualChunk } from 'rollup'; +const { PRODUCTION } = process.env; + +export const outputOptions: OutputOptions = { + dir: 'dist', + format: 'amd', + sourcemap: true, + chunkFileNames: '[name].js', +}; + +const findModuleTs = (base: string, files?: string[], result?: string[]) => { + files = files || fs.readdirSync(base); + result = result || []; + + if (files) { + files.forEach(file => { + const newbase = path.join(base, file); + if (fs.statSync(newbase).isDirectory()) { + result = findModuleTs(newbase, fs.readdirSync(newbase), result); + } else { + if (file.indexOf('module.ts') > -1) { + // @ts-ignore + result.push(newbase); + } + } + }); + } + return result; +}; + +const getModuleFiles = () => { + return findModuleTs(path.resolve(process.cwd(), 'src')); +}; + +const getManualChunk: GetManualChunk = (id: string) => { + // id == absolute path + if (id.endsWith('module.ts')) { + const idx = id.indexOf('/src/'); + if (idx > 0) { + const p = id.substring(idx + 5, id.lastIndexOf('.')); + console.log('MODULE:', id, p); + return p; + } + } + console.log('shared:', id); + return 'shared'; +}; + +const getExternals = () => { + // Those are by default exported by Grafana + const defaultExternals = [ + 'jquery', + 'lodash', + 'moment', + 'rxjs', + 'd3', + 'react', + 'react-dom', + '@grafana/ui', + '@grafana/runtime', + '@grafana/data', + ]; + const toolkitConfig = require(path.resolve(process.cwd(), 'package.json')).grafanaToolkit; + const userDefinedExternals = (toolkitConfig && toolkitConfig.externals) || []; + return [...defaultExternals, ...userDefinedExternals]; +}; + +export const inputOptions = (): InputOptions => { + const inputFiles = getModuleFiles(); + return { + input: inputFiles, + manualChunks: inputFiles.length > 1 ? getManualChunk : undefined, + external: getExternals(), + plugins: [ + // Allow json resolution + json(), + // globals(), + // builtins(), + + // Compile TypeScript files + typescript({ + typescript: require('typescript'), + objectHashIgnoreUnknownHack: true, + tsconfigDefaults: tsConfig, + }), + + // Allow node_modules resolution, so you can use 'external' to control + // which external modules to include in the bundle + // https://github.com/rollup/rollup-plugin-node-resolve#usage + resolve(), + + // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs) + commonjs(), + + // Resolve source maps to the original source + sourceMaps(), + + // Minify + PRODUCTION && terser(), + + // Copy files + copy([{ files: 'src/**/*.{json,svg,png,html}', dest: 'dist' }], { verbose: true }), + + // Help avoid including things accidentally + visualizer({ + filename: 'dist/stats.html', + title: 'Plugin Stats', + }), + + // Custom callback when we are done + finish(), + ], + }; +}; + +function finish() { + return { + name: 'finish', + buildEnd() { + const files = 'dist/plugin.json'; + replace.sync({ + files: files, + from: /%VERSION%/g, + to: pkg.version, + }); + replace.sync({ + files: files, + from: /%TODAY%/g, + to: new Date().toISOString().substring(0, 10), + }); + + if (PRODUCTION) { + console.log('*minified*'); + } + }, + }; +} diff --git a/packages/grafana-toolkit/src/config/tsconfig.plugin.json b/packages/grafana-toolkit/src/config/tsconfig.plugin.json new file mode 100644 index 0000000000000..0e565014b3f8f --- /dev/null +++ b/packages/grafana-toolkit/src/config/tsconfig.plugin.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "moduleResolution": "node", + "target": "es5", + "lib": ["es6", "dom"], + "module": "esnext", + "strict": true, + "alwaysStrict": true, + "noImplicitAny": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitUseStrict": false, + "noUnusedLocals": true, + "strictNullChecks": true, + "skipLibCheck": true, + "removeComments": false, + "jsx": "react", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "importHelpers": true, + "noEmitHelpers": true, + "inlineSourceMap": false, + "sourceMap": true, + "emitDecoratorMetadata": false, + "experimentalDecorators": true, + "downlevelIteration": true, + "pretty": true + } +} diff --git a/packages/grafana-toolkit/src/config/tslint.plugin.json b/packages/grafana-toolkit/src/config/tslint.plugin.json new file mode 100644 index 0000000000000..3f0a5b6dc52c0 --- /dev/null +++ b/packages/grafana-toolkit/src/config/tslint.plugin.json @@ -0,0 +1,75 @@ +{ + "rules": { + "array-type": [true, "array-simple"], + "arrow-return-shorthand": true, + "ban": [true, { "name": "Array", "message": "tsstyle#array-constructor" }], + "ban-types": [ + true, + ["Object", "Use {} instead."], + ["String", "Use 'string' instead."], + ["Number", "Use 'number' instead."], + ["Boolean", "Use 'boolean' instead."] + ], + "interface-name": [true, "never-prefix"], + "no-string-throw": true, + "no-unused-expression": true, + "no-unused-variable": false, + "no-use-before-declare": false, + "no-duplicate-variable": true, + "curly": true, + "class-name": true, + "semicolon": [true, "always", "ignore-bound-class-methods"], + "triple-equals": [true, "allow-null-check"], + "comment-format": [false, "check-space"], + "eofline": true, + "forin": false, + "indent": [true, "spaces", 2], + "jsdoc-format": true, + "label-position": true, + "max-line-length": [true, 150], + "member-access": [true, "no-public"], + "new-parens": true, + "no-angle-bracket-type-assertion": true, + "no-arg": true, + "no-bitwise": false, + "no-conditional-assignment": true, + "no-console": [true, "debug", "info", "time", "timeEnd", "trace"], + "no-construct": true, + "no-debugger": true, + "no-empty": false, + "no-eval": true, + "no-inferrable-types": true, + "no-namespace": [true, "allow-declarations"], + "no-reference": true, + "no-shadowed-variable": false, + "no-string-literal": false, + "no-switch-case-fall-through": false, + "no-trailing-whitespace": true, + "no-var-keyword": true, + "object-literal-sort-keys": false, + "one-line": [true, "check-open-brace", "check-catch", "check-else"], + "only-arrow-functions": [true, "allow-declarations", "allow-named-functions"], + "prefer-const": true, + "radix": true, + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "variable-name": [ + true, + "check-format", + "ban-keywords", + "allow-leading-underscore", + "allow-trailing-underscore", + "allow-pascal-case" + ], + "use-isnan": true, + "whitespace": [true, "check-branch", "check-decl", "check-type", "check-preblock"] + } +} diff --git a/packages/grafana-toolkit/tsconfig.json b/packages/grafana-toolkit/tsconfig.json new file mode 100644 index 0000000000000..28b734aa9cd48 --- /dev/null +++ b/packages/grafana-toolkit/tsconfig.json @@ -0,0 +1,18 @@ +{ + "include": ["src/**/*.ts"], + "exclude": ["dist", "node_modules"], + "compilerOptions": { + "module": "commonjs", + "rootDirs": ["."], + "outDir": "dist/src", + "strict": true, + "alwaysStrict": true, + "noImplicitAny": true, + "strictNullChecks": true, + "typeRoots": ["./node_modules/@types"], + "skipLibCheck": true, // Temp workaround for Duplicate identifier tsc errors, + "removeComments": false, + "esModuleInterop": true, + "lib": ["es2015", "es2017.string"] + } +} diff --git a/packages/grafana-toolkit/tslint.json b/packages/grafana-toolkit/tslint.json new file mode 100644 index 0000000000000..f512937362444 --- /dev/null +++ b/packages/grafana-toolkit/tslint.json @@ -0,0 +1,6 @@ +{ + "extends": "../../tslint.json", + "rules": { + "import-blacklist": [true, ["^@grafana/runtime.*"]] + } +} diff --git a/packages/grafana-ui/README.md b/packages/grafana-ui/README.md index 935124e99ba04..f897127b6605a 100644 --- a/packages/grafana-ui/README.md +++ b/packages/grafana-ui/README.md @@ -17,31 +17,35 @@ See [package source](https://github.com/grafana/grafana/tree/master/packages/gra For development purposes we suggest using `yarn link` that will create symlink to @grafana/ui lib. To do so navigate to `packages/grafana-ui` and run `yarn link`. Then, navigate to your project and run `yarn link @grafana/ui` to use the linked version of the lib. To unlink follow the same procedure, but use `yarn unlink` instead. ## Building @grafana/ui -To build @grafana/ui run `npm run gui:build` script *from Grafana repository root*. The build will be created in `packages/grafana-ui/dist` directory. Following steps from [Development](#development) you can test built package. + +To build @grafana/ui run `npm run gui:build` script _from Grafana repository root_. The build will be created in `packages/grafana-ui/dist` directory. Following steps from [Development](#development) you can test built package. ## Releasing new version -To release new version run `npm run gui:release` script *from Grafana repository root*. The script will prepare the distribution package as well as prompt you to bump library version and publish it to the NPM registry. + +To release new version run `npm run gui:release` script _from Grafana repository root_. This has to be done on the master branch. The script will prepare the distribution package as well as prompt you to bump library version and publish it to the NPM registry. When the new package is published, create a PR with the bumped version in package.json. ### Automatic version bump + When running `npm run gui:release` package.json file will be automatically updated. Also, package.json file will be commited and pushed to upstream branch. ### Manual version bump -To use `package.json` defined version run `npm run gui:release --usePackageJsonVersion` *from Grafana repository root*. + +Manually update the version in `package.json` and then run `npm run gui:release --usePackageJsonVersion` _from Grafana repository root_. ### Preparing release package without publishing to NPM registry + For testing purposes there is `npm run gui:releasePrepare` task that prepares distribution package without publishing it to the NPM registry. ### V1 release process overview + 1. Package is compiled with TSC. Typings are created in `/dist` directory, and the compiled js lands in `/compiled` dir 2. Rollup creates a CommonJS package based on compiled sources, and outputs it to `/dist` directory 3. Readme, changelog and index.js files are moved to `/dist` directory 4. Package version is bumped in both `@grafana/ui` package dir and in dist directory. 5. Version commit is created and pushed to master branch -5. Package is published to npm - +6. Package is published to npm ## Versioning + To limit the confusion related to @grafana/ui and Grafana versioning we decided to keep the major version in sync between those two. This means, that first version of @grafana/ui is taged with 6.0.0-alpha.0 to keep version in sync with Grafana 6.0 release. - - diff --git a/packages/grafana-ui/rollup.config.ts b/packages/grafana-ui/rollup.config.ts index 32a41d2409161..85564fa54e02d 100644 --- a/packages/grafana-ui/rollup.config.ts +++ b/packages/grafana-ui/rollup.config.ts @@ -27,6 +27,8 @@ const buildCjsPackage = ({ env }) => { plugins: [ commonjs({ include: /node_modules/, + // When 'rollup-plugin-commonjs' fails to properly convert the CommonJS modules to ES6 one has to manually name the exports + // https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports namedExports: { '../../node_modules/lodash/lodash.js': [ 'flatten', diff --git a/packages/grafana-ui/src/components/Select/_Select.scss b/packages/grafana-ui/src/components/Select/_Select.scss index e4b493055a165..f9c635053dda7 100644 --- a/packages/grafana-ui/src/components/Select/_Select.scss +++ b/packages/grafana-ui/src/components/Select/_Select.scss @@ -193,3 +193,7 @@ $select-input-bg-disabled: $input-bg-disabled; .gf-form-select-box-button-select { height: auto; } + +.select-button { + display: flex; +} diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx index 1fea903adbd9d..e2042fa8176f1 100644 --- a/packages/grafana-ui/src/components/Table/Table.story.tsx +++ b/packages/grafana-ui/src/components/Table/Table.story.tsx @@ -4,7 +4,7 @@ import { Table } from './Table'; import { getTheme } from '../../themes'; import { migratedTestTable, migratedTestStyles, simpleTable } from './examples'; -import { ScopedVars, SeriesData, GrafanaThemeType } from '../../types/index'; +import { ScopedVars, DataFrame, GrafanaThemeType } from '../../types/index'; import { withFullSizeStory } from '../../utils/storybook/withFullSizeStory'; import { number, boolean } from '@storybook/addon-knobs'; @@ -29,7 +29,7 @@ export function columnIndexToLeter(column: number) { return String.fromCharCode(A + c2); } -export function makeDummyTable(columnCount: number, rowCount: number): SeriesData { +export function makeDummyTable(columnCount: number, rowCount: number): DataFrame { return { fields: Array.from(new Array(columnCount), (x, i) => { return { diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 6ed5f98450d2e..969fe6b69f9b4 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -12,7 +12,7 @@ import { } from 'react-virtualized'; import { Themeable } from '../../types/theme'; -import { sortSeriesData } from '../../utils/processSeriesData'; +import { sortDataFrame } from '../../utils/processDataFrame'; import { TableCellBuilder, @@ -22,11 +22,11 @@ import { simpleCellBuilder, } from './TableCellBuilder'; import { stringToJsRegex } from '@grafana/data'; -import { SeriesData } from '../../types/data'; +import { DataFrame } from '../../types/data'; import { InterpolateFunction } from '../../types/panel'; export interface Props extends Themeable { - data: SeriesData; + data: DataFrame; minColumnWidth: number; showHeader: boolean; @@ -44,7 +44,7 @@ export interface Props extends Themeable { interface State { sortBy?: number; sortDirection?: SortDirectionType; - data: SeriesData; + data: DataFrame; } interface ColumnRenderInfo { @@ -115,7 +115,7 @@ export class Table extends Component { // Update the data when data or sort changes if (dataChanged || sortBy !== prevState.sortBy || sortDirection !== prevState.sortDirection) { this.scrollToTop = true; - this.setState({ data: sortSeriesData(data, sortBy, sortDirection === 'DESC') }); + this.setState({ data: sortDataFrame(data, sortBy, sortDirection === 'DESC') }); } } @@ -170,7 +170,7 @@ export class Table extends Component { this.setState({ sortBy: sort, sortDirection: dir }); }; - /** Converts the grid coordinates to SeriesData coordinates */ + /** Converts the grid coordinates to DataFrame coordinates */ getCellRef = (rowIndex: number, columnIndex: number): DataIndex => { const { showHeader, rotate } = this.props; const rowOffset = showHeader ? -1 : 0; diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx index 4eaa1dca9ff3a..df1b99cacefef 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.story.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import TableInputCSV from './TableInputCSV'; import { action } from '@storybook/addon-actions'; -import { SeriesData } from '../../types/data'; +import { DataFrame } from '../../types/data'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; const TableInputStories = storiesOf('UI/Table/Input', module); @@ -16,7 +16,7 @@ TableInputStories.add('default', () => { width={400} height={'90vh'} text={'a,b,c\n1,2,3'} - onSeriesParsed={(data: SeriesData[], text: string) => { + onSeriesParsed={(data: DataFrame[], text: string) => { console.log('Data', data, text); action('Data')(data, text); }} diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx index 7052c69fa4b2d..29ba77d3a4921 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import renderer from 'react-test-renderer'; import TableInputCSV from './TableInputCSV'; -import { SeriesData } from '../../types/data'; +import { DataFrame } from '../../types/data'; describe('TableInputCSV', () => { it('renders correctly', () => { @@ -12,7 +12,7 @@ describe('TableInputCSV', () => { width={'100%'} height={200} text={'a,b,c\n1,2,3'} - onSeriesParsed={(data: SeriesData[], text: string) => { + onSeriesParsed={(data: DataFrame[], text: string) => { // console.log('Table:', table, 'from:', text); }} /> diff --git a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx index b45a8fba4c092..6e3644c88407b 100644 --- a/packages/grafana-ui/src/components/Table/TableInputCSV.tsx +++ b/packages/grafana-ui/src/components/Table/TableInputCSV.tsx @@ -1,6 +1,6 @@ import React from 'react'; import debounce from 'lodash/debounce'; -import { SeriesData } from '../../types/data'; +import { DataFrame } from '../../types/data'; import { CSVConfig, readCSV } from '../../utils/csv'; interface Props { @@ -8,12 +8,12 @@ interface Props { text: string; width: string | number; height: string | number; - onSeriesParsed: (data: SeriesData[], text: string) => void; + onSeriesParsed: (data: DataFrame[], text: string) => void; } interface State { text: string; - data: SeriesData[]; + data: DataFrame[]; } /** diff --git a/packages/grafana-ui/src/components/Table/examples.ts b/packages/grafana-ui/src/components/Table/examples.ts index 9fce97f49d479..3edba42732d6e 100644 --- a/packages/grafana-ui/src/components/Table/examples.ts +++ b/packages/grafana-ui/src/components/Table/examples.ts @@ -1,4 +1,4 @@ -import { SeriesData } from '../../types/data'; +import { DataFrame } from '../../types/data'; import { ColumnStyle } from './TableCellBuilder'; import { getColorDefinitionByName } from '../../utils/namedColorsPalette'; @@ -22,7 +22,7 @@ export const migratedTestTable = { { name: 'RangeMappingColored' }, ], rows: [[1388556366666, 1230, 40, undefined, '', '', 'my.host.com', 'host1', ['value1', 'value2'], 1, 2, 1, 2]], -} as SeriesData; +} as DataFrame; export const migratedTestStyles: ColumnStyle[] = [ { diff --git a/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx index 454abfe4e0dd7..9195e2c824f9b 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx @@ -178,9 +178,7 @@ export class TimePicker extends PureComponent { const TimePickerTooltipContent = ({ timeRange }: { timeRange: TimeRange }) => ( <> {timeRange.from.format(TIME_FORMAT)} -
- to -
+
to
{timeRange.to.format(TIME_FORMAT)} ); diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerPopover.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerPopover.tsx index 0f255df51b0e1..2d94d4feab464 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePickerPopover.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimePickerPopover.tsx @@ -50,6 +50,9 @@ export class TimePickerPopover extends Component { }; onToCalendarChanged = (value: DateTime) => { + value.set('h', 23); + value.set('m', 59); + value.set('s', 0); this.setState({ to: value }); }; diff --git a/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss b/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss index cc63a2cd19683..414f996855729 100644 --- a/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss +++ b/packages/grafana-ui/src/components/TimePicker/_TimePicker.scss @@ -7,10 +7,6 @@ } } -.time-picker-popover-popper { - z-index: $zindex-timepicker-popover; -} - .time-picker-utc { color: $orange; font-size: 75%; @@ -30,10 +26,11 @@ color: $popover-color; box-shadow: $popover-shadow; position: absolute; + z-index: $zindex-dropdown; flex-direction: column; max-width: 600px; - top: 48px; - right: 20px; + top: 50px; + right: 0px; .time-picker-popover-body { display: flex; @@ -188,11 +185,6 @@ $arrowPadding: $arrowPaddingToBorder * 3; @include media-breakpoint-down(md) { .time-picker-popover { - margin-left: $spacer; - display: flex; - flex-flow: column nowrap; - max-width: 400px; - .time-picker-popover-title { font-size: $font-size-md; } @@ -217,6 +209,56 @@ $arrowPadding: $arrowPaddingToBorder * 3; } .time-picker-calendar { - width: 100%; + width: 320px; + } +} + +.time-picker-button-select { + .select-button-value { + display: none; + + @include media-breakpoint-up(sm) { + display: inline-block; + max-width: 100px; + overflow: hidden; + } + + @include media-breakpoint-up(md) { + display: inline-block; + max-width: 150px; + overflow: hidden; + } + + @include media-breakpoint-up(lg) { + max-width: 300px; + } + } +} + +// special rules for when within explore toolbar in split +.explore-toolbar.splitted { + .time-picker-button-select { + .select-button-value { + display: none; + + @include media-breakpoint-up(xl) { + display: inline-block; + max-width: 100px; + } + + @media only screen and (max-width: 1545px) { + max-width: 300px; + } + } + } +} + +.dashboard-timepicker-wrapper { + position: relative; + display: flex; + + .gf-form-select-box__menu { + right: 0; + left: unset; } } diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index d4a4dd6f016f2..f8e597ae4e836 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -171,7 +171,6 @@ $zindex-tooltip: ${theme.zIndex.tooltip}; $zindex-modal-backdrop: ${theme.zIndex.modalBackdrop}; $zindex-modal: ${theme.zIndex.modal}; $zindex-typeahead: ${theme.zIndex.typeahead}; -$zindex-timepicker-popover: 1070; // Buttons // diff --git a/packages/grafana-ui/src/types/data.ts b/packages/grafana-ui/src/types/data.ts index d1a1a78577761..d7a39d1db212b 100644 --- a/packages/grafana-ui/src/types/data.ts +++ b/packages/grafana-ui/src/types/data.ts @@ -55,7 +55,7 @@ export interface Labels { [key: string]: string; } -export interface SeriesData extends QueryResultBase { +export interface DataFrame extends QueryResultBase { name?: string; fields: Field[]; rows: any[][]; diff --git a/packages/grafana-ui/src/types/datasource.ts b/packages/grafana-ui/src/types/datasource.ts index d6d98639cba5a..976b5e06a9a90 100644 --- a/packages/grafana-ui/src/types/datasource.ts +++ b/packages/grafana-ui/src/types/datasource.ts @@ -1,7 +1,7 @@ import { ComponentType, ComponentClass } from 'react'; -import { TimeRange } from './time'; +import { TimeRange, RawTimeRange } from './time'; import { PluginMeta, GrafanaPlugin } from './plugin'; -import { TableData, TimeSeries, SeriesData, LoadingState } from './data'; +import { TableData, TimeSeries, DataFrame, LoadingState } from './data'; import { PanelData } from './panel'; import { LogRowModel } from './logs'; @@ -284,11 +284,11 @@ export interface ExploreStartPageProps { } /** - * Starting in v6.2 SeriesData can represent both TimeSeries and TableData + * Starting in v6.2 DataFrame can represent both TimeSeries and TableData */ export type LegacyResponseData = TimeSeries | TableData | any; -export type DataQueryResponseData = SeriesData | LegacyResponseData; +export type DataQueryResponseData = DataFrame | LegacyResponseData; export type DataStreamObserver = (event: DataStreamState) => void; @@ -313,7 +313,7 @@ export interface DataStreamState { /** * Series data may not be known yet */ - series?: SeriesData[]; + series?: DataFrame[]; /** * Error in stream (but may still be running) @@ -323,7 +323,7 @@ export interface DataStreamState { /** * Optionally return only the rows that changed in this event */ - delta?: SeriesData[]; + delta?: DataFrame[]; /** * Stop listening to this stream @@ -356,6 +356,8 @@ export interface DataQuery { * For non mixed scenarios this is undefined. */ datasource?: string | null; + + metric?: any; } export interface DataQueryError { @@ -383,6 +385,7 @@ export interface DataQueryRequest { requestId: string; // Used to identify results and optionally cancel the request in backendSrv timezone: string; range: TimeRange; + rangeRaw?: RawTimeRange; timeInfo?: string; // The query time description (blue text in the upper right) targets: TQuery[]; panelId: number; diff --git a/packages/grafana-ui/src/types/graph.ts b/packages/grafana-ui/src/types/graph.ts index e8b2d4e1141c7..9ea6650e34946 100644 --- a/packages/grafana-ui/src/types/graph.ts +++ b/packages/grafana-ui/src/types/graph.ts @@ -11,3 +11,7 @@ export interface GraphSeriesXY { isVisible: boolean; yAxis: number; } + +export interface CreatePlotOverlay { + (element: JQuery, event: any, plot: { getOptions: () => { events: { manager: any } } }): any; +} diff --git a/packages/grafana-ui/src/types/logs.ts b/packages/grafana-ui/src/types/logs.ts index 3d8cc0951b834..c0b295c55aaf5 100644 --- a/packages/grafana-ui/src/types/logs.ts +++ b/packages/grafana-ui/src/types/logs.ts @@ -46,6 +46,7 @@ export interface LogRowModel { timeFromNow: string; timeEpochMs: number; timeLocal: string; + timeUtc: string; uniqueLabels?: Labels; } diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index 25f30ea29677c..5b62c34924219 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/packages/grafana-ui/src/types/panel.ts @@ -1,5 +1,5 @@ import { ComponentClass, ComponentType } from 'react'; -import { LoadingState, SeriesData } from './data'; +import { LoadingState, DataFrame } from './data'; import { TimeRange } from './time'; import { ScopedVars, DataQueryRequest, DataQueryError, LegacyResponseData } from './datasource'; import { PluginMeta, GrafanaPlugin } from './plugin'; @@ -14,7 +14,7 @@ export interface PanelPluginMeta extends PluginMeta { export interface PanelData { state: LoadingState; - series: SeriesData[]; + series: DataFrame[]; request?: DataQueryRequest; error?: DataQueryError; diff --git a/packages/grafana-ui/src/utils/csv.ts b/packages/grafana-ui/src/utils/csv.ts index 60acadc4f21e0..f1f4663d1c26e 100644 --- a/packages/grafana-ui/src/utils/csv.ts +++ b/packages/grafana-ui/src/utils/csv.ts @@ -4,8 +4,8 @@ import defaults from 'lodash/defaults'; import isNumber from 'lodash/isNumber'; // Types -import { SeriesData, Field, FieldType } from '../types/index'; -import { guessFieldTypeFromValue } from './processSeriesData'; +import { DataFrame, Field, FieldType } from '../types/index'; +import { guessFieldTypeFromValue } from './processDataFrame'; export enum CSVHeaderStyle { full, @@ -28,7 +28,7 @@ export interface CSVParseCallbacks { * This can return a modified table to force any * Column configurations */ - onHeader: (table: SeriesData) => void; + onHeader: (table: DataFrame) => void; // Called after each row is read and onRow: (row: any[]) => void; @@ -39,7 +39,7 @@ export interface CSVOptions { callback?: CSVParseCallbacks; } -export function readCSV(csv: string, options?: CSVOptions): SeriesData[] { +export function readCSV(csv: string, options?: CSVOptions): DataFrame[] { return new CSVReader(options).readCSV(csv); } @@ -56,9 +56,9 @@ export class CSVReader { callback?: CSVParseCallbacks; field: FieldParser[]; - series: SeriesData; + series: DataFrame; state: ParseState; - data: SeriesData[]; + data: DataFrame[]; constructor(options?: CSVOptions) { if (!options) { @@ -193,7 +193,7 @@ export class CSVReader { } }; - readCSV(text: string): SeriesData[] { + readCSV(text: string): DataFrame[] { this.data = [this.series]; const papacfg = { @@ -315,7 +315,7 @@ function getHeaderLine(key: string, fields: Field[], config: CSVConfig): string return ''; } -export function toCSV(data: SeriesData[], config?: CSVConfig): string { +export function toCSV(data: DataFrame[], config?: CSVConfig): string { if (!data) { return ''; } diff --git a/packages/grafana-ui/src/utils/fieldDisplay.ts b/packages/grafana-ui/src/utils/fieldDisplay.ts index b6f021bf2df85..4948df3240bb6 100644 --- a/packages/grafana-ui/src/utils/fieldDisplay.ts +++ b/packages/grafana-ui/src/utils/fieldDisplay.ts @@ -8,7 +8,7 @@ import { FieldType, NullValueMode, GrafanaTheme, - SeriesData, + DataFrame, InterpolateFunction, Field, ScopedVars, @@ -36,7 +36,7 @@ export const VAR_FIELD_NAME = '__field_name'; export const VAR_CALC = '__calc'; export const VAR_CELL_PREFIX = '__cell_'; // consistent with existing table templates -function getTitleTemplate(title: string | undefined, stats: string[], data?: SeriesData[]): string { +function getTitleTemplate(title: string | undefined, stats: string[], data?: DataFrame[]): string { // If the title exists, use it as a template variable if (title) { return title; @@ -72,7 +72,7 @@ export interface FieldDisplay { } export interface GetFieldDisplayValuesOptions { - data?: SeriesData[]; + data?: DataFrame[]; fieldOptions: FieldDisplayOptions; replaceVariables: InterpolateFunction; sparkline?: boolean; // Calculate the sparkline diff --git a/packages/grafana-ui/src/utils/fieldReducer.ts b/packages/grafana-ui/src/utils/fieldReducer.ts index 0b2e28fbb4cbc..dc0ef596e25e4 100644 --- a/packages/grafana-ui/src/utils/fieldReducer.ts +++ b/packages/grafana-ui/src/utils/fieldReducer.ts @@ -1,7 +1,7 @@ // Libraries import isNumber from 'lodash/isNumber'; -import { SeriesData, NullValueMode } from '../types/index'; +import { DataFrame, NullValueMode } from '../types/index'; export enum ReducerID { sum = 'sum', @@ -29,7 +29,7 @@ export interface FieldCalcs { } // Internal function -type FieldReducer = (data: SeriesData, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean) => FieldCalcs; +type FieldReducer = (data: DataFrame, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean) => FieldCalcs; export interface FieldReducerInfo { id: string; @@ -64,7 +64,7 @@ export function getFieldReducers(ids?: string[]): FieldReducerInfo[] { } interface ReduceFieldOptions { - series: SeriesData; + series: DataFrame; fieldIndex: number; reducers: string[]; // The stats to calculate nullValueMode?: NullValueMode; @@ -222,7 +222,7 @@ function getById(id: string): FieldReducerInfo | undefined { return index[id]; } -function doStandardCalcs(data: SeriesData, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs { +function doStandardCalcs(data: DataFrame, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs { const calcs = { sum: 0, max: -Number.MAX_VALUE, @@ -340,16 +340,16 @@ function doStandardCalcs(data: SeriesData, fieldIndex: number, ignoreNulls: bool return calcs; } -function calculateFirst(data: SeriesData, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs { +function calculateFirst(data: DataFrame, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs { return { first: data.rows[0][fieldIndex] }; } -function calculateLast(data: SeriesData, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs { +function calculateLast(data: DataFrame, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs { return { last: data.rows[data.rows.length - 1][fieldIndex] }; } function calculateChangeCount( - data: SeriesData, + data: DataFrame, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean @@ -378,7 +378,7 @@ function calculateChangeCount( } function calculateDistinctCount( - data: SeriesData, + data: DataFrame, fieldIndex: number, ignoreNulls: boolean, nullAsZero: boolean diff --git a/packages/grafana-ui/src/utils/flotPairs.ts b/packages/grafana-ui/src/utils/flotPairs.ts index 9eb50266f4e19..72792a94fd417 100644 --- a/packages/grafana-ui/src/utils/flotPairs.ts +++ b/packages/grafana-ui/src/utils/flotPairs.ts @@ -1,8 +1,8 @@ // Types -import { NullValueMode, GraphSeriesValue, SeriesData } from '../types/index'; +import { NullValueMode, GraphSeriesValue, DataFrame } from '../types/index'; export interface FlotPairsOptions { - series: SeriesData; + series: DataFrame; xIndex: number; yIndex: number; nullValueMode?: NullValueMode; diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts index fafbfd882f7f8..13542b1985ec2 100644 --- a/packages/grafana-ui/src/utils/index.ts +++ b/packages/grafana-ui/src/utils/index.ts @@ -1,4 +1,4 @@ -export * from './processSeriesData'; +export * from './processDataFrame'; export * from './valueFormats/valueFormats'; export * from './colors'; export * from './namedColorsPalette'; diff --git a/packages/grafana-ui/src/utils/logs.ts b/packages/grafana-ui/src/utils/logs.ts index b5c45b635daf1..e73ca589e7056 100644 --- a/packages/grafana-ui/src/utils/logs.ts +++ b/packages/grafana-ui/src/utils/logs.ts @@ -1,5 +1,5 @@ import { LogLevel } from '../types/logs'; -import { SeriesData, FieldType } from '../types/data'; +import { DataFrame, FieldType } from '../types/data'; /** * Returns the log level of a log line. @@ -32,7 +32,7 @@ export function getLogLevelFromKey(key: string): LogLevel { return LogLevel.unknown; } -export function addLogLevelToSeries(series: SeriesData, lineIndex: number): SeriesData { +export function addLogLevelToSeries(series: DataFrame, lineIndex: number): DataFrame { return { ...series, // Keeps Tags, RefID etc fields: [...series.fields, { name: 'LogLevel', type: FieldType.string }], diff --git a/packages/grafana-ui/src/utils/moment_wrapper.ts b/packages/grafana-ui/src/utils/moment_wrapper.ts index 014a6f06e616e..e77c2f41196fd 100644 --- a/packages/grafana-ui/src/utils/moment_wrapper.ts +++ b/packages/grafana-ui/src/utils/moment_wrapper.ts @@ -46,6 +46,7 @@ export interface DateTimeDuration { hours: () => number; minutes: () => number; seconds: () => number; + asSeconds: () => number; } export interface DateTime extends Object { @@ -68,6 +69,7 @@ export interface DateTime extends Object { valueOf: () => number; unix: () => number; utc: () => DateTime; + utcOffset: () => number; hour?: () => number; } diff --git a/packages/grafana-ui/src/utils/processSeriesData.test.ts b/packages/grafana-ui/src/utils/processDataFrame.test.ts similarity index 84% rename from packages/grafana-ui/src/utils/processSeriesData.test.ts rename to packages/grafana-ui/src/utils/processDataFrame.test.ts index ea582e89b3a80..d4885daa8fb5c 100644 --- a/packages/grafana-ui/src/utils/processSeriesData.test.ts +++ b/packages/grafana-ui/src/utils/processDataFrame.test.ts @@ -1,21 +1,21 @@ import { - isSeriesData, + isDataFrame, toLegacyResponseData, isTableData, - toSeriesData, + toDataFrame, guessFieldTypes, guessFieldTypeFromValue, -} from './processSeriesData'; -import { FieldType, TimeSeries, SeriesData, TableData } from '../types/data'; +} from './processDataFrame'; +import { FieldType, TimeSeries, DataFrame, TableData } from '../types/data'; import { dateTime } from './moment_wrapper'; -describe('toSeriesData', () => { +describe('toDataFrame', () => { it('converts timeseries to series', () => { const input1 = { target: 'Field Name', datapoints: [[100, 1], [200, 2]], }; - let series = toSeriesData(input1); + let series = toDataFrame(input1); expect(series.fields[0].name).toBe(input1.target); expect(series.rows).toBe(input1.datapoints); @@ -25,16 +25,16 @@ describe('toSeriesData', () => { target: '', datapoints: [[100, 1], [200, 2]], }; - series = toSeriesData(input2); + series = toDataFrame(input2); expect(series.fields[0].name).toEqual('Value'); }); - it('keeps seriesData unchanged', () => { + it('keeps dataFrame unchanged', () => { const input = { fields: [{ text: 'A' }, { text: 'B' }, { text: 'C' }], rows: [[100, 'A', 1], [200, 'B', 2], [300, 'C', 3]], }; - const series = toSeriesData(input); + const series = toDataFrame(input); expect(series).toBe(input); }); @@ -77,12 +77,12 @@ describe('SerisData backwards compatibility', () => { target: 'Field Name', datapoints: [[100, 1], [200, 2]], }; - const series = toSeriesData(timeseries); - expect(isSeriesData(timeseries)).toBeFalsy(); - expect(isSeriesData(series)).toBeTruthy(); + const series = toDataFrame(timeseries); + expect(isDataFrame(timeseries)).toBeFalsy(); + expect(isDataFrame(series)).toBeTruthy(); const roundtrip = toLegacyResponseData(series) as TimeSeries; - expect(isSeriesData(roundtrip)).toBeFalsy(); + expect(isDataFrame(roundtrip)).toBeFalsy(); expect(roundtrip.target).toBe(timeseries.target); }); @@ -91,17 +91,17 @@ describe('SerisData backwards compatibility', () => { columns: [{ text: 'a', unit: 'ms' }, { text: 'b', unit: 'zz' }, { text: 'c', unit: 'yy' }], rows: [[100, 1, 'a'], [200, 2, 'a']], }; - const series = toSeriesData(table); + const series = toDataFrame(table); expect(isTableData(table)).toBeTruthy(); - expect(isSeriesData(series)).toBeTruthy(); + expect(isDataFrame(series)).toBeTruthy(); const roundtrip = toLegacyResponseData(series) as TimeSeries; expect(isTableData(roundtrip)).toBeTruthy(); expect(roundtrip).toMatchObject(table); }); - it('converts SeriesData to TableData to series and back again', () => { - const series: SeriesData = { + it('converts DataFrame to TableData to series and back again', () => { + const series: DataFrame = { refId: 'Z', meta: { somethign: 8, diff --git a/packages/grafana-ui/src/utils/processSeriesData.ts b/packages/grafana-ui/src/utils/processDataFrame.ts similarity index 81% rename from packages/grafana-ui/src/utils/processSeriesData.ts rename to packages/grafana-ui/src/utils/processDataFrame.ts index 38e9abf913581..3772e0d33b6b2 100644 --- a/packages/grafana-ui/src/utils/processSeriesData.ts +++ b/packages/grafana-ui/src/utils/processDataFrame.ts @@ -4,10 +4,10 @@ import isString from 'lodash/isString'; import isBoolean from 'lodash/isBoolean'; // Types -import { SeriesData, Field, TimeSeries, FieldType, TableData, Column } from '../types/index'; +import { DataFrame, Field, TimeSeries, FieldType, TableData, Column } from '../types/index'; import { isDateTime } from './moment_wrapper'; -function convertTableToSeriesData(table: TableData): SeriesData { +function convertTableToDataFrame(table: TableData): DataFrame { return { // rename the 'text' to 'name' field fields: table.columns.map(c => { @@ -23,7 +23,7 @@ function convertTableToSeriesData(table: TableData): SeriesData { }; } -function convertTimeSeriesToSeriesData(timeSeries: TimeSeries): SeriesData { +function convertTimeSeriesToDataFrame(timeSeries: TimeSeries): DataFrame { return { name: timeSeries.target, fields: [ @@ -84,7 +84,7 @@ export function guessFieldTypeFromValue(v: any): FieldType { /** * Looks at the data to guess the column type. This ignores any existing setting */ -export function guessFieldTypeFromSeries(series: SeriesData, index: number): FieldType | undefined { +export function guessFieldTypeFromSeries(series: DataFrame, index: number): FieldType | undefined { const column = series.fields[index]; // 1. Use the column name to guess @@ -111,7 +111,7 @@ export function guessFieldTypeFromSeries(series: SeriesData, index: number): Fie * @returns a copy of the series with the best guess for each field type * If the series already has field types defined, they will be used */ -export const guessFieldTypes = (series: SeriesData): SeriesData => { +export const guessFieldTypes = (series: DataFrame): DataFrame => { for (let i = 0; i < series.fields.length; i++) { if (!series.fields[i].type) { // Somethign is missing a type return a modified copy @@ -134,26 +134,26 @@ export const guessFieldTypes = (series: SeriesData): SeriesData => { return series; }; -export const isTableData = (data: any): data is SeriesData => data && data.hasOwnProperty('columns'); +export const isTableData = (data: any): data is DataFrame => data && data.hasOwnProperty('columns'); -export const isSeriesData = (data: any): data is SeriesData => data && data.hasOwnProperty('fields'); +export const isDataFrame = (data: any): data is DataFrame => data && data.hasOwnProperty('fields'); -export const toSeriesData = (data: any): SeriesData => { +export const toDataFrame = (data: any): DataFrame => { if (data.hasOwnProperty('fields')) { - return data as SeriesData; + return data as DataFrame; } if (data.hasOwnProperty('datapoints')) { - return convertTimeSeriesToSeriesData(data); + return convertTimeSeriesToDataFrame(data); } if (data.hasOwnProperty('columns')) { - return convertTableToSeriesData(data); + return convertTableToDataFrame(data); } // TODO, try to convert JSON/Array to seriesta? console.warn('Can not convert', data); throw new Error('Unsupported data format'); }; -export const toLegacyResponseData = (series: SeriesData): TimeSeries | TableData => { +export const toLegacyResponseData = (series: DataFrame): TimeSeries | TableData => { const { fields, rows } = series; if (fields.length === 2) { @@ -182,7 +182,7 @@ export const toLegacyResponseData = (series: SeriesData): TimeSeries | TableData }; }; -export function sortSeriesData(data: SeriesData, sortIndex?: number, reverse = false): SeriesData { +export function sortDataFrame(data: DataFrame, sortIndex?: number, reverse = false): DataFrame { if (isNumber(sortIndex)) { const copy = { ...data, diff --git a/pkg/api/api.go b/pkg/api/api.go index 9f80f1cb4fbaa..27f68f90f0100 100644 --- a/pkg/api/api.go +++ b/pkg/api/api.go @@ -6,7 +6,7 @@ import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/api/routing" "github.com/grafana/grafana/pkg/middleware" - m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/models" ) func (hs *HTTPServer) registerRoutes() { @@ -105,7 +105,7 @@ func (hs *HTTPServer) registerRoutes() { r.Get("/dashboard/snapshots/", reqSignedIn, hs.Index) // api for dashboard snapshots - r.Post("/api/snapshots/", bind(m.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot) + r.Post("/api/snapshots/", bind(models.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot) r.Get("/api/snapshot/shared-options/", GetSharingOptions) r.Get("/api/snapshots/:key", GetDashboardSnapshot) r.Get("/api/snapshots-delete/:deleteKey", Wrap(DeleteDashboardSnapshotByDeleteKey)) @@ -120,7 +120,7 @@ func (hs *HTTPServer) registerRoutes() { // user (signed in) apiRoute.Group("/user", func(userRoute routing.RouteRegister) { userRoute.Get("/", Wrap(GetSignedInUser)) - userRoute.Put("/", bind(m.UpdateUserCommand{}), Wrap(UpdateSignedInUser)) + userRoute.Put("/", bind(models.UpdateUserCommand{}), Wrap(UpdateSignedInUser)) userRoute.Post("/using/:id", Wrap(UserSetUsingOrg)) userRoute.Get("/orgs", Wrap(GetSignedInUserOrgList)) userRoute.Get("/teams", Wrap(GetSignedInUserTeamList)) @@ -128,7 +128,7 @@ func (hs *HTTPServer) registerRoutes() { userRoute.Post("/stars/dashboard/:id", Wrap(StarDashboard)) userRoute.Delete("/stars/dashboard/:id", Wrap(UnstarDashboard)) - userRoute.Put("/password", bind(m.ChangeUserPasswordCommand{}), Wrap(ChangeUserPassword)) + userRoute.Put("/password", bind(models.ChangeUserPasswordCommand{}), Wrap(ChangeUserPassword)) userRoute.Get("/quotas", Wrap(GetUserQuotas)) userRoute.Put("/helpflags/:id", Wrap(SetHelpFlag)) // For dev purpose @@ -138,7 +138,7 @@ func (hs *HTTPServer) registerRoutes() { userRoute.Put("/preferences", bind(dtos.UpdatePrefsCmd{}), Wrap(UpdateUserPreferences)) userRoute.Get("/auth-tokens", Wrap(hs.GetUserAuthTokens)) - userRoute.Post("/revoke-auth-token", bind(m.RevokeAuthTokenCmd{}), Wrap(hs.RevokeUserAuthToken)) + userRoute.Post("/revoke-auth-token", bind(models.RevokeAuthTokenCmd{}), Wrap(hs.RevokeUserAuthToken)) }) // users (admin permission required) @@ -150,18 +150,18 @@ func (hs *HTTPServer) registerRoutes() { usersRoute.Get("/:id/orgs", Wrap(GetUserOrgList)) // query parameters /users/lookup?loginOrEmail=admin@example.com usersRoute.Get("/lookup", Wrap(GetUserByLoginOrEmail)) - usersRoute.Put("/:id", bind(m.UpdateUserCommand{}), Wrap(UpdateUser)) + usersRoute.Put("/:id", bind(models.UpdateUserCommand{}), Wrap(UpdateUser)) usersRoute.Post("/:id/using/:orgId", Wrap(UpdateUserActiveOrg)) }, reqGrafanaAdmin) // team (admin permission required) apiRoute.Group("/teams", func(teamsRoute routing.RouteRegister) { - teamsRoute.Post("/", bind(m.CreateTeamCommand{}), Wrap(hs.CreateTeam)) - teamsRoute.Put("/:teamId", bind(m.UpdateTeamCommand{}), Wrap(hs.UpdateTeam)) + teamsRoute.Post("/", bind(models.CreateTeamCommand{}), Wrap(hs.CreateTeam)) + teamsRoute.Put("/:teamId", bind(models.UpdateTeamCommand{}), Wrap(hs.UpdateTeam)) teamsRoute.Delete("/:teamId", Wrap(hs.DeleteTeamByID)) teamsRoute.Get("/:teamId/members", Wrap(GetTeamMembers)) - teamsRoute.Post("/:teamId/members", bind(m.AddTeamMemberCommand{}), Wrap(hs.AddTeamMember)) - teamsRoute.Put("/:teamId/members/:userId", bind(m.UpdateTeamMemberCommand{}), Wrap(hs.UpdateTeamMember)) + teamsRoute.Post("/:teamId/members", bind(models.AddTeamMemberCommand{}), Wrap(hs.AddTeamMember)) + teamsRoute.Put("/:teamId/members/:userId", bind(models.UpdateTeamMemberCommand{}), Wrap(hs.UpdateTeamMember)) teamsRoute.Delete("/:teamId/members/:userId", Wrap(hs.RemoveTeamMember)) teamsRoute.Get("/:teamId/preferences", Wrap(hs.GetTeamPreferences)) teamsRoute.Put("/:teamId/preferences", bind(dtos.UpdatePrefsCmd{}), Wrap(hs.UpdateTeamPreferences)) @@ -183,8 +183,8 @@ func (hs *HTTPServer) registerRoutes() { apiRoute.Group("/org", func(orgRoute routing.RouteRegister) { orgRoute.Put("/", bind(dtos.UpdateOrgForm{}), Wrap(UpdateOrgCurrent)) orgRoute.Put("/address", bind(dtos.UpdateOrgAddressForm{}), Wrap(UpdateOrgAddressCurrent)) - orgRoute.Post("/users", quota("user"), bind(m.AddOrgUserCommand{}), Wrap(AddOrgUserToCurrentOrg)) - orgRoute.Patch("/users/:userId", bind(m.UpdateOrgUserCommand{}), Wrap(UpdateOrgUserForCurrentOrg)) + orgRoute.Post("/users", quota("user"), bind(models.AddOrgUserCommand{}), Wrap(AddOrgUserToCurrentOrg)) + orgRoute.Patch("/users/:userId", bind(models.UpdateOrgUserCommand{}), Wrap(UpdateOrgUserForCurrentOrg)) orgRoute.Delete("/users/:userId", Wrap(RemoveOrgUserForCurrentOrg)) // invites @@ -203,7 +203,7 @@ func (hs *HTTPServer) registerRoutes() { }) // create new org - apiRoute.Post("/orgs", quota("org"), bind(m.CreateOrgCommand{}), Wrap(CreateOrg)) + apiRoute.Post("/orgs", quota("org"), bind(models.CreateOrgCommand{}), Wrap(CreateOrg)) // search all orgs apiRoute.Get("/orgs", reqGrafanaAdmin, Wrap(SearchOrgs)) @@ -215,11 +215,11 @@ func (hs *HTTPServer) registerRoutes() { orgsRoute.Put("/address", bind(dtos.UpdateOrgAddressForm{}), Wrap(UpdateOrgAddress)) orgsRoute.Delete("/", Wrap(DeleteOrgByID)) orgsRoute.Get("/users", Wrap(GetOrgUsers)) - orgsRoute.Post("/users", bind(m.AddOrgUserCommand{}), Wrap(AddOrgUser)) - orgsRoute.Patch("/users/:userId", bind(m.UpdateOrgUserCommand{}), Wrap(UpdateOrgUser)) + orgsRoute.Post("/users", bind(models.AddOrgUserCommand{}), Wrap(AddOrgUser)) + orgsRoute.Patch("/users/:userId", bind(models.UpdateOrgUserCommand{}), Wrap(UpdateOrgUser)) orgsRoute.Delete("/users/:userId", Wrap(RemoveOrgUser)) orgsRoute.Get("/quotas", Wrap(GetOrgQuotas)) - orgsRoute.Put("/quotas/:target", bind(m.UpdateOrgQuotaCmd{}), Wrap(UpdateOrgQuota)) + orgsRoute.Put("/quotas/:target", bind(models.UpdateOrgQuotaCmd{}), Wrap(UpdateOrgQuota)) }, reqGrafanaAdmin) // orgs (admin routes) @@ -230,20 +230,20 @@ func (hs *HTTPServer) registerRoutes() { // auth api keys apiRoute.Group("/auth/keys", func(keysRoute routing.RouteRegister) { keysRoute.Get("/", Wrap(GetAPIKeys)) - keysRoute.Post("/", quota("api_key"), bind(m.AddApiKeyCommand{}), Wrap(AddAPIKey)) + keysRoute.Post("/", quota("api_key"), bind(models.AddApiKeyCommand{}), Wrap(hs.AddAPIKey)) keysRoute.Delete("/:id", Wrap(DeleteAPIKey)) }, reqOrgAdmin) // Preferences apiRoute.Group("/preferences", func(prefRoute routing.RouteRegister) { - prefRoute.Post("/set-home-dash", bind(m.SavePreferencesCommand{}), Wrap(SetHomeDashboard)) + prefRoute.Post("/set-home-dash", bind(models.SavePreferencesCommand{}), Wrap(SetHomeDashboard)) }) // Data sources apiRoute.Group("/datasources", func(datasourceRoute routing.RouteRegister) { datasourceRoute.Get("/", Wrap(GetDataSources)) - datasourceRoute.Post("/", quota("data_source"), bind(m.AddDataSourceCommand{}), Wrap(AddDataSource)) - datasourceRoute.Put("/:id", bind(m.UpdateDataSourceCommand{}), Wrap(UpdateDataSource)) + datasourceRoute.Post("/", quota("data_source"), bind(models.AddDataSourceCommand{}), Wrap(AddDataSource)) + datasourceRoute.Put("/:id", bind(models.UpdateDataSourceCommand{}), Wrap(UpdateDataSource)) datasourceRoute.Delete("/:id", Wrap(DeleteDataSourceById)) datasourceRoute.Delete("/name/:name", Wrap(DeleteDataSourceByName)) datasourceRoute.Get("/:id", Wrap(GetDataSourceById)) @@ -258,7 +258,7 @@ func (hs *HTTPServer) registerRoutes() { apiRoute.Group("/plugins", func(pluginRoute routing.RouteRegister) { pluginRoute.Get("/:pluginId/dashboards/", Wrap(GetPluginDashboards)) - pluginRoute.Post("/:pluginId/settings", bind(m.UpdatePluginSettingCmd{}), Wrap(UpdatePluginSetting)) + pluginRoute.Post("/:pluginId/settings", bind(models.UpdatePluginSettingCmd{}), Wrap(UpdatePluginSetting)) }, reqOrgAdmin) apiRoute.Get("/frontend/settings/", hs.GetFrontendSettings) @@ -269,11 +269,11 @@ func (hs *HTTPServer) registerRoutes() { apiRoute.Group("/folders", func(folderRoute routing.RouteRegister) { folderRoute.Get("/", Wrap(GetFolders)) folderRoute.Get("/id/:id", Wrap(GetFolderByID)) - folderRoute.Post("/", bind(m.CreateFolderCommand{}), Wrap(hs.CreateFolder)) + folderRoute.Post("/", bind(models.CreateFolderCommand{}), Wrap(hs.CreateFolder)) folderRoute.Group("/:uid", func(folderUidRoute routing.RouteRegister) { folderUidRoute.Get("/", Wrap(GetFolderByUID)) - folderUidRoute.Put("/", bind(m.UpdateFolderCommand{}), Wrap(UpdateFolder)) + folderUidRoute.Put("/", bind(models.UpdateFolderCommand{}), Wrap(UpdateFolder)) folderUidRoute.Delete("/", Wrap(DeleteFolder)) folderUidRoute.Group("/permissions", func(folderPermissionRoute routing.RouteRegister) { @@ -293,7 +293,7 @@ func (hs *HTTPServer) registerRoutes() { dashboardRoute.Post("/calculate-diff", bind(dtos.CalculateDiffOptions{}), Wrap(CalculateDashboardDiff)) - dashboardRoute.Post("/db", bind(m.SaveDashboardCommand{}), Wrap(hs.PostDashboard)) + dashboardRoute.Post("/db", bind(models.SaveDashboardCommand{}), Wrap(hs.PostDashboard)) dashboardRoute.Get("/home", Wrap(GetHomeDashboard)) dashboardRoute.Get("/tags", GetDashboardTags) dashboardRoute.Post("/import", bind(dtos.ImportDashboardCommand{}), Wrap(ImportDashboard)) @@ -322,8 +322,8 @@ func (hs *HTTPServer) registerRoutes() { playlistRoute.Get("/:id/items", ValidateOrgPlaylist, Wrap(GetPlaylistItems)) playlistRoute.Get("/:id/dashboards", ValidateOrgPlaylist, Wrap(GetPlaylistDashboards)) playlistRoute.Delete("/:id", reqEditorRole, ValidateOrgPlaylist, Wrap(DeletePlaylist)) - playlistRoute.Put("/:id", reqEditorRole, bind(m.UpdatePlaylistCommand{}), ValidateOrgPlaylist, Wrap(UpdatePlaylist)) - playlistRoute.Post("/", reqEditorRole, bind(m.CreatePlaylistCommand{}), Wrap(CreatePlaylist)) + playlistRoute.Put("/:id", reqEditorRole, bind(models.UpdatePlaylistCommand{}), ValidateOrgPlaylist, Wrap(UpdatePlaylist)) + playlistRoute.Post("/", reqEditorRole, bind(models.CreatePlaylistCommand{}), Wrap(CreatePlaylist)) }) // Search @@ -348,12 +348,12 @@ func (hs *HTTPServer) registerRoutes() { apiRoute.Group("/alert-notifications", func(alertNotifications routing.RouteRegister) { alertNotifications.Post("/test", bind(dtos.NotificationTestCommand{}), Wrap(NotificationTest)) - alertNotifications.Post("/", bind(m.CreateAlertNotificationCommand{}), Wrap(CreateAlertNotification)) - alertNotifications.Put("/:notificationId", bind(m.UpdateAlertNotificationCommand{}), Wrap(UpdateAlertNotification)) + alertNotifications.Post("/", bind(models.CreateAlertNotificationCommand{}), Wrap(CreateAlertNotification)) + alertNotifications.Put("/:notificationId", bind(models.UpdateAlertNotificationCommand{}), Wrap(UpdateAlertNotification)) alertNotifications.Get("/:notificationId", Wrap(GetAlertNotificationByID)) alertNotifications.Delete("/:notificationId", Wrap(DeleteAlertNotification)) alertNotifications.Get("/uid/:uid", Wrap(GetAlertNotificationByUID)) - alertNotifications.Put("/uid/:uid", bind(m.UpdateAlertNotificationWithUidCommand{}), Wrap(UpdateAlertNotificationByUID)) + alertNotifications.Put("/uid/:uid", bind(models.UpdateAlertNotificationWithUidCommand{}), Wrap(UpdateAlertNotificationByUID)) alertNotifications.Delete("/uid/:uid", Wrap(DeleteAlertNotificationByUID)) }, reqEditorRole) @@ -384,13 +384,13 @@ func (hs *HTTPServer) registerRoutes() { adminRoute.Post("/users/:id/disable", Wrap(hs.AdminDisableUser)) adminRoute.Post("/users/:id/enable", Wrap(AdminEnableUser)) adminRoute.Get("/users/:id/quotas", Wrap(GetUserQuotas)) - adminRoute.Put("/users/:id/quotas/:target", bind(m.UpdateUserQuotaCmd{}), Wrap(UpdateUserQuota)) + adminRoute.Put("/users/:id/quotas/:target", bind(models.UpdateUserQuotaCmd{}), Wrap(UpdateUserQuota)) adminRoute.Get("/stats", AdminGetStats) adminRoute.Post("/pause-all-alerts", bind(dtos.PauseAllAlertsCommand{}), Wrap(PauseAllAlerts)) adminRoute.Post("/users/:id/logout", Wrap(hs.AdminLogoutUser)) adminRoute.Get("/users/:id/auth-tokens", Wrap(hs.AdminGetUserAuthTokens)) - adminRoute.Post("/users/:id/revoke-auth-token", bind(m.RevokeAuthTokenCmd{}), Wrap(hs.AdminRevokeUserAuthToken)) + adminRoute.Post("/users/:id/revoke-auth-token", bind(models.RevokeAuthTokenCmd{}), Wrap(hs.AdminRevokeUserAuthToken)) adminRoute.Post("/provisioning/dashboards/reload", Wrap(hs.AdminProvisioningReloadDasboards)) adminRoute.Post("/provisioning/datasources/reload", Wrap(hs.AdminProvisioningReloadDatasources)) diff --git a/pkg/api/apikey.go b/pkg/api/apikey.go index 7fda738f1cd51..d194429906f60 100644 --- a/pkg/api/apikey.go +++ b/pkg/api/apikey.go @@ -4,32 +4,39 @@ import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/components/apikeygen" - m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/models" + "time" ) -func GetAPIKeys(c *m.ReqContext) Response { - query := m.GetApiKeysQuery{OrgId: c.OrgId} +func GetAPIKeys(c *models.ReqContext) Response { + query := models.GetApiKeysQuery{OrgId: c.OrgId} if err := bus.Dispatch(&query); err != nil { return Error(500, "Failed to list api keys", err) } - result := make([]*m.ApiKeyDTO, len(query.Result)) + result := make([]*models.ApiKeyDTO, len(query.Result)) for i, t := range query.Result { - result[i] = &m.ApiKeyDTO{ - Id: t.Id, - Name: t.Name, - Role: t.Role, + var expiration *time.Time = nil + if t.Expires != nil { + v := time.Unix(*t.Expires, 0) + expiration = &v + } + result[i] = &models.ApiKeyDTO{ + Id: t.Id, + Name: t.Name, + Role: t.Role, + Expiration: expiration, } } return JSON(200, result) } -func DeleteAPIKey(c *m.ReqContext) Response { +func DeleteAPIKey(c *models.ReqContext) Response { id := c.ParamsInt64(":id") - cmd := &m.DeleteApiKeyCommand{Id: id, OrgId: c.OrgId} + cmd := &models.DeleteApiKeyCommand{Id: id, OrgId: c.OrgId} err := bus.Dispatch(cmd) if err != nil { @@ -39,17 +46,28 @@ func DeleteAPIKey(c *m.ReqContext) Response { return Success("API key deleted") } -func AddAPIKey(c *m.ReqContext, cmd m.AddApiKeyCommand) Response { +func (hs *HTTPServer) AddAPIKey(c *models.ReqContext, cmd models.AddApiKeyCommand) Response { if !cmd.Role.IsValid() { return Error(400, "Invalid role specified", nil) } + if hs.Cfg.ApiKeyMaxSecondsToLive != -1 { + if cmd.SecondsToLive == 0 { + return Error(400, "Number of seconds before expiration should be set", nil) + } + if cmd.SecondsToLive > hs.Cfg.ApiKeyMaxSecondsToLive { + return Error(400, "Number of seconds before expiration is greater than the global limit", nil) + } + } cmd.OrgId = c.OrgId newKeyInfo := apikeygen.New(cmd.OrgId, cmd.Name) cmd.Key = newKeyInfo.HashedKey if err := bus.Dispatch(&cmd); err != nil { + if err == models.ErrInvalidApiKeyExpiration { + return Error(400, err.Error(), nil) + } return Error(500, "Failed to add API key", err) } diff --git a/pkg/api/login_oauth.go b/pkg/api/login_oauth.go index 8c5ca6fc7d1d2..9c4bdf5d85e3d 100644 --- a/pkg/api/login_oauth.go +++ b/pkg/api/login_oauth.go @@ -171,6 +171,7 @@ func (hs *HTTPServer) OAuthLogin(ctx *m.ReqContext) { Login: userInfo.Login, Email: userInfo.Email, OrgRoles: map[int64]m.RoleType{}, + Groups: userInfo.Groups, } if userInfo.Role != "" { diff --git a/pkg/login/auth.go b/pkg/login/auth.go index ca5b572deb835..19232e5f4410b 100644 --- a/pkg/login/auth.go +++ b/pkg/login/auth.go @@ -10,15 +10,12 @@ import ( var ( ErrEmailNotAllowed = errors.New("Required email domain not fulfilled") - ErrNoLDAPServers = errors.New("No LDAP servers are configured") ErrInvalidCredentials = errors.New("Invalid Username or Password") ErrNoEmail = errors.New("Login provider didn't return an email address") ErrProviderDeniedRequest = errors.New("Login provider denied login request") ErrSignUpNotAllowed = errors.New("Signup is not allowed for this adapter") ErrTooManyLoginAttempts = errors.New("Too many consecutive incorrect login attempts for user. Login for user temporarily blocked") ErrPasswordEmpty = errors.New("No password provided") - ErrUsersQuotaReached = errors.New("Users quota reached") - ErrGettingUserQuota = errors.New("Error getting user quota") ErrUserDisabled = errors.New("User is disabled") ) diff --git a/pkg/login/social/github_oauth.go b/pkg/login/social/github_oauth.go index b07f112b8d385..abd47fcb25734 100644 --- a/pkg/login/social/github_oauth.go +++ b/pkg/login/social/github_oauth.go @@ -2,6 +2,7 @@ package social import ( "encoding/json" + "errors" "fmt" "net/http" "regexp" @@ -20,6 +21,15 @@ type SocialGithub struct { teamIds []int } +type GithubTeam struct { + Id int `json:"id"` + Slug string `json:"slug"` + URL string `json:"html_url"` + Organization struct { + Login string `json:"login"` + } `json:"organization"` +} + var ( ErrMissingTeamMembership = &Error{"User not a member of one of the required teams"} ErrMissingOrganizationMembership = &Error{"User not a member of one of the required organizations"} @@ -48,8 +58,8 @@ func (s *SocialGithub) IsTeamMember(client *http.Client) bool { } for _, teamId := range s.teamIds { - for _, membershipId := range teamMemberships { - if teamId == membershipId { + for _, membership := range teamMemberships { + if teamId == membership.Id { return true } } @@ -108,14 +118,10 @@ func (s *SocialGithub) FetchPrivateEmail(client *http.Client) (string, error) { return email, nil } -func (s *SocialGithub) FetchTeamMemberships(client *http.Client) ([]int, error) { - type Record struct { - Id int `json:"id"` - } - +func (s *SocialGithub) FetchTeamMemberships(client *http.Client) ([]GithubTeam, error) { url := fmt.Sprintf(s.apiUrl + "/teams?per_page=100") hasMore := true - ids := make([]int, 0) + teams := make([]GithubTeam, 0) for hasMore { @@ -124,27 +130,19 @@ func (s *SocialGithub) FetchTeamMemberships(client *http.Client) ([]int, error) return nil, fmt.Errorf("Error getting team memberships: %s", err) } - var records []Record + var records []GithubTeam err = json.Unmarshal(response.Body, &records) if err != nil { return nil, fmt.Errorf("Error getting team memberships: %s", err) } - newRecords := len(records) - existingRecords := len(ids) - tempIds := make([]int, (newRecords + existingRecords)) - copy(tempIds, ids) - ids = tempIds - - for i, record := range records { - ids[i] = record.Id - } + teams = append(teams, records...) url, hasMore = s.HasMoreRecords(response.Headers) } - return ids, nil + return teams, nil } func (s *SocialGithub) HasMoreRecords(headers http.Header) (string, bool) { @@ -210,11 +208,19 @@ func (s *SocialGithub) UserInfo(client *http.Client, token *oauth2.Token) (*Basi return nil, fmt.Errorf("Error getting user info: %s", err) } + teamMemberships, err := s.FetchTeamMemberships(client) + if err != nil { + return nil, fmt.Errorf("Error getting user teams: %s", err) + } + + teams := convertToGroupList(teamMemberships) + userInfo := &BasicUserInfo{ - Name: data.Login, - Login: data.Login, - Id: fmt.Sprintf("%d", data.Id), - Email: data.Email, + Name: data.Login, + Login: data.Login, + Id: fmt.Sprintf("%d", data.Id), + Email: data.Email, + Groups: teams, } organizationsUrl := fmt.Sprintf(s.apiUrl + "/orgs") @@ -236,3 +242,26 @@ func (s *SocialGithub) UserInfo(client *http.Client, token *oauth2.Token) (*Basi return userInfo, nil } + +func (t *GithubTeam) GetShorthand() (string, error) { + if t.Organization.Login == "" || t.Slug == "" { + return "", errors.New("Error getting team shorthand") + } + return fmt.Sprintf("@%s/%s", t.Organization.Login, t.Slug), nil +} + +func convertToGroupList(t []GithubTeam) []string { + groups := make([]string, 0) + for _, team := range t { + // Group shouldn't be empty string, otherwise team sync will not work properly + if team.URL != "" { + groups = append(groups, team.URL) + } + teamShorthand, _ := team.GetShorthand() + if teamShorthand != "" { + groups = append(groups, teamShorthand) + } + } + + return groups +} diff --git a/pkg/login/social/social.go b/pkg/login/social/social.go index 46192ba861e07..d2837f8d2f038 100644 --- a/pkg/login/social/social.go +++ b/pkg/login/social/social.go @@ -20,6 +20,7 @@ type BasicUserInfo struct { Login string Company string Role string + Groups []string } type SocialConnector interface { diff --git a/pkg/middleware/auth_proxy/auth_proxy.go b/pkg/middleware/auth_proxy/auth_proxy.go index 94cb954291ba2..ff19627ecbb15 100644 --- a/pkg/middleware/auth_proxy/auth_proxy.go +++ b/pkg/middleware/auth_proxy/auth_proxy.go @@ -14,6 +14,7 @@ import ( "github.com/grafana/grafana/pkg/services/ldap" "github.com/grafana/grafana/pkg/services/multildap" "github.com/grafana/grafana/pkg/setting" + "github.com/grafana/grafana/pkg/util" ) const ( @@ -246,19 +247,23 @@ func (auth *AuthProxy) LoginViaHeader() (int64, error) { return 0, newError("Auth proxy header property invalid", nil) } - for _, field := range []string{"Name", "Email", "Login"} { + for _, field := range []string{"Name", "Email", "Login", "Groups"} { if auth.headers[field] == "" { continue } if val := auth.ctx.Req.Header.Get(auth.headers[field]); val != "" { - reflect.ValueOf(extUser).Elem().FieldByName(field).SetString(val) + if field == "Groups" { + extUser.Groups = util.SplitString(val) + } else { + reflect.ValueOf(extUser).Elem().FieldByName(field).SetString(val) + } } } upsert := &models.UpsertUserCommand{ ReqContext: auth.ctx, - SignupAllowed: true, + SignupAllowed: setting.AuthProxyAutoSignUp, ExternalUser: extUser, } err := bus.Dispatch(upsert) diff --git a/pkg/middleware/middleware.go b/pkg/middleware/middleware.go index 6b71d75f6e035..49ec9f54b2ade 100644 --- a/pkg/middleware/middleware.go +++ b/pkg/middleware/middleware.go @@ -14,26 +14,28 @@ import ( "github.com/grafana/grafana/pkg/components/apikeygen" "github.com/grafana/grafana/pkg/infra/log" "github.com/grafana/grafana/pkg/infra/remotecache" - m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/setting" "github.com/grafana/grafana/pkg/util" ) +var getTime = time.Now + var ( ReqGrafanaAdmin = Auth(&AuthOptions{ReqSignedIn: true, ReqGrafanaAdmin: true}) ReqSignedIn = Auth(&AuthOptions{ReqSignedIn: true}) - ReqEditorRole = RoleAuth(m.ROLE_EDITOR, m.ROLE_ADMIN) - ReqOrgAdmin = RoleAuth(m.ROLE_ADMIN) + ReqEditorRole = RoleAuth(models.ROLE_EDITOR, models.ROLE_ADMIN) + ReqOrgAdmin = RoleAuth(models.ROLE_ADMIN) ) func GetContextHandler( - ats m.UserTokenService, + ats models.UserTokenService, remoteCache *remotecache.RemoteCache, ) macaron.Handler { return func(c *macaron.Context) { - ctx := &m.ReqContext{ + ctx := &models.ReqContext{ Context: c, - SignedInUser: &m.SignedInUser{}, + SignedInUser: &models.SignedInUser{}, IsSignedIn: false, AllowAnonymous: false, SkipCache: false, @@ -68,19 +70,19 @@ func GetContextHandler( // update last seen every 5min if ctx.ShouldUpdateLastSeenAt() { ctx.Logger.Debug("Updating last user_seen_at", "user_id", ctx.UserId) - if err := bus.Dispatch(&m.UpdateUserLastSeenAtCommand{UserId: ctx.UserId}); err != nil { + if err := bus.Dispatch(&models.UpdateUserLastSeenAtCommand{UserId: ctx.UserId}); err != nil { ctx.Logger.Error("Failed to update last_seen_at", "error", err) } } } } -func initContextWithAnonymousUser(ctx *m.ReqContext) bool { +func initContextWithAnonymousUser(ctx *models.ReqContext) bool { if !setting.AnonymousEnabled { return false } - orgQuery := m.GetOrgByNameQuery{Name: setting.AnonymousOrgName} + orgQuery := models.GetOrgByNameQuery{Name: setting.AnonymousOrgName} if err := bus.Dispatch(&orgQuery); err != nil { log.Error(3, "Anonymous access organization error: '%s': %s", setting.AnonymousOrgName, err) return false @@ -88,14 +90,14 @@ func initContextWithAnonymousUser(ctx *m.ReqContext) bool { ctx.IsSignedIn = false ctx.AllowAnonymous = true - ctx.SignedInUser = &m.SignedInUser{IsAnonymous: true} - ctx.OrgRole = m.RoleType(setting.AnonymousOrgRole) + ctx.SignedInUser = &models.SignedInUser{IsAnonymous: true} + ctx.OrgRole = models.RoleType(setting.AnonymousOrgRole) ctx.OrgId = orgQuery.Result.Id ctx.OrgName = orgQuery.Result.Name return true } -func initContextWithApiKey(ctx *m.ReqContext) bool { +func initContextWithApiKey(ctx *models.ReqContext) bool { var keyString string if keyString = getApiKey(ctx); keyString == "" { return false @@ -109,7 +111,7 @@ func initContextWithApiKey(ctx *m.ReqContext) bool { } // fetch key - keyQuery := m.GetApiKeyByNameQuery{KeyName: decoded.Name, OrgId: decoded.OrgId} + keyQuery := models.GetApiKeyByNameQuery{KeyName: decoded.Name, OrgId: decoded.OrgId} if err := bus.Dispatch(&keyQuery); err != nil { ctx.JsonApiErr(401, "Invalid API key", err) return true @@ -123,15 +125,21 @@ func initContextWithApiKey(ctx *m.ReqContext) bool { return true } + // check for expiration + if apikey.Expires != nil && *apikey.Expires <= getTime().Unix() { + ctx.JsonApiErr(401, "Expired API key", err) + return true + } + ctx.IsSignedIn = true - ctx.SignedInUser = &m.SignedInUser{} + ctx.SignedInUser = &models.SignedInUser{} ctx.OrgRole = apikey.Role ctx.ApiKeyId = apikey.Id ctx.OrgId = apikey.OrgId return true } -func initContextWithBasicAuth(ctx *m.ReqContext, orgId int64) bool { +func initContextWithBasicAuth(ctx *models.ReqContext, orgId int64) bool { if !setting.BasicAuthEnabled { return false @@ -148,7 +156,7 @@ func initContextWithBasicAuth(ctx *m.ReqContext, orgId int64) bool { return true } - loginQuery := m.GetUserByLoginQuery{LoginOrEmail: username} + loginQuery := models.GetUserByLoginQuery{LoginOrEmail: username} if err := bus.Dispatch(&loginQuery); err != nil { ctx.JsonApiErr(401, "Basic auth failed", err) return true @@ -156,13 +164,13 @@ func initContextWithBasicAuth(ctx *m.ReqContext, orgId int64) bool { user := loginQuery.Result - loginUserQuery := m.LoginUserQuery{Username: username, Password: password, User: user} + loginUserQuery := models.LoginUserQuery{Username: username, Password: password, User: user} if err := bus.Dispatch(&loginUserQuery); err != nil { ctx.JsonApiErr(401, "Invalid username or password", err) return true } - query := m.GetSignedInUserQuery{UserId: user.Id, OrgId: orgId} + query := models.GetSignedInUserQuery{UserId: user.Id, OrgId: orgId} if err := bus.Dispatch(&query); err != nil { ctx.JsonApiErr(401, "Authentication error", err) return true @@ -173,7 +181,7 @@ func initContextWithBasicAuth(ctx *m.ReqContext, orgId int64) bool { return true } -func initContextWithToken(authTokenService m.UserTokenService, ctx *m.ReqContext, orgID int64) bool { +func initContextWithToken(authTokenService models.UserTokenService, ctx *models.ReqContext, orgID int64) bool { rawToken := ctx.GetCookie(setting.LoginCookieName) if rawToken == "" { return false @@ -186,7 +194,7 @@ func initContextWithToken(authTokenService m.UserTokenService, ctx *m.ReqContext return false } - query := m.GetSignedInUserQuery{UserId: token.UserId, OrgId: orgID} + query := models.GetSignedInUserQuery{UserId: token.UserId, OrgId: orgID} if err := bus.Dispatch(&query); err != nil { ctx.Logger.Error("failed to get user with id", "userId", token.UserId, "error", err) return false @@ -209,7 +217,7 @@ func initContextWithToken(authTokenService m.UserTokenService, ctx *m.ReqContext return true } -func WriteSessionCookie(ctx *m.ReqContext, value string, maxLifetimeDays int) { +func WriteSessionCookie(ctx *models.ReqContext, value string, maxLifetimeDays int) { if setting.Env == setting.DEV { ctx.Logger.Info("new token", "unhashed token", value) } diff --git a/pkg/middleware/middleware_test.go b/pkg/middleware/middleware_test.go index e3687f6057d8a..45811586ebb31 100644 --- a/pkg/middleware/middleware_test.go +++ b/pkg/middleware/middleware_test.go @@ -13,14 +13,29 @@ import ( "github.com/grafana/grafana/pkg/api/dtos" "github.com/grafana/grafana/pkg/bus" "github.com/grafana/grafana/pkg/infra/remotecache" - m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/services/auth" + "github.com/grafana/grafana/pkg/services/login" "github.com/grafana/grafana/pkg/setting" "github.com/grafana/grafana/pkg/util" . "github.com/smartystreets/goconvey/convey" + "github.com/stretchr/testify/assert" "gopkg.in/macaron.v1" ) +func mockGetTime() { + var timeSeed int64 + getTime = func() time.Time { + fakeNow := time.Unix(timeSeed, 0) + timeSeed++ + return fakeNow + } +} + +func resetGetTime() { + getTime = time.Now +} + func TestMiddleWareSecurityHeaders(t *testing.T) { setting.ERR_TEMPLATE_NAME = "error-template" @@ -83,7 +98,7 @@ func TestMiddlewareContext(t *testing.T) { }) middlewareScenario(t, "middleware should add Cache-Control header for requests with html response", func(sc *scenarioContext) { - sc.handler(func(c *m.ReqContext) { + sc.handler(func(c *models.ReqContext) { data := &dtos.IndexViewData{ User: &dtos.CurrentUser{}, Settings: map[string]interface{}{}, @@ -125,20 +140,20 @@ func TestMiddlewareContext(t *testing.T) { middlewareScenario(t, "Using basic auth", func(sc *scenarioContext) { - bus.AddHandler("test", func(query *m.GetUserByLoginQuery) error { - query.Result = &m.User{ + bus.AddHandler("test", func(query *models.GetUserByLoginQuery) error { + query.Result = &models.User{ Password: util.EncodePassword("myPass", "salt"), Salt: "salt", } return nil }) - bus.AddHandler("test", func(loginUserQuery *m.LoginUserQuery) error { + bus.AddHandler("test", func(loginUserQuery *models.LoginUserQuery) error { return nil }) - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { - query.Result = &m.SignedInUser{OrgId: 2, UserId: 12} + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { + query.Result = &models.SignedInUser{OrgId: 2, UserId: 12} return nil }) @@ -156,8 +171,8 @@ func TestMiddlewareContext(t *testing.T) { middlewareScenario(t, "Valid api key", func(sc *scenarioContext) { keyhash := util.EncodePassword("v5nAwpMafFP6znaS4urhdWDLS5511M42", "asd") - bus.AddHandler("test", func(query *m.GetApiKeyByNameQuery) error { - query.Result = &m.ApiKey{OrgId: 12, Role: m.ROLE_EDITOR, Key: keyhash} + bus.AddHandler("test", func(query *models.GetApiKeyByNameQuery) error { + query.Result = &models.ApiKey{OrgId: 12, Role: models.ROLE_EDITOR, Key: keyhash} return nil }) @@ -170,15 +185,15 @@ func TestMiddlewareContext(t *testing.T) { Convey("Should init middleware context", func() { So(sc.context.IsSignedIn, ShouldEqual, true) So(sc.context.OrgId, ShouldEqual, 12) - So(sc.context.OrgRole, ShouldEqual, m.ROLE_EDITOR) + So(sc.context.OrgRole, ShouldEqual, models.ROLE_EDITOR) }) }) middlewareScenario(t, "Valid api key, but does not match db hash", func(sc *scenarioContext) { keyhash := "something_not_matching" - bus.AddHandler("test", func(query *m.GetApiKeyByNameQuery) error { - query.Result = &m.ApiKey{OrgId: 12, Role: m.ROLE_EDITOR, Key: keyhash} + bus.AddHandler("test", func(query *models.GetApiKeyByNameQuery) error { + query.Result = &models.ApiKey{OrgId: 12, Role: models.ROLE_EDITOR, Key: keyhash} return nil }) @@ -190,11 +205,34 @@ func TestMiddlewareContext(t *testing.T) { }) }) + middlewareScenario(t, "Valid api key, but expired", func(sc *scenarioContext) { + mockGetTime() + defer resetGetTime() + + keyhash := util.EncodePassword("v5nAwpMafFP6znaS4urhdWDLS5511M42", "asd") + + bus.AddHandler("test", func(query *models.GetApiKeyByNameQuery) error { + + // api key expired one second before + expires := getTime().Add(-1 * time.Second).Unix() + query.Result = &models.ApiKey{OrgId: 12, Role: models.ROLE_EDITOR, Key: keyhash, + Expires: &expires} + return nil + }) + + sc.fakeReq("GET", "/").withValidApiKey().exec() + + Convey("Should return 401", func() { + So(sc.resp.Code, ShouldEqual, 401) + So(sc.respJson["message"], ShouldEqual, "Expired API key") + }) + }) + middlewareScenario(t, "Valid api key via Basic auth", func(sc *scenarioContext) { keyhash := util.EncodePassword("v5nAwpMafFP6znaS4urhdWDLS5511M42", "asd") - bus.AddHandler("test", func(query *m.GetApiKeyByNameQuery) error { - query.Result = &m.ApiKey{OrgId: 12, Role: m.ROLE_EDITOR, Key: keyhash} + bus.AddHandler("test", func(query *models.GetApiKeyByNameQuery) error { + query.Result = &models.ApiKey{OrgId: 12, Role: models.ROLE_EDITOR, Key: keyhash} return nil }) @@ -208,20 +246,20 @@ func TestMiddlewareContext(t *testing.T) { Convey("Should init middleware context", func() { So(sc.context.IsSignedIn, ShouldEqual, true) So(sc.context.OrgId, ShouldEqual, 12) - So(sc.context.OrgRole, ShouldEqual, m.ROLE_EDITOR) + So(sc.context.OrgRole, ShouldEqual, models.ROLE_EDITOR) }) }) middlewareScenario(t, "Non-expired auth token in cookie which not are being rotated", func(sc *scenarioContext) { sc.withTokenSessionCookie("token") - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { - query.Result = &m.SignedInUser{OrgId: 2, UserId: 12} + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { + query.Result = &models.SignedInUser{OrgId: 2, UserId: 12} return nil }) - sc.userAuthTokenService.LookupTokenProvider = func(ctx context.Context, unhashedToken string) (*m.UserToken, error) { - return &m.UserToken{ + sc.userAuthTokenService.LookupTokenProvider = func(ctx context.Context, unhashedToken string) (*models.UserToken, error) { + return &models.UserToken{ UserId: 12, UnhashedToken: unhashedToken, }, nil @@ -244,19 +282,19 @@ func TestMiddlewareContext(t *testing.T) { middlewareScenario(t, "Non-expired auth token in cookie which are being rotated", func(sc *scenarioContext) { sc.withTokenSessionCookie("token") - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { - query.Result = &m.SignedInUser{OrgId: 2, UserId: 12} + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { + query.Result = &models.SignedInUser{OrgId: 2, UserId: 12} return nil }) - sc.userAuthTokenService.LookupTokenProvider = func(ctx context.Context, unhashedToken string) (*m.UserToken, error) { - return &m.UserToken{ + sc.userAuthTokenService.LookupTokenProvider = func(ctx context.Context, unhashedToken string) (*models.UserToken, error) { + return &models.UserToken{ UserId: 12, UnhashedToken: "", }, nil } - sc.userAuthTokenService.TryRotateTokenProvider = func(ctx context.Context, userToken *m.UserToken, clientIP, userAgent string) (bool, error) { + sc.userAuthTokenService.TryRotateTokenProvider = func(ctx context.Context, userToken *models.UserToken, clientIP, userAgent string) (bool, error) { userToken.UnhashedToken = "rotated" return true, nil } @@ -291,8 +329,8 @@ func TestMiddlewareContext(t *testing.T) { middlewareScenario(t, "Invalid/expired auth token in cookie", func(sc *scenarioContext) { sc.withTokenSessionCookie("token") - sc.userAuthTokenService.LookupTokenProvider = func(ctx context.Context, unhashedToken string) (*m.UserToken, error) { - return nil, m.ErrUserTokenNotFound + sc.userAuthTokenService.LookupTokenProvider = func(ctx context.Context, unhashedToken string) (*models.UserToken, error) { + return nil, models.ErrUserTokenNotFound } sc.fakeReq("GET", "/").exec() @@ -307,12 +345,12 @@ func TestMiddlewareContext(t *testing.T) { middlewareScenario(t, "When anonymous access is enabled", func(sc *scenarioContext) { setting.AnonymousEnabled = true setting.AnonymousOrgName = "test" - setting.AnonymousOrgRole = string(m.ROLE_EDITOR) + setting.AnonymousOrgRole = string(models.ROLE_EDITOR) - bus.AddHandler("test", func(query *m.GetOrgByNameQuery) error { + bus.AddHandler("test", func(query *models.GetOrgByNameQuery) error { So(query.Name, ShouldEqual, "test") - query.Result = &m.Org{Id: 2, Name: "test"} + query.Result = &models.Org{Id: 2, Name: "test"} return nil }) @@ -321,7 +359,7 @@ func TestMiddlewareContext(t *testing.T) { Convey("should init context with org info", func() { So(sc.context.UserId, ShouldEqual, 0) So(sc.context.OrgId, ShouldEqual, 2) - So(sc.context.OrgRole, ShouldEqual, m.ROLE_EDITOR) + So(sc.context.OrgRole, ShouldEqual, models.ROLE_EDITOR) }) Convey("context signed in should be false", func() { @@ -339,8 +377,8 @@ func TestMiddlewareContext(t *testing.T) { name := "markelog" middlewareScenario(t, "should not sync the user if it's in the cache", func(sc *scenarioContext) { - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { - query.Result = &m.SignedInUser{OrgId: 4, UserId: query.UserId} + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { + query.Result = &models.SignedInUser{OrgId: 4, UserId: query.UserId} return nil }) @@ -358,20 +396,39 @@ func TestMiddlewareContext(t *testing.T) { }) }) + middlewareScenario(t, "should respect auto signup option", func(sc *scenarioContext) { + setting.LDAPEnabled = false + setting.AuthProxyAutoSignUp = false + var actualAuthProxyAutoSignUp *bool = nil + + bus.AddHandler("test", func(cmd *models.UpsertUserCommand) error { + actualAuthProxyAutoSignUp = &cmd.SignupAllowed + return login.ErrInvalidCredentials + }) + + sc.fakeReq("GET", "/") + sc.req.Header.Add(setting.AuthProxyHeaderName, name) + sc.exec() + + assert.False(t, *actualAuthProxyAutoSignUp) + assert.Equal(t, sc.resp.Code, 500) + assert.Nil(t, sc.context) + }) + middlewareScenario(t, "should create an user from a header", func(sc *scenarioContext) { setting.LDAPEnabled = false setting.AuthProxyAutoSignUp = true - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { if query.UserId > 0 { - query.Result = &m.SignedInUser{OrgId: 4, UserId: 33} + query.Result = &models.SignedInUser{OrgId: 4, UserId: 33} return nil } - return m.ErrUserNotFound + return models.ErrUserNotFound }) - bus.AddHandler("test", func(cmd *m.UpsertUserCommand) error { - cmd.Result = &m.User{Id: 33} + bus.AddHandler("test", func(cmd *models.UpsertUserCommand) error { + cmd.Result = &models.User{Id: 33} return nil }) @@ -389,13 +446,13 @@ func TestMiddlewareContext(t *testing.T) { middlewareScenario(t, "should get an existing user from header", func(sc *scenarioContext) { setting.LDAPEnabled = false - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { - query.Result = &m.SignedInUser{OrgId: 2, UserId: 12} + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { + query.Result = &models.SignedInUser{OrgId: 2, UserId: 12} return nil }) - bus.AddHandler("test", func(cmd *m.UpsertUserCommand) error { - cmd.Result = &m.User{Id: 12} + bus.AddHandler("test", func(cmd *models.UpsertUserCommand) error { + cmd.Result = &models.User{Id: 12} return nil }) @@ -414,13 +471,13 @@ func TestMiddlewareContext(t *testing.T) { setting.AuthProxyWhitelist = "192.168.1.0/24, 2001::0/120" setting.LDAPEnabled = false - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { - query.Result = &m.SignedInUser{OrgId: 4, UserId: 33} + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { + query.Result = &models.SignedInUser{OrgId: 4, UserId: 33} return nil }) - bus.AddHandler("test", func(cmd *m.UpsertUserCommand) error { - cmd.Result = &m.User{Id: 33} + bus.AddHandler("test", func(cmd *models.UpsertUserCommand) error { + cmd.Result = &models.User{Id: 33} return nil }) @@ -440,13 +497,13 @@ func TestMiddlewareContext(t *testing.T) { setting.AuthProxyWhitelist = "8.8.8.8" setting.LDAPEnabled = false - bus.AddHandler("test", func(query *m.GetSignedInUserQuery) error { - query.Result = &m.SignedInUser{OrgId: 4, UserId: 33} + bus.AddHandler("test", func(query *models.GetSignedInUserQuery) error { + query.Result = &models.SignedInUser{OrgId: 4, UserId: 33} return nil }) - bus.AddHandler("test", func(cmd *m.UpsertUserCommand) error { - cmd.Result = &m.User{Id: 33} + bus.AddHandler("test", func(cmd *models.UpsertUserCommand) error { + cmd.Result = &models.User{Id: 33} return nil }) @@ -489,7 +546,7 @@ func middlewareScenario(t *testing.T, desc string, fn scenarioFunc) { sc.m.Use(OrgRedirect()) - sc.defaultHandler = func(c *m.ReqContext) { + sc.defaultHandler = func(c *models.ReqContext) { sc.context = c if sc.handlerFunc != nil { sc.handlerFunc(sc.context) @@ -504,7 +561,7 @@ func middlewareScenario(t *testing.T, desc string, fn scenarioFunc) { type scenarioContext struct { m *macaron.Macaron - context *m.ReqContext + context *models.ReqContext resp *httptest.ResponseRecorder apiKey string authHeader string @@ -587,4 +644,4 @@ func (sc *scenarioContext) exec() { } type scenarioFunc func(c *scenarioContext) -type handlerFunc func(c *m.ReqContext) +type handlerFunc func(c *models.ReqContext) diff --git a/pkg/models/apikey.go b/pkg/models/apikey.go index a666cb30c6147..1edc8379d6478 100644 --- a/pkg/models/apikey.go +++ b/pkg/models/apikey.go @@ -6,6 +6,7 @@ import ( ) var ErrInvalidApiKey = errors.New("Invalid API Key") +var ErrInvalidApiKeyExpiration = errors.New("Negative value for SecondsToLive") type ApiKey struct { Id int64 @@ -15,15 +16,17 @@ type ApiKey struct { Role RoleType Created time.Time Updated time.Time + Expires *int64 } // --------------------- // COMMANDS type AddApiKeyCommand struct { - Name string `json:"name" binding:"Required"` - Role RoleType `json:"role" binding:"Required"` - OrgId int64 `json:"-"` - Key string `json:"-"` + Name string `json:"name" binding:"Required"` + Role RoleType `json:"role" binding:"Required"` + OrgId int64 `json:"-"` + Key string `json:"-"` + SecondsToLive int64 `json:"secondsToLive"` Result *ApiKey `json:"-"` } @@ -45,8 +48,9 @@ type DeleteApiKeyCommand struct { // QUERIES type GetApiKeysQuery struct { - OrgId int64 - Result []*ApiKey + OrgId int64 + IncludeInvalid bool + Result []*ApiKey } type GetApiKeyByNameQuery struct { @@ -64,7 +68,8 @@ type GetApiKeyByIdQuery struct { // DTO & Projections type ApiKeyDTO struct { - Id int64 `json:"id"` - Name string `json:"name"` - Role RoleType `json:"role"` + Id int64 `json:"id"` + Name string `json:"name"` + Role RoleType `json:"role"` + Expiration *time.Time `json:"expiration,omitempty"` } diff --git a/pkg/models/datasource.go b/pkg/models/datasource.go index 10d6b38cc7a42..6df4dcb34573f 100644 --- a/pkg/models/datasource.go +++ b/pkg/models/datasource.go @@ -24,6 +24,7 @@ const ( DS_ACCESS_PROXY = "proxy" DS_STACKDRIVER = "stackdriver" DS_AZURE_MONITOR = "grafana-azure-monitor-datasource" + DS_LOKI = "loki" ) var ( @@ -82,37 +83,41 @@ func (ds *DataSource) decryptedValue(field string, fallback string) string { } var knownDatasourcePlugins = map[string]bool{ - DS_ES: true, - DS_GRAPHITE: true, - DS_INFLUXDB: true, - DS_INFLUXDB_08: true, - DS_KAIROSDB: true, - DS_CLOUDWATCH: true, - DS_PROMETHEUS: true, - DS_OPENTSDB: true, - DS_POSTGRES: true, - DS_MYSQL: true, - DS_MSSQL: true, - DS_STACKDRIVER: true, - DS_AZURE_MONITOR: true, - "opennms": true, - "abhisant-druid-datasource": true, - "dalmatinerdb-datasource": true, - "gnocci": true, - "zabbix": true, - "newrelic-app": true, - "grafana-datadog-datasource": true, - "grafana-simple-json": true, - "grafana-splunk-datasource": true, - "udoprog-heroic-datasource": true, - "grafana-openfalcon-datasource": true, - "opennms-datasource": true, - "rackerlabs-blueflood-datasource": true, - "crate-datasource": true, - "ayoungprogrammer-finance-datasource": true, - "monasca-datasource": true, - "vertamedia-clickhouse-datasource": true, - "alexanderzobnin-zabbix-datasource": true, + DS_ES: true, + DS_GRAPHITE: true, + DS_INFLUXDB: true, + DS_INFLUXDB_08: true, + DS_KAIROSDB: true, + DS_CLOUDWATCH: true, + DS_PROMETHEUS: true, + DS_OPENTSDB: true, + DS_POSTGRES: true, + DS_MYSQL: true, + DS_MSSQL: true, + DS_STACKDRIVER: true, + DS_AZURE_MONITOR: true, + DS_LOKI: true, + "opennms": true, + "abhisant-druid-datasource": true, + "dalmatinerdb-datasource": true, + "gnocci": true, + "zabbix": true, + "newrelic-app": true, + "grafana-datadog-datasource": true, + "grafana-simple-json": true, + "grafana-splunk-datasource": true, + "udoprog-heroic-datasource": true, + "grafana-openfalcon-datasource": true, + "opennms-datasource": true, + "rackerlabs-blueflood-datasource": true, + "crate-datasource": true, + "ayoungprogrammer-finance-datasource": true, + "monasca-datasource": true, + "vertamedia-clickhouse-datasource": true, + "alexanderzobnin-zabbix-datasource": true, + "grafana-influxdb-flux-datasource": true, + "doitintl-bigquery-datasource": true, + "grafana-azure-data-explorer-datasource": true, } func IsKnownDataSourcePlugin(dsType string) bool { diff --git a/pkg/services/ldap/ldap.go b/pkg/services/ldap/ldap.go index b2a17f420f8be..d53d91666020d 100644 --- a/pkg/services/ldap/ldap.go +++ b/pkg/services/ldap/ldap.go @@ -261,6 +261,7 @@ func (server *Server) getSearchRequest( return &ldap.SearchRequest{ BaseDN: base, Scope: ldap.ScopeWholeSubtree, + SizeLimit: 1000, DerefAliases: ldap.NeverDerefAliases, Attributes: attributes, Filter: filter, diff --git a/pkg/services/login/errors.go b/pkg/services/login/errors.go index dbf15ea76cd46..7f39389c16df2 100644 --- a/pkg/services/login/errors.go +++ b/pkg/services/login/errors.go @@ -3,13 +3,7 @@ package login import "errors" var ( - ErrEmailNotAllowed = errors.New("Required email domain not fulfilled") - ErrInvalidCredentials = errors.New("Invalid Username or Password") - ErrNoEmail = errors.New("Login provider didn't return an email address") - ErrProviderDeniedRequest = errors.New("Login provider denied login request") - ErrSignUpNotAllowed = errors.New("Signup is not allowed for this adapter") - ErrTooManyLoginAttempts = errors.New("Too many consecutive incorrect login attempts for user. Login for user temporarily blocked") - ErrPasswordEmpty = errors.New("No password provided") - ErrUsersQuotaReached = errors.New("Users quota reached") - ErrGettingUserQuota = errors.New("Error getting user quota") + ErrInvalidCredentials = errors.New("Invalid Username or Password") + ErrUsersQuotaReached = errors.New("Users quota reached") + ErrGettingUserQuota = errors.New("Error getting user quota") ) diff --git a/pkg/services/sqlstore/apikey.go b/pkg/services/sqlstore/apikey.go index 775d4cf644737..13ea1feb7daf5 100644 --- a/pkg/services/sqlstore/apikey.go +++ b/pkg/services/sqlstore/apikey.go @@ -5,7 +5,7 @@ import ( "time" "github.com/grafana/grafana/pkg/bus" - m "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/models" ) func init() { @@ -16,14 +16,18 @@ func init() { bus.AddHandler("sql", AddApiKey) } -func GetApiKeys(query *m.GetApiKeysQuery) error { - sess := x.Limit(100, 0).Where("org_id=?", query.OrgId).Asc("name") +func GetApiKeys(query *models.GetApiKeysQuery) error { + sess := x.Limit(100, 0).Where("org_id=? and ( expires IS NULL or expires >= ?)", + query.OrgId, timeNow().Unix()).Asc("name") + if query.IncludeInvalid { + sess = x.Limit(100, 0).Where("org_id=?", query.OrgId).Asc("name") + } - query.Result = make([]*m.ApiKey, 0) + query.Result = make([]*models.ApiKey, 0) return sess.Find(&query.Result) } -func DeleteApiKeyCtx(ctx context.Context, cmd *m.DeleteApiKeyCommand) error { +func DeleteApiKeyCtx(ctx context.Context, cmd *models.DeleteApiKeyCommand) error { return withDbSession(ctx, func(sess *DBSession) error { var rawSql = "DELETE FROM api_key WHERE id=? and org_id=?" _, err := sess.Exec(rawSql, cmd.Id, cmd.OrgId) @@ -31,15 +35,24 @@ func DeleteApiKeyCtx(ctx context.Context, cmd *m.DeleteApiKeyCommand) error { }) } -func AddApiKey(cmd *m.AddApiKeyCommand) error { +func AddApiKey(cmd *models.AddApiKeyCommand) error { return inTransaction(func(sess *DBSession) error { - t := m.ApiKey{ + updated := timeNow() + var expires *int64 = nil + if cmd.SecondsToLive > 0 { + v := updated.Add(time.Second * time.Duration(cmd.SecondsToLive)).Unix() + expires = &v + } else if cmd.SecondsToLive < 0 { + return models.ErrInvalidApiKeyExpiration + } + t := models.ApiKey{ OrgId: cmd.OrgId, Name: cmd.Name, Role: cmd.Role, Key: cmd.Key, - Created: time.Now(), - Updated: time.Now(), + Created: updated, + Updated: updated, + Expires: expires, } if _, err := sess.Insert(&t); err != nil { @@ -50,28 +63,28 @@ func AddApiKey(cmd *m.AddApiKeyCommand) error { }) } -func GetApiKeyById(query *m.GetApiKeyByIdQuery) error { - var apikey m.ApiKey +func GetApiKeyById(query *models.GetApiKeyByIdQuery) error { + var apikey models.ApiKey has, err := x.Id(query.ApiKeyId).Get(&apikey) if err != nil { return err } else if !has { - return m.ErrInvalidApiKey + return models.ErrInvalidApiKey } query.Result = &apikey return nil } -func GetApiKeyByName(query *m.GetApiKeyByNameQuery) error { - var apikey m.ApiKey +func GetApiKeyByName(query *models.GetApiKeyByNameQuery) error { + var apikey models.ApiKey has, err := x.Where("org_id=? AND name=?", query.OrgId, query.KeyName).Get(&apikey) if err != nil { return err } else if !has { - return m.ErrInvalidApiKey + return models.ErrInvalidApiKey } query.Result = &apikey diff --git a/pkg/services/sqlstore/apikey_test.go b/pkg/services/sqlstore/apikey_test.go index 790c8837def83..a1b06db0f9cde 100644 --- a/pkg/services/sqlstore/apikey_test.go +++ b/pkg/services/sqlstore/apikey_test.go @@ -1,31 +1,117 @@ package sqlstore import ( + "github.com/grafana/grafana/pkg/models" + "github.com/stretchr/testify/assert" "testing" - - . "github.com/smartystreets/goconvey/convey" - - m "github.com/grafana/grafana/pkg/models" + "time" ) func TestApiKeyDataAccess(t *testing.T) { + mockTimeNow() + defer resetTimeNow() - Convey("Testing API Key data access", t, func() { + t.Run("Testing API Key data access", func(t *testing.T) { InitTestDB(t) - Convey("Given saved api key", func() { - cmd := m.AddApiKeyCommand{OrgId: 1, Name: "hello", Key: "asd"} + t.Run("Given saved api key", func(t *testing.T) { + cmd := models.AddApiKeyCommand{OrgId: 1, Name: "hello", Key: "asd"} err := AddApiKey(&cmd) - So(err, ShouldBeNil) + assert.Nil(t, err) - Convey("Should be able to get key by name", func() { - query := m.GetApiKeyByNameQuery{KeyName: "hello", OrgId: 1} + t.Run("Should be able to get key by name", func(t *testing.T) { + query := models.GetApiKeyByNameQuery{KeyName: "hello", OrgId: 1} err = GetApiKeyByName(&query) - So(err, ShouldBeNil) - So(query.Result, ShouldNotBeNil) + assert.Nil(t, err) + assert.NotNil(t, query.Result) }) }) + + t.Run("Add non expiring key", func(t *testing.T) { + cmd := models.AddApiKeyCommand{OrgId: 1, Name: "non-expiring", Key: "asd1", SecondsToLive: 0} + err := AddApiKey(&cmd) + assert.Nil(t, err) + + query := models.GetApiKeyByNameQuery{KeyName: "non-expiring", OrgId: 1} + err = GetApiKeyByName(&query) + assert.Nil(t, err) + + assert.Nil(t, query.Result.Expires) + }) + + t.Run("Add an expiring key", func(t *testing.T) { + //expires in one hour + cmd := models.AddApiKeyCommand{OrgId: 1, Name: "expiring-in-an-hour", Key: "asd2", SecondsToLive: 3600} + err := AddApiKey(&cmd) + assert.Nil(t, err) + + query := models.GetApiKeyByNameQuery{KeyName: "expiring-in-an-hour", OrgId: 1} + err = GetApiKeyByName(&query) + assert.Nil(t, err) + + assert.True(t, *query.Result.Expires >= timeNow().Unix()) + + // timeNow() has been called twice since creation; once by AddApiKey and once by GetApiKeyByName + // therefore two seconds should be subtracted by next value retuned by timeNow() + // that equals the number by which timeSeed has been advanced + then := timeNow().Add(-2 * time.Second) + expected := then.Add(1 * time.Hour).UTC().Unix() + assert.Equal(t, *query.Result.Expires, expected) + }) + + t.Run("Add a key with negative lifespan", func(t *testing.T) { + //expires in one day + cmd := models.AddApiKeyCommand{OrgId: 1, Name: "key-with-negative-lifespan", Key: "asd3", SecondsToLive: -3600} + err := AddApiKey(&cmd) + assert.EqualError(t, err, models.ErrInvalidApiKeyExpiration.Error()) + + query := models.GetApiKeyByNameQuery{KeyName: "key-with-negative-lifespan", OrgId: 1} + err = GetApiKeyByName(&query) + assert.EqualError(t, err, "Invalid API Key") + }) + + t.Run("Add keys", func(t *testing.T) { + //never expires + cmd := models.AddApiKeyCommand{OrgId: 1, Name: "key1", Key: "key1", SecondsToLive: 0} + err := AddApiKey(&cmd) + assert.Nil(t, err) + + //expires in 1s + cmd = models.AddApiKeyCommand{OrgId: 1, Name: "key2", Key: "key2", SecondsToLive: 1} + err = AddApiKey(&cmd) + assert.Nil(t, err) + + //expires in one hour + cmd = models.AddApiKeyCommand{OrgId: 1, Name: "key3", Key: "key3", SecondsToLive: 3600} + err = AddApiKey(&cmd) + assert.Nil(t, err) + + // advance mocked getTime by 1s + timeNow() + + query := models.GetApiKeysQuery{OrgId: 1, IncludeInvalid: false} + err = GetApiKeys(&query) + assert.Nil(t, err) + + for _, k := range query.Result { + if k.Name == "key2" { + t.Fatalf("key2 should not be there") + } + } + + query = models.GetApiKeysQuery{OrgId: 1, IncludeInvalid: true} + err = GetApiKeys(&query) + assert.Nil(t, err) + + found := false + for _, k := range query.Result { + if k.Name == "key2" { + found = true + } + } + assert.True(t, found) + }) }) } diff --git a/pkg/services/sqlstore/migrations/apikey_mig.go b/pkg/services/sqlstore/migrations/apikey_mig.go index 928f84c4fb026..bc3de8ef4c437 100644 --- a/pkg/services/sqlstore/migrations/apikey_mig.go +++ b/pkg/services/sqlstore/migrations/apikey_mig.go @@ -78,4 +78,8 @@ func addApiKeyMigrations(mg *Migrator) { {Name: "key", Type: DB_Varchar, Length: 190, Nullable: false}, {Name: "role", Type: DB_NVarchar, Length: 255, Nullable: false}, })) + + mg.AddMigration("Add expires to api_key table", NewAddColumnMigration(apiKeyV2, &Column{ + Name: "expires", Type: DB_BigInt, Nullable: true, + })) } diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index 05d42f1000e1c..f2f7a2957434e 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -259,6 +259,8 @@ type Cfg struct { RemoteCacheOptions *RemoteCacheOptions EditorsCanAdmin bool + + ApiKeyMaxSecondsToLive int64 } type CommandLineArgs struct { @@ -795,6 +797,7 @@ func (cfg *Cfg) Load(args *CommandLineArgs) error { LoginMaxLifetimeDays = auth.Key("login_maximum_lifetime_days").MustInt(30) cfg.LoginMaxLifetimeDays = LoginMaxLifetimeDays + cfg.ApiKeyMaxSecondsToLive = auth.Key("api_key_max_seconds_to_live").MustInt64(-1) cfg.TokenRotationIntervalMinutes = auth.Key("token_rotation_interval_minutes").MustInt(10) if cfg.TokenRotationIntervalMinutes < 2 { diff --git a/public/app/app.ts b/public/app/app.ts index 9f95634330d57..9bc44616f2e6f 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -11,7 +11,6 @@ import 'react'; import 'react-dom'; import 'vendor/bootstrap/bootstrap'; -import 'vendor/angular-ui/ui-bootstrap-tpls'; import 'vendor/angular-other/angular-strap'; import $ from 'jquery'; @@ -36,6 +35,7 @@ import { setupAngularRoutes } from 'app/routes/routes'; import 'app/routes/GrafanaCtrl'; import 'app/features/all'; import { setLocale } from '@grafana/ui/src/utils/moment_wrapper'; +import { setMarkdownOptions } from '@grafana/data'; // import symlinked extensions const extensionsIndex = (require as any).context('.', true, /extensions\/index.ts/); @@ -70,6 +70,8 @@ export class GrafanaApp { setLocale(config.bootData.user.locale); + setMarkdownOptions({ sanitize: !config.disableSanitizeHtml }); + app.config( ( $locationProvider: angular.ILocationProvider, @@ -122,8 +124,6 @@ export class GrafanaApp { 'ang-drag-drop', 'grafana', 'pasvaz.bindonce', - 'ui.bootstrap', - 'ui.bootstrap.tpls', 'react', ]; diff --git a/public/app/core/components/PluginHelp/PluginHelp.tsx b/public/app/core/components/PluginHelp/PluginHelp.tsx index 40aed4a6c0c88..67364ea9366f0 100644 --- a/public/app/core/components/PluginHelp/PluginHelp.tsx +++ b/public/app/core/components/PluginHelp/PluginHelp.tsx @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react'; -// @ts-ignore -import Remarkable from 'remarkable'; +import { renderMarkdown } from '@grafana/data'; import { getBackendSrv } from '@grafana/runtime'; interface Props { @@ -39,8 +38,7 @@ export class PluginHelp extends PureComponent { getBackendSrv() .get(`/api/plugins/${plugin.id}/markdown/${type}`) .then((response: string) => { - const markdown = new Remarkable(); - const helpHtml = markdown.render(response); + const helpHtml = renderMarkdown(response); if (response === '' && type === 'help') { this.setState({ diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts index 5fe95a182d079..97fe3f7ccc20e 100644 --- a/public/app/core/logs_model.ts +++ b/public/app/core/logs_model.ts @@ -6,7 +6,7 @@ import { TimeSeries, Labels, LogLevel, - SeriesData, + DataFrame, findCommonLabels, findUniqueLabels, getLogLevel, @@ -24,7 +24,7 @@ import { } from '@grafana/ui'; import { getThemeColor } from 'app/core/utils/colors'; import { hasAnsiCodes } from 'app/core/utils/text'; -import { dateTime } from '@grafana/ui/src/utils/moment_wrapper'; +import { dateTime, toUtc } from '@grafana/ui/src/utils/moment_wrapper'; export const LogLevelColor = { [LogLevel.critical]: colors[7], @@ -250,15 +250,15 @@ export function makeSeriesForLogs(rows: LogRowModel[], intervalMs: number): Time }); } -function isLogsData(series: SeriesData) { +function isLogsData(series: DataFrame) { return series.fields.some(f => f.type === FieldType.time) && series.fields.some(f => f.type === FieldType.string); } -export function seriesDataToLogsModel(seriesData: SeriesData[], intervalMs: number): LogsModel { - const metricSeries: SeriesData[] = []; - const logSeries: SeriesData[] = []; +export function dataFrameToLogsModel(dataFrame: DataFrame[], intervalMs: number): LogsModel { + const metricSeries: DataFrame[] = []; + const logSeries: DataFrame[] = []; - for (const series of seriesData) { + for (const series of dataFrame) { if (isLogsData(series)) { logSeries.push(series); continue; @@ -289,7 +289,7 @@ export function seriesDataToLogsModel(seriesData: SeriesData[], intervalMs: numb }; } -export function logSeriesToLogsModel(logSeries: SeriesData[]): LogsModel { +export function logSeriesToLogsModel(logSeries: DataFrame[]): LogsModel { if (logSeries.length === 0) { return undefined; } @@ -355,7 +355,7 @@ export function logSeriesToLogsModel(logSeries: SeriesData[]): LogsModel { } export function processLogSeriesRow( - series: SeriesData, + series: DataFrame, fieldCache: FieldCache, rowIndex: number, uniqueLabels: Labels @@ -369,6 +369,7 @@ export function processLogSeriesRow( const timeEpochMs = time.valueOf(); const timeFromNow = time.fromNow(); const timeLocal = time.format('YYYY-MM-DD HH:mm:ss'); + const timeUtc = toUtc(ts).format('YYYY-MM-DD HH:mm:ss'); let logLevel = LogLevel.unknown; const logLevelField = fieldCache.getFieldByName('level'); @@ -388,6 +389,7 @@ export function processLogSeriesRow( timeFromNow, timeEpochMs, timeLocal, + timeUtc, uniqueLabels, hasAnsi, searchWords, diff --git a/public/app/core/specs/logs_model.test.ts b/public/app/core/specs/logs_model.test.ts index c83f0ce6c1c00..bccbe9ed34af8 100644 --- a/public/app/core/specs/logs_model.test.ts +++ b/public/app/core/specs/logs_model.test.ts @@ -1,11 +1,11 @@ -import { SeriesData, FieldType, LogsModel, LogsMetaKind, LogsDedupStrategy, LogLevel } from '@grafana/ui'; +import { DataFrame, FieldType, LogsModel, LogsMetaKind, LogsDedupStrategy, LogLevel } from '@grafana/ui'; import { dedupLogRows, calculateFieldStats, calculateLogsLabelStats, getParser, LogsParsers, - seriesDataToLogsModel, + dataFrameToLogsModel, } from '../logs_model'; describe('dedupLogRows()', () => { @@ -337,23 +337,23 @@ const emptyLogsModel = { series: [], }; -describe('seriesDataToLogsModel', () => { +describe('dataFrameToLogsModel', () => { it('given empty series should return empty logs model', () => { - expect(seriesDataToLogsModel([] as SeriesData[], 0)).toMatchObject(emptyLogsModel); + expect(dataFrameToLogsModel([] as DataFrame[], 0)).toMatchObject(emptyLogsModel); }); it('given series without correct series name should return empty logs model', () => { - const series: SeriesData[] = [ + const series: DataFrame[] = [ { fields: [], rows: [], }, ]; - expect(seriesDataToLogsModel(series, 0)).toMatchObject(emptyLogsModel); + expect(dataFrameToLogsModel(series, 0)).toMatchObject(emptyLogsModel); }); it('given series without a time field should return empty logs model', () => { - const series: SeriesData[] = [ + const series: DataFrame[] = [ { fields: [ { @@ -364,11 +364,11 @@ describe('seriesDataToLogsModel', () => { rows: [], }, ]; - expect(seriesDataToLogsModel(series, 0)).toMatchObject(emptyLogsModel); + expect(dataFrameToLogsModel(series, 0)).toMatchObject(emptyLogsModel); }); it('given series without a string field should return empty logs model', () => { - const series: SeriesData[] = [ + const series: DataFrame[] = [ { fields: [ { @@ -379,11 +379,11 @@ describe('seriesDataToLogsModel', () => { rows: [], }, ]; - expect(seriesDataToLogsModel(series, 0)).toMatchObject(emptyLogsModel); + expect(dataFrameToLogsModel(series, 0)).toMatchObject(emptyLogsModel); }); it('given one series should return expected logs model', () => { - const series: SeriesData[] = [ + const series: DataFrame[] = [ { labels: { filename: '/var/log/grafana/grafana.log', @@ -414,7 +414,7 @@ describe('seriesDataToLogsModel', () => { }, }, ]; - const logsModel = seriesDataToLogsModel(series, 0); + const logsModel = dataFrameToLogsModel(series, 0); expect(logsModel.hasUniqueLabels).toBeFalsy(); expect(logsModel.rows).toHaveLength(2); expect(logsModel.rows).toMatchObject([ @@ -449,7 +449,7 @@ describe('seriesDataToLogsModel', () => { }); it('given one series without labels should return expected logs model', () => { - const series: SeriesData[] = [ + const series: DataFrame[] = [ { fields: [ { @@ -468,7 +468,7 @@ describe('seriesDataToLogsModel', () => { rows: [['1970-01-01T00:00:01Z', 'WARN boooo', 'dbug']], }, ]; - const logsModel = seriesDataToLogsModel(series, 0); + const logsModel = dataFrameToLogsModel(series, 0); expect(logsModel.rows).toHaveLength(1); expect(logsModel.rows).toMatchObject([ { @@ -481,7 +481,7 @@ describe('seriesDataToLogsModel', () => { }); it('given multiple series should return expected logs model', () => { - const series: SeriesData[] = [ + const series: DataFrame[] = [ { labels: { foo: 'bar', @@ -520,7 +520,7 @@ describe('seriesDataToLogsModel', () => { rows: [['1970-01-01T00:00:00Z', 'INFO 1'], ['1970-01-01T00:00:02Z', 'INFO 2']], }, ]; - const logsModel = seriesDataToLogsModel(series, 0); + const logsModel = dataFrameToLogsModel(series, 0); expect(logsModel.hasUniqueLabels).toBeTruthy(); expect(logsModel.rows).toHaveLength(3); expect(logsModel.rows).toMatchObject([ diff --git a/public/app/core/utils/explore.test.ts b/public/app/core/utils/explore.test.ts index 344de38032027..a2e2e1a2eb8ad 100644 --- a/public/app/core/utils/explore.test.ts +++ b/public/app/core/utils/explore.test.ts @@ -10,7 +10,7 @@ import { getFirstQueryErrorWithoutRefId, getRefIds, } from './explore'; -import { ExploreUrlState } from 'app/types/explore'; +import { ExploreUrlState, ExploreMode } from 'app/types/explore'; import store from 'app/core/store'; import { DataQueryError, LogsDedupStrategy } from '@grafana/ui'; @@ -18,6 +18,7 @@ const DEFAULT_EXPLORE_STATE: ExploreUrlState = { datasource: null, queries: [], range: DEFAULT_RANGE, + mode: ExploreMode.Metrics, ui: { showingGraph: true, showingTable: true, @@ -84,6 +85,7 @@ describe('state functions', () => { expect(serializeStateToUrlParam(state)).toBe( '{"datasource":"foo","queries":[{"expr":"metric{test=\\"a/b\\"}"},' + '{"expr":"super{foo=\\"x/z\\"}"}],"range":{"from":"now-5h","to":"now"},' + + '"mode":"Metrics",' + '"ui":{"showingGraph":true,"showingTable":true,"showingLogs":true,"dedupStrategy":"none"}}' ); }); @@ -106,7 +108,7 @@ describe('state functions', () => { }, }; expect(serializeStateToUrlParam(state, true)).toBe( - '["now-5h","now","foo",{"expr":"metric{test=\\"a/b\\"}"},{"expr":"super{foo=\\"x/z\\"}"},{"ui":[true,true,true,"none"]}]' + '["now-5h","now","foo",{"expr":"metric{test=\\"a/b\\"}"},{"expr":"super{foo=\\"x/z\\"}"},{"mode":"Metrics"},{"ui":[true,true,true,"none"]}]' ); }); }); diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 135490e630528..6159efe96d7d6 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -28,7 +28,14 @@ import { DataQueryRequest, DataStreamObserver, } from '@grafana/ui'; -import { ExploreUrlState, HistoryItem, QueryTransaction, QueryIntervals, QueryOptions } from 'app/types/explore'; +import { + ExploreUrlState, + HistoryItem, + QueryTransaction, + QueryIntervals, + QueryOptions, + ExploreMode, +} from 'app/types/explore'; import { config } from '../config'; export const DEFAULT_RANGE = { @@ -155,10 +162,11 @@ export function buildQueryTransaction( export const clearQueryKeys: (query: DataQuery) => object = ({ key, refId, ...rest }) => rest; -const metricProperties = ['expr', 'target', 'datasource']; +const metricProperties = ['expr', 'target', 'datasource', 'query']; const isMetricSegment = (segment: { [key: string]: string }) => metricProperties.some(prop => segment.hasOwnProperty(prop)); const isUISegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('ui'); +const isModeSegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('mode'); enum ParseUrlStateIndex { RangeFrom = 0, @@ -207,6 +215,7 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { queries: [], range: DEFAULT_RANGE, ui: DEFAULT_UI_STATE, + mode: null, }; if (!parsed) { @@ -229,6 +238,9 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { const datasource = parsed[ParseUrlStateIndex.Datasource]; const parsedSegments = parsed.slice(ParseUrlStateIndex.SegmentsStart); const queries = parsedSegments.filter(segment => isMetricSegment(segment)); + const modeObj = parsedSegments.filter(segment => isModeSegment(segment))[0]; + const mode = modeObj ? modeObj.mode : ExploreMode.Metrics; + const uiState = parsedSegments.filter(segment => isUISegment(segment))[0]; const ui = uiState ? { @@ -239,7 +251,7 @@ export function parseUrlState(initial: string | undefined): ExploreUrlState { } : DEFAULT_UI_STATE; - return { datasource, queries, range, ui }; + return { datasource, queries, range, ui, mode }; } export function serializeStateToUrlParam(urlState: ExploreUrlState, compact?: boolean): string { @@ -249,6 +261,7 @@ export function serializeStateToUrlParam(urlState: ExploreUrlState, compact?: bo urlState.range.to, urlState.datasource, ...urlState.queries, + { mode: urlState.mode }, { ui: [ !!urlState.ui.showingGraph, diff --git a/public/app/core/utils/timePicker.test.ts b/public/app/core/utils/timePicker.test.ts new file mode 100644 index 0000000000000..b9c54a92d8a83 --- /dev/null +++ b/public/app/core/utils/timePicker.test.ts @@ -0,0 +1,79 @@ +import { toUtc, AbsoluteTimeRange } from '@grafana/ui'; + +import { getShiftedTimeRange, getZoomedTimeRange } from './timePicker'; + +export const setup = (options?: any) => { + const defaultOptions = { + range: { + from: toUtc('2019-01-01 10:00:00'), + to: toUtc('2019-01-01 16:00:00'), + raw: { + from: 'now-6h', + to: 'now', + }, + }, + direction: 0, + }; + + return { ...defaultOptions, ...options }; +}; + +describe('getShiftedTimeRange', () => { + describe('when called with a direction of -1', () => { + it('then it should return correct result', () => { + const { range, direction } = setup({ direction: -1 }); + const expectedRange: AbsoluteTimeRange = { + from: toUtc('2019-01-01 07:00:00').valueOf(), + to: toUtc('2019-01-01 13:00:00').valueOf(), + }; + + const result = getShiftedTimeRange(direction, range); + + expect(result).toEqual(expectedRange); + }); + }); + + describe('when called with a direction of 1', () => { + it('then it should return correct result', () => { + const { range, direction } = setup({ direction: 1 }); + const expectedRange: AbsoluteTimeRange = { + from: toUtc('2019-01-01 13:00:00').valueOf(), + to: toUtc('2019-01-01 19:00:00').valueOf(), + }; + + const result = getShiftedTimeRange(direction, range); + + expect(result).toEqual(expectedRange); + }); + }); + + describe('when called with any other direction', () => { + it('then it should return correct result', () => { + const { range, direction } = setup({ direction: 0 }); + const expectedRange: AbsoluteTimeRange = { + from: toUtc('2019-01-01 10:00:00').valueOf(), + to: toUtc('2019-01-01 16:00:00').valueOf(), + }; + + const result = getShiftedTimeRange(direction, range); + + expect(result).toEqual(expectedRange); + }); + }); +}); + +describe('getZoomedTimeRange', () => { + describe('when called', () => { + it('then it should return correct result', () => { + const { range } = setup(); + const expectedRange: AbsoluteTimeRange = { + from: toUtc('2019-01-01 07:00:00').valueOf(), + to: toUtc('2019-01-01 19:00:00').valueOf(), + }; + + const result = getZoomedTimeRange(range, 2); + + expect(result).toEqual(expectedRange); + }); + }); +}); diff --git a/public/app/core/utils/timePicker.ts b/public/app/core/utils/timePicker.ts new file mode 100644 index 0000000000000..974588857a5dc --- /dev/null +++ b/public/app/core/utils/timePicker.ts @@ -0,0 +1,38 @@ +import { TimeRange, toUtc, AbsoluteTimeRange } from '@grafana/ui'; + +export const getShiftedTimeRange = (direction: number, origRange: TimeRange): AbsoluteTimeRange => { + const range = { + from: toUtc(origRange.from), + to: toUtc(origRange.to), + }; + + const timespan = (range.to.valueOf() - range.from.valueOf()) / 2; + let to: number, from: number; + + if (direction === -1) { + to = range.to.valueOf() - timespan; + from = range.from.valueOf() - timespan; + } else if (direction === 1) { + to = range.to.valueOf() + timespan; + from = range.from.valueOf() + timespan; + if (to > Date.now() && range.to.valueOf() < Date.now()) { + to = Date.now(); + from = range.from.valueOf(); + } + } else { + to = range.to.valueOf(); + from = range.from.valueOf(); + } + + return { from, to }; +}; + +export const getZoomedTimeRange = (range: TimeRange, factor: number): AbsoluteTimeRange => { + const timespan = range.to.valueOf() - range.from.valueOf(); + const center = range.to.valueOf() - timespan / 2; + + const to = center + (timespan * factor) / 2; + const from = center - (timespan * factor) / 2; + + return { from, to }; +}; diff --git a/public/app/features/annotations/annotations_srv.ts b/public/app/features/annotations/annotations_srv.ts index a5ed686e02c0d..72052962bbf57 100644 --- a/public/app/features/annotations/annotations_srv.ts +++ b/public/app/features/annotations/annotations_srv.ts @@ -1,5 +1,5 @@ // Libaries -import angular from 'angular'; +import angular, { IQService } from 'angular'; import _ from 'lodash'; // Components @@ -11,6 +11,9 @@ import { makeRegions, dedupAnnotations } from './events_processing'; // Types import { DashboardModel } from '../dashboard/state/DashboardModel'; +import DatasourceSrv from '../plugins/datasource_srv'; +import { BackendSrv } from 'app/core/services/backend_srv'; +import { TimeSrv } from '../dashboard/services/TimeSrv'; export class AnnotationsSrv { globalAnnotationsPromise: any; @@ -18,7 +21,13 @@ export class AnnotationsSrv { datasourcePromises: any; /** @ngInject */ - constructor(private $rootScope, private $q, private datasourceSrv, private backendSrv, private timeSrv) {} + constructor( + private $rootScope: any, + private $q: IQService, + private datasourceSrv: DatasourceSrv, + private backendSrv: BackendSrv, + private timeSrv: TimeSrv + ) {} init(dashboard: DashboardModel) { // always clearPromiseCaches when loading new dashboard @@ -33,7 +42,7 @@ export class AnnotationsSrv { this.datasourcePromises = null; } - getAnnotations(options) { + getAnnotations(options: any) { return this.$q .all([this.getGlobalAnnotations(options), this.getAlertStates(options)]) .then(results => { @@ -70,7 +79,7 @@ export class AnnotationsSrv { }); } - getAlertStates(options) { + getAlertStates(options: any) { if (!options.dashboard.id) { return this.$q.when([]); } @@ -94,7 +103,7 @@ export class AnnotationsSrv { return this.alertStatesPromise; } - getGlobalAnnotations(options) { + getGlobalAnnotations(options: any) { const dashboard = options.dashboard; if (this.globalAnnotationsPromise) { @@ -117,7 +126,7 @@ export class AnnotationsSrv { dsPromises.push(datasourcePromise); promises.push( datasourcePromise - .then(datasource => { + .then((datasource: any) => { // issue query against data source return datasource.annotationQuery({ range: range, @@ -141,17 +150,17 @@ export class AnnotationsSrv { return this.globalAnnotationsPromise; } - saveAnnotationEvent(annotation) { + saveAnnotationEvent(annotation: any) { this.globalAnnotationsPromise = null; return this.backendSrv.post('/api/annotations', annotation); } - updateAnnotationEvent(annotation) { + updateAnnotationEvent(annotation: { id: any }) { this.globalAnnotationsPromise = null; return this.backendSrv.put(`/api/annotations/${annotation.id}`, annotation); } - deleteAnnotationEvent(annotation) { + deleteAnnotationEvent(annotation: { id: any; isRegion: any; regionId: any }) { this.globalAnnotationsPromise = null; let deleteUrl = `/api/annotations/${annotation.id}`; if (annotation.isRegion) { @@ -161,7 +170,7 @@ export class AnnotationsSrv { return this.backendSrv.delete(deleteUrl); } - translateQueryResult(annotation, results) { + translateQueryResult(annotation: any, results: any) { // if annotation has snapshotData // make clone and remove it if (annotation.snapshotData) { diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx index 817d932980caf..cb932334ec8ce 100644 --- a/public/app/features/api-keys/ApiKeysPage.tsx +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -12,9 +12,34 @@ import ApiKeysAddedModal from './ApiKeysAddedModal'; import config from 'app/core/config'; import appEvents from 'app/core/app_events'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; -import { DeleteButton, Input } from '@grafana/ui'; +import { DeleteButton, EventsWithValidation, FormLabel, Input, ValidationEvents } from '@grafana/ui'; import { NavModel } from '@grafana/data'; import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; +import { store } from 'app/store/store'; +import kbn from 'app/core/utils/kbn'; + +// Utils +import { dateTime, isDateTime } from '@grafana/ui/src/utils/moment_wrapper'; +import { getTimeZone } from 'app/features/profile/state/selectors'; + +const timeRangeValidationEvents: ValidationEvents = { + [EventsWithValidation.onBlur]: [ + { + rule: value => { + if (!value) { + return true; + } + try { + kbn.interval_to_seconds(value); + return true; + } catch { + return false; + } + }, + errorMessage: 'Not a valid duration', + }, + ], +}; export interface Props { navModel: NavModel; @@ -36,13 +61,18 @@ export interface State { enum ApiKeyStateProps { Name = 'name', Role = 'role', + SecondsToLive = 'secondsToLive', } const initialApiKeyState = { name: '', role: OrgRole.Viewer, + secondsToLive: '', }; +const tooltipText = + 'The api key life duration. For example 1d if your key is going to last for one day. All the supported units are: s,m,h,d,w,M,y'; + export class ApiKeysPage extends PureComponent { constructor(props) { super(props); @@ -81,6 +111,9 @@ export class ApiKeysPage extends PureComponent { }); }; + // make sure that secondsToLive is number or null + const secondsToLive = this.state.newApiKey['secondsToLive']; + this.state.newApiKey['secondsToLive'] = secondsToLive ? kbn.interval_to_seconds(secondsToLive) : null; this.props.addApiKey(this.state.newApiKey, openModal); this.setState((prevState: State) => { return { @@ -130,6 +163,17 @@ export class ApiKeysPage extends PureComponent { ); } + formatDate(date, format?) { + if (!date) { + return 'No expiration date'; + } + date = isDateTime(date) ? date : dateTime(date); + format = format || 'YYYY-MM-DD HH:mm:ss'; + const timezone = getTimeZone(store.getState().user); + + return timezone === 'utc' ? date.utc().format(format) : date.format(format); + } + renderAddApiKeyForm() { const { newApiKey, isAdding } = this.state; @@ -170,6 +214,17 @@ export class ApiKeysPage extends PureComponent { +
+ Time to live + this.onApiKeyStateUpdate(evt, ApiKeyStateProps.SecondsToLive)} + /> +
@@ -211,6 +266,7 @@ export class ApiKeysPage extends PureComponent { Name Role + Expires @@ -221,6 +277,7 @@ export class ApiKeysPage extends PureComponent { {key.name} {key.role} + {this.formatDate(key.expiration)} this.onDeleteApiKey(key)} /> diff --git a/public/app/features/api-keys/__mocks__/apiKeysMock.ts b/public/app/features/api-keys/__mocks__/apiKeysMock.ts index 117f0d6d0c647..099b4c92ec496 100644 --- a/public/app/features/api-keys/__mocks__/apiKeysMock.ts +++ b/public/app/features/api-keys/__mocks__/apiKeysMock.ts @@ -7,6 +7,8 @@ export const getMultipleMockKeys = (numberOfKeys: number): ApiKey[] => { id: i, name: `test-${i}`, role: OrgRole.Viewer, + secondsToLive: null, + expiration: '2019-06-04', }); } @@ -18,5 +20,7 @@ export const getMockKey = (): ApiKey => { id: 1, name: 'test', role: OrgRole.Admin, + secondsToLive: null, + expiration: '2019-06-04', }; }; diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap index 1ece45d86ef21..634dd9738d157 100644 --- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap +++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap @@ -130,6 +130,32 @@ exports[`Render should render CTA if there are no API keys 1`] = ` +
+ + Time to live + + +
diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx index 065596d73df0a..6e24e6db24600 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx @@ -16,6 +16,7 @@ import { TimePicker, RefreshPicker, RawTimeRange } from '@grafana/ui'; // Utils & Services import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { defaultSelectOptions } from '@grafana/ui/src/components/TimePicker/TimePicker'; +import { getShiftedTimeRange } from 'app/core/utils/timePicker'; export interface Props { $injector: any; @@ -44,23 +45,7 @@ export class DashNavTimeControls extends Component { onMoveTimePicker = (direction: number) => { const range = this.timeSrv.timeRange(); - const timespan = (range.to.valueOf() - range.from.valueOf()) / 2; - let to: number, from: number; - - if (direction === -1) { - to = range.to.valueOf() - timespan; - from = range.from.valueOf() - timespan; - } else if (direction === 1) { - to = range.to.valueOf() + timespan; - from = range.from.valueOf() + timespan; - if (to > Date.now() && range.to.valueOf() < Date.now()) { - to = Date.now(); - from = range.from.valueOf(); - } - } else { - to = range.to.valueOf(); - from = range.from.valueOf(); - } + const { from, to } = getShiftedTimeRange(direction, range); this.timeSrv.setTime({ from: toUtc(from), @@ -110,7 +95,7 @@ export class DashNavTimeControls extends Component { const timeZone = dashboard.getTimezone(); return ( - <> +
{ intervals={intervals} tooltip="Refresh dashboard" /> - +
); } } diff --git a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.ts b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.ts new file mode 100644 index 0000000000000..f106dfd88f28e --- /dev/null +++ b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.ts @@ -0,0 +1,71 @@ +import coreModule from 'app/core/core_module'; +import { DashboardModel } from 'app/features/dashboard/state'; + +export class TimePickerCtrl { + panel: any; + dashboard: DashboardModel; + + constructor() { + this.panel = this.dashboard.timepicker; + this.panel.refresh_intervals = this.panel.refresh_intervals || [ + '5s', + '10s', + '30s', + '1m', + '5m', + '15m', + '30m', + '1h', + '2h', + '1d', + ]; + } +} + +const template = ` +
+
Time Options
+ +
+
+ +
+ +
+
+ +
+ Auto-refresh + +
+
+ Now delay now- + +
+ + + +
+
+`; + +export function TimePickerSettings() { + return { + restrict: 'E', + template: template, + controller: TimePickerCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + dashboard: '=', + }, + }; +} + +coreModule.directive('gfTimePickerSettings', TimePickerSettings); diff --git a/public/app/features/dashboard/components/DashboardSettings/index.ts b/public/app/features/dashboard/components/DashboardSettings/index.ts index 0a89feada33ab..504e62e150414 100644 --- a/public/app/features/dashboard/components/DashboardSettings/index.ts +++ b/public/app/features/dashboard/components/DashboardSettings/index.ts @@ -1,2 +1,3 @@ export { SettingsCtrl } from './SettingsCtrl'; export { DashboardSettings } from './DashboardSettings'; +export { TimePickerSettings } from './TimePickerSettings'; diff --git a/public/app/features/dashboard/components/TimePicker/TimePickerCtrl.ts b/public/app/features/dashboard/components/TimePicker/TimePickerCtrl.ts deleted file mode 100644 index f1d626e9e3479..0000000000000 --- a/public/app/features/dashboard/components/TimePicker/TimePickerCtrl.ts +++ /dev/null @@ -1,189 +0,0 @@ -import _ from 'lodash'; -import angular from 'angular'; - -import * as rangeUtil from '@grafana/ui/src/utils/rangeutil'; - -export class TimePickerCtrl { - static tooltipFormat = 'MMM D, YYYY HH:mm:ss'; - static defaults = { - time_options: ['5m', '15m', '1h', '6h', '12h', '24h', '2d', '7d', '30d'], - refresh_intervals: ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'], - }; - - dashboard: any; - panel: any; - absolute: any; - timeRaw: any; - editTimeRaw: any; - tooltip: string; - rangeString: string; - timeOptions: any; - refresh: any; - isUtc: boolean; - firstDayOfWeek: number; - isOpen: boolean; - isAbsolute: boolean; - - /** @ngInject */ - constructor(private $scope, private $rootScope, private timeSrv) { - this.$scope.ctrl = this; - - $rootScope.onAppEvent('shift-time-forward', () => this.move(1), $scope); - $rootScope.onAppEvent('shift-time-backward', () => this.move(-1), $scope); - $rootScope.onAppEvent('closeTimepicker', this.openDropdown.bind(this), $scope); - - this.dashboard.on('refresh', this.onRefresh.bind(this), $scope); - - // init options - this.panel = this.dashboard.timepicker; - _.defaults(this.panel, TimePickerCtrl.defaults); - this.firstDayOfWeek = getLocaleData().firstDayOfWeek(); - - // init time stuff - this.onRefresh(); - } - - onRefresh() { - const time = angular.copy(this.timeSrv.timeRange()); - const timeRaw = angular.copy(time.raw); - - if (!this.dashboard.isTimezoneUtc()) { - time.from.local(); - time.to.local(); - if (isDateTime(timeRaw.from)) { - timeRaw.from.local(); - } - if (isDateTime(timeRaw.to)) { - timeRaw.to.local(); - } - this.isUtc = false; - } else { - this.isUtc = true; - } - - this.rangeString = rangeUtil.describeTimeRange(timeRaw); - this.absolute = { fromJs: time.from.toDate(), toJs: time.to.toDate() }; - this.tooltip = this.dashboard.formatDate(time.from) + '
to
'; - this.tooltip += this.dashboard.formatDate(time.to); - this.timeRaw = timeRaw; - this.isAbsolute = isDateTime(this.timeRaw.to); - } - - zoom(factor) { - this.$rootScope.appEvent('zoom-out', 2); - } - - move(direction) { - const range = this.timeSrv.timeRange(); - - const timespan = (range.to.valueOf() - range.from.valueOf()) / 2; - let to, from; - if (direction === -1) { - to = range.to.valueOf() - timespan; - from = range.from.valueOf() - timespan; - } else if (direction === 1) { - to = range.to.valueOf() + timespan; - from = range.from.valueOf() + timespan; - if (to > Date.now() && range.to < Date.now()) { - to = Date.now(); - from = range.from.valueOf(); - } - } else { - to = range.to.valueOf(); - from = range.from.valueOf(); - } - - this.timeSrv.setTime({ from: toUtc(from), to: toUtc(to) }); - } - - openDropdown() { - if (this.isOpen) { - this.closeDropdown(); - return; - } - - this.onRefresh(); - this.editTimeRaw = this.timeRaw; - this.timeOptions = rangeUtil.getRelativeTimesList(this.panel, this.rangeString); - this.refresh = { - value: this.dashboard.refresh, - options: this.panel.refresh_intervals.map((interval: any) => { - return { text: interval, value: interval }; - }), - }; - - this.refresh.options.unshift({ text: 'off' }); - this.isOpen = true; - this.$rootScope.appEvent('timepickerOpen'); - } - - closeDropdown() { - this.isOpen = false; - this.$rootScope.appEvent('timepickerClosed'); - } - - applyCustom() { - if (this.refresh.value !== this.dashboard.refresh) { - this.timeSrv.setAutoRefresh(this.refresh.value); - } - - this.timeSrv.setTime(this.editTimeRaw); - this.closeDropdown(); - } - - absoluteFromChanged() { - this.editTimeRaw.from = this.getAbsoluteMomentForTimezone(this.absolute.fromJs); - } - - absoluteToChanged() { - this.editTimeRaw.to = this.getAbsoluteMomentForTimezone(this.absolute.toJs); - } - - getAbsoluteMomentForTimezone(jsDate) { - return this.dashboard.isTimezoneUtc() ? dateTime(jsDate).utc() : dateTime(jsDate); - } - - setRelativeFilter(timespan) { - const range = { from: timespan.from, to: timespan.to }; - - if (this.panel.nowDelay && range.to === 'now') { - range.to = 'now-' + this.panel.nowDelay; - } - - this.timeSrv.setTime(range); - this.closeDropdown(); - } -} - -export function settingsDirective() { - return { - restrict: 'E', - templateUrl: 'public/app/features/dashboard/components/TimePicker/settings.html', - controller: TimePickerCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: { - dashboard: '=', - }, - }; -} - -export function timePickerDirective() { - return { - restrict: 'E', - templateUrl: 'public/app/features/dashboard/components/TimePicker/template.html', - controller: TimePickerCtrl, - bindToController: true, - controllerAs: 'ctrl', - scope: { - dashboard: '=', - }, - }; -} - -angular.module('grafana.directives').directive('gfTimePickerSettings', settingsDirective); -angular.module('grafana.directives').directive('gfTimePicker', timePickerDirective); - -import { inputDateDirective } from './validation'; -import { toUtc, getLocaleData, isDateTime, dateTime } from '@grafana/ui/src/utils/moment_wrapper'; -angular.module('grafana.directives').directive('inputDatetime', inputDateDirective); diff --git a/public/app/features/dashboard/components/TimePicker/index.ts b/public/app/features/dashboard/components/TimePicker/index.ts deleted file mode 100644 index ca6e2792c43ae..0000000000000 --- a/public/app/features/dashboard/components/TimePicker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { TimePickerCtrl } from './TimePickerCtrl'; diff --git a/public/app/features/dashboard/components/TimePicker/settings.html b/public/app/features/dashboard/components/TimePicker/settings.html deleted file mode 100644 index fd5170013c299..0000000000000 --- a/public/app/features/dashboard/components/TimePicker/settings.html +++ /dev/null @@ -1,24 +0,0 @@ -
-
Time Options
- -
-
- -
- -
-
- -
- Auto-refresh - -
-
- Now delay now- - -
- - -
-
diff --git a/public/app/features/dashboard/components/TimePicker/template.html b/public/app/features/dashboard/components/TimePicker/template.html deleted file mode 100644 index 2821dd0ced537..0000000000000 --- a/public/app/features/dashboard/components/TimePicker/template.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - - - - - -
-
-
- Quick ranges -
-
-
    -
  • - -
    • -
-
-
- -
-
- Custom range -
-
- -
-
- -
-
- -
-
- -
- -
- - - -
-
- -
-
- -
-
- -
- -
- -
-
- -
-
-
-
-
- diff --git a/public/app/features/dashboard/components/TimePicker/validation.ts b/public/app/features/dashboard/components/TimePicker/validation.ts deleted file mode 100644 index a99409a0fb0c6..0000000000000 --- a/public/app/features/dashboard/components/TimePicker/validation.ts +++ /dev/null @@ -1,49 +0,0 @@ -import * as dateMath from '@grafana/ui/src/utils/datemath'; -import { toUtc, dateTime, isDateTime } from '@grafana/ui/src/utils/moment_wrapper'; - -export function inputDateDirective() { - return { - restrict: 'A', - require: 'ngModel', - link: ($scope, $elem, attrs, ngModel) => { - const format = 'YYYY-MM-DD HH:mm:ss'; - - const fromUser = text => { - if (text.indexOf('now') !== -1) { - if (!dateMath.isValid(text)) { - ngModel.$setValidity('error', false); - return undefined; - } - ngModel.$setValidity('error', true); - return text; - } - - let parsed; - if ($scope.ctrl.isUtc) { - parsed = toUtc(text, format); - } else { - parsed = dateTime(text, format); - } - - if (!parsed.isValid()) { - ngModel.$setValidity('error', false); - return undefined; - } - - ngModel.$setValidity('error', true); - return parsed; - }; - - const toUser = currentValue => { - if (isDateTime(currentValue)) { - return currentValue.format(format); - } else { - return currentValue; - } - }; - - ngModel.$parsers.push(fromUser); - ngModel.$formatters.push(toUser); - }, - }; -} diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 6f57f6f42e391..639e34a16ae27 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -163,6 +163,7 @@ export class DashboardGrid extends PureComponent { for (const panel of this.props.dashboard.panels) { panel.resizeDone(); } + this.forceUpdate(); }; onViewModeChanged = () => { diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 485c409220c6a..e13cf5c6a6158 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -11,7 +11,7 @@ import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary'; import { getTimeSrv, TimeSrv } from '../services/TimeSrv'; import { applyPanelTimeOverrides, calculateInnerPanelHeight } from 'app/features/dashboard/utils/panel'; import { profiler } from 'app/core/profiler'; -import { getProcessedSeriesData } from '../state/PanelQueryState'; +import { getProcessedDataFrame } from '../state/PanelQueryState'; import templateSrv from 'app/features/templating/template_srv'; import config from 'app/core/config'; @@ -71,7 +71,7 @@ export class PanelChrome extends PureComponent { this.setState({ data: { state: LoadingState.Done, - series: getProcessedSeriesData(panel.snapshotData), + series: getProcessedDataFrame(panel.snapshotData), }, isFirstLoad: false, }); diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx index d3bd38b93d1a4..8aaba8bdd4a9d 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; -import Remarkable from 'remarkable'; + +import { renderMarkdown } from '@grafana/data'; import { Tooltip, ScopedVars, DataLink } from '@grafana/ui'; import { PanelModel } from 'app/features/dashboard/state/PanelModel'; @@ -45,11 +46,12 @@ export class PanelHeaderCorner extends Component { const markdown = panel.description; const linkSrv = new LinkSrv(templateSrv, this.timeSrv); const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars); - const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown); + const markedInterpolatedMarkdown = renderMarkdown(interpolatedMarkdown); return ( -
-

+

+
+ {panel.links && panel.links.length > 0 && (
    {panel.links.map((link, idx) => { diff --git a/public/app/features/dashboard/index.ts b/public/app/features/dashboard/index.ts index 1a326d73bd9e9..e2c042ef13826 100644 --- a/public/app/features/dashboard/index.ts +++ b/public/app/features/dashboard/index.ts @@ -12,7 +12,6 @@ import './components/FolderPicker'; import './components/VersionHistory'; import './components/DashboardSettings'; import './components/SubMenu'; -import './components/TimePicker'; import './components/UnsavedChangesModal'; import './components/SaveModals'; import './components/ShareModal'; diff --git a/public/app/features/dashboard/services/TimeSrv.ts b/public/app/features/dashboard/services/TimeSrv.ts index 1716563874e25..5c1a305a2ba1c 100644 --- a/public/app/features/dashboard/services/TimeSrv.ts +++ b/public/app/features/dashboard/services/TimeSrv.ts @@ -12,6 +12,7 @@ import { ITimeoutService, ILocationService } from 'angular'; import { ContextSrv } from 'app/core/services/context_srv'; import { DashboardModel } from '../state/DashboardModel'; import { toUtc, dateTime, isDateTime } from '@grafana/ui/src/utils/moment_wrapper'; +import { getZoomedTimeRange } from 'app/core/utils/timePicker'; export class TimeSrv { time: any; @@ -238,12 +239,7 @@ export class TimeSrv { zoomOut(e: any, factor: number) { const range = this.timeRange(); - - const timespan = range.to.valueOf() - range.from.valueOf(); - const center = range.to.valueOf() - timespan / 2; - - const to = center + (timespan * factor) / 2; - const from = center - (timespan * factor) / 2; + const { from, to } = getZoomedTimeRange(range, factor); this.setTime({ from: toUtc(from), to: toUtc(to) }); } diff --git a/public/app/features/dashboard/state/PanelQueryState.test.ts b/public/app/features/dashboard/state/PanelQueryState.test.ts index 8d9a028ae3d9a..2155803b49dbc 100644 --- a/public/app/features/dashboard/state/PanelQueryState.test.ts +++ b/public/app/features/dashboard/state/PanelQueryState.test.ts @@ -1,4 +1,4 @@ -import { toDataQueryError, PanelQueryState, getProcessedSeriesData } from './PanelQueryState'; +import { toDataQueryError, PanelQueryState, getProcessedDataFrame } from './PanelQueryState'; import { MockDataSourceApi } from 'test/mocks/datasource_srv'; import { DataQueryResponse, LoadingState } from '@grafana/ui'; import { getQueryOptions } from 'test/helpers/getQueryOptions'; @@ -53,7 +53,7 @@ describe('PanelQueryState', () => { }); }); -describe('getProcessedSeriesData', () => { +describe('getProcessedDataFrame', () => { it('converts timeseries to table skipping nulls', () => { const input1 = { target: 'Field Name', @@ -64,7 +64,7 @@ describe('getProcessedSeriesData', () => { target: '', datapoints: [[100, 1], [200, 2]], }; - const data = getProcessedSeriesData([null, input1, input2, null, null]); + const data = getProcessedDataFrame([null, input1, input2, null, null]); expect(data.length).toBe(2); expect(data[0].fields[0].name).toBe(input1.target); expect(data[0].rows).toBe(input1.datapoints); @@ -82,10 +82,10 @@ describe('getProcessedSeriesData', () => { }); it('supports null values from query OK', () => { - expect(getProcessedSeriesData([null, null, null, null])).toEqual([]); - expect(getProcessedSeriesData(undefined)).toEqual([]); - expect(getProcessedSeriesData((null as unknown) as any[])).toEqual([]); - expect(getProcessedSeriesData([])).toEqual([]); + expect(getProcessedDataFrame([null, null, null, null])).toEqual([]); + expect(getProcessedDataFrame(undefined)).toEqual([]); + expect(getProcessedDataFrame((null as unknown) as any[])).toEqual([]); + expect(getProcessedDataFrame([])).toEqual([]); }); }); diff --git a/public/app/features/dashboard/state/PanelQueryState.ts b/public/app/features/dashboard/state/PanelQueryState.ts index 889390f50b195..75a8740059533 100644 --- a/public/app/features/dashboard/state/PanelQueryState.ts +++ b/public/app/features/dashboard/state/PanelQueryState.ts @@ -5,7 +5,7 @@ import isEqual from 'lodash/isEqual'; // Utils & Services import { getBackendSrv } from 'app/core/services/backend_srv'; import * as dateMath from '@grafana/ui/src/utils/datemath'; -import { guessFieldTypes, toSeriesData, isSeriesData } from '@grafana/ui/src/utils'; +import { guessFieldTypes, toDataFrame, isDataFrame } from '@grafana/ui/src/utils'; // Types import { @@ -17,7 +17,7 @@ import { DataQueryError, DataStreamObserver, DataStreamState, - SeriesData, + DataFrame, DataQueryResponseData, } from '@grafana/ui'; @@ -131,7 +131,7 @@ export class PanelQueryState { this.response = { state: LoadingState.Done, request: this.request, - series: this.sendSeries ? getProcessedSeriesData(resp.data) : [], + series: this.sendSeries ? getProcessedDataFrame(resp.data) : [], legacy: this.sendLegacy ? translateToLegacyData(resp.data) : undefined, }; resolve(this.validateStreamsAndGetPanelData()); @@ -182,7 +182,7 @@ export class PanelQueryState { return; } - const series: SeriesData[] = []; + const series: DataFrame[] = []; for (const stream of this.streams) { if (stream.series) { @@ -278,7 +278,7 @@ export class PanelQueryState { response.legacy = response.series.map(v => toLegacyResponseData(v)); } if (sendSeries && !response.series.length && response.legacy) { - response.series = response.legacy.map(v => toSeriesData(v)); + response.series = response.legacy.map(v => toDataFrame(v)); } return this.validateStreamsAndGetPanelData(); } @@ -333,7 +333,7 @@ export function toDataQueryError(err: any): DataQueryError { function translateToLegacyData(data: DataQueryResponseData) { return data.map(v => { - if (isSeriesData(v)) { + if (isDataFrame(v)) { return toLegacyResponseData(v); } return v; @@ -345,15 +345,15 @@ function translateToLegacyData(data: DataQueryResponseData) { * * This is also used by PanelChrome for snapshot support */ -export function getProcessedSeriesData(results?: any[]): SeriesData[] { +export function getProcessedDataFrame(results?: any[]): DataFrame[] { if (!results) { return []; } - const series: SeriesData[] = []; + const series: DataFrame[] = []; for (const r of results) { if (r) { - series.push(guessFieldTypes(toSeriesData(r))); + series.push(guessFieldTypes(toDataFrame(r))); } } diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index a8a7bd9ab04dd..ffd04e6a23559 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -16,7 +16,6 @@ import GraphContainer from './GraphContainer'; import LogsContainer from './LogsContainer'; import QueryRows from './QueryRows'; import TableContainer from './TableContainer'; -import TimePicker from './TimePicker'; // Actions import { @@ -35,7 +34,6 @@ import { RawTimeRange, DataQuery, ExploreStartPageProps, DataSourceApi, DataQuer import { ExploreItemState, ExploreUrlState, - RangeScanner, ExploreId, ExploreUpdateState, ExploreUIState, @@ -71,7 +69,6 @@ interface ExploreProps { update: ExploreUpdateState; reconnectDatasource: typeof reconnectDatasource; refreshExplore: typeof refreshExplore; - scanner?: RangeScanner; scanning?: boolean; scanRange?: RawTimeRange; scanStart: typeof scanStart; @@ -83,9 +80,9 @@ interface ExploreProps { initialDatasource: string; initialQueries: DataQuery[]; initialRange: RawTimeRange; + mode: ExploreMode; initialUI: ExploreUIState; queryErrors: DataQueryError[]; - mode: ExploreMode; isLive: boolean; updateTimeRange: typeof updateTimeRange; } @@ -117,19 +114,14 @@ interface ExploreProps { export class Explore extends React.PureComponent { el: any; exploreEvents: Emitter; - /** - * Timepicker to control scanning - */ - timepickerRef: React.RefObject; constructor(props: ExploreProps) { super(props); this.exploreEvents = new Emitter(); - this.timepickerRef = React.createRef(); } componentDidMount() { - const { initialized, exploreId, initialDatasource, initialQueries, initialRange, initialUI } = this.props; + const { initialized, exploreId, initialDatasource, initialQueries, initialRange, mode, initialUI } = this.props; const width = this.el ? this.el.offsetWidth : 0; // initialize the whole explore first time we mount and if browser history contains a change in datasource @@ -139,6 +131,7 @@ export class Explore extends React.PureComponent { initialDatasource, initialQueries, initialRange, + mode, width, this.exploreEvents, initialUI @@ -158,11 +151,9 @@ export class Explore extends React.PureComponent { this.el = el; }; - onChangeTime = (rawRange: RawTimeRange, changedByScanner?: boolean) => { - const { updateTimeRange, exploreId, scanning } = this.props; - if (scanning && !changedByScanner) { - this.onStopScanning(); - } + onChangeTime = (rawRange: RawTimeRange) => { + const { updateTimeRange, exploreId } = this.props; + updateTimeRange({ exploreId, rawRange }); }; @@ -189,13 +180,7 @@ export class Explore extends React.PureComponent { onStartScanning = () => { // Scanner will trigger a query - const scanner = this.scanPreviousRange; - this.props.scanStart(this.props.exploreId, scanner); - }; - - scanPreviousRange = (): RawTimeRange => { - // Calling move() on the timepicker will trigger this.onChangeTime() - return this.timepickerRef.current.move(-1, true); + this.props.scanStart(this.props.exploreId); }; onStopScanning = () => { @@ -243,7 +228,7 @@ export class Explore extends React.PureComponent { return (
    - + {datasourceLoading ?
    Loading datasource...
    : null} {datasourceMissing ? this.renderEmptyState() : null} @@ -316,14 +301,32 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) { urlState, update, queryErrors, - mode, isLive, + supportedModes, + mode, } = item; - const { datasource, queries, range: urlRange, ui } = (urlState || {}) as ExploreUrlState; + const { datasource, queries, range: urlRange, mode: urlMode, ui } = (urlState || {}) as ExploreUrlState; const initialDatasource = datasource || store.get(LAST_USED_DATASOURCE_KEY); const initialQueries: DataQuery[] = ensureQueries(queries); const initialRange = urlRange ? getTimeRangeFromUrl(urlRange, timeZone).raw : DEFAULT_RANGE; + + let newMode: ExploreMode; + if (supportedModes.length) { + const urlModeIsValid = supportedModes.includes(urlMode); + const modeStateIsValid = supportedModes.includes(mode); + + if (urlModeIsValid) { + newMode = urlMode; + } else if (modeStateIsValid) { + newMode = mode; + } else { + newMode = supportedModes[0]; + } + } else { + newMode = [ExploreMode.Metrics, ExploreMode.Logs].includes(urlMode) ? urlMode : ExploreMode.Metrics; + } + const initialUI = ui || DEFAULT_UI_STATE; return { @@ -340,9 +343,9 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) { initialDatasource, initialQueries, initialRange, + mode: newMode, initialUI, queryErrors, - mode, isLive, }; } diff --git a/public/app/features/explore/ExploreTimeControls.tsx b/public/app/features/explore/ExploreTimeControls.tsx new file mode 100644 index 0000000000000..7ae5bf10a7b1a --- /dev/null +++ b/public/app/features/explore/ExploreTimeControls.tsx @@ -0,0 +1,112 @@ +// Libaries +import React, { Component } from 'react'; + +// Types +import { ExploreId } from 'app/types'; +import { TimeRange, TimeOption, TimeZone, SetInterval, toUtc, dateTime } from '@grafana/ui'; + +// State + +// Components +import { TimePicker, RefreshPicker, RawTimeRange } from '@grafana/ui'; + +// Utils & Services +import { defaultSelectOptions } from '@grafana/ui/src/components/TimePicker/TimePicker'; +import { getShiftedTimeRange, getZoomedTimeRange } from 'app/core/utils/timePicker'; + +export interface Props { + exploreId: ExploreId; + hasLiveOption: boolean; + isLive: boolean; + loading: boolean; + range: TimeRange; + refreshInterval: string; + timeZone: TimeZone; + onRunQuery: () => void; + onChangeRefreshInterval: (interval: string) => void; + onChangeTime: (range: RawTimeRange) => void; +} + +export class ExploreTimeControls extends Component { + onMoveTimePicker = (direction: number) => { + const { range, onChangeTime, timeZone } = this.props; + const { from, to } = getShiftedTimeRange(direction, range); + const nextTimeRange = { + from: timeZone === 'utc' ? toUtc(from) : dateTime(from), + to: timeZone === 'utc' ? toUtc(to) : dateTime(to), + }; + + onChangeTime(nextTimeRange); + }; + + onMoveForward = () => this.onMoveTimePicker(1); + onMoveBack = () => this.onMoveTimePicker(-1); + + onChangeTimePicker = (timeRange: TimeRange) => { + this.props.onChangeTime(timeRange.raw); + }; + + onZoom = () => { + const { range, onChangeTime, timeZone } = this.props; + const { from, to } = getZoomedTimeRange(range, 2); + const nextTimeRange = { + from: timeZone === 'utc' ? toUtc(from) : dateTime(from), + to: timeZone === 'utc' ? toUtc(to) : dateTime(to), + }; + + onChangeTime(nextTimeRange); + }; + + setActiveTimeOption = (timeOptions: TimeOption[], rawTimeRange: RawTimeRange): TimeOption[] => { + return timeOptions.map(option => { + if (option.to === rawTimeRange.to && option.from === rawTimeRange.from) { + return { + ...option, + active: true, + }; + } + return { + ...option, + active: false, + }; + }); + }; + + render() { + const { + hasLiveOption, + isLive, + loading, + range, + refreshInterval, + timeZone, + onRunQuery, + onChangeRefreshInterval, + } = this.props; + + return ( + <> + {!isLive && ( + + )} + + + {refreshInterval && } + + ); + } +} diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 75f8cc75b7c04..1b81d42181e6e 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -3,15 +3,7 @@ import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; import { ExploreId, ExploreMode } from 'app/types/explore'; -import { - DataSourceSelectItem, - RawTimeRange, - ClickOutsideWrapper, - TimeZone, - TimeRange, - SelectOptionItem, - LoadingState, -} from '@grafana/ui'; +import { DataSourceSelectItem, RawTimeRange, TimeZone, TimeRange, SelectOptionItem, LoadingState } from '@grafana/ui'; import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; import { StoreState } from 'app/types/store'; import { @@ -23,10 +15,9 @@ import { changeRefreshInterval, changeMode, } from './state/actions'; -import TimePicker from './TimePicker'; import { getTimeZone } from '../profile/state/selectors'; -import { RefreshPicker, SetInterval } from '@grafana/ui'; import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup'; +import { ExploreTimeControls } from './ExploreTimeControls'; enum IconSide { left = 'left', @@ -63,7 +54,6 @@ const createResponsiveButton = (options: { interface OwnProps { exploreId: ExploreId; - timepickerRef: React.RefObject; onChangeTime: (range: RawTimeRange, changedByScanner?: boolean) => void; } @@ -111,10 +101,6 @@ export class UnConnectedExploreToolbar extends PureComponent { return this.props.runQueries(this.props.exploreId); }; - onCloseTimePicker = () => { - this.props.timepickerRef.current.setState({ isOpen: false }); - }; - onChangeRefreshInterval = (item: string) => { const { changeRefreshInterval, exploreId } = this.props; changeRefreshInterval(exploreId, item); @@ -136,7 +122,6 @@ export class UnConnectedExploreToolbar extends PureComponent { timeZone, selectedDatasource, splitted, - timepickerRef, refreshInterval, onChangeTime, split, @@ -213,21 +198,19 @@ export class UnConnectedExploreToolbar extends PureComponent { })}
    ) : null} -
    - {!isLive && ( - - - - )} - - + - {refreshInterval && }
    diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx index 1a65bd2397cf6..e57d533ee688f 100644 --- a/public/app/features/explore/Graph.tsx +++ b/public/app/features/explore/Graph.tsx @@ -79,7 +79,7 @@ interface GraphProps { split?: boolean; userOptions?: any; onChangeTime?: (range: AbsoluteTimeRange) => void; - onToggleSeries?: (alias: string, hiddenSeries: Set) => void; + onToggleSeries?: (alias: string, hiddenSeries: string[]) => void; } interface GraphState { @@ -213,13 +213,13 @@ export class Graph extends PureComponent { // This implementation is more or less a copy of GraphPanel's logic. // TODO: we need to use Graph's panel controller or split it into smaller // controllers to remove code duplication. Right now we cant easily use that, since Explore - // is not using SeriesData for graph yet + // is not using DataFrame for graph yet const exclusive = event.ctrlKey || event.metaKey || event.shiftKey; this.setState((state, props) => { - const { data } = props; - let nextHiddenSeries = []; + const { data, onToggleSeries } = props; + let nextHiddenSeries: string[] = []; if (exclusive) { // Toggling series with key makes the series itself to toggle if (state.hiddenSeries.indexOf(label) > -1) { @@ -238,6 +238,10 @@ export class Graph extends PureComponent { } } + if (onToggleSeries) { + onToggleSeries(label, nextHiddenSeries); + } + return { hiddenSeries: nextHiddenSeries, }; diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx index 073eff5ec922a..c06fc0cf99bae 100644 --- a/public/app/features/explore/LiveLogs.tsx +++ b/public/app/features/explore/LiveLogs.tsx @@ -8,6 +8,7 @@ import { LinkButton, LogsModel, LogRowModel, + TimeZone, } from '@grafana/ui'; import ElapsedTime from './ElapsedTime'; @@ -42,6 +43,7 @@ const getStyles = (theme: GrafanaTheme) => ({ export interface Props extends Themeable { logsResult?: LogsModel; + timeZone: TimeZone; stopLive: () => void; } @@ -73,10 +75,11 @@ class LiveLogs extends PureComponent { } render() { - const { theme } = this.props; + const { theme, timeZone } = this.props; const { renderCount } = this.state; const styles = getStyles(theme); const rowsToRender: LogRowModel[] = this.props.logsResult ? this.props.logsResult.rows : []; + const showUtc = timeZone === 'utc'; return ( <> @@ -87,9 +90,16 @@ class LiveLogs extends PureComponent { className={row.fresh ? cx(['logs-row', styles.logsRowFresh]) : cx(['logs-row', styles.logsRowOld])} key={`${row.timeEpochMs}-${index}`} > -
    - {row.timeLocal} -
    + {showUtc && ( +
    + {row.timeUtc} +
    + )} + {!showUtc && ( +
    + {row.timeLocal} +
    + )}
    {row.entry}
    ); diff --git a/public/app/features/explore/LogRow.tsx b/public/app/features/explore/LogRow.tsx index e626782f1deb9..10657eb9bdaad 100644 --- a/public/app/features/explore/LogRow.tsx +++ b/public/app/features/explore/LogRow.tsx @@ -1,5 +1,6 @@ import React, { PureComponent } from 'react'; import _ from 'lodash'; +// @ts-ignore import Highlighter from 'react-highlight-words'; import classnames from 'classnames'; @@ -23,6 +24,7 @@ import { LogRowModel, LogLabelStatsModel, LogsParser, + TimeZone, } from '@grafana/ui'; import { LogRowContext } from './LogRowContext'; import tinycolor from 'tinycolor2'; @@ -32,8 +34,8 @@ interface Props { row: LogRowModel; showDuplicates: boolean; showLabels: boolean; - showLocalTime: boolean; - showUtc: boolean; + showTime: boolean; + timeZone: TimeZone; getRows: () => LogRowModel[]; onClickLabel?: (label: string, value: string) => void; onContextClick?: () => void; @@ -57,7 +59,7 @@ interface State { * Renders a highlighted field. * When hovering, a stats icon is shown. */ -const FieldHighlight = onClick => props => { +const FieldHighlight = (onClick: any) => (props: any) => { return ( {props.children} @@ -85,7 +87,7 @@ const getLogRowWithContextStyles = (theme: GrafanaTheme, state: State) => { row: css` z-index: 1; outline: 9999px solid - ${tinycolor(outlineColor) + ${tinycolor(outlineColor as tinycolor.ColorInput) .setAlpha(0.7) .toRgbString()}; `, @@ -102,7 +104,7 @@ const getLogRowWithContextStyles = (theme: GrafanaTheme, state: State) => { export class LogRow extends PureComponent { mouseMessageTimer: NodeJS.Timer; - state = { + state: any = { fieldCount: 0, fieldLabel: null, fieldStats: null, @@ -209,8 +211,8 @@ export class LogRow extends PureComponent { row, showDuplicates, showLabels, - showLocalTime, - showUtc, + timeZone, + showTime, } = this.props; const { fieldCount, @@ -229,6 +231,7 @@ export class LogRow extends PureComponent { const highlightClassName = classnames('logs-row__match-highlight', { 'logs-row__match-highlight--preview': previewHighlights, }); + const showUtc = timeZone === 'utc'; return ( @@ -242,13 +245,13 @@ export class LogRow extends PureComponent {
    {row.duplicates > 0 ? `${row.duplicates + 1}x` : null}
    )}
    - {showUtc && ( -
    - {row.timestamp} + {showTime && showUtc && ( +
    + {row.timeUtc}
    )} - {showLocalTime && ( -
    + {showTime && !showUtc && ( +
    {row.timeLocal}
    )} diff --git a/public/app/features/explore/LogRowContext.tsx b/public/app/features/explore/LogRowContext.tsx index da9c3ec481230..2e0e4b4c18615 100644 --- a/public/app/features/explore/LogRowContext.tsx +++ b/public/app/features/explore/LogRowContext.tsx @@ -103,12 +103,6 @@ const LogRowContextGroupHeader: React.FunctionComponent contextRow !== row.raw); - return (
    - Found {logRowsToRender.length} rows. + Found {rows.length} rows. {(rows.length >= 10 || (rows.length > 10 && rows.length % 10 !== 0)) && canLoadMoreRows && ( JSX.Element; } +export const getRowContexts = async ( + getRowContext: (row: LogRowModel, options?: any) => Promise, + row: LogRowModel, + limit: number +) => { + const promises = [ + getRowContext(row, { + limit, + }), + getRowContext(row, { + limit: limit + 1, // Lets add one more to the limit as we're filtering out one row see comment below + direction: 'FORWARD', + }), + ]; + + const results: Array = await Promise.all(promises.map(p => p.catch(e => e))); + + return { + data: results.map((result, index) => { + const dataResult: DataQueryResponse = result as DataQueryResponse; + if (!dataResult.data) { + return []; + } + + // We need to filter out the row we're basing our search from because of how start/end params work in Loki API + // see https://github.com/grafana/loki/issues/597#issuecomment-506408980 + // the alternative to create our own add 1 nanosecond method to the a timestamp string would be quite complex + return dataResult.data.map(series => { + const filteredRows = series.rows.filter((r: any) => r[0] !== row.timestamp); + return filteredRows.map((row: any) => row[1]); + }); + }), + errors: results.map(result => { + const errorResult: DataQueryError = result as DataQueryError; + if (!errorResult.message) { + return null; + } + + return errorResult.message; + }), + }; +}; + export const LogRowContextProvider: React.FunctionComponent = ({ getRowContext, row, children, }) => { + // React Hook that creates a number state value called limit to component state and a setter function called setLimit + // The intial value for limit is 10 + // Used for the number of rows to retrieve from backend from a specific point in time const [limit, setLimit] = useState(10); + + // React Hook that creates an object state value called result to component state and a setter function called setResult + // The intial value for result is null + // Used for sorting the response from backend const [result, setResult] = useState<{ data: string[][]; errors: string[]; }>(null); + + // React Hook that creates an object state value called hasMoreContextRows to component state and a setter function called setHasMoreContextRows + // The intial value for hasMoreContextRows is {before: true, after: true} + // Used for indicating in UI if there are more rows to load in a given direction const [hasMoreContextRows, setHasMoreContextRows] = useState({ before: true, after: true, }); + // React Hook that resolves two promises every time the limit prop changes + // First promise fetches limit number of rows backwards in time from a specific point in time + // Second promise fetches limit number of rows forwards in time from a specific point in time const { value } = useAsync(async () => { - const promises = [ - getRowContext(row, { - limit, - }), - getRowContext(row, { - limit, - direction: 'FORWARD', - }), - ]; - - const results: Array = await Promise.all(promises.map(p => p.catch(e => e))); - - return { - data: results.map(result => { - if ((result as DataQueryResponse).data) { - return (result as DataQueryResponse).data.map(series => { - return series.rows.map(row => row[1]); - }); - } else { - return []; - } - }), - errors: results.map(result => { - if ((result as DataQueryError).message) { - return (result as DataQueryError).message; - } else { - return null; - } - }), - }; + return await getRowContexts(getRowContext, row, limit); // Moved it to a separate function for debugging purposes }, [limit]); + // React Hook that performs a side effect every time the value (from useAsync hook) prop changes + // The side effect changes the result state with the response from the useAsync hook + // The side effect changes the hasMoreContextRows state if there are more context rows before or after the current result useEffect(() => { if (value) { setResult(currentResult => { diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index 201eda44ece3e..e2a9539be97f1 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -68,7 +68,7 @@ interface Props { onStartScanning?: () => void; onStopScanning?: () => void; onDedupStrategyChange: (dedupStrategy: LogsDedupStrategy) => void; - onToggleLogLevel: (hiddenLogLevels: Set) => void; + onToggleLogLevel: (hiddenLogLevels: LogLevel[]) => void; getRowContext?: (row: LogRowModel, options?: any) => Promise; } @@ -76,8 +76,7 @@ interface State { deferLogs: boolean; renderAll: boolean; showLabels: boolean; - showLocalTime: boolean; - showUtc: boolean; + showTime: boolean; } export default class Logs extends PureComponent { @@ -88,8 +87,7 @@ export default class Logs extends PureComponent { deferLogs: true, renderAll: false, showLabels: false, - showLocalTime: true, - showUtc: false, + showTime: true, }; componentDidMount() { @@ -103,7 +101,7 @@ export default class Logs extends PureComponent { } } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate(prevProps: Props, prevState: State) { // Staged rendering if (prevState.deferLogs && !this.state.deferLogs && !this.state.renderAll) { this.renderAllTimer = setTimeout(() => this.setState({ renderAll: true }), 2000); @@ -130,22 +128,15 @@ export default class Logs extends PureComponent { }); }; - onChangeLocalTime = (event: React.SyntheticEvent) => { + onChangeTime = (event: React.SyntheticEvent) => { const target = event.target as HTMLInputElement; this.setState({ - showLocalTime: target.checked, + showTime: target.checked, }); }; - onChangeUtc = (event: React.SyntheticEvent) => { - const target = event.target as HTMLInputElement; - this.setState({ - showUtc: target.checked, - }); - }; - - onToggleLogLevel = (rawLevel: string, hiddenRawLevels: Set) => { - const hiddenLogLevels: Set = new Set(Array.from(hiddenRawLevels).map(level => LogLevel[level])); + onToggleLogLevel = (rawLevel: string, hiddenRawLevels: string[]) => { + const hiddenLogLevels: LogLevel[] = hiddenRawLevels.map(level => LogLevel[level]); this.props.onToggleLogLevel(hiddenLogLevels); }; @@ -178,7 +169,7 @@ export default class Logs extends PureComponent { return null; } - const { deferLogs, renderAll, showLabels, showLocalTime, showUtc } = this.state; + const { deferLogs, renderAll, showLabels, showTime } = this.state; const { dedupStrategy } = this.props; const hasData = data && data.rows && data.rows.length > 0; const hasLabel = hasData && dedupedData.hasUniqueLabels; @@ -223,8 +214,7 @@ export default class Logs extends PureComponent {
    - - + {Object.keys(LogsDedupStrategy).map((dedupType, i) => ( @@ -265,8 +255,8 @@ export default class Logs extends PureComponent { row={row} showDuplicates={showDuplicates} showLabels={showLabels && hasLabel} - showLocalTime={showLocalTime} - showUtc={showUtc} + showTime={showTime} + timeZone={timeZone} onClickLabel={onClickLabel} /> ))} @@ -281,8 +271,8 @@ export default class Logs extends PureComponent { row={row} showDuplicates={showDuplicates} showLabels={showLabels && hasLabel} - showLocalTime={showLocalTime} - showUtc={showUtc} + showTime={showTime} + timeZone={timeZone} onClickLabel={onClickLabel} /> ))} diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx index 88639aa6864c3..4b5c00798d498 100644 --- a/public/app/features/explore/LogsContainer.tsx +++ b/public/app/features/explore/LogsContainer.tsx @@ -11,6 +11,7 @@ import { LogRowModel, LogsDedupStrategy, LoadingState, + TimeRange, } from '@grafana/ui'; import { ExploreId, ExploreItemState } from 'app/types/explore'; @@ -47,6 +48,7 @@ interface LogsContainerProps { isLive: boolean; stopLive: typeof changeRefreshIntervalAction; updateTimeRange: typeof updateTimeRange; + range: TimeRange; absoluteRange: AbsoluteTimeRange; } @@ -66,7 +68,7 @@ export class LogsContainer extends Component { this.props.changeDedupStrategy(this.props.exploreId, dedupStrategy); }; - hangleToggleLogLevel = (hiddenLogLevels: Set) => { + handleToggleLogLevel = (hiddenLogLevels: LogLevel[]) => { const { exploreId } = this.props; this.props.toggleLogLevelAction({ exploreId, @@ -90,7 +92,10 @@ export class LogsContainer extends Component { return ( nextProps.loading !== this.props.loading || nextProps.dedupStrategy !== this.props.dedupStrategy || - nextProps.logsHighlighterExpressions !== this.props.logsHighlighterExpressions + nextProps.logsHighlighterExpressions !== this.props.logsHighlighterExpressions || + nextProps.hiddenLogLevels !== this.props.hiddenLogLevels || + nextProps.scanning !== this.props.scanning || + nextProps.isLive !== this.props.isLive ); } @@ -107,7 +112,7 @@ export class LogsContainer extends Component { absoluteRange, timeZone, scanning, - scanRange, + range, width, hiddenLogLevels, isLive, @@ -116,7 +121,7 @@ export class LogsContainer extends Component { if (isLive) { return ( - + ); } @@ -135,11 +140,11 @@ export class LogsContainer extends Component { onStartScanning={onStartScanning} onStopScanning={onStopScanning} onDedupStrategyChange={this.handleDedupStrategyChange} - onToggleLogLevel={this.hangleToggleLogLevel} + onToggleLogLevel={this.handleToggleLogLevel} absoluteRange={absoluteRange} timeZone={timeZone} scanning={scanning} - scanRange={scanRange} + scanRange={range.raw} width={width} hiddenLogLevels={hiddenLogLevels} getRowContext={this.getLogRowContext} @@ -157,9 +162,9 @@ function mapStateToProps(state: StoreState, { exploreId }) { logsResult, loadingState, scanning, - scanRange, datasourceInstance, isLive, + range, absoluteRange, } = item; const loading = loadingState === LoadingState.Loading || loadingState === LoadingState.Streaming; @@ -173,13 +178,13 @@ function mapStateToProps(state: StoreState, { exploreId }) { logsHighlighterExpressions, logsResult, scanning, - scanRange, timeZone, dedupStrategy, hiddenLogLevels, dedupedResult, datasourceInstance, isLive, + range, absoluteRange, }; } diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx index cad509d207160..03d066ce5a362 100644 --- a/public/app/features/explore/QueryRow.tsx +++ b/public/app/features/explore/QueryRow.tsx @@ -197,7 +197,7 @@ function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps) const query = queries[index]; const datasourceStatus = datasourceError ? DataSourceStatus.Disconnected : DataSourceStatus.Connected; const error = queryErrors.filter(queryError => queryError.refId === query.refId)[0]; - const series = graphResult ? graphResult : []; // TODO: use SeriesData + const series = graphResult ? graphResult : []; // TODO: use DataFrame const queryResponse: PanelData = { series, state: loadingState, diff --git a/public/app/features/explore/TimePicker.test.tsx b/public/app/features/explore/TimePicker.test.tsx deleted file mode 100644 index ea793096374b8..0000000000000 --- a/public/app/features/explore/TimePicker.test.tsx +++ /dev/null @@ -1,238 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import sinon from 'sinon'; - -import * as dateMath from '@grafana/ui/src/utils/datemath'; -import * as rangeUtil from '@grafana/ui/src/utils/rangeutil'; -import TimePicker from './TimePicker'; -import { RawTimeRange, TimeRange, TIME_FORMAT } from '@grafana/ui'; -import { toUtc, isDateTime, dateTime } from '@grafana/ui/src/utils/moment_wrapper'; - -const DEFAULT_RANGE = { - from: 'now-6h', - to: 'now', -}; - -const fromRaw = (rawRange: RawTimeRange): TimeRange => { - const raw = { - from: isDateTime(rawRange.from) ? dateTime(rawRange.from) : rawRange.from, - to: isDateTime(rawRange.to) ? dateTime(rawRange.to) : rawRange.to, - }; - - return { - from: dateMath.parse(raw.from, false), - to: dateMath.parse(raw.to, true), - raw: rawRange, - }; -}; - -describe('', () => { - it('render default values when closed and relative time range', () => { - const range = fromRaw(DEFAULT_RANGE); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe(DEFAULT_RANGE.from); - expect(wrapper.state('toRaw')).toBe(DEFAULT_RANGE.to); - expect(wrapper.find('.timepicker-rangestring').text()).toBe('Last 6 hours'); - expect(wrapper.find('.gf-timepicker-dropdown').exists()).toBeFalsy(); - expect(wrapper.find('.gf-timepicker-utc').exists()).toBeFalsy(); - }); - - it('render default values when closed, utc and relative time range', () => { - const range = fromRaw(DEFAULT_RANGE); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe(DEFAULT_RANGE.from); - expect(wrapper.state('toRaw')).toBe(DEFAULT_RANGE.to); - expect(wrapper.find('.timepicker-rangestring').text()).toBe('Last 6 hours'); - expect(wrapper.find('.gf-timepicker-dropdown').exists()).toBeFalsy(); - expect(wrapper.find('.gf-timepicker-utc').exists()).toBeTruthy(); - }); - - it('renders default values when open and relative range', () => { - const range = fromRaw(DEFAULT_RANGE); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe(DEFAULT_RANGE.from); - expect(wrapper.state('toRaw')).toBe(DEFAULT_RANGE.to); - expect(wrapper.find('.timepicker-rangestring').text()).toBe('Last 6 hours'); - expect(wrapper.find('.gf-timepicker-dropdown').exists()).toBeTruthy(); - expect(wrapper.find('.gf-timepicker-utc').exists()).toBeFalsy(); - expect(wrapper.find('.timepicker-from').props().value).toBe(DEFAULT_RANGE.from); - expect(wrapper.find('.timepicker-to').props().value).toBe(DEFAULT_RANGE.to); - }); - - it('renders default values when open, utc and relative range', () => { - const range = fromRaw(DEFAULT_RANGE); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe(DEFAULT_RANGE.from); - expect(wrapper.state('toRaw')).toBe(DEFAULT_RANGE.to); - expect(wrapper.find('.timepicker-rangestring').text()).toBe('Last 6 hours'); - expect(wrapper.find('.gf-timepicker-dropdown').exists()).toBeTruthy(); - expect(wrapper.find('.gf-timepicker-utc').exists()).toBeTruthy(); - expect(wrapper.find('.timepicker-from').props().value).toBe(DEFAULT_RANGE.from); - expect(wrapper.find('.timepicker-to').props().value).toBe(DEFAULT_RANGE.to); - }); - - it('apply with absolute range and non-utc', () => { - const range = { - from: toUtc(1), - to: toUtc(1000), - raw: { - from: toUtc(1), - to: toUtc(1000), - }, - }; - const localRange = { - from: dateTime(1), - to: dateTime(1000), - raw: { - from: dateTime(1), - to: dateTime(1000), - }, - }; - const expectedRangeString = rangeUtil.describeTimeRange(localRange); - - const onChangeTime = sinon.spy(); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe(localRange.from.format(TIME_FORMAT)); - expect(wrapper.state('toRaw')).toBe(localRange.to.format(TIME_FORMAT)); - expect(wrapper.state('initialRange')).toBe(range.raw); - expect(wrapper.find('.timepicker-rangestring').text()).toBe(expectedRangeString); - expect(wrapper.find('.timepicker-from').props().value).toBe(localRange.from.format(TIME_FORMAT)); - expect(wrapper.find('.timepicker-to').props().value).toBe(localRange.to.format(TIME_FORMAT)); - - wrapper.find('button.gf-form-btn').simulate('click'); - expect(onChangeTime.calledOnce).toBeTruthy(); - expect(onChangeTime.getCall(0).args[0].from.valueOf()).toBe(0); - expect(onChangeTime.getCall(0).args[0].to.valueOf()).toBe(1000); - - expect(wrapper.state('isOpen')).toBeFalsy(); - expect(wrapper.state('rangeString')).toBe(expectedRangeString); - }); - - it('apply with absolute range and utc', () => { - const range = { - from: toUtc(1), - to: toUtc(1000), - raw: { - from: toUtc(1), - to: toUtc(1000), - }, - }; - const onChangeTime = sinon.spy(); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe('1970-01-01 00:00:00'); - expect(wrapper.state('toRaw')).toBe('1970-01-01 00:00:01'); - expect(wrapper.state('initialRange')).toBe(range.raw); - expect(wrapper.find('.timepicker-rangestring').text()).toBe('1970-01-01 00:00:00 to 1970-01-01 00:00:01'); - expect(wrapper.find('.timepicker-from').props().value).toBe('1970-01-01 00:00:00'); - expect(wrapper.find('.timepicker-to').props().value).toBe('1970-01-01 00:00:01'); - - wrapper.find('button.gf-form-btn').simulate('click'); - expect(onChangeTime.calledOnce).toBeTruthy(); - expect(onChangeTime.getCall(0).args[0].from.valueOf()).toBe(0); - expect(onChangeTime.getCall(0).args[0].to.valueOf()).toBe(1000); - - expect(wrapper.state('isOpen')).toBeFalsy(); - expect(wrapper.state('rangeString')).toBe('1970-01-01 00:00:00 to 1970-01-01 00:00:01'); - }); - - it('moves ranges backward by half the range on left arrow click when utc', () => { - const rawRange = { - from: toUtc(2000), - to: toUtc(4000), - raw: { - from: toUtc(2000), - to: toUtc(4000), - }, - }; - const range = fromRaw(rawRange); - - const onChangeTime = sinon.spy(); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe('1970-01-01 00:00:02'); - expect(wrapper.state('toRaw')).toBe('1970-01-01 00:00:04'); - - wrapper.find('.timepicker-left').simulate('click'); - expect(onChangeTime.calledOnce).toBeTruthy(); - expect(onChangeTime.getCall(0).args[0].from.valueOf()).toBe(1000); - expect(onChangeTime.getCall(0).args[0].to.valueOf()).toBe(3000); - }); - - it('moves ranges backward by half the range on left arrow click when not utc', () => { - const range = { - from: toUtc(2000), - to: toUtc(4000), - raw: { - from: toUtc(2000), - to: toUtc(4000), - }, - }; - const localRange = { - from: dateTime(2000), - to: dateTime(4000), - raw: { - from: dateTime(2000), - to: dateTime(4000), - }, - }; - - const onChangeTime = sinon.spy(); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe(localRange.from.format(TIME_FORMAT)); - expect(wrapper.state('toRaw')).toBe(localRange.to.format(TIME_FORMAT)); - - wrapper.find('.timepicker-left').simulate('click'); - expect(onChangeTime.calledOnce).toBeTruthy(); - expect(onChangeTime.getCall(0).args[0].from.valueOf()).toBe(1000); - expect(onChangeTime.getCall(0).args[0].to.valueOf()).toBe(3000); - }); - - it('moves ranges forward by half the range on right arrow click when utc', () => { - const range = { - from: toUtc(1000), - to: toUtc(3000), - raw: { - from: toUtc(1000), - to: toUtc(3000), - }, - }; - - const onChangeTime = sinon.spy(); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe('1970-01-01 00:00:01'); - expect(wrapper.state('toRaw')).toBe('1970-01-01 00:00:03'); - - wrapper.find('.timepicker-right').simulate('click'); - expect(onChangeTime.calledOnce).toBeTruthy(); - expect(onChangeTime.getCall(0).args[0].from.valueOf()).toBe(2000); - expect(onChangeTime.getCall(0).args[0].to.valueOf()).toBe(4000); - }); - - it('moves ranges forward by half the range on right arrow click when not utc', () => { - const range = { - from: toUtc(1000), - to: toUtc(3000), - raw: { - from: toUtc(1000), - to: toUtc(3000), - }, - }; - const localRange = { - from: dateTime(1000), - to: dateTime(3000), - raw: { - from: dateTime(1000), - to: dateTime(3000), - }, - }; - - const onChangeTime = sinon.spy(); - const wrapper = shallow(); - expect(wrapper.state('fromRaw')).toBe(localRange.from.format(TIME_FORMAT)); - expect(wrapper.state('toRaw')).toBe(localRange.to.format(TIME_FORMAT)); - - wrapper.find('.timepicker-right').simulate('click'); - expect(onChangeTime.calledOnce).toBeTruthy(); - expect(onChangeTime.getCall(0).args[0].from.valueOf()).toBe(2000); - expect(onChangeTime.getCall(0).args[0].to.valueOf()).toBe(4000); - }); -}); diff --git a/public/app/features/explore/TimePicker.tsx b/public/app/features/explore/TimePicker.tsx deleted file mode 100644 index 510646dcfe4fb..0000000000000 --- a/public/app/features/explore/TimePicker.tsx +++ /dev/null @@ -1,305 +0,0 @@ -import React, { PureComponent, ChangeEvent } from 'react'; -import * as rangeUtil from '@grafana/ui/src/utils/rangeutil'; -import { Input, RawTimeRange, TimeRange, TIME_FORMAT, TimeZone } from '@grafana/ui'; -import { toUtc, isDateTime, dateTime } from '@grafana/ui/src/utils/moment_wrapper'; - -interface TimePickerProps { - isOpen?: boolean; - range: TimeRange; - timeZone: TimeZone; - onChangeTime?: (range: RawTimeRange, scanning?: boolean) => void; -} - -interface TimePickerState { - isOpen: boolean; - isUtc: boolean; - rangeString: string; - refreshInterval?: string; - initialRange: RawTimeRange; - - // Input-controlled text, keep these in a shape that is human-editable - fromRaw: string; - toRaw: string; -} - -const getRaw = (range: any, timeZone: TimeZone) => { - const rawRange = { - from: range.raw.from, - to: range.raw.to, - }; - - if (isDateTime(rawRange.from)) { - if (timeZone === 'browser') { - rawRange.from = rawRange.from.local(); - } - rawRange.from = rawRange.from.format(TIME_FORMAT); - } - - if (isDateTime(rawRange.to)) { - if (timeZone === 'browser') { - rawRange.to = rawRange.to.local(); - } - rawRange.to = rawRange.to.format(TIME_FORMAT); - } - - return rawRange; -}; - -/** - * TimePicker with dropdown menu for relative dates. - * - * Initialize with a range that is either based on relative rawRange.strings, - * or on Moment objects. - * Internally the component needs to keep a string representation in `fromRaw` - * and `toRaw` for the controlled inputs. - * When a time is picked, `onChangeTime` is called with the new range that - * is again based on relative time strings or Moment objects. - */ -export default class TimePicker extends PureComponent { - dropdownEl: any; - - constructor(props) { - super(props); - - const { range, timeZone, isOpen } = props; - const rawRange = getRaw(range, timeZone); - - this.state = { - isOpen: isOpen, - isUtc: timeZone === 'utc', - rangeString: rangeUtil.describeTimeRange(range.raw), - fromRaw: rawRange.from, - toRaw: rawRange.to, - initialRange: range.raw, - refreshInterval: '', - }; - } - - static getDerivedStateFromProps(props: TimePickerProps, state: TimePickerState) { - if ( - state.initialRange && - state.initialRange.from === props.range.raw.from && - state.initialRange.to === props.range.raw.to - ) { - return state; - } - - const { range } = props; - const rawRange = getRaw(range, props.timeZone); - - return { - ...state, - fromRaw: rawRange.from, - toRaw: rawRange.to, - initialRange: range.raw, - rangeString: rangeUtil.describeTimeRange(range.raw), - }; - } - - move(direction: number, scanning?: boolean): RawTimeRange { - const { onChangeTime, range: origRange } = this.props; - const range = { - from: toUtc(origRange.from), - to: toUtc(origRange.to), - }; - - const timespan = (range.to.valueOf() - range.from.valueOf()) / 2; - let to, from; - - if (direction === -1) { - to = range.to.valueOf() - timespan; - from = range.from.valueOf() - timespan; - } else if (direction === 1) { - to = range.to.valueOf() + timespan; - from = range.from.valueOf() + timespan; - } else { - to = range.to.valueOf(); - from = range.from.valueOf(); - } - - const nextTimeRange = { - from: this.props.timeZone === 'utc' ? toUtc(from) : dateTime(from), - to: this.props.timeZone === 'utc' ? toUtc(to) : dateTime(to), - }; - - if (onChangeTime) { - onChangeTime(nextTimeRange); - } - return nextTimeRange; - } - - handleChangeFrom = (event: ChangeEvent) => { - this.setState({ - fromRaw: event.target.value, - }); - }; - - handleChangeTo = (event: ChangeEvent) => { - this.setState({ - toRaw: event.target.value, - }); - }; - - handleClickApply = () => { - const { onChangeTime, timeZone } = this.props; - let rawRange; - - this.setState( - state => { - const { toRaw, fromRaw } = this.state; - rawRange = { - from: fromRaw, - to: toRaw, - }; - - if (rawRange.from.indexOf('now') === -1) { - rawRange.from = timeZone === 'utc' ? toUtc(rawRange.from, TIME_FORMAT) : dateTime(rawRange.from, TIME_FORMAT); - } - - if (rawRange.to.indexOf('now') === -1) { - rawRange.to = timeZone === 'utc' ? toUtc(rawRange.to, TIME_FORMAT) : dateTime(rawRange.to, TIME_FORMAT); - } - - const rangeString = rangeUtil.describeTimeRange(rawRange); - return { - isOpen: false, - rangeString, - }; - }, - () => { - if (onChangeTime) { - onChangeTime(rawRange); - } - } - ); - }; - - handleClickLeft = () => this.move(-1); - handleClickPicker = () => { - this.setState(state => ({ - isOpen: !state.isOpen, - })); - }; - handleClickRight = () => this.move(1); - handleClickRefresh = () => {}; - handleClickRelativeOption = range => { - const { onChangeTime } = this.props; - const rangeString = rangeUtil.describeTimeRange(range); - const rawRange = { - from: range.from, - to: range.to, - }; - this.setState( - { - toRaw: rawRange.to, - fromRaw: rawRange.from, - isOpen: false, - rangeString, - }, - () => { - if (onChangeTime) { - onChangeTime(rawRange); - } - } - ); - }; - - getTimeOptions() { - return rangeUtil.getRelativeTimesList({}, this.state.rangeString); - } - - dropdownRef = el => { - this.dropdownEl = el; - }; - - renderDropdown() { - const { fromRaw, isOpen, toRaw } = this.state; - if (!isOpen) { - return null; - } - const timeOptions = this.getTimeOptions(); - return ( -
    -
    -
    - Quick ranges -
    -
    - {Object.keys(timeOptions).map(section => { - const group = timeOptions[section]; - return ( - - ); - })} -
    -
    - -
    -
    - Custom range -
    -
    - -
    -
    - -
    -
    - - -
    -
    - -
    -
    -
    - -
    -
    -
    -
    - ); - } - - render() { - const { isUtc, rangeString, refreshInterval } = this.state; - - return ( -
    -
    - - - -
    - {this.renderDropdown()} -
    - ); - } -} diff --git a/public/app/features/explore/state/actionTypes.ts b/public/app/features/explore/state/actionTypes.ts index da7d0d4dcf1ed..579a026d4dc13 100644 --- a/public/app/features/explore/state/actionTypes.ts +++ b/public/app/features/explore/state/actionTypes.ts @@ -9,22 +9,14 @@ import { LogLevel, TimeRange, DataQueryError, - SeriesData, + DataFrame, LogsModel, TimeSeries, DataQueryResponseData, LoadingState, AbsoluteTimeRange, } from '@grafana/ui/src/types'; -import { - ExploreId, - ExploreItemState, - HistoryItem, - RangeScanner, - ExploreUIState, - ExploreMode, - QueryOptions, -} from 'app/types/explore'; +import { ExploreId, ExploreItemState, HistoryItem, ExploreUIState, ExploreMode, QueryOptions } from 'app/types/explore'; import { actionCreatorFactory, noPayloadActionCreatorFactory, ActionOf } from 'app/core/redux/actionCreatorFactory'; import TableModel from 'app/core/table_model'; @@ -98,6 +90,7 @@ export interface InitializeExplorePayload { eventBridge: Emitter; queries: DataQuery[]; range: TimeRange; + mode: ExploreMode; ui: ExploreUIState; } @@ -170,12 +163,6 @@ export interface RemoveQueryRowPayload { export interface ScanStartPayload { exploreId: ExploreId; - scanner: RangeScanner; -} - -export interface ScanRangePayload { - exploreId: ExploreId; - range: RawTimeRange; } export interface ScanStopPayload { @@ -214,7 +201,7 @@ export interface UpdateDatasourceInstancePayload { export interface ToggleLogLevelPayload { exploreId: ExploreId; - hiddenLogLevels: Set; + hiddenLogLevels: LogLevel[]; } export interface QueriesImportedPayload { @@ -252,7 +239,7 @@ export interface ProcessQueryResultsPayload { datasourceId: string; loadingState: LoadingState; series?: DataQueryResponseData[]; - delta?: SeriesData[]; + delta?: DataFrame[]; } export interface RunQueriesBatchPayload { @@ -261,7 +248,7 @@ export interface RunQueriesBatchPayload { } export interface LimitMessageRatePayload { - series: SeriesData[]; + series: DataFrame[]; exploreId: ExploreId; datasourceId: string; } @@ -396,7 +383,6 @@ export const runQueriesAction = actionCreatorFactory('explore * @param scanner Function that a) returns a new time range and b) triggers a query run for the new range */ export const scanStartAction = actionCreatorFactory('explore/SCAN_START').create(); -export const scanRangeAction = actionCreatorFactory('explore/SCAN_RANGE').create(); /** * Stop any scanning for more results. diff --git a/public/app/features/explore/state/actions.test.ts b/public/app/features/explore/state/actions.test.ts index ab5421770fec7..a50d9d08010a6 100644 --- a/public/app/features/explore/state/actions.test.ts +++ b/public/app/features/explore/state/actions.test.ts @@ -1,5 +1,5 @@ import { refreshExplore, testDatasource, loadDatasource } from './actions'; -import { ExploreId, ExploreUrlState, ExploreUpdateState } from 'app/types'; +import { ExploreId, ExploreUrlState, ExploreUpdateState, ExploreMode } from 'app/types'; import { thunkTester } from 'test/core/thunk/thunkTester'; import { initializeExploreAction, @@ -55,6 +55,7 @@ const setup = (updateOverides?: Partial) => { datasource: 'some-datasource', queries: [], range: range.raw, + mode: ExploreMode.Metrics, ui, }; const updateDefaults = makeInitialUpdateState(); diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index b33805d119c94..8d961a37c3ed0 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -26,7 +26,7 @@ import { LogsDedupStrategy, AbsoluteTimeRange, } from '@grafana/ui'; -import { ExploreId, RangeScanner, ExploreUIState, QueryTransaction, ExploreMode } from 'app/types/explore'; +import { ExploreId, ExploreUIState, QueryTransaction, ExploreMode } from 'app/types/explore'; import { updateDatasourceInstanceAction, changeQueryAction, @@ -58,7 +58,6 @@ import { loadExploreDatasources, changeModeAction, scanStopAction, - scanRangeAction, runQueriesAction, stateSaveAction, updateTimeRangeAction, @@ -66,6 +65,7 @@ import { import { ActionOf, ActionCreator } from 'app/core/redux/actionCreatorFactory'; import { getTimeZone } from 'app/features/profile/state/selectors'; import { offOption } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker'; +import { getShiftedTimeRange } from 'app/core/utils/timePicker'; /** * Updates UI state and save it to the URL @@ -105,10 +105,10 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun const currentDataSourceInstance = getState().explore[exploreId].datasourceInstance; const queries = getState().explore[exploreId].queries; - await dispatch(importQueries(exploreId, queries, currentDataSourceInstance, newDataSourceInstance)); - dispatch(updateDatasourceInstanceAction({ exploreId, datasourceInstance: newDataSourceInstance })); + await dispatch(importQueries(exploreId, queries, currentDataSourceInstance, newDataSourceInstance)); + if (getState().explore[exploreId].isLive) { dispatch(changeRefreshInterval(exploreId, offOption.value)); } @@ -123,9 +123,8 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun */ export function changeMode(exploreId: ExploreId, mode: ExploreMode): ThunkResult { return dispatch => { - dispatch(clearQueries(exploreId)); + dispatch(clearQueriesAction({ exploreId })); dispatch(changeModeAction({ exploreId, mode })); - dispatch(runQueries(exploreId)); }; } @@ -236,6 +235,7 @@ export function initializeExplore( datasourceName: string, queries: DataQuery[], rawRange: RawTimeRange, + mode: ExploreMode, containerWidth: number, eventBridge: Emitter, ui: ExploreUIState @@ -251,6 +251,7 @@ export function initializeExplore( eventBridge, queries, range, + mode, ui, }) ); @@ -412,14 +413,15 @@ export function runQueries(exploreId: ExploreId): ThunkResult { * @param exploreId Explore area * @param scanner Function that a) returns a new time range and b) triggers a query run for the new range */ -export function scanStart(exploreId: ExploreId, scanner: RangeScanner): ThunkResult { - return dispatch => { +export function scanStart(exploreId: ExploreId): ThunkResult { + return (dispatch, getState) => { // Register the scanner - dispatch(scanStartAction({ exploreId, scanner })); + dispatch(scanStartAction({ exploreId })); // Scanning must trigger query run, and return the new range - const range = scanner(); + const range = getShiftedTimeRange(-1, getState().explore[exploreId].range); // Set the new range to be displayed - dispatch(scanRangeAction({ exploreId, range })); + dispatch(updateTimeRangeAction({ exploreId, absoluteRange: range })); + dispatch(runQueriesAction({ exploreId })); }; } @@ -527,7 +529,7 @@ export function refreshExplore(exploreId: ExploreId): ThunkResult { } const { urlState, update, containerWidth, eventBridge } = itemState; - const { datasource, queries, range: urlRange, ui } = urlState; + const { datasource, queries, range: urlRange, mode, ui } = urlState; const refreshQueries: DataQuery[] = []; for (let index = 0; index < queries.length; index++) { const query = queries[index]; @@ -539,7 +541,7 @@ export function refreshExplore(exploreId: ExploreId): ThunkResult { // need to refresh datasource if (update.datasource) { const initialQueries = ensureQueries(queries); - dispatch(initializeExplore(exploreId, datasource, initialQueries, range, containerWidth, eventBridge, ui)); + dispatch(initializeExplore(exploreId, datasource, initialQueries, range, mode, containerWidth, eventBridge, ui)); return; } @@ -557,6 +559,11 @@ export function refreshExplore(exploreId: ExploreId): ThunkResult { dispatch(setQueriesAction({ exploreId, queries: refreshQueries })); } + // need to refresh mode + if (update.mode) { + dispatch(changeModeAction({ exploreId, mode })); + } + // always run queries when refresh is needed if (update.queries || update.ui || update.range) { dispatch(runQueries(exploreId)); diff --git a/public/app/features/explore/state/epics/processQueryResultsEpic.test.ts b/public/app/features/explore/state/epics/processQueryResultsEpic.test.ts index c5da93081aa5d..5848bb2d3b212 100644 --- a/public/app/features/explore/state/epics/processQueryResultsEpic.test.ts +++ b/public/app/features/explore/state/epics/processQueryResultsEpic.test.ts @@ -1,23 +1,24 @@ import { mockExploreState } from 'test/mocks/mockExploreState'; -import { epicTester } from 'test/core/redux/epicTester'; +import { epicTester, MOCKED_ABSOLUTE_RANGE } from 'test/core/redux/epicTester'; import { processQueryResultsAction, resetQueryErrorAction, querySuccessAction, scanStopAction, - scanRangeAction, + updateTimeRangeAction, + runQueriesAction, } from '../actionTypes'; -import { SeriesData, LoadingState } from '@grafana/ui'; +import { DataFrame, LoadingState } from '@grafana/ui'; import { processQueryResultsEpic } from './processQueryResultsEpic'; import TableModel from 'app/core/table_model'; const testContext = () => { - const serieA: SeriesData = { + const serieA: DataFrame = { fields: [], refId: 'A', rows: [], }; - const serieB: SeriesData = { + const serieB: DataFrame = { fields: [], refId: 'B', rows: [], @@ -81,7 +82,7 @@ describe('processQueryResultsEpic', () => { describe('and we do not have a result', () => { it('then correct actions are dispatched', () => { - const { datasourceId, exploreId, state, scanner } = mockExploreState({ scanning: true }); + const { datasourceId, exploreId, state } = mockExploreState({ scanning: true }); const { latency, loadingState } = testContext(); const graphResult = []; const tableResult = new TableModel(); @@ -94,7 +95,8 @@ describe('processQueryResultsEpic', () => { .thenResultingActionsEqual( resetQueryErrorAction({ exploreId, refIds: [] }), querySuccessAction({ exploreId, loadingState, graphResult, tableResult, logsResult, latency }), - scanRangeAction({ exploreId, range: scanner() }) + updateTimeRangeAction({ exploreId, absoluteRange: MOCKED_ABSOLUTE_RANGE }), + runQueriesAction({ exploreId }) ); }); }); diff --git a/public/app/features/explore/state/epics/processQueryResultsEpic.ts b/public/app/features/explore/state/epics/processQueryResultsEpic.ts index 76e767c36a095..db46659eb6e37 100644 --- a/public/app/features/explore/state/epics/processQueryResultsEpic.ts +++ b/public/app/features/explore/state/epics/processQueryResultsEpic.ts @@ -11,17 +11,22 @@ import { processQueryResultsAction, ProcessQueryResultsPayload, querySuccessAction, - scanRangeAction, resetQueryErrorAction, scanStopAction, + updateTimeRangeAction, + runQueriesAction, } from '../actionTypes'; import { ResultProcessor } from '../../utils/ResultProcessor'; -export const processQueryResultsEpic: Epic, ActionOf, StoreState> = (action$, state$) => { +export const processQueryResultsEpic: Epic, ActionOf, StoreState> = ( + action$, + state$, + { getTimeZone, getShiftedTimeRange } +) => { return action$.ofType(processQueryResultsAction.type).pipe( mergeMap((action: ActionOf) => { const { exploreId, datasourceId, latency, loadingState, series, delta } = action.payload; - const { datasourceInstance, scanning, scanner, eventBridge } = state$.value.explore[exploreId]; + const { datasourceInstance, scanning, eventBridge } = state$.value.explore[exploreId]; // If datasource already changed, results do not matter if (datasourceInstance.meta.id !== datasourceId) { @@ -62,8 +67,9 @@ export const processQueryResultsEpic: Epic, ActionOf, StoreSt // Keep scanning for results if this was the last scanning transaction if (scanning) { if (_.size(result) === 0) { - const range = scanner(); - actions.push(scanRangeAction({ exploreId, range })); + const range = getShiftedTimeRange(-1, state$.value.explore[exploreId].range, getTimeZone(state$.value.user)); + actions.push(updateTimeRangeAction({ exploreId, absoluteRange: range })); + actions.push(runQueriesAction({ exploreId })); } else { // We can stop scanning if we have a result actions.push(scanStopAction({ exploreId })); diff --git a/public/app/features/explore/state/epics/runQueriesBatchEpic.test.ts b/public/app/features/explore/state/epics/runQueriesBatchEpic.test.ts index 6ddada2bc32af..7498f27aea467 100644 --- a/public/app/features/explore/state/epics/runQueriesBatchEpic.test.ts +++ b/public/app/features/explore/state/epics/runQueriesBatchEpic.test.ts @@ -14,10 +14,10 @@ import { clearQueriesAction, stateSaveAction, } from '../actionTypes'; -import { LoadingState, DataQueryRequest, SeriesData, FieldType } from '@grafana/ui'; +import { LoadingState, DataQueryRequest, DataFrame, FieldType } from '@grafana/ui'; const testContext = () => { - const series: SeriesData[] = [ + const series: DataFrame[] = [ { fields: [ { diff --git a/public/app/features/explore/state/epics/runQueriesBatchEpic.ts b/public/app/features/explore/state/epics/runQueriesBatchEpic.ts index d5187d9438fc6..7f4ab4afd8cbf 100644 --- a/public/app/features/explore/state/epics/runQueriesBatchEpic.ts +++ b/public/app/features/explore/state/epics/runQueriesBatchEpic.ts @@ -7,7 +7,7 @@ import { DataStreamState, LoadingState, DataQueryResponse, - SeriesData, + DataFrame, DataQueryResponseData, AbsoluteTimeRange, } from '@grafana/ui'; @@ -46,7 +46,7 @@ interface ProcessResponseConfig { now: number; loadingState: LoadingState; series?: DataQueryResponseData[]; - delta?: SeriesData[]; + delta?: DataFrame[]; } const processResponse = (config: ProcessResponseConfig) => { diff --git a/public/app/features/explore/state/epics/stateSaveEpic.test.ts b/public/app/features/explore/state/epics/stateSaveEpic.test.ts index bee12ad92a9e9..08df3ac4fb46a 100644 --- a/public/app/features/explore/state/epics/stateSaveEpic.test.ts +++ b/public/app/features/explore/state/epics/stateSaveEpic.test.ts @@ -15,7 +15,7 @@ describe('stateSaveEpic', () => { .whenActionIsDispatched(stateSaveAction()) .thenResultingActionsEqual( updateLocation({ - query: { left: '["now-6h","now","test",{"ui":[true,true,true,null]}]' }, + query: { left: '["now-6h","now","test",{"mode":null},{"ui":[true,true,true,null]}]' }, replace: true, }), setUrlReplacedAction({ exploreId }) @@ -32,8 +32,8 @@ describe('stateSaveEpic', () => { .thenResultingActionsEqual( updateLocation({ query: { - left: '["now-6h","now","test",{"ui":[true,true,true,null]}]', - right: '["now-6h","now","test",{"ui":[true,true,true,null]}]', + left: '["now-6h","now","test",{"mode":null},{"ui":[true,true,true,null]}]', + right: '["now-6h","now","test",{"mode":null},{"ui":[true,true,true,null]}]', }, replace: true, }), @@ -51,7 +51,7 @@ describe('stateSaveEpic', () => { .whenActionIsDispatched(stateSaveAction()) .thenResultingActionsEqual( updateLocation({ - query: { left: '["now-6h","now","test",{"ui":[true,true,true,null]}]' }, + query: { left: '["now-6h","now","test",{"mode":null},{"ui":[true,true,true,null]}]' }, replace: false, }) ); diff --git a/public/app/features/explore/state/epics/stateSaveEpic.ts b/public/app/features/explore/state/epics/stateSaveEpic.ts index 107f1de547b47..210a14369e870 100644 --- a/public/app/features/explore/state/epics/stateSaveEpic.ts +++ b/public/app/features/explore/state/epics/stateSaveEpic.ts @@ -37,6 +37,7 @@ export const stateSaveEpic: Epic, ActionOf, StoreState> = (ac datasource: left.datasourceInstance.name, queries: left.queries.map(clearQueryKeys), range: toRawTimeRange(left.range), + mode: left.mode, ui: { showingGraph: left.showingGraph, showingLogs: true, @@ -50,6 +51,7 @@ export const stateSaveEpic: Epic, ActionOf, StoreState> = (ac datasource: right.datasourceInstance.name, queries: right.queries.map(clearQueryKeys), range: toRawTimeRange(right.range), + mode: right.mode, ui: { showingGraph: right.showingGraph, showingLogs: true, diff --git a/public/app/features/explore/state/reducers.test.ts b/public/app/features/explore/state/reducers.test.ts index 7175089e4d751..9404e1591f469 100644 --- a/public/app/features/explore/state/reducers.test.ts +++ b/public/app/features/explore/state/reducers.test.ts @@ -5,14 +5,7 @@ import { makeInitialUpdateState, initialExploreState, } from './reducers'; -import { - ExploreId, - ExploreItemState, - ExploreUrlState, - ExploreState, - RangeScanner, - ExploreMode, -} from 'app/types/explore'; +import { ExploreId, ExploreItemState, ExploreUrlState, ExploreState, ExploreMode } from 'app/types/explore'; import { reducerTester } from 'test/core/redux/reducerTester'; import { scanStartAction, @@ -36,28 +29,23 @@ import { DataSourceApi, DataQuery, LogsModel, LogsDedupStrategy, LoadingState } describe('Explore item reducer', () => { describe('scanning', () => { it('should start scanning', () => { - const scanner = jest.fn(); const initalState = { ...makeExploreItemState(), scanning: false, - scanner: undefined as RangeScanner, }; reducerTester() .givenReducer(itemReducer as Reducer>, initalState) - .whenActionIsDispatched(scanStartAction({ exploreId: ExploreId.left, scanner })) + .whenActionIsDispatched(scanStartAction({ exploreId: ExploreId.left })) .thenStateShouldEqual({ ...makeExploreItemState(), scanning: true, - scanner, }); }); it('should stop scanning', () => { - const scanner = jest.fn(); const initalState = { ...makeExploreItemState(), scanning: true, - scanner, scanRange: {}, }; @@ -67,7 +55,6 @@ describe('Explore item reducer', () => { .thenStateShouldEqual({ ...makeExploreItemState(), scanning: false, - scanner: undefined, scanRange: undefined, }); }); @@ -104,6 +91,7 @@ describe('Explore item reducer', () => { datasource: true, queries: true, range: true, + mode: true, ui: true, }, }; @@ -213,6 +201,7 @@ export const setup = (urlStateOverrides?: any) => { from: '', to: '', }, + mode: ExploreMode.Metrics, ui: { dedupStrategy: LogsDedupStrategy.none, showingGraph: false, diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index 37e9c7950d012..dcbd19bc1cfee 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -24,7 +24,6 @@ import { queryFailureAction, setUrlReplacedAction, querySuccessAction, - scanRangeAction, scanStopAction, resetQueryErrorAction, queryStartAction, @@ -70,6 +69,7 @@ export const makeInitialUpdateState = (): ExploreUpdateState => ({ datasource: false, queries: false, range: false, + mode: false, ui: false, }); @@ -215,12 +215,13 @@ export const itemReducer = reducerFactory({} as ExploreItemSta .addMapper({ filter: initializeExploreAction, mapper: (state, action): ExploreItemState => { - const { containerWidth, eventBridge, queries, range, ui } = action.payload; + const { containerWidth, eventBridge, queries, range, mode, ui } = action.payload; return { ...state, containerWidth, eventBridge, range, + mode, queries, initialized: true, queryKeys: getQueryKeys(queries, state.datasourceInstance), @@ -402,16 +403,10 @@ export const itemReducer = reducerFactory({} as ExploreItemSta }; }, }) - .addMapper({ - filter: scanRangeAction, - mapper: (state, action): ExploreItemState => { - return { ...state, scanRange: action.payload.range }; - }, - }) .addMapper({ filter: scanStartAction, mapper: (state, action): ExploreItemState => { - return { ...state, scanning: true, scanner: action.payload.scanner }; + return { ...state, scanning: true }; }, }) .addMapper({ @@ -421,7 +416,6 @@ export const itemReducer = reducerFactory({} as ExploreItemSta ...state, scanning: false, scanRange: undefined, - scanner: undefined, update: makeInitialUpdateState(), }; }, @@ -599,13 +593,14 @@ export const updateChildRefreshState = ( return { ...state, urlState, - update: { datasource: false, queries: false, range: false, ui: false }, + update: { datasource: false, queries: false, range: false, mode: false, ui: false }, }; } const datasource = _.isEqual(urlState ? urlState.datasource : '', state.urlState.datasource) === false; const queries = _.isEqual(urlState ? urlState.queries : [], state.urlState.queries) === false; const range = _.isEqual(urlState ? urlState.range : DEFAULT_RANGE, state.urlState.range) === false; + const mode = _.isEqual(urlState ? urlState.mode : ExploreMode.Metrics, state.urlState.mode) === false; const ui = _.isEqual(urlState ? urlState.ui : DEFAULT_UI_STATE, state.urlState.ui) === false; return { @@ -616,6 +611,7 @@ export const updateChildRefreshState = ( datasource, queries, range, + mode, ui, }, }; diff --git a/public/app/features/explore/utils/ResultProcessor.test.ts b/public/app/features/explore/utils/ResultProcessor.test.ts index 4420450c2211b..50b1bd5cecf50 100644 --- a/public/app/features/explore/utils/ResultProcessor.test.ts +++ b/public/app/features/explore/utils/ResultProcessor.test.ts @@ -6,6 +6,11 @@ jest.mock('@grafana/ui/src/utils/moment_wrapper', () => ({ format: (fmt: string) => 'format() jest mocked', }; }, + toUtc: (ts: any) => { + return { + format: (fmt: string) => 'format() jest mocked', + }; + }, })); import { ResultProcessor } from './ResultProcessor'; @@ -178,6 +183,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1559038519831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1559038519831, uniqueLabels: {}, }, @@ -191,6 +197,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1559038518831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1559038518831, uniqueLabels: {}, }, @@ -321,6 +328,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1558038519831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1558038519831, uniqueLabels: {}, }, @@ -335,6 +343,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1558038518831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1558038518831, uniqueLabels: {}, }, @@ -375,6 +384,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1558038519831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1558038519831, uniqueLabels: {}, }, @@ -389,6 +399,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1558038518831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1558038518831, uniqueLabels: {}, }, @@ -403,6 +414,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1559038519831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1559038519831, uniqueLabels: {}, }, @@ -417,6 +429,7 @@ describe('ResultProcessor', () => { timeEpochMs: 1559038518831, timeFromNow: 'fromNow() jest mocked', timeLocal: 'format() jest mocked', + timeUtc: 'format() jest mocked', timestamp: 1559038518831, uniqueLabels: {}, }, diff --git a/public/app/features/explore/utils/ResultProcessor.ts b/public/app/features/explore/utils/ResultProcessor.ts index 7c4c27c5b22ac..586b04255eaa4 100644 --- a/public/app/features/explore/utils/ResultProcessor.ts +++ b/public/app/features/explore/utils/ResultProcessor.ts @@ -3,17 +3,17 @@ import { TableData, isTableData, LogsModel, - toSeriesData, + toDataFrame, guessFieldTypes, DataQueryResponseData, TimeSeries, } from '@grafana/ui'; import { ExploreItemState, ExploreMode } from 'app/types/explore'; -import { getProcessedSeriesData } from 'app/features/dashboard/state/PanelQueryState'; +import { getProcessedDataFrame } from 'app/features/dashboard/state/PanelQueryState'; import TableModel, { mergeTablesIntoModel } from 'app/core/table_model'; import { sortLogsResult } from 'app/core/utils/explore'; -import { seriesDataToLogsModel } from 'app/core/logs_model'; +import { dataFrameToLogsModel } from 'app/core/logs_model'; import { default as TimeSeries2 } from 'app/core/time_series2'; import { DataProcessor } from 'app/plugins/panel/graph/data_processor'; @@ -77,8 +77,8 @@ export class ResultProcessor { return null; } const graphInterval = this.state.queryIntervals.intervalMs; - const seriesData = this.rawData.map(result => guessFieldTypes(toSeriesData(result))); - const newResults = this.rawData ? seriesDataToLogsModel(seriesData, graphInterval) : null; + const dataFrame = this.rawData.map(result => guessFieldTypes(toDataFrame(result))); + const newResults = this.rawData ? dataFrameToLogsModel(dataFrame, graphInterval) : null; if (this.replacePreviousResults) { return newResults; @@ -107,7 +107,7 @@ export class ResultProcessor { }; private makeTimeSeriesList = (rawData: any[]) => { - const dataList = getProcessedSeriesData(rawData); + const dataList = getProcessedDataFrame(rawData); const dataProcessor = new DataProcessor({ xaxis: {}, aliasColors: [] }); // Hack before we use GraphSeriesXY instead const timeSeries = dataProcessor.getSeriesList({ dataList }); diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index a03a431ae0fd9..062dae30d339e 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -8,14 +8,14 @@ import { applyPanelTimeOverrides, getResolution } from 'app/features/dashboard/u import { ContextSrv } from 'app/core/services/context_srv'; import { toLegacyResponseData, - isSeriesData, + isDataFrame, LegacyResponseData, TimeRange, DataSourceApi, PanelData, LoadingState, DataQueryResponse, - SeriesData, + DataFrame, } from '@grafana/ui'; import { Unsubscribable } from 'rxjs'; import { PanelModel } from 'app/features/dashboard/state'; @@ -150,7 +150,7 @@ class MetricsPanelCtrl extends PanelCtrl { // The result should already be processed, but just in case if (!data.legacy) { data.legacy = data.series.map(v => { - if (isSeriesData(v)) { + if (isDataFrame(v)) { return toLegacyResponseData(v); } return v; @@ -163,7 +163,7 @@ class MetricsPanelCtrl extends PanelCtrl { data: data.legacy, }); } else { - this.handleSeriesData(data.series); + this.handleDataFrame(data.series); } }, }; @@ -222,14 +222,14 @@ class MetricsPanelCtrl extends PanelCtrl { }); } - handleSeriesData(data: SeriesData[]) { + handleDataFrame(data: DataFrame[]) { this.loading = false; if (this.dashboard && this.dashboard.snapshot) { this.panel.snapshotData = data; } - // Subclasses that asked for SeriesData will override + // Subclasses that asked for DataFrame will override } handleQueryResult(result: DataQueryResponse) { diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 52ef34b581010..473ccdbb99b81 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -1,6 +1,6 @@ import _ from 'lodash'; -import Remarkable from 'remarkable'; import { sanitize, escapeHtml } from 'app/core/utils/text'; +import { renderMarkdown } from '@grafana/data'; import config from 'app/core/config'; import { profiler } from 'app/core/core'; @@ -259,8 +259,8 @@ export class PanelCtrl { const interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars); let html = '
    '; - const md = new Remarkable().render(interpolatedMarkdown); - html += sanitize(md); + const md = renderMarkdown(interpolatedMarkdown); + html += config.disableSanitizeHtml ? md : sanitize(md); if (this.panel.links && this.panel.links.length > 0) { html += '
      '; diff --git a/public/app/features/templating/specs/variable_srv.test.ts b/public/app/features/templating/specs/variable_srv.test.ts index 1dcaa242dfe57..b9ab0bd887fe8 100644 --- a/public/app/features/templating/specs/variable_srv.test.ts +++ b/public/app/features/templating/specs/variable_srv.test.ts @@ -601,7 +601,7 @@ describe('VariableSrv', function(this: any) { it('sets single value as array if multi choice', async () => { const [setValueMock, setFromUrl] = setupSetFromUrlTest(ctx, { multi: true }); await setFromUrl('one'); - expect(setValueMock).toHaveBeenCalledWith({ text: 'one', value: ['one'] }); + expect(setValueMock).toHaveBeenCalledWith({ text: ['one'], value: ['one'] }); }); it('sets both text and value as array if multiple values in url', async () => { diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index d33e100f276c9..784e9c1ebd151 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -261,7 +261,7 @@ export class VariableSrv { if (variable.multi) { // In case variable is multiple choice, we cast to array to preserve the same behaviour as when selecting // the option directly, which will return even single value in an array. - option = { ...option, value: _.castArray(option.value) }; + option = { text: _.castArray(option.text), value: _.castArray(option.value) }; } return variable.setValue(option); diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx index 5230b6fb6e844..c161c47f9e1b9 100644 --- a/public/app/features/users/UsersListPage.tsx +++ b/public/app/features/users/UsersListPage.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; -import Remarkable from 'remarkable'; +import { renderMarkdown } from '@grafana/data'; import Page from 'app/core/components/Page/Page'; import UsersActionBar from './UsersActionBar'; import UsersTable from './UsersTable'; @@ -38,8 +38,7 @@ export class UsersListPage extends PureComponent { super(props); if (this.props.externalUserMngInfo) { - const markdownRenderer = new Remarkable(); - this.externalUserMngInfoHtml = markdownRenderer.render(this.props.externalUserMngInfo); + this.externalUserMngInfoHtml = renderMarkdown(this.props.externalUserMngInfo); } this.state = { diff --git a/public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx b/public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx index b19d6db2ff278..ab6ef40272c80 100644 --- a/public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx +++ b/public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx @@ -36,7 +36,9 @@ class ElasticsearchQueryField extends React.PureComponent { } componentDidMount() { - this.onChangeQuery('', true); + if (!this.props.query.isLogsQuery) { + this.onChangeQuery('', true); + } } componentWillUnmount() {} diff --git a/public/app/plugins/datasource/elasticsearch/config_ctrl.ts b/public/app/plugins/datasource/elasticsearch/config_ctrl.ts index adc266fa6dfe8..21204035ddb86 100644 --- a/public/app/plugins/datasource/elasticsearch/config_ctrl.ts +++ b/public/app/plugins/datasource/elasticsearch/config_ctrl.ts @@ -1,8 +1,11 @@ import _ from 'lodash'; +import { ElasticsearchOptions } from './types'; +import { DataSourceInstanceSettings } from '@grafana/ui'; +import { getMaxConcurrenShardRequestOrDefault } from './datasource'; export class ElasticConfigCtrl { static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/config.html'; - current: any; + current: DataSourceInstanceSettings; /** @ngInject */ constructor($scope) { @@ -44,4 +47,8 @@ export class ElasticConfigCtrl { this.current.database = def.example || 'es-index-name'; } } + + versionChanged() { + this.current.jsonData.maxConcurrentShardRequests = getMaxConcurrenShardRequestOrDefault(this.current.jsonData); + } } diff --git a/public/app/plugins/datasource/elasticsearch/datasource.ts b/public/app/plugins/datasource/elasticsearch/datasource.ts index ea9389bf9dc1c..dd69b7fbf3ddd 100644 --- a/public/app/plugins/datasource/elasticsearch/datasource.ts +++ b/public/app/plugins/datasource/elasticsearch/datasource.ts @@ -537,3 +537,16 @@ export class ElasticDatasource extends DataSourceApi= 70) { + return 5; + } + + const defaultMaxConcurrentShardRequests = options.esVersion >= 70 ? 5 : 256; + return options.maxConcurrentShardRequests || defaultMaxConcurrentShardRequests; +} diff --git a/public/app/plugins/datasource/elasticsearch/elastic_response.ts b/public/app/plugins/datasource/elasticsearch/elastic_response.ts index 5449901f268a0..db7aab4d45abd 100644 --- a/public/app/plugins/datasource/elasticsearch/elastic_response.ts +++ b/public/app/plugins/datasource/elasticsearch/elastic_response.ts @@ -2,7 +2,7 @@ import _ from 'lodash'; import flatten from 'app/core/utils/flatten'; import * as queryDef from './query_def'; import TableModel from 'app/core/table_model'; -import { SeriesData, DataQueryResponse, toSeriesData, FieldType } from '@grafana/ui'; +import { DataFrame, DataQueryResponse, toDataFrame, FieldType } from '@grafana/ui'; export class ElasticResponse { constructor(private targets, private response) { @@ -414,7 +414,7 @@ export class ElasticResponse { } getLogs(logMessageField?: string, logLevelField?: string): DataQueryResponse { - const seriesData: SeriesData[] = []; + const dataFrame: DataFrame[] = []; const docs: any[] = []; for (let n = 0; n < this.response.responses.length; n++) { @@ -462,7 +462,7 @@ export class ElasticResponse { if (docs.length > 0) { propNames = propNames.sort(); - const series: SeriesData = { + const series: DataFrame = { fields: [ { name: this.targets[0].timeField, @@ -527,7 +527,7 @@ export class ElasticResponse { series.rows.push(row); } - seriesData.push(series); + dataFrame.push(series); } if (response.aggregations) { @@ -541,13 +541,13 @@ export class ElasticResponse { this.nameSeries(tmpSeriesList, target); for (let y = 0; y < tmpSeriesList.length; y++) { - const series = toSeriesData(tmpSeriesList[y]); + const series = toDataFrame(tmpSeriesList[y]); series.labels = {}; - seriesData.push(series); + dataFrame.push(series); } } } - return { data: seriesData }; + return { data: dataFrame }; } } diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html index 431933aa7bb91..3ec80683f8b99 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/config.html @@ -26,7 +26,7 @@

      Elasticsearch details

      Version - +
      diff --git a/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts b/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts index ecfb99a160596..75a34e48d52bb 100644 --- a/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts +++ b/public/app/plugins/datasource/elasticsearch/specs/datasource.test.ts @@ -1,7 +1,7 @@ import angular, { IQService } from 'angular'; import * as dateMath from '@grafana/ui/src/utils/datemath'; import _ from 'lodash'; -import { ElasticDatasource } from '../datasource'; +import { ElasticDatasource, getMaxConcurrenShardRequestOrDefault } from '../datasource'; import { toUtc, dateTime } from '@grafana/ui/src/utils/moment_wrapper'; import { BackendSrv } from 'app/core/services/backend_srv'; import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; @@ -646,3 +646,27 @@ describe('ElasticDatasource', function(this: any) { }); }); }); + +describe('getMaxConcurrenShardRequestOrDefault', () => { + const testCases = [ + { version: 50, expectedMaxConcurrentShardRequests: 256 }, + { version: 50, maxConcurrentShardRequests: 50, expectedMaxConcurrentShardRequests: 50 }, + { version: 56, expectedMaxConcurrentShardRequests: 256 }, + { version: 56, maxConcurrentShardRequests: 256, expectedMaxConcurrentShardRequests: 256 }, + { version: 56, maxConcurrentShardRequests: 5, expectedMaxConcurrentShardRequests: 256 }, + { version: 56, maxConcurrentShardRequests: 200, expectedMaxConcurrentShardRequests: 200 }, + { version: 70, expectedMaxConcurrentShardRequests: 5 }, + { version: 70, maxConcurrentShardRequests: 256, expectedMaxConcurrentShardRequests: 5 }, + { version: 70, maxConcurrentShardRequests: 5, expectedMaxConcurrentShardRequests: 5 }, + { version: 70, maxConcurrentShardRequests: 6, expectedMaxConcurrentShardRequests: 6 }, + ]; + + testCases.forEach(tc => { + it(`version = ${tc.version}, maxConcurrentShardRequests = ${tc.maxConcurrentShardRequests}`, () => { + const options = { esVersion: tc.version, maxConcurrentShardRequests: tc.maxConcurrentShardRequests }; + expect(getMaxConcurrenShardRequestOrDefault(options as ElasticsearchOptions)).toBe( + tc.expectedMaxConcurrentShardRequests + ); + }); + }); +}); diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts index 84b9d78779b3c..a6f89c8692ed4 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/azure_monitor/response_parser.ts @@ -80,15 +80,15 @@ export default class ResponseParser { return id.substring(startIndex, endIndex); } - static convertDataToPoints(timeSeriesData) { + static convertDataToPoints(timeDataFrame) { const dataPoints: any[] = []; - for (let k = 0; k < timeSeriesData.length; k++) { - const epoch = ResponseParser.dateTimeToEpoch(timeSeriesData[k].timeStamp); - const aggKey = ResponseParser.getKeyForAggregationField(timeSeriesData[k]); + for (let k = 0; k < timeDataFrame.length; k++) { + const epoch = ResponseParser.dateTimeToEpoch(timeDataFrame[k].timeStamp); + const aggKey = ResponseParser.getKeyForAggregationField(timeDataFrame[k]); if (aggKey) { - dataPoints.push([timeSeriesData[k][aggKey], epoch]); + dataPoints.push([timeDataFrame[k][aggKey], epoch]); } } diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts index ff430ae11fa0c..e635be43902db 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts @@ -6,6 +6,7 @@ import './editor/editor_component'; import { TemplateSrv } from 'app/features/templating/template_srv'; import { auto } from 'angular'; +import { DataFrame } from '@grafana/ui'; export interface ResultFormat { text: string; @@ -124,7 +125,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { } } - onDataReceived(dataList) { + onDataReceived(dataList: DataFrame[]) { this.lastQueryError = undefined; this.lastQuery = ''; @@ -134,11 +135,11 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { } } - onDataError(err) { + onDataError(err: any) { this.handleQueryCtrlError(err); } - handleQueryCtrlError(err) { + handleQueryCtrlError(err: any) { if (err.query && err.query.refId && err.query.refId !== this.target.refId) { return; } @@ -196,7 +197,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { return; } - return this.datasource.azureMonitorDatasource.getSubscriptions().then(subs => { + return this.datasource.azureMonitorDatasource.getSubscriptions().then((subs: any) => { this.subscriptions = subs; if (!this.target.subscription && this.target.queryType === 'Azure Monitor') { this.target.subscription = this.datasource.azureMonitorDatasource.subscriptionId; @@ -231,7 +232,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { } /* Azure Monitor Section */ - getResourceGroups(query) { + getResourceGroups(query: any) { if (this.target.queryType !== 'Azure Monitor' || !this.datasource.azureMonitorDatasource.isConfigured()) { return; } @@ -243,7 +244,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { .catch(this.handleQueryCtrlError.bind(this)); } - getMetricDefinitions(query) { + getMetricDefinitions(query: any) { if ( this.target.queryType !== 'Azure Monitor' || !this.target.azureMonitor.resourceGroup || @@ -259,7 +260,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { .catch(this.handleQueryCtrlError.bind(this)); } - getResourceNames(query) { + getResourceNames(query: any) { if ( this.target.queryType !== 'Azure Monitor' || !this.target.azureMonitor.resourceGroup || @@ -279,7 +280,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { .catch(this.handleQueryCtrlError.bind(this)); } - getMetricNames(query) { + getMetricNames(query: any) { if ( this.target.queryType !== 'Azure Monitor' || !this.target.azureMonitor.resourceGroup || @@ -345,7 +346,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { this.replace(this.target.azureMonitor.resourceName), this.replace(this.target.azureMonitor.metricName) ) - .then(metadata => { + .then((metadata: any) => { this.target.azureMonitor.aggOptions = metadata.supportedAggTypes || [metadata.primaryAggType]; this.target.azureMonitor.aggregation = metadata.primaryAggType; this.target.azureMonitor.timeGrains = [{ text: 'auto', value: 'auto' }].concat(metadata.supportedTimeGrains); @@ -378,7 +379,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { getWorkspaces = () => { return this.datasource.azureLogAnalyticsDatasource .getWorkspaces(this.target.subscription) - .then(list => { + .then((list: any[]) => { this.workspaces = list; if (list.length > 0 && !this.target.azureLogAnalytics.workspace) { this.target.azureLogAnalytics.workspace = list[0].value; @@ -440,7 +441,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { return this.datasource .getAppInsightsMetricMetadata(this.replace(this.target.appInsights.metricName)) - .then(aggData => { + .then((aggData: { supportedAggTypes: string[]; supportedGroupBy: string[]; primaryAggType: string }) => { this.target.appInsights.aggOptions = aggData.supportedAggTypes; this.target.appInsights.groupByOptions = aggData.supportedGroupBy; this.target.appInsights.aggregation = aggData.primaryAggType; @@ -461,7 +462,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { return this.datasource.appInsightsDatasource.getQuerySchema().catch(this.handleQueryCtrlError.bind(this)); }; - getAppInsightsGroupBySegments(query) { + getAppInsightsGroupBySegments(query: any) { return _.map(this.target.appInsights.groupByOptions, option => { return { text: option, value: option }; }); diff --git a/public/app/plugins/datasource/graphite/datasource.ts b/public/app/plugins/datasource/graphite/datasource.ts index ea41dc126e1d9..c1220c9504f23 100644 --- a/public/app/plugins/datasource/graphite/datasource.ts +++ b/public/app/plugins/datasource/graphite/datasource.ts @@ -245,10 +245,12 @@ export function GraphiteDatasource(this: any, instanceSettings, $q, backendSrv, } const httpOptions: any = { - method: 'GET', + method: 'POST', url: '/metrics/find', - params: { - query: interpolatedQuery, + params: {}, + data: `query=${interpolatedQuery}`, + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', }, // for cancellations requestId: options.requestId, diff --git a/public/app/plugins/datasource/graphite/graphite_query.ts b/public/app/plugins/datasource/graphite/graphite_query.ts index 57157dc0701b5..1780ce23832f6 100644 --- a/public/app/plugins/datasource/graphite/graphite_query.ts +++ b/public/app/plugins/datasource/graphite/graphite_query.ts @@ -29,6 +29,7 @@ export default class GraphiteQuery { this.functions = []; this.segments = []; this.tags = []; + this.seriesByTagUsed = false; this.error = null; if (this.target.textEditor) { @@ -57,17 +58,6 @@ export default class GraphiteQuery { } this.checkOtherSegmentsIndex = this.segments.length - 1; - this.checkForSeriesByTag(); - } - - checkForSeriesByTag() { - const seriesByTagFunc: any = _.find(this.functions, func => func.def.name === 'seriesByTag'); - if (seriesByTagFunc) { - this.seriesByTagUsed = true; - seriesByTagFunc.hidden = true; - const tags = this.splitSeriesByTagParams(seriesByTagFunc); - this.tags = tags; - } } getSegmentPathUpTo(index) { @@ -98,6 +88,14 @@ export default class GraphiteQuery { innerFunc.updateText(); this.functions.push(innerFunc); + + // extract tags from seriesByTag function and hide function + if (innerFunc.def.name === 'seriesByTag' && !this.seriesByTagUsed) { + this.seriesByTagUsed = true; + innerFunc.hidden = true; + this.tags = this.splitSeriesByTagParams(innerFunc); + } + break; case 'series-ref': if (this.segments.length > 0 || this.getSeriesByTagFuncIndex() >= 0) { @@ -112,7 +110,7 @@ export default class GraphiteQuery { this.addFunctionParameter(func, astNode.value); break; case 'metric': - if (this.segments.length > 0) { + if (this.segments.length || this.tags.length) { this.addFunctionParameter(func, _.join(_.map(astNode.segments, 'value'), '.')); } else { this.segments = astNode.segments; @@ -131,18 +129,6 @@ export default class GraphiteQuery { addFunction(newFunc) { this.functions.push(newFunc); - this.moveAliasFuncLast(); - } - - moveAliasFuncLast() { - const aliasFunc: any = _.find(this.functions, func => { - return func.def.name.startsWith('alias'); - }); - - if (aliasFunc) { - this.functions = _.without(this.functions, aliasFunc); - this.functions.push(aliasFunc); - } } addFunctionParameter(func, value) { diff --git a/public/app/plugins/datasource/graphite/specs/datasource.test.ts b/public/app/plugins/datasource/graphite/specs/datasource.test.ts index de98f55172bd3..d0f83ab271778 100644 --- a/public/app/plugins/datasource/graphite/specs/datasource.test.ts +++ b/public/app/plugins/datasource/graphite/specs/datasource.test.ts @@ -303,6 +303,18 @@ describe('graphiteDatasource', () => { expect(requestOptions.params.expr).toEqual(['server=~backend*']); expect(results).not.toBe(null); }); + + it('/metrics/find should be POST', () => { + ctx.templateSrv.setGrafanaVariable('foo', 'bar'); + ctx.ds.metricFindQuery('[[foo]]').then(data => { + results = data; + }); + expect(requestOptions.url).toBe('/api/datasources/proxy/1/metrics/find'); + expect(requestOptions.method).toEqual('POST'); + expect(requestOptions.headers).toHaveProperty('Content-Type', 'application/x-www-form-urlencoded'); + expect(requestOptions.data).toMatch(`query=bar`); + expect(requestOptions).toHaveProperty('params'); + }); }); }); diff --git a/public/app/plugins/datasource/graphite/specs/graphite_query.test.ts b/public/app/plugins/datasource/graphite/specs/graphite_query.test.ts index 241a21ab40dfa..1e0da60416062 100644 --- a/public/app/plugins/datasource/graphite/specs/graphite_query.test.ts +++ b/public/app/plugins/datasource/graphite/specs/graphite_query.test.ts @@ -57,4 +57,17 @@ describe('Graphite query model', () => { expect(ctx.queryModel.functions[1].params[0]).toBe('#A'); }); }); + + describe('when query has seriesByTag and highestMax with variable param', () => { + beforeEach(() => { + ctx.target = { refId: 'A', target: `highestMax(seriesByTag('namespace=asd'), $limit)` }; + ctx.targets = [ctx.target]; + ctx.queryModel = new GraphiteQuery(ctx.datasource, ctx.target, ctx.templateSrv); + }); + + it('should add $limit to highestMax function param', () => { + expect(ctx.queryModel.segments.length).toBe(0); + expect(ctx.queryModel.functions[1].params[0]).toBe('$limit'); + }); + }); }); diff --git a/public/app/plugins/datasource/input/InputConfigEditor.tsx b/public/app/plugins/datasource/input/InputConfigEditor.tsx index 47faf67bd4880..a5dc70d24d221 100644 --- a/public/app/plugins/datasource/input/InputConfigEditor.tsx +++ b/public/app/plugins/datasource/input/InputConfigEditor.tsx @@ -4,7 +4,7 @@ import React, { PureComponent } from 'react'; // Types import { InputOptions } from './types'; -import { DataSourcePluginOptionsEditorProps, DataSourceSettings, SeriesData, TableInputCSV, toCSV } from '@grafana/ui'; +import { DataSourcePluginOptionsEditorProps, DataSourceSettings, DataFrame, TableInputCSV, toCSV } from '@grafana/ui'; type InputSettings = DataSourceSettings; @@ -27,7 +27,7 @@ export class InputConfigEditor extends PureComponent { } } - onSeriesParsed = (data: SeriesData[], text: string) => { + onSeriesParsed = (data: DataFrame[], text: string) => { const { options, onOptionsChange } = this.props; if (!data) { data = [ diff --git a/public/app/plugins/datasource/input/InputDatasource.test.ts b/public/app/plugins/datasource/input/InputDatasource.test.ts index e4c23bf47d0fd..8268a9d47552a 100644 --- a/public/app/plugins/datasource/input/InputDatasource.test.ts +++ b/public/app/plugins/datasource/input/InputDatasource.test.ts @@ -1,4 +1,4 @@ -import InputDatasource, { describeSeriesData } from './InputDatasource'; +import InputDatasource, { describeDataFrame } from './InputDatasource'; import { InputQuery, InputOptions } from './types'; import { readCSV, DataSourceInstanceSettings, PluginMeta } from '@grafana/ui'; import { getQueryOptions } from 'test/helpers/getQueryOptions'; @@ -32,11 +32,11 @@ describe('InputDatasource', () => { }); }); - test('SeriesData descriptions', () => { - expect(describeSeriesData([])).toEqual(''); - expect(describeSeriesData(null)).toEqual(''); + test('DataFrame descriptions', () => { + expect(describeDataFrame([])).toEqual(''); + expect(describeDataFrame(null)).toEqual(''); expect( - describeSeriesData([ + describeDataFrame([ { name: 'x', fields: [{ name: 'a' }], diff --git a/public/app/plugins/datasource/input/InputDatasource.ts b/public/app/plugins/datasource/input/InputDatasource.ts index 483a48ddcc3ae..eca8a542b8fe2 100644 --- a/public/app/plugins/datasource/input/InputDatasource.ts +++ b/public/app/plugins/datasource/input/InputDatasource.ts @@ -1,7 +1,7 @@ // Types import { DataQueryRequest, - SeriesData, + DataFrame, DataQueryResponse, DataSourceApi, DataSourceInstanceSettings, @@ -10,7 +10,7 @@ import { import { InputQuery, InputOptions } from './types'; export class InputDatasource extends DataSourceApi { - data: SeriesData[]; + data: DataFrame[]; constructor(instanceSettings: DataSourceInstanceSettings) { super(instanceSettings); @@ -23,9 +23,9 @@ export class InputDatasource extends DataSourceApi { */ getQueryDisplayText(query: InputQuery): string { if (query.data) { - return 'Panel Data: ' + describeSeriesData(query.data); + return 'Panel Data: ' + describeDataFrame(query.data); } - return `Shared Data From: ${this.name} (${describeSeriesData(this.data)})`; + return `Shared Data From: ${this.name} (${describeDataFrame(this.data)})`; } metricFindQuery(query: string, options?: any): Promise { @@ -44,7 +44,7 @@ export class InputDatasource extends DataSourceApi { } query(options: DataQueryRequest): Promise { - const results: SeriesData[] = []; + const results: DataFrame[] = []; for (const query of options.targets) { if (query.hide) { continue; @@ -83,7 +83,7 @@ export class InputDatasource extends DataSourceApi { } } -export function describeSeriesData(data: SeriesData[]): string { +export function describeDataFrame(data: DataFrame[]): string { if (!data || !data.length) { return ''; } diff --git a/public/app/plugins/datasource/input/InputQueryEditor.tsx b/public/app/plugins/datasource/input/InputQueryEditor.tsx index 2e9a473f5d90d..73f0d8da39d05 100644 --- a/public/app/plugins/datasource/input/InputQueryEditor.tsx +++ b/public/app/plugins/datasource/input/InputQueryEditor.tsx @@ -2,10 +2,10 @@ import React, { PureComponent } from 'react'; // Types -import { InputDatasource, describeSeriesData } from './InputDatasource'; +import { InputDatasource, describeDataFrame } from './InputDatasource'; import { InputQuery, InputOptions } from './types'; -import { FormLabel, Select, QueryEditorProps, SelectOptionItem, SeriesData, TableInputCSV, toCSV } from '@grafana/ui'; +import { FormLabel, Select, QueryEditorProps, SelectOptionItem, DataFrame, TableInputCSV, toCSV } from '@grafana/ui'; type Props = QueryEditorProps; @@ -31,7 +31,7 @@ export class InputQueryEditor extends PureComponent { onSourceChange = (item: SelectOptionItem) => { const { datasource, query, onChange, onRunQuery } = this.props; - let data: SeriesData[] | undefined = undefined; + let data: DataFrame[] | undefined = undefined; if (item.value === 'panel') { if (query.data) { return; @@ -51,7 +51,7 @@ export class InputQueryEditor extends PureComponent { onRunQuery(); }; - onSeriesParsed = (data: SeriesData[], text: string) => { + onSeriesParsed = (data: DataFrame[], text: string) => { const { query, onChange, onRunQuery } = this.props; this.setState({ text }); if (!data) { @@ -80,10 +80,10 @@ export class InputQueryEditor extends PureComponent {
      {query.data ? ( - describeSeriesData(query.data) + describeDataFrame(query.data) ) : ( - {name}: {describeSeriesData(datasource.data)}    + {name}: {describeDataFrame(datasource.data)}    )} diff --git a/public/app/plugins/datasource/input/types.ts b/public/app/plugins/datasource/input/types.ts index 15b19f2dca25e..7ad2b0b2a2835 100644 --- a/public/app/plugins/datasource/input/types.ts +++ b/public/app/plugins/datasource/input/types.ts @@ -1,11 +1,11 @@ -import { DataQuery, SeriesData, DataSourceJsonData } from '@grafana/ui/src/types'; +import { DataQuery, DataFrame, DataSourceJsonData } from '@grafana/ui/src/types'; export interface InputQuery extends DataQuery { // Data saved in the panel - data?: SeriesData[]; + data?: DataFrame[]; } export interface InputOptions extends DataSourceJsonData { // Saved in the datasource and download with bootData - data?: SeriesData[]; + data?: DataFrame[]; } diff --git a/public/app/plugins/datasource/loki/datasource.test.ts b/public/app/plugins/datasource/loki/datasource.test.ts index 2a9c8a01f2540..e511a759f6178 100644 --- a/public/app/plugins/datasource/loki/datasource.test.ts +++ b/public/app/plugins/datasource/loki/datasource.test.ts @@ -1,7 +1,7 @@ import LokiDatasource from './datasource'; import { LokiQuery } from './types'; import { getQueryOptions } from 'test/helpers/getQueryOptions'; -import { SeriesData, DataSourceApi } from '@grafana/ui'; +import { DataFrame, DataSourceApi } from '@grafana/ui'; import { BackendSrv } from 'app/core/services/backend_srv'; import { TemplateSrv } from 'app/features/templating/template_srv'; @@ -66,10 +66,10 @@ describe('LokiDatasource', () => { const res = await ds.query(options); - const seriesData = res.data[0] as SeriesData; - expect(seriesData.rows[0][1]).toBe('hello'); - expect(seriesData.meta.limit).toBe(20); - expect(seriesData.meta.searchWords).toEqual(['(?i)foo']); + const dataFrame = res.data[0] as DataFrame; + expect(dataFrame.rows[0][1]).toBe('hello'); + expect(dataFrame.meta.limit).toBe(20); + expect(dataFrame.meta.searchWords).toEqual(['(?i)foo']); done(); }); }); diff --git a/public/app/plugins/datasource/loki/datasource.ts b/public/app/plugins/datasource/loki/datasource.ts index 55bb4f5260952..c5cf29261726d 100644 --- a/public/app/plugins/datasource/loki/datasource.ts +++ b/public/app/plugins/datasource/loki/datasource.ts @@ -8,14 +8,14 @@ import { catchError, map } from 'rxjs/operators'; import * as dateMath from '@grafana/ui/src/utils/datemath'; import { addLabelToSelector } from 'app/plugins/datasource/prometheus/add_label_to_query'; import LanguageProvider from './language_provider'; -import { logStreamToSeriesData } from './result_transformer'; +import { logStreamToDataFrame } from './result_transformer'; import { formatQuery, parseQuery, getHighlighterExpressionsFromQuery } from './query_utils'; // Types import { PluginMeta, DataQueryRequest, - SeriesData, + DataFrame, DataSourceApi, DataSourceInstanceSettings, DataQueryError, @@ -147,25 +147,25 @@ export class LokiDatasource extends DataSourceApi { return error; }; - processResult = (data: any, target: any): SeriesData[] => { - const series: SeriesData[] = []; + processResult = (data: any, target: any): DataFrame[] => { + const series: DataFrame[] = []; if (Object.keys(data).length === 0) { return series; } if (!data.streams) { - return [{ ...logStreamToSeriesData(data), refId: target.refId }]; + return [{ ...logStreamToDataFrame(data), refId: target.refId }]; } for (const stream of data.streams || []) { - const seriesData = logStreamToSeriesData(stream); - seriesData.refId = target.refId; - seriesData.meta = { + const dataFrame = logStreamToDataFrame(stream); + dataFrame.refId = target.refId; + dataFrame.meta = { searchWords: getHighlighterExpressionsFromQuery(formatQuery(target.query, target.regexp)), limit: this.maxLines, }; - series.push(seriesData); + series.push(dataFrame); } return series; @@ -233,7 +233,7 @@ export class LokiDatasource extends DataSourceApi { ); return Promise.all(queries).then((results: any[]) => { - let series: SeriesData[] = []; + let series: DataFrame[] = []; for (let i = 0; i < results.length; i++) { const result = results[i]; @@ -310,13 +310,13 @@ export class LokiDatasource extends DataSourceApi { return { ...commontTargetOptons, start: timeEpochNs - contextTimeBuffer, - end: timeEpochNs, + end: row.timestamp, direction, }; } else { return { ...commontTargetOptons, - start: timeEpochNs, // TODO: We should add 1ns here for the original row not no be included in the result + start: row.timestamp, // start param in Loki API is inclusive so we'll have to filter out the row that this request is based from end: timeEpochNs + contextTimeBuffer, }; } @@ -328,14 +328,14 @@ export class LokiDatasource extends DataSourceApi { (options && options.limit) || 10, (options && options.direction) || 'BACKWARD' ); - const series: SeriesData[] = []; + const series: DataFrame[] = []; try { const result = await this._request('/api/prom/query', target); if (result.data) { for (const stream of result.data.streams || []) { - const seriesData = logStreamToSeriesData(stream); - series.push(seriesData); + const dataFrame = logStreamToDataFrame(stream); + series.push(dataFrame); } } if (options && options.direction === 'FORWARD') { diff --git a/public/app/plugins/datasource/loki/result_transformer.test.ts b/public/app/plugins/datasource/loki/result_transformer.test.ts index b714bd9a53859..df860d63a2716 100644 --- a/public/app/plugins/datasource/loki/result_transformer.test.ts +++ b/public/app/plugins/datasource/loki/result_transformer.test.ts @@ -1,6 +1,6 @@ -import { logStreamToSeriesData } from './result_transformer'; +import { logStreamToDataFrame } from './result_transformer'; -describe('convert loki response to SeriesData', () => { +describe('convert loki response to DataFrame', () => { const streams = [ { labels: '{foo="bar"}', @@ -22,7 +22,7 @@ describe('convert loki response to SeriesData', () => { }, ]; it('converts streams to series', () => { - const data = streams.map(stream => logStreamToSeriesData(stream)); + const data = streams.map(stream => logStreamToDataFrame(stream)); expect(data.length).toBe(2); expect(data[0].labels['foo']).toEqual('bar'); diff --git a/public/app/plugins/datasource/loki/result_transformer.ts b/public/app/plugins/datasource/loki/result_transformer.ts index 7cebe52f1e56e..aaae47f3090bb 100644 --- a/public/app/plugins/datasource/loki/result_transformer.ts +++ b/public/app/plugins/datasource/loki/result_transformer.ts @@ -1,7 +1,7 @@ import { LokiLogsStream } from './types'; -import { SeriesData, parseLabels, FieldType, Labels } from '@grafana/ui'; +import { DataFrame, parseLabels, FieldType, Labels } from '@grafana/ui'; -export function logStreamToSeriesData(stream: LokiLogsStream): SeriesData { +export function logStreamToDataFrame(stream: LokiLogsStream): DataFrame { let labels: Labels = stream.parsedLabels; if (!labels && stream.labels) { labels = parseLabels(stream.labels); diff --git a/public/app/plugins/datasource/mssql/response_parser.ts b/public/app/plugins/datasource/mssql/response_parser.ts index 063a4c744e2f7..364340348ef07 100644 --- a/public/app/plugins/datasource/mssql/response_parser.ts +++ b/public/app/plugins/datasource/mssql/response_parser.ts @@ -1,13 +1,14 @@ import _ from 'lodash'; +import { IQService } from 'angular'; export default class ResponseParser { - constructor(private $q) {} + constructor(private $q: IQService) {} - processQueryResult(res) { - const data = []; + processQueryResult(res: any) { + const data: any[] = []; if (!res.data.results) { - return { data: data }; + return { data }; } for (const key in res.data.results) { @@ -37,7 +38,7 @@ export default class ResponseParser { return { data: data }; } - parseMetricFindQueryResult(refId, results) { + parseMetricFindQueryResult(refId: string, results: any) { if (!results || results.data.length === 0 || results.data.results[refId].meta.rowCount === 0) { return []; } @@ -54,7 +55,7 @@ export default class ResponseParser { return this.transformToSimpleList(rows); } - transformToKeyValueList(rows, textColIndex, valueColIndex) { + transformToKeyValueList(rows: any, textColIndex: number, valueColIndex: number) { const res = []; for (let i = 0; i < rows.length; i++) { @@ -66,7 +67,7 @@ export default class ResponseParser { return res; } - transformToSimpleList(rows) { + transformToSimpleList(rows: any) { const res = []; for (let i = 0; i < rows.length; i++) { @@ -83,7 +84,7 @@ export default class ResponseParser { }); } - findColIndex(columns, colName) { + findColIndex(columns: any[], colName: string) { for (let i = 0; i < columns.length; i++) { if (columns[i].text === colName) { return i; @@ -93,7 +94,7 @@ export default class ResponseParser { return -1; } - containsKey(res, key) { + containsKey(res: any[], key: any) { for (let i = 0; i < res.length; i++) { if (res[i].text === key) { return true; @@ -102,7 +103,7 @@ export default class ResponseParser { return false; } - transformAnnotationResponse(options, data) { + transformAnnotationResponse(options: any, data: any) { const table = data.data.results[options.annotation.name].tables[0]; let timeColumnIndex = -1; diff --git a/public/app/plugins/datasource/mssql/specs/datasource.test.ts b/public/app/plugins/datasource/mssql/specs/datasource.test.ts index 357d4e41ccff8..b4d1b088ae804 100644 --- a/public/app/plugins/datasource/mssql/specs/datasource.test.ts +++ b/public/app/plugins/datasource/mssql/specs/datasource.test.ts @@ -1,12 +1,14 @@ import { MssqlDatasource } from '../datasource'; import { TemplateSrvStub, TimeSrvStub } from 'test/specs/helpers'; import { CustomVariable } from 'app/features/templating/custom_variable'; +// @ts-ignore import q from 'q'; import { dateTime } from '@grafana/ui/src/utils/moment_wrapper'; describe('MSSQLDatasource', () => { const ctx: any = { backendSrv: {}, + // @ts-ignore templateSrv: new TemplateSrvStub(), timeSrv: new TimeSrvStub(), }; @@ -19,7 +21,7 @@ describe('MSSQLDatasource', () => { }); describe('When performing annotationQuery', () => { - let results; + let results: any; const annotationName = 'MyAnno'; @@ -53,11 +55,11 @@ describe('MSSQLDatasource', () => { }; beforeEach(() => { - ctx.backendSrv.datasourceRequest = options => { + ctx.backendSrv.datasourceRequest = (options: any) => { return ctx.$q.when({ data: response, status: 200 }); }; - return ctx.ds.annotationQuery(options).then(data => { + return ctx.ds.annotationQuery(options).then((data: any) => { results = data; }); }); @@ -77,7 +79,7 @@ describe('MSSQLDatasource', () => { }); describe('When performing metricFindQuery', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -97,11 +99,11 @@ describe('MSSQLDatasource', () => { }; beforeEach(() => { - ctx.backendSrv.datasourceRequest = options => { + ctx.backendSrv.datasourceRequest = (options: any) => { return ctx.$q.when({ data: response, status: 200 }); }; - return ctx.ds.metricFindQuery(query).then(data => { + return ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); @@ -114,7 +116,7 @@ describe('MSSQLDatasource', () => { }); describe('When performing metricFindQuery with key, value columns', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -134,11 +136,11 @@ describe('MSSQLDatasource', () => { }; beforeEach(() => { - ctx.backendSrv.datasourceRequest = options => { + ctx.backendSrv.datasourceRequest = (options: any) => { return ctx.$q.when({ data: response, status: 200 }); }; - return ctx.ds.metricFindQuery(query).then(data => { + return ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); @@ -153,7 +155,7 @@ describe('MSSQLDatasource', () => { }); describe('When performing metricFindQuery with key, value columns and with duplicate keys', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -173,11 +175,11 @@ describe('MSSQLDatasource', () => { }; beforeEach(() => { - ctx.backendSrv.datasourceRequest = options => { + ctx.backendSrv.datasourceRequest = (options: any) => { return ctx.$q.when({ data: response, status: 200 }); }; - return ctx.ds.metricFindQuery(query).then(data => { + return ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); @@ -190,7 +192,7 @@ describe('MSSQLDatasource', () => { }); describe('When performing metricFindQuery', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -216,7 +218,7 @@ describe('MSSQLDatasource', () => { beforeEach(() => { ctx.timeSrv.setTime(time); - ctx.backendSrv.datasourceRequest = options => { + ctx.backendSrv.datasourceRequest = (options: any) => { results = options.data; return ctx.$q.when({ data: response, status: 200 }); }; diff --git a/public/app/plugins/datasource/mysql/datasource.ts b/public/app/plugins/datasource/mysql/datasource.ts index a864d42fcc41f..281f8a9188070 100644 --- a/public/app/plugins/datasource/mysql/datasource.ts +++ b/public/app/plugins/datasource/mysql/datasource.ts @@ -1,6 +1,10 @@ import _ from 'lodash'; import ResponseParser from './response_parser'; import MysqlQuery from 'app/plugins/datasource/mysql/mysql_query'; +import { BackendSrv } from 'app/core/services/backend_srv'; +import { IQService } from 'angular'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; export class MysqlDatasource { id: any; @@ -10,7 +14,13 @@ export class MysqlDatasource { interval: string; /** @ngInject */ - constructor(instanceSettings, private backendSrv, private $q, private templateSrv, private timeSrv) { + constructor( + instanceSettings: any, + private backendSrv: BackendSrv, + private $q: IQService, + private templateSrv: TemplateSrv, + private timeSrv: TimeSrv + ) { this.name = instanceSettings.name; this.id = instanceSettings.id; this.responseParser = new ResponseParser(this.$q); @@ -18,7 +28,7 @@ export class MysqlDatasource { this.interval = (instanceSettings.jsonData || {}).timeInterval || '1m'; } - interpolateVariable = (value, variable) => { + interpolateVariable = (value: string, variable: any) => { if (typeof value === 'string') { if (variable.multi || variable.includeAll) { return this.queryModel.quoteLiteral(value); @@ -31,13 +41,13 @@ export class MysqlDatasource { return value; } - const quotedValues = _.map(value, v => { + const quotedValues = _.map(value, (v: any) => { return this.queryModel.quoteLiteral(v); }); return quotedValues.join(','); }; - query(options) { + query(options: any) { const queries = _.filter(options.targets, target => { return target.hide !== true; }).map(target => { @@ -48,7 +58,7 @@ export class MysqlDatasource { intervalMs: options.intervalMs, maxDataPoints: options.maxDataPoints, datasourceId: this.id, - rawSql: queryModel.render(this.interpolateVariable), + rawSql: queryModel.render(this.interpolateVariable as any), format: target.format, }; }); @@ -70,7 +80,7 @@ export class MysqlDatasource { .then(this.responseParser.processQueryResult); } - annotationQuery(options) { + annotationQuery(options: any) { if (!options.annotation.rawQuery) { return this.$q.reject({ message: 'Query missing in annotation definition', @@ -94,10 +104,10 @@ export class MysqlDatasource { queries: [query], }, }) - .then(data => this.responseParser.transformAnnotationResponse(options, data)); + .then((data: any) => this.responseParser.transformAnnotationResponse(options, data)); } - metricFindQuery(query, optionalOptions) { + metricFindQuery(query: string, optionalOptions: any) { let refId = 'tempvar'; if (optionalOptions && optionalOptions.variable && optionalOptions.variable.name) { refId = optionalOptions.variable.name; @@ -130,7 +140,7 @@ export class MysqlDatasource { method: 'POST', data: data, }) - .then(data => this.responseParser.parseMetricFindQueryResult(refId, data)); + .then((data: any) => this.responseParser.parseMetricFindQueryResult(refId, data)); } testDatasource() { @@ -153,10 +163,10 @@ export class MysqlDatasource { ], }, }) - .then(res => { + .then((res: any) => { return { status: 'success', message: 'Database Connection OK' }; }) - .catch(err => { + .catch((err: any) => { console.log(err); if (err.data && err.data.message) { return { status: 'error', message: err.data.message }; diff --git a/public/app/plugins/datasource/mysql/meta_query.ts b/public/app/plugins/datasource/mysql/meta_query.ts index e5f8ad73ebe20..eb03dc40f99b1 100644 --- a/public/app/plugins/datasource/mysql/meta_query.ts +++ b/public/app/plugins/datasource/mysql/meta_query.ts @@ -1,5 +1,5 @@ export class MysqlMetaQuery { - constructor(private target, private queryModel) {} + constructor(private target: any, private queryModel: any) {} getOperators(datatype: string) { switch (datatype) { @@ -22,7 +22,7 @@ export class MysqlMetaQuery { } // quote identifier as literal to use in metadata queries - quoteIdentAsLiteral(value) { + quoteIdentAsLiteral(value: string) { return this.queryModel.quoteLiteral(this.queryModel.unquoteIdentifier(value)); } diff --git a/public/app/plugins/datasource/mysql/mysql_query.ts b/public/app/plugins/datasource/mysql/mysql_query.ts index 88cef929aaae9..9ba5b13ecf221 100644 --- a/public/app/plugins/datasource/mysql/mysql_query.ts +++ b/public/app/plugins/datasource/mysql/mysql_query.ts @@ -1,4 +1,6 @@ import _ from 'lodash'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { ScopedVars } from '@grafana/ui'; export default class MysqlQuery { target: any; @@ -6,7 +8,7 @@ export default class MysqlQuery { scopedVars: any; /** @ngInject */ - constructor(target, templateSrv?, scopedVars?) { + constructor(target: any, templateSrv?: TemplateSrv, scopedVars?: ScopedVars) { this.target = target; this.templateSrv = templateSrv; this.scopedVars = scopedVars; @@ -35,7 +37,7 @@ export default class MysqlQuery { } // remove identifier quoting from identifier to use in metadata queries - unquoteIdentifier(value) { + unquoteIdentifier(value: string) { if (value[0] === '"' && value[value.length - 1] === '"') { return value.substring(1, value.length - 1).replace(/""/g, '"'); } else { @@ -43,15 +45,15 @@ export default class MysqlQuery { } } - quoteIdentifier(value) { + quoteIdentifier(value: string) { return '"' + value.replace(/"/g, '""') + '"'; } - quoteLiteral(value) { + quoteLiteral(value: string) { return "'" + value.replace(/'/g, "''") + "'"; } - escapeLiteral(value) { + escapeLiteral(value: any) { return String(value).replace(/'/g, "''"); } @@ -63,7 +65,7 @@ export default class MysqlQuery { return this.target.metricColumn !== 'none'; } - interpolateQueryStr(value, variable, defaultFormatFn) { + interpolateQueryStr(value: string, variable: { multi: any; includeAll: any }, defaultFormatFn: any) { // if no multi or include all do not regexEscape if (!variable.multi && !variable.includeAll) { return this.escapeLiteral(value); @@ -77,7 +79,7 @@ export default class MysqlQuery { return escapedValues.join(','); } - render(interpolate?) { + render(interpolate?: boolean) { const target = this.target; // new query with no table set yet @@ -146,7 +148,7 @@ export default class MysqlQuery { return query; } - buildValueColumn(column) { + buildValueColumn(column: any) { let query = ''; const columnName: any = _.find(column, (g: any) => g.type === 'column'); diff --git a/public/app/plugins/datasource/mysql/query_ctrl.ts b/public/app/plugins/datasource/mysql/query_ctrl.ts index 06419c791c7f4..0e9806fa4826d 100644 --- a/public/app/plugins/datasource/mysql/query_ctrl.ts +++ b/public/app/plugins/datasource/mysql/query_ctrl.ts @@ -5,6 +5,8 @@ import { QueryCtrl } from 'app/plugins/sdk'; import { SqlPart } from 'app/core/components/sql_part/sql_part'; import MysqlQuery from './mysql_query'; import sqlPart from './sql_part'; +import { auto, IQService } from 'angular'; +import { TemplateSrv } from 'app/features/templating/template_srv'; export interface QueryMeta { sql: string; @@ -41,7 +43,13 @@ export class MysqlQueryCtrl extends QueryCtrl { groupAdd: any; /** @ngInject */ - constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) { + constructor( + $scope: any, + $injector: auto.IInjectorService, + private templateSrv: TemplateSrv, + private $q: IQService, + private uiSegmentSrv: any + ) { super($scope, $injector); this.target = this.target; @@ -59,7 +67,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.target.rawQuery = true; } else { this.target.rawSql = defaultQuery; - this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then(result => { + this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then((result: any) => { if (result.length > 0) { this.target.table = result[0].text; let segment = this.uiSegmentSrv.newSegment(this.target.table); @@ -156,7 +164,7 @@ export class MysqlQueryCtrl extends QueryCtrl { } } - resetPlusButton(button) { + resetPlusButton(button: { html: any; value: any }) { const plusButton = this.uiSegmentSrv.newPlusButton(); button.html = plusButton.html; button.value = plusButton.value; @@ -180,7 +188,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.metricColumnSegment.value = segment.value; this.target.metricColumn = 'none'; - const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then(result => { + const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then((result: any) => { // check if time column is still valid if (result.length > 0 && !_.find(result, (r: any) => r.text === this.target.timeColumn)) { const segment = this.uiSegmentSrv.newSegment(result[0].text); @@ -189,7 +197,7 @@ export class MysqlQueryCtrl extends QueryCtrl { } return this.timeColumnChanged(false); }); - const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then(result => { + const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then((result: any) => { if (result.length > 0) { this.target.select = [[{ type: 'column', params: [result[0].text] }]]; this.updateProjection(); @@ -210,31 +218,33 @@ export class MysqlQueryCtrl extends QueryCtrl { timeColumnChanged(refresh?: boolean) { this.target.timeColumn = this.timeColumnSegment.value; - return this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)).then(result => { - if (result.length === 1) { - if (this.target.timeColumnType !== result[0].text) { - this.target.timeColumnType = result[0].text; - } - let partModel; - if (this.queryModel.hasUnixEpochTimecolumn()) { - partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] }); - } else { - partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] }); - } + return this.datasource + .metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)) + .then((result: any) => { + if (result.length === 1) { + if (this.target.timeColumnType !== result[0].text) { + this.target.timeColumnType = result[0].text; + } + let partModel; + if (this.queryModel.hasUnixEpochTimecolumn()) { + partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] }); + } else { + partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] }); + } - if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { - // replace current macro - this.whereParts[0] = partModel; - } else { - this.whereParts.splice(0, 0, partModel); + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } } - } - this.updatePersistedParts(); - if (refresh !== false) { - this.panelCtrl.refresh(); - } - }); + this.updatePersistedParts(); + if (refresh !== false) { + this.panelCtrl.refresh(); + } + }); } getMetricColumnSegments() { @@ -249,7 +259,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.panelCtrl.refresh(); } - onDataReceived(dataList) { + onDataReceived(dataList: any) { this.lastQueryMeta = null; this.lastQueryError = null; @@ -259,7 +269,7 @@ export class MysqlQueryCtrl extends QueryCtrl { } } - onDataError(err) { + onDataError(err: any) { if (err.data && err.data.results) { const queryRes = err.data.results[this.target.refId]; if (queryRes) { @@ -269,8 +279,8 @@ export class MysqlQueryCtrl extends QueryCtrl { } } - transformToSegments(config) { - return results => { + transformToSegments(config: any) { + return (results: any) => { const segments = _.map(results, segment => { return this.uiSegmentSrv.newSegment({ value: segment.text, @@ -304,15 +314,15 @@ export class MysqlQueryCtrl extends QueryCtrl { }; } - findAggregateIndex(selectParts) { + findAggregateIndex(selectParts: any) { return _.findIndex(selectParts, (p: any) => p.def.type === 'aggregate' || p.def.type === 'percentile'); } - findWindowIndex(selectParts) { + findWindowIndex(selectParts: any) { return _.findIndex(selectParts, (p: any) => p.def.type === 'window' || p.def.type === 'moving_window'); } - addSelectPart(selectParts, item, subItem) { + addSelectPart(selectParts: any[], item: { value: any }, subItem: { type: any; value: any }) { let partType = item.value; if (subItem && subItem.type) { partType = subItem.type; @@ -384,7 +394,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.panelCtrl.refresh(); } - removeSelectPart(selectParts, part) { + removeSelectPart(selectParts: any, part: { def: { type: string } }) { if (part.def.type === 'column') { // remove all parts of column unless its last column if (this.selectParts.length > 1) { @@ -399,7 +409,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.updatePersistedParts(); } - handleSelectPartEvent(selectParts, part, evt) { + handleSelectPartEvent(selectParts: any, part: { def: any }, evt: { name: any }) { switch (evt.name) { case 'get-param-options': { switch (part.def.type) { @@ -431,7 +441,7 @@ export class MysqlQueryCtrl extends QueryCtrl { } } - handleGroupPartEvent(part, index, evt) { + handleGroupPartEvent(part: any, index: any, evt: { name: any }) { switch (evt.name) { case 'get-param-options': { return this.datasource @@ -455,7 +465,7 @@ export class MysqlQueryCtrl extends QueryCtrl { } } - addGroup(partType, value) { + addGroup(partType: string, value: string) { let params = [value]; if (partType === 'time') { params = ['$__interval', 'none']; @@ -484,7 +494,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.updatePersistedParts(); } - removeGroup(part, index) { + removeGroup(part: { def: { type: string } }, index: number) { if (part.def.type === 'time') { // remove aggregations this.selectParts = _.map(this.selectParts, (s: any) => { @@ -501,7 +511,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.updatePersistedParts(); } - handleWherePartEvent(whereParts, part, evt, index) { + handleWherePartEvent(whereParts: any, part: any, evt: any, index: any) { switch (evt.name) { case 'get-param-options': { switch (evt.param.name) { @@ -567,7 +577,7 @@ export class MysqlQueryCtrl extends QueryCtrl { return this.$q.when(options); } - addWhereAction(part, index) { + addWhereAction(part: any, index: number) { switch (this.whereAdd.type) { case 'macro': { const partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] }); @@ -592,7 +602,7 @@ export class MysqlQueryCtrl extends QueryCtrl { getGroupOptions() { return this.datasource .metricFindQuery(this.metaBuilder.buildColumnQuery('group')) - .then(tags => { + .then((tags: any) => { const options = []; if (!this.queryModel.hasTimeGroup()) { options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' })); @@ -616,7 +626,7 @@ export class MysqlQueryCtrl extends QueryCtrl { this.panelCtrl.refresh(); } - handleQueryError(err) { + handleQueryError(err: any): any[] { this.error = err.message || 'Failed to issue metric query'; return []; } diff --git a/public/app/plugins/datasource/mysql/response_parser.ts b/public/app/plugins/datasource/mysql/response_parser.ts index 3100f81df6064..a887b35a59765 100644 --- a/public/app/plugins/datasource/mysql/response_parser.ts +++ b/public/app/plugins/datasource/mysql/response_parser.ts @@ -1,10 +1,11 @@ import _ from 'lodash'; +import { IQService } from 'angular'; export default class ResponseParser { - constructor(private $q) {} + constructor(private $q: IQService) {} - processQueryResult(res) { - const data = []; + processQueryResult(res: any) { + const data: any[] = []; if (!res.data.results) { return { data: data }; @@ -37,7 +38,7 @@ export default class ResponseParser { return { data: data }; } - parseMetricFindQueryResult(refId, results) { + parseMetricFindQueryResult(refId: string, results: any) { if (!results || results.data.length === 0 || results.data.results[refId].meta.rowCount === 0) { return []; } @@ -54,7 +55,7 @@ export default class ResponseParser { return this.transformToSimpleList(rows); } - transformToKeyValueList(rows, textColIndex, valueColIndex) { + transformToKeyValueList(rows: any, textColIndex: number, valueColIndex: number) { const res = []; for (let i = 0; i < rows.length; i++) { @@ -69,7 +70,7 @@ export default class ResponseParser { return res; } - transformToSimpleList(rows) { + transformToSimpleList(rows: any) { const res = []; for (let i = 0; i < rows.length; i++) { @@ -86,7 +87,7 @@ export default class ResponseParser { }); } - findColIndex(columns, colName) { + findColIndex(columns: any[], colName: string) { for (let i = 0; i < columns.length; i++) { if (columns[i].text === colName) { return i; @@ -96,7 +97,7 @@ export default class ResponseParser { return -1; } - containsKey(res, key) { + containsKey(res: any[], key: any) { for (let i = 0; i < res.length; i++) { if (res[i].text === key) { return true; @@ -105,7 +106,7 @@ export default class ResponseParser { return false; } - transformAnnotationResponse(options, data) { + transformAnnotationResponse(options: any, data: any) { const table = data.data.results[options.annotation.name].tables[0]; let timeColumnIndex = -1; diff --git a/public/app/plugins/datasource/mysql/specs/datasource.test.ts b/public/app/plugins/datasource/mysql/specs/datasource.test.ts index 9b3249c87e1c0..c9b7c6b1afa3b 100644 --- a/public/app/plugins/datasource/mysql/specs/datasource.test.ts +++ b/public/app/plugins/datasource/mysql/specs/datasource.test.ts @@ -1,11 +1,12 @@ import { MysqlDatasource } from '../datasource'; import { CustomVariable } from 'app/features/templating/custom_variable'; import { toUtc, dateTime } from '@grafana/ui/src/utils/moment_wrapper'; +import { BackendSrv } from 'app/core/services/backend_srv'; describe('MySQLDatasource', () => { const instanceSettings = { name: 'mysql' }; const backendSrv = {}; - const templateSrv = { + const templateSrv: any = { replace: jest.fn(text => text), }; @@ -25,11 +26,11 @@ describe('MySQLDatasource', () => { } as any; beforeEach(() => { - ctx.ds = new MysqlDatasource(instanceSettings, backendSrv, {}, templateSrv, ctx.timeSrvMock); + ctx.ds = new MysqlDatasource(instanceSettings, backendSrv as BackendSrv, {} as any, templateSrv, ctx.timeSrvMock); }); describe('When performing annotationQuery', () => { - let results; + let results: any; const annotationName = 'MyAnno'; @@ -66,7 +67,7 @@ describe('MySQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.annotationQuery(options).then(data => { + ctx.ds.annotationQuery(options).then((data: any) => { results = data; }); }); @@ -86,7 +87,7 @@ describe('MySQLDatasource', () => { }); describe('When performing metricFindQuery', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -109,7 +110,7 @@ describe('MySQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.metricFindQuery(query).then(data => { + ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); @@ -122,7 +123,7 @@ describe('MySQLDatasource', () => { }); describe('When performing metricFindQuery with key, value columns', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -145,7 +146,7 @@ describe('MySQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.metricFindQuery(query).then(data => { + ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); @@ -160,7 +161,7 @@ describe('MySQLDatasource', () => { }); describe('When performing metricFindQuery with key, value columns and with duplicate keys', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -183,7 +184,7 @@ describe('MySQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.metricFindQuery(query).then(data => { + ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); diff --git a/public/app/plugins/datasource/mysql/sql_part.ts b/public/app/plugins/datasource/mysql/sql_part.ts index e7984ef1346cd..2b6bd66101ccc 100644 --- a/public/app/plugins/datasource/mysql/sql_part.ts +++ b/public/app/plugins/datasource/mysql/sql_part.ts @@ -1,8 +1,8 @@ import { SqlPartDef, SqlPart } from 'app/core/components/sql_part/sql_part'; -const index = []; +const index: any[] = []; -function createPart(part): any { +function createPart(part: any): any { const def = index[part.type]; if (!def) { return null; diff --git a/public/app/plugins/datasource/opentsdb/config_ctrl.ts b/public/app/plugins/datasource/opentsdb/config_ctrl.ts index 2276c0e4a1465..c2dd72ce3d657 100644 --- a/public/app/plugins/datasource/opentsdb/config_ctrl.ts +++ b/public/app/plugins/datasource/opentsdb/config_ctrl.ts @@ -3,7 +3,7 @@ export class OpenTsConfigCtrl { current: any; /** @ngInject */ - constructor($scope) { + constructor($scope: any) { this.current.jsonData = this.current.jsonData || {}; this.current.jsonData.tsdbVersion = this.current.jsonData.tsdbVersion || 1; this.current.jsonData.tsdbResolution = this.current.jsonData.tsdbResolution || 1; diff --git a/public/app/plugins/datasource/opentsdb/datasource.ts b/public/app/plugins/datasource/opentsdb/datasource.ts index 680034f23af43..46d692f99d4d5 100644 --- a/public/app/plugins/datasource/opentsdb/datasource.ts +++ b/public/app/plugins/datasource/opentsdb/datasource.ts @@ -1,6 +1,9 @@ -import angular from 'angular'; +import angular, { IQService } from 'angular'; import _ from 'lodash'; import * as dateMath from '@grafana/ui/src/utils/datemath'; +import { BackendSrv } from 'app/core/services/backend_srv'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { DataQueryRequest } from '@grafana/ui'; export default class OpenTsDatasource { type: any; @@ -16,7 +19,12 @@ export default class OpenTsDatasource { filterTypesPromise: any; /** @ngInject */ - constructor(instanceSettings, private $q, private backendSrv, private templateSrv) { + constructor( + instanceSettings: any, + private $q: IQService, + private backendSrv: BackendSrv, + private templateSrv: TemplateSrv + ) { this.type = 'opentsdb'; this.url = instanceSettings.url; this.name = instanceSettings.name; @@ -32,10 +40,10 @@ export default class OpenTsDatasource { } // Called once per panel (graph) - query(options) { + query(options: DataQueryRequest) { const start = this.convertToTSDBTime(options.rangeRaw.from, false, options.timezone); const end = this.convertToTSDBTime(options.rangeRaw.to, true, options.timezone); - const qs = []; + const qs: any[] = []; _.each(options.targets, target => { if (!target.metric) { @@ -53,7 +61,7 @@ export default class OpenTsDatasource { return d.promise; } - const groupByTags = {}; + const groupByTags: any = {}; _.each(queries, query => { if (query.filters && query.filters.length > 0) { _.each(query.filters, val => { @@ -70,7 +78,7 @@ export default class OpenTsDatasource { return query.hide !== true; }); - return this.performTimeSeriesQuery(queries, start, end).then(response => { + return this.performTimeSeriesQuery(queries, start, end).then((response: any) => { const metricToTargetMapping = this.mapMetricsToTargets(response.data, options, this.tsdbVersion); const result = _.map(response.data, (metricData: any, index: number) => { index = metricToTargetMapping[index]; @@ -85,17 +93,17 @@ export default class OpenTsDatasource { }); } - annotationQuery(options) { + annotationQuery(options: any) { const start = this.convertToTSDBTime(options.rangeRaw.from, false, options.timezone); const end = this.convertToTSDBTime(options.rangeRaw.to, true, options.timezone); const qs = []; - const eventList = []; + const eventList: any[] = []; qs.push({ aggregator: 'sum', metric: options.annotation.target }); const queries = _.compact(qs); - return this.performTimeSeriesQuery(queries, start, end).then(results => { + return this.performTimeSeriesQuery(queries, start, end).then((results: any) => { if (results.data[0]) { let annotationObject = results.data[0].annotations; if (options.annotation.isGlobal) { @@ -117,7 +125,7 @@ export default class OpenTsDatasource { }); } - targetContainsTemplate(target) { + targetContainsTemplate(target: any) { if (target.filters && target.filters.length > 0) { for (let i = 0; i < target.filters.length; i++) { if (this.templateSrv.variableExists(target.filters[i].filter)) { @@ -137,7 +145,7 @@ export default class OpenTsDatasource { return false; } - performTimeSeriesQuery(queries, start, end) { + performTimeSeriesQuery(queries: any[], start: any, end: any) { let msResolution = false; if (this.tsdbResolution === 2) { msResolution = true; @@ -167,11 +175,11 @@ export default class OpenTsDatasource { return this.backendSrv.datasourceRequest(options); } - suggestTagKeys(metric) { + suggestTagKeys(metric: string | number) { return this.$q.when(this.tagKeys[metric] || []); } - _saveTagKeys(metricData) { + _saveTagKeys(metricData: { tags: {}; aggregateTags: any; metric: string | number }) { const tagKeys = Object.keys(metricData.tags); _.each(metricData.aggregateTags, tag => { tagKeys.push(tag); @@ -180,18 +188,18 @@ export default class OpenTsDatasource { this.tagKeys[metricData.metric] = tagKeys; } - _performSuggestQuery(query, type) { - return this._get('/api/suggest', { type: type, q: query, max: 1000 }).then(result => { + _performSuggestQuery(query: string, type: string) { + return this._get('/api/suggest', { type, q: query, max: 1000 }).then((result: any) => { return result.data; }); } - _performMetricKeyValueLookup(metric, keys) { + _performMetricKeyValueLookup(metric: string, keys: any) { if (!metric || !keys) { return this.$q.when([]); } - const keysArray = keys.split(',').map(key => { + const keysArray = keys.split(',').map((key: any) => { return key.trim(); }); const key = keysArray[0]; @@ -203,9 +211,9 @@ export default class OpenTsDatasource { const m = metric + '{' + keysQuery + '}'; - return this._get('/api/search/lookup', { m: m, limit: 3000 }).then(result => { + return this._get('/api/search/lookup', { m: m, limit: 3000 }).then((result: any) => { result = result.data.results; - const tagvs = []; + const tagvs: any[] = []; _.each(result, r => { if (tagvs.indexOf(r.tags[key]) === -1) { tagvs.push(r.tags[key]); @@ -215,14 +223,14 @@ export default class OpenTsDatasource { }); } - _performMetricKeyLookup(metric) { + _performMetricKeyLookup(metric: any) { if (!metric) { return this.$q.when([]); } - return this._get('/api/search/lookup', { m: metric, limit: 1000 }).then(result => { + return this._get('/api/search/lookup', { m: metric, limit: 1000 }).then((result: any) => { result = result.data.results; - const tagks = []; + const tagks: any[] = []; _.each(result, r => { _.each(r.tags, (tagv, tagk) => { if (tagks.indexOf(tagk) === -1) { @@ -234,7 +242,7 @@ export default class OpenTsDatasource { }); } - _get(relativeUrl, params?) { + _get(relativeUrl: string, params?: { type?: string; q?: string; max?: number; m?: any; limit?: number }) { const options = { method: 'GET', url: this.url + relativeUrl, @@ -246,7 +254,7 @@ export default class OpenTsDatasource { return this.backendSrv.datasourceRequest(options); } - _addCredentialOptions(options) { + _addCredentialOptions(options: any) { if (this.basicAuth || this.withCredentials) { options.withCredentials = true; } @@ -255,7 +263,7 @@ export default class OpenTsDatasource { } } - metricFindQuery(query) { + metricFindQuery(query: string) { if (!query) { return this.$q.when([]); } @@ -267,7 +275,7 @@ export default class OpenTsDatasource { return this.$q.reject(err); } - const responseTransform = result => { + const responseTransform = (result: any) => { return _.map(result, value => { return { text: value }; }); @@ -318,7 +326,7 @@ export default class OpenTsDatasource { return this.aggregatorsPromise; } - this.aggregatorsPromise = this._get('/api/aggregators').then(result => { + this.aggregatorsPromise = this._get('/api/aggregators').then((result: any) => { if (result.data && _.isArray(result.data)) { return result.data.sort(); } @@ -332,7 +340,7 @@ export default class OpenTsDatasource { return this.filterTypesPromise; } - this.filterTypesPromise = this._get('/api/config/filters').then(result => { + this.filterTypesPromise = this._get('/api/config/filters').then((result: any) => { if (result.data) { return Object.keys(result.data).sort(); } @@ -341,9 +349,9 @@ export default class OpenTsDatasource { return this.filterTypesPromise; } - transformMetricData(md, groupByTags, target, options, tsdbResolution) { + transformMetricData(md: { dps: any }, groupByTags: any, target: any, options: any, tsdbResolution: number) { const metricLabel = this.createMetricLabel(md, target, groupByTags, options); - const dps = []; + const dps: any[] = []; // TSDB returns datapoints has a hash of ts => value. // Can't use _.pairs(invert()) because it stringifies keys/values @@ -358,7 +366,12 @@ export default class OpenTsDatasource { return { target: metricLabel, datapoints: dps }; } - createMetricLabel(md, target, groupByTags, options) { + createMetricLabel( + md: { dps?: any; tags?: any; metric?: any }, + target: { alias: string }, + groupByTags: any, + options: { scopedVars: any } + ) { if (target.alias) { const scopedVars = _.clone(options.scopedVars || {}); _.each(md.tags, (value, key) => { @@ -368,7 +381,7 @@ export default class OpenTsDatasource { } let label = md.metric; - const tagData = []; + const tagData: any[] = []; if (!_.isEmpty(md.tags)) { _.each(_.toPairs(md.tags), tag => { @@ -385,7 +398,7 @@ export default class OpenTsDatasource { return label; } - convertTargetToQuery(target, options, tsdbVersion) { + convertTargetToQuery(target: any, options: any, tsdbVersion: number) { if (!target.metric || target.hide) { return null; } @@ -460,7 +473,7 @@ export default class OpenTsDatasource { return query; } - mapMetricsToTargets(metrics, options, tsdbVersion) { + mapMetricsToTargets(metrics: any, options: any, tsdbVersion: number) { let interpolatedTagValue, arrTagV; return _.map(metrics, metricData => { if (tsdbVersion === 3) { @@ -484,7 +497,7 @@ export default class OpenTsDatasource { }); } - convertToTSDBTime(date, roundUp, timezone) { + convertToTSDBTime(date: any, roundUp: any, timezone: any) { if (date === 'now') { return null; } diff --git a/public/app/plugins/datasource/opentsdb/query_ctrl.ts b/public/app/plugins/datasource/opentsdb/query_ctrl.ts index 2e6f1d5430236..8569de2eb0754 100644 --- a/public/app/plugins/datasource/opentsdb/query_ctrl.ts +++ b/public/app/plugins/datasource/opentsdb/query_ctrl.ts @@ -1,6 +1,7 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; import { QueryCtrl } from 'app/plugins/sdk'; +import { auto } from 'angular'; export class OpenTsQueryCtrl extends QueryCtrl { static templateUrl = 'partials/query.editor.html'; @@ -20,7 +21,7 @@ export class OpenTsQueryCtrl extends QueryCtrl { addFilterMode: boolean; /** @ngInject */ - constructor($scope, $injector) { + constructor($scope: any, $injector: auto.IInjectorService) { super($scope, $injector); this.errors = this.validateTarget(); @@ -50,31 +51,31 @@ export class OpenTsQueryCtrl extends QueryCtrl { this.target.downsampleFillPolicy = 'none'; } - this.datasource.getAggregators().then(aggs => { + this.datasource.getAggregators().then((aggs: { length: number }) => { if (aggs.length !== 0) { this.aggregators = aggs; } }); - this.datasource.getFilterTypes().then(filterTypes => { + this.datasource.getFilterTypes().then((filterTypes: { length: number }) => { if (filterTypes.length !== 0) { this.filterTypes = filterTypes; } }); // needs to be defined here as it is called from typeahead - this.suggestMetrics = (query, callback) => { + this.suggestMetrics = (query: string, callback: any) => { this.datasource .metricFindQuery('metrics(' + query + ')') .then(this.getTextValues) .then(callback); }; - this.suggestTagKeys = (query, callback) => { + this.suggestTagKeys = (query: any, callback: any) => { this.datasource.suggestTagKeys(this.target.metric).then(callback); }; - this.suggestTagValues = (query, callback) => { + this.suggestTagValues = (query: string, callback: any) => { this.datasource .metricFindQuery('suggest_tagv(' + query + ')') .then(this.getTextValues) @@ -87,7 +88,7 @@ export class OpenTsQueryCtrl extends QueryCtrl { this.refresh(); } - getTextValues(metricFindResult) { + getTextValues(metricFindResult: any) { return _.map(metricFindResult, value => { return value.text; }); @@ -119,12 +120,12 @@ export class OpenTsQueryCtrl extends QueryCtrl { this.addTagMode = false; } - removeTag(key) { + removeTag(key: string | number) { delete this.target.tags[key]; this.targetBlur(); } - editTag(key, value) { + editTag(key: string | number, value: any) { this.removeTag(key); this.target.currentTagKey = key; this.target.currentTagValue = value; @@ -178,12 +179,12 @@ export class OpenTsQueryCtrl extends QueryCtrl { this.addFilterMode = false; } - removeFilter(index) { + removeFilter(index: number) { this.target.filters.splice(index, 1); this.targetBlur(); } - editFilter(fil, index) { + editFilter(fil: { tagk: any; filter: any; type: any; groupBy: any }, index: number) { this.removeFilter(index); this.target.currentFilterKey = fil.tagk; this.target.currentFilterValue = fil.filter; diff --git a/public/app/plugins/datasource/opentsdb/specs/datasource.test.ts b/public/app/plugins/datasource/opentsdb/specs/datasource.test.ts index a31f4f1fe3bae..5fda183d4eaa8 100644 --- a/public/app/plugins/datasource/opentsdb/specs/datasource.test.ts +++ b/public/app/plugins/datasource/opentsdb/specs/datasource.test.ts @@ -1,4 +1,5 @@ import OpenTsDatasource from '../datasource'; +// @ts-ignore import $q from 'q'; describe('opentsdb', () => { @@ -6,7 +7,7 @@ describe('opentsdb', () => { backendSrv: {}, ds: {}, templateSrv: { - replace: str => str, + replace: (str: string) => str, }, } as any; const instanceSettings = { url: '', jsonData: { tsdbVersion: 1 } }; @@ -16,11 +17,11 @@ describe('opentsdb', () => { }); describe('When performing metricFindQuery', () => { - let results; - let requestOptions; + let results: any; + let requestOptions: any; beforeEach(async () => { - ctx.backendSrv.datasourceRequest = await (options => { + ctx.backendSrv.datasourceRequest = await ((options: any) => { requestOptions = options; return Promise.resolve({ data: [{ target: 'prod1.count', datapoints: [[10, 1], [12, 1]] }], @@ -29,7 +30,7 @@ describe('opentsdb', () => { }); it('metrics() should generate api suggest query', () => { - ctx.ctrl.metricFindQuery('metrics(pew)').then(data => { + ctx.ctrl.metricFindQuery('metrics(pew)').then((data: any) => { results = data; }); expect(requestOptions.url).toBe('/api/suggest'); @@ -39,7 +40,7 @@ describe('opentsdb', () => { }); it('tag_names(cpu) should generate lookup query', () => { - ctx.ctrl.metricFindQuery('tag_names(cpu)').then(data => { + ctx.ctrl.metricFindQuery('tag_names(cpu)').then((data: any) => { results = data; }); expect(requestOptions.url).toBe('/api/search/lookup'); @@ -47,7 +48,7 @@ describe('opentsdb', () => { }); it('tag_values(cpu, test) should generate lookup query', () => { - ctx.ctrl.metricFindQuery('tag_values(cpu, hostname)').then(data => { + ctx.ctrl.metricFindQuery('tag_values(cpu, hostname)').then((data: any) => { results = data; }); expect(requestOptions.url).toBe('/api/search/lookup'); @@ -55,7 +56,7 @@ describe('opentsdb', () => { }); it('tag_values(cpu, test) should generate lookup query', () => { - ctx.ctrl.metricFindQuery('tag_values(cpu, hostname, env=$env)').then(data => { + ctx.ctrl.metricFindQuery('tag_values(cpu, hostname, env=$env)').then((data: any) => { results = data; }); expect(requestOptions.url).toBe('/api/search/lookup'); @@ -63,7 +64,7 @@ describe('opentsdb', () => { }); it('tag_values(cpu, test) should generate lookup query', () => { - ctx.ctrl.metricFindQuery('tag_values(cpu, hostname, env=$env, region=$region)').then(data => { + ctx.ctrl.metricFindQuery('tag_values(cpu, hostname, env=$env, region=$region)').then((data: any) => { results = data; }); expect(requestOptions.url).toBe('/api/search/lookup'); @@ -71,7 +72,7 @@ describe('opentsdb', () => { }); it('suggest_tagk() should generate api suggest query', () => { - ctx.ctrl.metricFindQuery('suggest_tagk(foo)').then(data => { + ctx.ctrl.metricFindQuery('suggest_tagk(foo)').then((data: any) => { results = data; }); expect(requestOptions.url).toBe('/api/suggest'); @@ -80,7 +81,7 @@ describe('opentsdb', () => { }); it('suggest_tagv() should generate api suggest query', () => { - ctx.ctrl.metricFindQuery('suggest_tagv(bar)').then(data => { + ctx.ctrl.metricFindQuery('suggest_tagv(bar)').then((data: any) => { results = data; }); expect(requestOptions.url).toBe('/api/suggest'); diff --git a/public/app/plugins/datasource/opentsdb/specs/query_ctrl.test.ts b/public/app/plugins/datasource/opentsdb/specs/query_ctrl.test.ts index eaf20059900df..e57447076f2c3 100644 --- a/public/app/plugins/datasource/opentsdb/specs/query_ctrl.test.ts +++ b/public/app/plugins/datasource/opentsdb/specs/query_ctrl.test.ts @@ -20,7 +20,7 @@ describe('OpenTsQueryCtrl', () => { OpenTsQueryCtrl.prototype = Object.assign(OpenTsQueryCtrl.prototype, ctx); beforeEach(() => { - ctx.ctrl = new OpenTsQueryCtrl({}, {}); + ctx.ctrl = new OpenTsQueryCtrl({}, {} as any); }); describe('init query_ctrl variables', () => { diff --git a/public/app/plugins/datasource/postgres/config_ctrl.ts b/public/app/plugins/datasource/postgres/config_ctrl.ts index 1a12deafa4603..f31286908a790 100644 --- a/public/app/plugins/datasource/postgres/config_ctrl.ts +++ b/public/app/plugins/datasource/postgres/config_ctrl.ts @@ -4,6 +4,7 @@ import { createResetHandler, PasswordFieldEnum, } from '../../../features/datasources/utils/passwordHandlers'; +import DatasourceSrv from 'app/features/plugins/datasource_srv'; export class PostgresConfigCtrl { static templateUrl = 'partials/config.html'; @@ -15,7 +16,7 @@ export class PostgresConfigCtrl { onPasswordChange: ReturnType; /** @ngInject */ - constructor($scope, datasourceSrv) { + constructor($scope: any, datasourceSrv: DatasourceSrv) { this.datasourceSrv = datasourceSrv; this.current.jsonData.sslmode = this.current.jsonData.sslmode || 'verify-full'; this.current.jsonData.postgresVersion = this.current.jsonData.postgresVersion || 903; @@ -30,13 +31,13 @@ export class PostgresConfigCtrl { return; } - this.datasourceSrv.loadDatasource(this.current.name).then(ds => { - return ds.getVersion().then(version => { + this.datasourceSrv.loadDatasource(this.current.name).then((ds: any) => { + return ds.getVersion().then((version: any) => { version = Number(version[0].text); // timescaledb is only available for 9.6+ if (version >= 906) { - ds.getTimescaleDBVersion().then(version => { + ds.getTimescaleDBVersion().then((version: any) => { if (version.length === 1) { this.current.jsonData.timescaledb = true; } diff --git a/public/app/plugins/datasource/postgres/datasource.ts b/public/app/plugins/datasource/postgres/datasource.ts index be27cdd37b646..76a6bd8da2cba 100644 --- a/public/app/plugins/datasource/postgres/datasource.ts +++ b/public/app/plugins/datasource/postgres/datasource.ts @@ -1,6 +1,10 @@ import _ from 'lodash'; import ResponseParser from './response_parser'; import PostgresQuery from 'app/plugins/datasource/postgres/postgres_query'; +import { IQService } from 'angular'; +import { BackendSrv } from 'app/core/services/backend_srv'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; export class PostgresDatasource { id: any; @@ -11,7 +15,13 @@ export class PostgresDatasource { interval: string; /** @ngInject */ - constructor(instanceSettings, private backendSrv, private $q, private templateSrv, private timeSrv) { + constructor( + instanceSettings: { name: any; id?: any; jsonData?: any }, + private backendSrv: BackendSrv, + private $q: IQService, + private templateSrv: TemplateSrv, + private timeSrv: TimeSrv + ) { this.name = instanceSettings.name; this.id = instanceSettings.id; this.jsonData = instanceSettings.jsonData; @@ -20,7 +30,7 @@ export class PostgresDatasource { this.interval = (instanceSettings.jsonData || {}).timeInterval || '1m'; } - interpolateVariable = (value, variable) => { + interpolateVariable = (value: string, variable: { multi: any; includeAll: any }) => { if (typeof value === 'string') { if (variable.multi || variable.includeAll) { return this.queryModel.quoteLiteral(value); @@ -39,7 +49,7 @@ export class PostgresDatasource { return quotedValues.join(','); }; - query(options) { + query(options: any) { const queries = _.filter(options.targets, target => { return target.hide !== true; }).map(target => { @@ -72,7 +82,7 @@ export class PostgresDatasource { .then(this.responseParser.processQueryResult); } - annotationQuery(options) { + annotationQuery(options: any) { if (!options.annotation.rawQuery) { return this.$q.reject({ message: 'Query missing in annotation definition', @@ -96,10 +106,10 @@ export class PostgresDatasource { queries: [query], }, }) - .then(data => this.responseParser.transformAnnotationResponse(options, data)); + .then((data: any) => this.responseParser.transformAnnotationResponse(options, data)); } - metricFindQuery(query, optionalOptions) { + metricFindQuery(query: string, optionalOptions: { variable?: any }) { let refId = 'tempvar'; if (optionalOptions && optionalOptions.variable && optionalOptions.variable.name) { refId = optionalOptions.variable.name; @@ -125,7 +135,7 @@ export class PostgresDatasource { method: 'POST', data: data, }) - .then(data => this.responseParser.parseMetricFindQueryResult(refId, data)); + .then((data: any) => this.responseParser.parseMetricFindQueryResult(refId, data)); } getVersion() { @@ -138,10 +148,10 @@ export class PostgresDatasource { testDatasource() { return this.metricFindQuery('SELECT 1', {}) - .then(res => { + .then((res: any) => { return { status: 'success', message: 'Database Connection OK' }; }) - .catch(err => { + .catch((err: any) => { console.log(err); if (err.data && err.data.message) { return { status: 'error', message: err.data.message }; diff --git a/public/app/plugins/datasource/postgres/meta_query.ts b/public/app/plugins/datasource/postgres/meta_query.ts index 07ea3e51d8758..e885333da071e 100644 --- a/public/app/plugins/datasource/postgres/meta_query.ts +++ b/public/app/plugins/datasource/postgres/meta_query.ts @@ -1,5 +1,7 @@ +import QueryModel from './postgres_query'; + export class PostgresMetaQuery { - constructor(private target, private queryModel) {} + constructor(private target: { table: string; timeColumn: string }, private queryModel: QueryModel) {} getOperators(datatype: string) { switch (datatype) { @@ -19,7 +21,7 @@ export class PostgresMetaQuery { } // quote identifier as literal to use in metadata queries - quoteIdentAsLiteral(value) { + quoteIdentAsLiteral(value: string) { return this.queryModel.quoteLiteral(this.queryModel.unquoteIdentifier(value)); } diff --git a/public/app/plugins/datasource/postgres/postgres_query.ts b/public/app/plugins/datasource/postgres/postgres_query.ts index 200a3ebd0bb01..dc724eb0bc176 100644 --- a/public/app/plugins/datasource/postgres/postgres_query.ts +++ b/public/app/plugins/datasource/postgres/postgres_query.ts @@ -1,4 +1,6 @@ import _ from 'lodash'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { ScopedVars } from '@grafana/ui'; export default class PostgresQuery { target: any; @@ -6,7 +8,7 @@ export default class PostgresQuery { scopedVars: any; /** @ngInject */ - constructor(target, templateSrv?, scopedVars?) { + constructor(target: any, templateSrv?: TemplateSrv, scopedVars?: ScopedVars) { this.target = target; this.templateSrv = templateSrv; this.scopedVars = scopedVars; @@ -35,7 +37,7 @@ export default class PostgresQuery { } // remove identifier quoting from identifier to use in metadata queries - unquoteIdentifier(value) { + unquoteIdentifier(value: string) { if (value[0] === '"' && value[value.length - 1] === '"') { return value.substring(1, value.length - 1).replace(/""/g, '"'); } else { @@ -43,15 +45,15 @@ export default class PostgresQuery { } } - quoteIdentifier(value) { + quoteIdentifier(value: any) { return '"' + String(value).replace(/"/g, '""') + '"'; } - quoteLiteral(value) { + quoteLiteral(value: any) { return "'" + String(value).replace(/'/g, "''") + "'"; } - escapeLiteral(value) { + escapeLiteral(value: any) { return String(value).replace(/'/g, "''"); } @@ -63,7 +65,7 @@ export default class PostgresQuery { return this.target.metricColumn !== 'none'; } - interpolateQueryStr(value, variable, defaultFormatFn) { + interpolateQueryStr(value: any, variable: { multi: any; includeAll: any }, defaultFormatFn: any) { // if no multi or include all do not regexEscape if (!variable.multi && !variable.includeAll) { return this.escapeLiteral(value); @@ -77,7 +79,7 @@ export default class PostgresQuery { return escapedValues.join(','); } - render(interpolate?) { + render(interpolate?: any) { const target = this.target; // new query with no table set yet @@ -146,7 +148,7 @@ export default class PostgresQuery { return query; } - buildValueColumn(column) { + buildValueColumn(column: any) { let query = ''; const columnName: any = _.find(column, (g: any) => g.type === 'column'); diff --git a/public/app/plugins/datasource/postgres/query_ctrl.ts b/public/app/plugins/datasource/postgres/query_ctrl.ts index 89050ce0ada3d..22982dd4fd8ec 100644 --- a/public/app/plugins/datasource/postgres/query_ctrl.ts +++ b/public/app/plugins/datasource/postgres/query_ctrl.ts @@ -5,6 +5,8 @@ import { QueryCtrl } from 'app/plugins/sdk'; import { SqlPart } from 'app/core/components/sql_part/sql_part'; import PostgresQuery from './postgres_query'; import sqlPart from './sql_part'; +import { auto, IQService } from 'angular'; +import { TemplateSrv } from 'app/features/templating/template_srv'; export interface QueryMeta { sql: string; @@ -40,7 +42,13 @@ export class PostgresQueryCtrl extends QueryCtrl { groupAdd: any; /** @ngInject */ - constructor($scope, $injector, private templateSrv, private $q, private uiSegmentSrv) { + constructor( + $scope: any, + $injector: auto.IInjectorService, + private templateSrv: TemplateSrv, + private $q: IQService, + private uiSegmentSrv: any + ) { super($scope, $injector); this.target = this.target; this.queryModel = new PostgresQuery(this.target, templateSrv, this.panel.scopedVars); @@ -57,7 +65,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.target.rawQuery = true; } else { this.target.rawSql = defaultQuery; - this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then(result => { + this.datasource.metricFindQuery(this.metaBuilder.findMetricTable()).then((result: any) => { if (result.length > 0) { this.target.table = result[0].text; let segment = this.uiSegmentSrv.newSegment(this.target.table); @@ -187,7 +195,7 @@ export class PostgresQueryCtrl extends QueryCtrl { } } - resetPlusButton(button) { + resetPlusButton(button: { html: any; value: any }) { const plusButton = this.uiSegmentSrv.newPlusButton(); button.html = plusButton.html; button.value = plusButton.value; @@ -211,7 +219,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.metricColumnSegment.value = segment.value; this.target.metricColumn = 'none'; - const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then(result => { + const task1 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('time')).then((result: any) => { // check if time column is still valid if (result.length > 0 && !_.find(result, (r: any) => r.text === this.target.timeColumn)) { const segment = this.uiSegmentSrv.newSegment(result[0].text); @@ -220,7 +228,7 @@ export class PostgresQueryCtrl extends QueryCtrl { } return this.timeColumnChanged(false); }); - const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then(result => { + const task2 = this.datasource.metricFindQuery(this.metaBuilder.buildColumnQuery('value')).then((result: any) => { if (result.length > 0) { this.target.select = [[{ type: 'column', params: [result[0].text] }]]; this.updateProjection(); @@ -241,31 +249,33 @@ export class PostgresQueryCtrl extends QueryCtrl { timeColumnChanged(refresh?: boolean) { this.target.timeColumn = this.timeColumnSegment.value; - return this.datasource.metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)).then(result => { - if (result.length === 1) { - if (this.target.timeColumnType !== result[0].text) { - this.target.timeColumnType = result[0].text; - } - let partModel; - if (this.queryModel.hasUnixEpochTimecolumn()) { - partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] }); - } else { - partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] }); - } + return this.datasource + .metricFindQuery(this.metaBuilder.buildDatatypeQuery(this.target.timeColumn)) + .then((result: any) => { + if (result.length === 1) { + if (this.target.timeColumnType !== result[0].text) { + this.target.timeColumnType = result[0].text; + } + let partModel; + if (this.queryModel.hasUnixEpochTimecolumn()) { + partModel = sqlPart.create({ type: 'macro', name: '$__unixEpochFilter', params: [] }); + } else { + partModel = sqlPart.create({ type: 'macro', name: '$__timeFilter', params: [] }); + } - if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { - // replace current macro - this.whereParts[0] = partModel; - } else { - this.whereParts.splice(0, 0, partModel); + if (this.whereParts.length >= 1 && this.whereParts[0].def.type === 'macro') { + // replace current macro + this.whereParts[0] = partModel; + } else { + this.whereParts.splice(0, 0, partModel); + } } - } - this.updatePersistedParts(); - if (refresh !== false) { - this.panelCtrl.refresh(); - } - }); + this.updatePersistedParts(); + if (refresh !== false) { + this.panelCtrl.refresh(); + } + }); } getMetricColumnSegments() { @@ -280,7 +290,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.panelCtrl.refresh(); } - onDataReceived(dataList) { + onDataReceived(dataList: any) { this.lastQueryMeta = null; this.lastQueryError = null; @@ -290,7 +300,7 @@ export class PostgresQueryCtrl extends QueryCtrl { } } - onDataError(err) { + onDataError(err: any) { if (err.data && err.data.results) { const queryRes = err.data.results[this.target.refId]; if (queryRes) { @@ -300,8 +310,8 @@ export class PostgresQueryCtrl extends QueryCtrl { } } - transformToSegments(config) { - return results => { + transformToSegments(config: { addNone?: any; addTemplateVars?: any; templateQuoter?: any }) { + return (results: any) => { const segments = _.map(results, segment => { return this.uiSegmentSrv.newSegment({ value: segment.text, @@ -335,15 +345,15 @@ export class PostgresQueryCtrl extends QueryCtrl { }; } - findAggregateIndex(selectParts) { + findAggregateIndex(selectParts: any) { return _.findIndex(selectParts, (p: any) => p.def.type === 'aggregate' || p.def.type === 'percentile'); } - findWindowIndex(selectParts) { + findWindowIndex(selectParts: any) { return _.findIndex(selectParts, (p: any) => p.def.type === 'window' || p.def.type === 'moving_window'); } - addSelectPart(selectParts, item, subItem) { + addSelectPart(selectParts: any[], item: { value: any }, subItem: { type: any; value: any }) { let partType = item.value; if (subItem && subItem.type) { partType = subItem.type; @@ -415,7 +425,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.panelCtrl.refresh(); } - removeSelectPart(selectParts, part) { + removeSelectPart(selectParts: any, part: { def: { type: string } }) { if (part.def.type === 'column') { // remove all parts of column unless its last column if (this.selectParts.length > 1) { @@ -430,7 +440,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.updatePersistedParts(); } - handleSelectPartEvent(selectParts, part, evt) { + handleSelectPartEvent(selectParts: any, part: { def: any }, evt: { name: any }) { switch (evt.name) { case 'get-param-options': { switch (part.def.type) { @@ -462,7 +472,7 @@ export class PostgresQueryCtrl extends QueryCtrl { } } - handleGroupPartEvent(part, index, evt) { + handleGroupPartEvent(part: any, index: any, evt: { name: any }) { switch (evt.name) { case 'get-param-options': { return this.datasource @@ -486,7 +496,7 @@ export class PostgresQueryCtrl extends QueryCtrl { } } - addGroup(partType, value) { + addGroup(partType: string, value: string) { let params = [value]; if (partType === 'time') { params = ['$__interval', 'none']; @@ -515,7 +525,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.updatePersistedParts(); } - removeGroup(part, index) { + removeGroup(part: { def: { type: string } }, index: number) { if (part.def.type === 'time') { // remove aggregations this.selectParts = _.map(this.selectParts, (s: any) => { @@ -532,7 +542,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.updatePersistedParts(); } - handleWherePartEvent(whereParts, part, evt, index) { + handleWherePartEvent(whereParts: any, part: any, evt: any, index: any) { switch (evt.name) { case 'get-param-options': { switch (evt.param.name) { @@ -598,7 +608,7 @@ export class PostgresQueryCtrl extends QueryCtrl { return this.$q.when(options); } - addWhereAction(part, index) { + addWhereAction(part: any, index: any) { switch (this.whereAdd.type) { case 'macro': { const partModel = sqlPart.create({ type: 'macro', name: this.whereAdd.value, params: [] }); @@ -623,7 +633,7 @@ export class PostgresQueryCtrl extends QueryCtrl { getGroupOptions() { return this.datasource .metricFindQuery(this.metaBuilder.buildColumnQuery('group')) - .then(tags => { + .then((tags: any) => { const options = []; if (!this.queryModel.hasTimeGroup()) { options.push(this.uiSegmentSrv.newSegment({ type: 'time', value: 'time($__interval,none)' })); @@ -647,7 +657,7 @@ export class PostgresQueryCtrl extends QueryCtrl { this.panelCtrl.refresh(); } - handleQueryError(err) { + handleQueryError(err: any): any[] { this.error = err.message || 'Failed to issue metric query'; return []; } diff --git a/public/app/plugins/datasource/postgres/response_parser.ts b/public/app/plugins/datasource/postgres/response_parser.ts index 3ad0a979979fc..35fec8be5dc52 100644 --- a/public/app/plugins/datasource/postgres/response_parser.ts +++ b/public/app/plugins/datasource/postgres/response_parser.ts @@ -1,10 +1,11 @@ import _ from 'lodash'; +import { IQService } from 'angular'; export default class ResponseParser { - constructor(private $q) {} + constructor(private $q: IQService) {} - processQueryResult(res) { - const data = []; + processQueryResult(res: any) { + const data: any[] = []; if (!res.data.results) { return { data: data }; @@ -37,7 +38,7 @@ export default class ResponseParser { return { data: data }; } - parseMetricFindQueryResult(refId, results) { + parseMetricFindQueryResult(refId: string, results: any) { if (!results || results.data.length === 0 || results.data.results[refId].meta.rowCount === 0) { return []; } @@ -54,7 +55,7 @@ export default class ResponseParser { return this.transformToSimpleList(rows); } - transformToKeyValueList(rows, textColIndex, valueColIndex) { + transformToKeyValueList(rows: any, textColIndex: number, valueColIndex: number) { const res = []; for (let i = 0; i < rows.length; i++) { @@ -69,7 +70,7 @@ export default class ResponseParser { return res; } - transformToSimpleList(rows) { + transformToSimpleList(rows: any[][]) { const res = []; for (let i = 0; i < rows.length; i++) { @@ -86,7 +87,7 @@ export default class ResponseParser { }); } - findColIndex(columns, colName) { + findColIndex(columns: any[], colName: string) { for (let i = 0; i < columns.length; i++) { if (columns[i].text === colName) { return i; @@ -96,7 +97,7 @@ export default class ResponseParser { return -1; } - containsKey(res, key) { + containsKey(res: any, key: any) { for (let i = 0; i < res.length; i++) { if (res[i].text === key) { return true; @@ -105,7 +106,7 @@ export default class ResponseParser { return false; } - transformAnnotationResponse(options, data) { + transformAnnotationResponse(options: any, data: any) { const table = data.data.results[options.annotation.name].tables[0]; let timeColumnIndex = -1; diff --git a/public/app/plugins/datasource/postgres/specs/datasource.test.ts b/public/app/plugins/datasource/postgres/specs/datasource.test.ts index 7c55b8768233d..f762f39d6089b 100644 --- a/public/app/plugins/datasource/postgres/specs/datasource.test.ts +++ b/public/app/plugins/datasource/postgres/specs/datasource.test.ts @@ -1,12 +1,14 @@ import { PostgresDatasource } from '../datasource'; import { CustomVariable } from 'app/features/templating/custom_variable'; import { toUtc, dateTime } from '@grafana/ui/src/utils/moment_wrapper'; +import { BackendSrv } from 'app/core/services/backend_srv'; +import { IQService } from 'angular'; describe('PostgreSQLDatasource', () => { const instanceSettings = { name: 'postgresql' }; const backendSrv = {}; - const templateSrv = { + const templateSrv: any = { replace: jest.fn(text => text), }; const raw = { @@ -25,11 +27,17 @@ describe('PostgreSQLDatasource', () => { } as any; beforeEach(() => { - ctx.ds = new PostgresDatasource(instanceSettings, backendSrv, {}, templateSrv, ctx.timeSrvMock); + ctx.ds = new PostgresDatasource( + instanceSettings, + backendSrv as BackendSrv, + {} as IQService, + templateSrv, + ctx.timeSrvMock + ); }); describe('When performing annotationQuery', () => { - let results; + let results: any; const annotationName = 'MyAnno'; @@ -66,7 +74,7 @@ describe('PostgreSQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.annotationQuery(options).then(data => { + ctx.ds.annotationQuery(options).then((data: any) => { results = data; }); }); @@ -86,7 +94,7 @@ describe('PostgreSQLDatasource', () => { }); describe('When performing metricFindQuery', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -109,7 +117,7 @@ describe('PostgreSQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.metricFindQuery(query).then(data => { + ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); @@ -122,7 +130,7 @@ describe('PostgreSQLDatasource', () => { }); describe('When performing metricFindQuery with key, value columns', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -145,7 +153,7 @@ describe('PostgreSQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.metricFindQuery(query).then(data => { + ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); }); @@ -160,7 +168,7 @@ describe('PostgreSQLDatasource', () => { }); describe('When performing metricFindQuery with key, value columns and with duplicate keys', () => { - let results; + let results: any; const query = 'select * from atable'; const response = { results: { @@ -183,7 +191,7 @@ describe('PostgreSQLDatasource', () => { ctx.backendSrv.datasourceRequest = jest.fn(options => { return Promise.resolve({ data: response, status: 200 }); }); - ctx.ds.metricFindQuery(query).then(data => { + ctx.ds.metricFindQuery(query).then((data: any) => { results = data; }); //ctx.$rootScope.$apply(); diff --git a/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts index 42b143c01c854..38019c9038e67 100644 --- a/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts +++ b/public/app/plugins/datasource/postgres/specs/postgres_query.test.ts @@ -1,7 +1,9 @@ import PostgresQuery from '../postgres_query'; +import { TemplateSrv } from 'app/features/templating/template_srv'; describe('PostgresQuery', () => { - const templateSrv = { + // @ts-ignore + const templateSrv: TemplateSrv = { replace: jest.fn(text => text), }; @@ -142,7 +144,7 @@ describe('PostgresQuery', () => { }); describe('When generating complete statement', () => { - const target = { + const target: any = { timeColumn: 't', table: 'table', select: [[{ type: 'column', params: ['value'] }]], diff --git a/public/app/plugins/datasource/postgres/sql_part.ts b/public/app/plugins/datasource/postgres/sql_part.ts index f8caaf0e39eab..34ac81bacd051 100644 --- a/public/app/plugins/datasource/postgres/sql_part.ts +++ b/public/app/plugins/datasource/postgres/sql_part.ts @@ -1,8 +1,8 @@ import { SqlPartDef, SqlPart } from 'app/core/components/sql_part/sql_part'; -const index = []; +const index: any[] = []; -function createPart(part): any { +function createPart(part: any): any { const def = index[part.type]; if (!def) { return null; diff --git a/public/app/plugins/datasource/prometheus/components/PromLink.tsx b/public/app/plugins/datasource/prometheus/components/PromLink.tsx index 9ad46f171cde2..9a3a91bd46659 100644 --- a/public/app/plugins/datasource/prometheus/components/PromLink.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromLink.tsx @@ -27,7 +27,7 @@ export default class PromLink extends Component { async getExternalLink(): Promise { const { query, panelData } = this.props; - const target = panelData.request.targets.length > 0 ? panelData.request.targets[0] : { datasource: null }; + const target = panelData.request.targets.length > 0 ? panelData.request.targets[0] : ({ datasource: null } as any); const datasourceName = target.datasource; const datasource: PrometheusDatasource = datasourceName ? (((await getDatasourceSrv().get(datasourceName)) as any) as PrometheusDatasource) diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx index fc5d71ff85853..7e45dc6f53c93 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx @@ -54,7 +54,7 @@ export class PromQueryEditor extends PureComponent { }; } - onFieldChange = (query: PromQuery, override?) => { + onFieldChange = (query: PromQuery, override?: any) => { this.query.expr = query.expr; }; @@ -98,18 +98,16 @@ export class PromQueryEditor extends PureComponent { return (
      -
      - -
      +
      diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx index 7d7878827b64d..9a7c839e303b6 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx +++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx @@ -15,7 +15,7 @@ import BracesPlugin from 'app/features/explore/slate-plugins/braces'; import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField'; import { PromQuery, PromContext, PromOptions } from '../types'; import { CancelablePromise, makePromiseCancelable } from 'app/core/utils/CancelablePromise'; -import { ExploreQueryFieldProps, DataSourceStatus, QueryHint, isSeriesData, toLegacyResponseData } from '@grafana/ui'; +import { ExploreQueryFieldProps, DataSourceStatus, QueryHint, isDataFrame, toLegacyResponseData } from '@grafana/ui'; import { PrometheusDatasource } from '../datasource'; const HISTOGRAM_GROUP = '__histograms__'; @@ -181,7 +181,7 @@ class PromQueryField extends React.PureComponent -
      - -
      + } + />
      diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 7f62b7e689703..de85be08ebb3f 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -367,7 +367,7 @@ export class PrometheusDatasource extends DataSourceApi // Align query interval with step to allow query caching and to ensure // that about-same-time query results look the same. - const adjusted = alignRange(start, end, query.step); + const adjusted = alignRange(start, end, query.step, this.timeSrv.timeRange().to.utcOffset() * 60); query.start = adjusted.start; query.end = adjusted.end; this._addTracingHeaders(query, options); @@ -694,10 +694,16 @@ export class PrometheusDatasource extends DataSourceApi * @param start Timestamp marking the beginning of the range. * @param end Timestamp marking the end of the range. * @param step Interval to align start and end with. + * @param utcOffsetSec Number of seconds current timezone is offset from UTC */ -export function alignRange(start: number, end: number, step: number): { end: number; start: number } { - const alignedEnd = Math.floor(end / step) * step; - const alignedStart = Math.floor(start / step) * step; +export function alignRange( + start: number, + end: number, + step: number, + utcOffsetSec: number +): { end: number; start: number } { + const alignedEnd = Math.floor((end + utcOffsetSec) / step) * step - utcOffsetSec; + const alignedStart = Math.floor((start + utcOffsetSec) / step) * step - utcOffsetSec; return { end: alignedEnd, start: alignedStart, diff --git a/public/app/plugins/datasource/prometheus/specs/datasource.test.ts b/public/app/plugins/datasource/prometheus/specs/datasource.test.ts index a70cdf9080383..433b6520bdd1b 100644 --- a/public/app/plugins/datasource/prometheus/specs/datasource.test.ts +++ b/public/app/plugins/datasource/prometheus/specs/datasource.test.ts @@ -219,25 +219,37 @@ describe('PrometheusDatasource', () => { describe('alignRange', () => { it('does not modify already aligned intervals with perfect step', () => { - const range = alignRange(0, 3, 3); + const range = alignRange(0, 3, 3, 0); expect(range.start).toEqual(0); expect(range.end).toEqual(3); }); it('does modify end-aligned intervals to reflect number of steps possible', () => { - const range = alignRange(1, 6, 3); + const range = alignRange(1, 6, 3, 0); expect(range.start).toEqual(0); expect(range.end).toEqual(6); }); it('does align intervals that are a multiple of steps', () => { - const range = alignRange(1, 4, 3); + const range = alignRange(1, 4, 3, 0); expect(range.start).toEqual(0); expect(range.end).toEqual(3); }); it('does align intervals that are not a multiple of steps', () => { - const range = alignRange(1, 5, 3); + const range = alignRange(1, 5, 3, 0); expect(range.start).toEqual(0); expect(range.end).toEqual(3); }); + it('does align intervals with local midnight -UTC offset', () => { + //week range, location 4+ hours UTC offset, 24h step time + const range = alignRange(4 * 60 * 60, (7 * 24 + 4) * 60 * 60, 24 * 60 * 60, -4 * 60 * 60); //04:00 UTC, 7 day range + expect(range.start).toEqual(4 * 60 * 60); + expect(range.end).toEqual((7 * 24 + 4) * 60 * 60); + }); + it('does align intervals with local midnight +UTC offset', () => { + //week range, location 4- hours UTC offset, 24h step time + const range = alignRange(20 * 60 * 60, (8 * 24 - 4) * 60 * 60, 24 * 60 * 60, 4 * 60 * 60); //20:00 UTC on day1, 7 days later is 20:00 on day8 + expect(range.start).toEqual(20 * 60 * 60); + expect(range.end).toEqual((8 * 24 - 4) * 60 * 60); + }); }); describe('extractRuleMappingFromGroups()', () => { @@ -419,7 +431,10 @@ const templateSrv = ({ const timeSrv = ({ timeRange: () => { - return { to: { diff: () => 2000 }, from: '' }; + return { + from: dateTime(1531468681), + to: dateTime(1531468681 + 2000), + }; }, } as unknown) as TimeSrv; diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index 106940c277710..3d37a9520682b 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -10,7 +10,7 @@ import { } from './functions'; export default class StackdriverMetricFindQuery { - constructor(private datasource) {} + constructor(private datasource: any) {} async execute(query: any) { try { @@ -50,19 +50,21 @@ export default class StackdriverMetricFindQuery { })); } - async handleMetricTypesQuery({ selectedService }) { + async handleMetricTypesQuery({ selectedService }: any) { if (!selectedService) { return []; } const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); - return getMetricTypesByService(metricDescriptors, this.datasource.templateSrv.replace(selectedService)).map(s => ({ - text: s.displayName, - value: s.type, - expandable: true, - })); + return getMetricTypesByService(metricDescriptors, this.datasource.templateSrv.replace(selectedService)).map( + (s: any) => ({ + text: s.displayName, + value: s.type, + expandable: true, + }) + ); } - async handleLabelKeysQuery({ selectedMetricType }) { + async handleLabelKeysQuery({ selectedMetricType }: any) { if (!selectedMetricType) { return []; } @@ -70,7 +72,7 @@ export default class StackdriverMetricFindQuery { return labelKeys.map(this.toFindQueryResult); } - async handleLabelValuesQuery({ selectedMetricType, labelKey }) { + async handleLabelValuesQuery({ selectedMetricType, labelKey }: any) { if (!selectedMetricType) { return []; } @@ -88,7 +90,7 @@ export default class StackdriverMetricFindQuery { return values.map(this.toFindQueryResult); } - async handleResourceTypeQuery({ selectedMetricType }) { + async handleResourceTypeQuery({ selectedMetricType }: any) { if (!selectedMetricType) { return []; } @@ -97,24 +99,24 @@ export default class StackdriverMetricFindQuery { return response.meta.resourceTypes ? response.meta.resourceTypes.map(this.toFindQueryResult) : []; } - async handleAlignersQuery({ selectedMetricType }) { + async handleAlignersQuery({ selectedMetricType }: any) { if (!selectedMetricType) { return []; } const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); const { valueType, metricKind } = metricDescriptors.find( - m => m.type === this.datasource.templateSrv.replace(selectedMetricType) + (m: any) => m.type === this.datasource.templateSrv.replace(selectedMetricType) ); return getAlignmentOptionsByMetric(valueType, metricKind).map(this.toFindQueryResult); } - async handleAggregationQuery({ selectedMetricType }) { + async handleAggregationQuery({ selectedMetricType }: any) { if (!selectedMetricType) { return []; } const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); const { valueType, metricKind } = metricDescriptors.find( - m => m.type === this.datasource.templateSrv.replace(selectedMetricType) + (m: any) => m.type === this.datasource.templateSrv.replace(selectedMetricType) ); return getAggregationOptionsByMetric(valueType, metricKind).map(this.toFindQueryResult); } @@ -123,7 +125,7 @@ export default class StackdriverMetricFindQuery { return alignmentPeriods.map(this.toFindQueryResult); } - toFindQueryResult(x) { + toFindQueryResult(x: any) { return isString(x) ? { text: x, expandable: true } : { ...x, expandable: true }; } } diff --git a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts index c4d6c137f3535..1b37dfefe98c7 100644 --- a/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts @@ -6,13 +6,13 @@ export class StackdriverAnnotationsQueryCtrl { templateSrv: TemplateSrv; /** @ngInject */ - constructor(templateSrv) { + constructor(templateSrv: TemplateSrv) { this.templateSrv = templateSrv; this.annotation.target = this.annotation.target || {}; this.onQueryChange = this.onQueryChange.bind(this); } - onQueryChange(target) { + onQueryChange(target: any) { Object.assign(this.annotation.target, target); } } diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx index 5b14fa73a723c..4c81e54ab4ae9 100644 --- a/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.test.tsx @@ -7,6 +7,7 @@ import { TemplateSrvStub } from 'test/specs/helpers'; const props: Props = { onChange: () => {}, + // @ts-ignore templateSrv: new TemplateSrvStub(), metricDescriptor: { valueType: '', @@ -18,7 +19,7 @@ const props: Props = { }; describe('Aggregations', () => { - let wrapper; + let wrapper: any; it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); @@ -33,7 +34,7 @@ describe('Aggregations', () => { it('', () => { const options = wrapper.state().aggOptions[0].options; expect(options.length).toEqual(11); - expect(options.map(o => o.value)).toEqual( + expect(options.map((o: any) => o.value)).toEqual( expect.not.arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE']) ); }); @@ -51,7 +52,7 @@ describe('Aggregations', () => { const options = wrapper.state().aggOptions[0].options; expect(options.length).toEqual(10); - expect(options.map(o => o.value)).toEqual(expect.arrayContaining(['REDUCE_NONE'])); + expect(options.map((o: any) => o.value)).toEqual(expect.arrayContaining(['REDUCE_NONE'])); }); }); }); diff --git a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx index 9b8dca0115133..0769ed20b0446 100644 --- a/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Aggregations.tsx @@ -4,9 +4,10 @@ import _ from 'lodash'; import { MetricSelect } from 'app/core/components/Select/MetricSelect'; import { getAggregationOptionsByMetric } from '../functions'; import { TemplateSrv } from 'app/features/templating/template_srv'; +import { ValueTypes, MetricKind } from '../constants'; export interface Props { - onChange: (metricDescriptor) => void; + onChange: (metricDescriptor: any) => void; templateSrv: TemplateSrv; metricDescriptor: { valueType: string; @@ -37,13 +38,16 @@ export class Aggregations extends React.Component { } setAggOptions({ metricDescriptor }: Props) { - let aggOptions = []; + let aggOptions: any[] = []; if (metricDescriptor) { aggOptions = [ { label: 'Aggregations', expanded: true, - options: getAggregationOptionsByMetric(metricDescriptor.valueType, metricDescriptor.metricKind).map(a => ({ + options: getAggregationOptionsByMetric( + metricDescriptor.valueType as ValueTypes, + metricDescriptor.metricKind as MetricKind + ).map(a => ({ ...a, label: a.text, })), diff --git a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx index 4acc2ecf1a7e3..914e7a7e90f78 100644 --- a/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx +++ b/public/app/plugins/datasource/stackdriver/components/AliasBy.tsx @@ -3,7 +3,7 @@ import { debounce } from 'lodash'; import { Input } from '@grafana/ui'; export interface Props { - onChange: (alignmentPeriod) => void; + onChange: (alignmentPeriod: any) => void; value: string; } @@ -12,9 +12,9 @@ export interface State { } export class AliasBy extends Component { - propagateOnChange: (value) => void; + propagateOnChange: (value: any) => void; - constructor(props) { + constructor(props: Props) { super(props); this.propagateOnChange = debounce(this.props.onChange, 500); this.state = { value: '' }; @@ -30,7 +30,7 @@ export class AliasBy extends Component { } } - onChange = e => { + onChange = (e: any) => { this.setState({ value: e.target.value }); this.propagateOnChange(e.target.value); }; diff --git a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx index a86f37073f319..cbfda1165813b 100644 --- a/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx +++ b/public/app/plugins/datasource/stackdriver/components/AlignmentPeriods.tsx @@ -7,7 +7,7 @@ import { alignmentPeriods, alignOptions } from '../constants'; import { TemplateSrv } from 'app/features/templating/template_srv'; export interface Props { - onChange: (alignmentPeriod) => void; + onChange: (alignmentPeriod: any) => void; templateSrv: TemplateSrv; alignmentPeriod: string; perSeriesAligner: string; diff --git a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx index 281a77b801195..bd5aabce46fda 100644 --- a/public/app/plugins/datasource/stackdriver/components/Alignments.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Alignments.tsx @@ -6,7 +6,7 @@ import { TemplateSrv } from 'app/features/templating/template_srv'; import { SelectOptionItem } from '@grafana/ui'; export interface Props { - onChange: (perSeriesAligner) => void; + onChange: (perSeriesAligner: any) => void; templateSrv: TemplateSrv; alignOptions: Array>; perSeriesAligner: string; diff --git a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx index a00aa44559c1a..3142d1a991397 100644 --- a/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx +++ b/public/app/plugins/datasource/stackdriver/components/AnnotationQueryEditor.tsx @@ -6,7 +6,7 @@ import { TemplateSrv } from 'app/features/templating/template_srv'; import StackdriverDatasource from '../datasource'; import { Metrics } from './Metrics'; import { Filter } from './Filter'; -import { AnnotationTarget } from '../types'; +import { AnnotationTarget, MetricDescriptor } from '../types'; import { AnnotationsHelp } from './AnnotationsHelp'; export interface Props { @@ -40,7 +40,7 @@ export class AnnotationQueryEditor extends React.Component { }); } - onMetricTypeChange = ({ valueType, metricKind, type, unit }) => { + onMetricTypeChange = ({ valueType, metricKind, type, unit }: MetricDescriptor) => { const { onQueryChange } = this.props; this.setState( { @@ -55,7 +55,7 @@ export class AnnotationQueryEditor extends React.Component { ); }; - onChange(prop, value) { + onChange(prop: string, value: string | string[]) { this.setState({ [prop]: value }, () => { this.props.onQueryChange(this.state); }); diff --git a/public/app/plugins/datasource/stackdriver/components/Filter.tsx b/public/app/plugins/datasource/stackdriver/components/Filter.tsx index 08134789d3da3..73d75b0646208 100644 --- a/public/app/plugins/datasource/stackdriver/components/Filter.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Filter.tsx @@ -25,7 +25,7 @@ interface State { loading: Promise; } -const labelData = { +const labelData: any = { metricLabels: {}, resourceLabels: {}, resourceTypes: [], @@ -43,15 +43,15 @@ export class Filter extends React.Component { const { groupBys, filters, hideGroupBys } = this.props; const loader = getAngularLoader(); - const filtersChanged = filters => { + const filtersChanged = (filters: string[]) => { this.props.filtersChanged(filters); }; - const groupBysChanged = groupBys => { + const groupBysChanged = (groupBys: string[]) => { this.props.groupBysChanged(groupBys); }; - const scopeProps = { + const scopeProps: any = { loading: null, labelData, groupBys, @@ -91,7 +91,7 @@ export class Filter extends React.Component { } } - async loadLabels(scope) { + async loadLabels(scope: any) { return new Promise(async resolve => { try { if (!this.props.metricType) { diff --git a/public/app/plugins/datasource/stackdriver/components/Help.tsx b/public/app/plugins/datasource/stackdriver/components/Help.tsx index 7c11d3e7277d8..7521bcdbbf061 100644 --- a/public/app/plugins/datasource/stackdriver/components/Help.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Help.tsx @@ -1,11 +1,13 @@ import React from 'react'; import { Project } from './Project'; import StackdriverDatasource from '../datasource'; +import { MetricDescriptor } from '../types'; export interface Props { datasource: StackdriverDatasource; rawQuery: string; lastQueryError: string; + metricDescriptor?: MetricDescriptor; } interface State { @@ -27,7 +29,7 @@ export class Help extends React.Component { this.setState({ displaRawQuery: !this.state.displaRawQuery }); }; - shouldComponentUpdate(nextProps) { + shouldComponentUpdate(nextProps: Props) { return nextProps.metricDescriptor !== null; } diff --git a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx index a09b610837012..269b50d60ff9d 100644 --- a/public/app/plugins/datasource/stackdriver/components/Metrics.tsx +++ b/public/app/plugins/datasource/stackdriver/components/Metrics.tsx @@ -37,7 +37,7 @@ export class Metrics extends React.Component { defaultProject: '', }; - constructor(props) { + constructor(props: Props) { super(props); } @@ -83,7 +83,7 @@ export class Metrics extends React.Component { this.setState({ metricDescriptors, services, metrics, service: service, metricDescriptor }); } - getSelectedMetricDescriptor(metricType) { + getSelectedMetricDescriptor(metricType: string) { return this.state.metricDescriptors.find(md => md.type === this.props.templateSrv.replace(metricType)); } @@ -103,7 +103,7 @@ export class Metrics extends React.Component { return metricsByService; } - onServiceChange = service => { + onServiceChange = (service: any) => { const { metricDescriptors } = this.state; const { templateSrv, metricType } = this.props; @@ -123,7 +123,7 @@ export class Metrics extends React.Component { } }; - onMetricTypeChange = value => { + onMetricTypeChange = (value: any) => { const metricDescriptor = this.getSelectedMetricDescriptor(value); this.setState({ metricDescriptor }); this.props.onChange({ ...metricDescriptor, type: value }); diff --git a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx index a8e03956cdd09..7e566dfdb1035 100644 --- a/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx +++ b/public/app/plugins/datasource/stackdriver/components/QueryEditor.tsx @@ -13,7 +13,7 @@ import { Help } from './Help'; import { StackdriverQuery, MetricDescriptor } from '../types'; import { getAlignmentPickerData } from '../functions'; import StackdriverDatasource from '../datasource'; -import { SelectOptionItem } from '@grafana/ui'; +import { SelectOptionItem, TimeSeries } from '@grafana/ui'; export interface Props { onQueryChange: (target: StackdriverQuery) => void; @@ -71,8 +71,8 @@ export class QueryEditor extends React.Component { this.props.events.off('data-error', this.onDataError); } - onDataReceived(dataList) { - const series = dataList.find(item => item.refId === this.props.target.refId); + onDataReceived(dataList: TimeSeries[]) { + const series = dataList.find((item: any) => item.refId === this.props.target.refId); if (series) { this.setState({ lastQuery: decodeURIComponent(series.meta.rawQuery), @@ -82,7 +82,7 @@ export class QueryEditor extends React.Component { } } - onDataError(err) { + onDataError(err: any) { let lastQuery; let lastQueryError; if (err.data && err.data.error) { @@ -123,7 +123,7 @@ export class QueryEditor extends React.Component { ); }; - onPropertyChange(prop, value) { + onPropertyChange(prop: string, value: string[]) { this.setState({ [prop]: value }, () => { this.props.onQueryChange(this.state); this.props.onExecuteQuery(); diff --git a/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx b/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx index 2a17fcdaf3e12..8abba1e18f1fc 100644 --- a/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx +++ b/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; interface Props { - onValueChange: (e) => void; + onValueChange: (e: any) => void; options: any[]; value: string; label: string; diff --git a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.test.tsx index 0f31d25ee4e88..3861400765112 100644 --- a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.test.tsx +++ b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.test.tsx @@ -1,21 +1,22 @@ import React from 'react'; +// @ts-ignore import renderer from 'react-test-renderer'; import { StackdriverVariableQueryEditor } from './VariableQueryEditor'; import { VariableQueryProps } from 'app/types/plugins'; import { MetricFindQueryTypes } from '../types'; jest.mock('../functions', () => ({ - getMetricTypes: () => ({ metricTypes: [], selectedMetricType: '' }), - extractServicesFromMetricDescriptors: () => [], + getMetricTypes: (): any => ({ metricTypes: [], selectedMetricType: '' }), + extractServicesFromMetricDescriptors: (): any[] => [], })); const props: VariableQueryProps = { onChange: (query, definition) => {}, query: {}, datasource: { - getMetricTypes: async p => [], + getMetricTypes: async (p: any): Promise => [], }, - templateSrv: { replace: s => s, variables: [] }, + templateSrv: { replace: (s: string) => s, variables: [] }, }; describe('VariableQueryEditor', () => { diff --git a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx index cd8a2185df992..5e62703aa55cd 100644 --- a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx +++ b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx @@ -63,7 +63,7 @@ export class StackdriverVariableQueryEditor extends PureComponent ({ name: `$${v.name}`, value: `$${v.name}` })); + insertTemplateVariables(options: any) { + const templateVariables = this.props.templateSrv.variables.map((v: any) => ({ + name: `$${v.name}`, + value: `$${v.name}`, + })); return [...templateVariables, ...options]; } - renderQueryTypeSwitch(queryType) { + renderQueryTypeSwitch(queryType: string) { switch (queryType) { case MetricFindQueryTypes.MetricTypes: return ( diff --git a/public/app/plugins/datasource/stackdriver/config_ctrl.ts b/public/app/plugins/datasource/stackdriver/config_ctrl.ts index e74659536c8de..4fa15bb6983eb 100644 --- a/public/app/plugins/datasource/stackdriver/config_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/config_ctrl.ts @@ -1,3 +1,12 @@ +import DatasourceSrv from 'app/features/plugins/datasource_srv'; + +export interface JWT { + private_key: any; + token_uri: any; + client_email: any; + project_id: any; +} + export class StackdriverConfigCtrl { static templateUrl = 'public/app/plugins/datasource/stackdriver/partials/config.html'; datasourceSrv: any; @@ -9,7 +18,7 @@ export class StackdriverConfigCtrl { defaultAuthenticationType: string; /** @ngInject */ - constructor(datasourceSrv) { + constructor(datasourceSrv: DatasourceSrv) { this.defaultAuthenticationType = 'jwt'; this.datasourceSrv = datasourceSrv; this.current.jsonData = this.current.jsonData || {}; @@ -24,14 +33,14 @@ export class StackdriverConfigCtrl { ]; } - save(jwt) { + save(jwt: JWT) { this.current.secureJsonData.privateKey = jwt.private_key; this.current.jsonData.tokenUri = jwt.token_uri; this.current.jsonData.clientEmail = jwt.client_email; this.current.jsonData.defaultProject = jwt.project_id; } - validateJwt(jwt) { + validateJwt(jwt: JWT) { this.resetValidationMessages(); if (!jwt.private_key || jwt.private_key.length === 0) { this.validationErrors.push('Private key field missing in JWT file.'); @@ -57,14 +66,14 @@ export class StackdriverConfigCtrl { return false; } - onUpload(json) { + onUpload(json: JWT) { this.jsonText = ''; if (this.validateJwt(json)) { this.save(json); } } - onPasteJwt(e) { + onPasteJwt(e: any) { try { const json = JSON.parse(e.originalEvent.clipboardData.getData('text/plain') || this.jsonText); if (this.validateJwt(json)) { diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts index b2ca64668ccf4..8f2ba3203a341 100644 --- a/public/app/plugins/datasource/stackdriver/datasource.ts +++ b/public/app/plugins/datasource/stackdriver/datasource.ts @@ -31,12 +31,12 @@ export default class StackdriverDatasource extends DataSourceApi { + .filter((target: any) => { return !target.hide && target.metricType; }) - .map(t => { + .map((t: any) => { return { refId: t.refId, intervalMs: options.intervalMs, @@ -92,8 +92,8 @@ export default class StackdriverDatasource extends DataSourceApi { const interpolated = this.templateSrv.replace(gb, scopedVars || {}, 'csv').split(','); if (Array.isArray(interpolated)) { @@ -109,6 +109,7 @@ export default class StackdriverDatasource extends DataSourceApi 0 && targets.every(t => t.unit === targets[0].unit)) { if (stackdriverUnitMappings.hasOwnProperty(targets[0].unit)) { + // @ts-ignore unit = stackdriverUnitMappings[targets[0].unit]; } } @@ -116,7 +117,7 @@ export default class StackdriverDatasource extends DataSourceApi) { - const result = []; + const result: any[] = []; const data = await this.getTimeSeries(options); if (data.results) { Object['values'](data.results).forEach((queryRes: any) => { @@ -143,7 +144,7 @@ export default class StackdriverDatasource extends DataSourceApi { + filters: (annotation.target.filters || []).map((f: any) => { return this.templateSrv.replace(f, options.scopedVars || {}); }), type: 'annotationQuery', @@ -173,20 +174,20 @@ export default class StackdriverDatasource extends DataSourceApi { + const results = data.results['annotationQuery'].tables[0].rows.map((v: any) => { return { annotation: annotation, time: Date.parse(v[0]), title: v[1], tags: [], text: v[3], - }; + } as any; }); return results; } - async metricFindQuery(query) { + async metricFindQuery(query: string) { const stackdriverMetricFindQuery = new StackdriverMetricFindQuery(this); return stackdriverMetricFindQuery.execute(query); } @@ -224,7 +225,7 @@ export default class StackdriverDatasource extends DataSourceApi { + this.metricTypes = data.metricDescriptors.map((m: any) => { const [service] = m.type.split('/'); const [serviceShortName] = service.split('.'); m.service = service; @@ -290,13 +291,13 @@ export default class StackdriverDatasource extends DataSourceApi { + .catch((error: any) => { if (maxRetries > 0) { return this.doRequest(url, maxRetries - 1); } diff --git a/public/app/plugins/datasource/stackdriver/filter_segments.ts b/public/app/plugins/datasource/stackdriver/filter_segments.ts index e9adcad6da6a2..485b897a99e3b 100644 --- a/public/app/plugins/datasource/stackdriver/filter_segments.ts +++ b/public/app/plugins/datasource/stackdriver/filter_segments.ts @@ -1,3 +1,5 @@ +import { Segment } from './types'; + export const DefaultRemoveFilterValue = '-- remove filter --'; export const DefaultFilterValue = 'select value'; @@ -5,7 +7,12 @@ export class FilterSegments { filterSegments: any[]; removeSegment: any; - constructor(private uiSegmentSrv, private filters, private getFilterKeysFunc, private getFilterValuesFunc) {} + constructor( + private uiSegmentSrv: any, + private filters: string[], + private getFilterKeysFunc: (arg0: any, arg1: string) => any, + private getFilterValuesFunc: (arg0: any) => any + ) {} buildSegmentModel() { this.removeSegment = this.uiSegmentSrv.newSegment({ fake: true, value: DefaultRemoveFilterValue }); @@ -30,7 +37,7 @@ export class FilterSegments { this.ensurePlusButton(this.filterSegments); } - async getFilters(segment, index, hasNoFilterKeys) { + async getFilters(segment: { type: any; value?: any }, index: number, hasNoFilterKeys: boolean) { if (segment.type === 'condition') { return [this.uiSegmentSrv.newSegment('AND')]; } @@ -70,7 +77,7 @@ export class FilterSegments { return filterValues; } - addNewFilterSegments(segment, index) { + addNewFilterSegments(segment: Segment, index: number) { if (index > 2) { this.filterSegments.splice(index, 0, this.uiSegmentSrv.newCondition('AND')); } @@ -79,7 +86,7 @@ export class FilterSegments { this.filterSegments.push(this.uiSegmentSrv.newFake(DefaultFilterValue, 'value', 'query-segment-value')); } - removeFilterSegment(index) { + removeFilterSegment(index: number) { this.filterSegments.splice(index, 3); // remove trailing condition if (index > 2 && this.filterSegments[index - 1].type === 'condition') { @@ -92,7 +99,7 @@ export class FilterSegments { } } - ensurePlusButton(segments) { + ensurePlusButton(segments: Segment[]) { const count = segments.length; const lastSegment = segments[Math.max(count - 1, 0)]; @@ -101,7 +108,7 @@ export class FilterSegments { } } - filterSegmentUpdated(segment, index) { + filterSegmentUpdated(segment: Segment, index: number) { if (segment.type === 'plus-button') { this.addNewFilterSegments(segment, index); } else if (segment.type === 'key' && segment.value === DefaultRemoveFilterValue) { diff --git a/public/app/plugins/datasource/stackdriver/functions.test.ts b/public/app/plugins/datasource/stackdriver/functions.test.ts index ffc421734fc9e..78cc0e95b42b4 100644 --- a/public/app/plugins/datasource/stackdriver/functions.test.ts +++ b/public/app/plugins/datasource/stackdriver/functions.test.ts @@ -2,7 +2,7 @@ import { getAlignmentOptionsByMetric } from './functions'; import { ValueTypes, MetricKind } from './constants'; describe('functions', () => { - let result; + let result: any; describe('getAlignmentOptionsByMetric', () => { describe('when double and gauge is passed', () => { beforeEach(() => { @@ -11,7 +11,7 @@ describe('functions', () => { it('should return all alignment options except two', () => { expect(result.length).toBe(9); - expect(result.map(o => o.value)).toEqual( + expect(result.map((o: any) => o.value)).toEqual( expect.not.arrayContaining(['REDUCE_COUNT_TRUE', 'REDUCE_COUNT_FALSE']) ); }); @@ -24,7 +24,7 @@ describe('functions', () => { it('should return all alignment options except four', () => { expect(result.length).toBe(9); - expect(result.map(o => o.value)).toEqual( + expect(result.map((o: any) => o.value)).toEqual( expect.not.arrayContaining([ 'ALIGN_COUNT_TRUE', 'ALIGN_COUNT_FALSE', diff --git a/public/app/plugins/datasource/stackdriver/functions.ts b/public/app/plugins/datasource/stackdriver/functions.ts index cdb2ac81bff14..b15999323e724 100644 --- a/public/app/plugins/datasource/stackdriver/functions.ts +++ b/public/app/plugins/datasource/stackdriver/functions.ts @@ -1,17 +1,24 @@ import uniqBy from 'lodash/uniqBy'; -import { alignOptions, aggOptions } from './constants'; +import { alignOptions, aggOptions, ValueTypes, MetricKind } from './constants'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { StackdriverQuery } from './types'; -export const extractServicesFromMetricDescriptors = metricDescriptors => uniqBy(metricDescriptors, 'service'); +export const extractServicesFromMetricDescriptors = (metricDescriptors: any) => uniqBy(metricDescriptors, 'service'); -export const getMetricTypesByService = (metricDescriptors, service) => - metricDescriptors.filter(m => m.service === service); +export const getMetricTypesByService = (metricDescriptors: any, service: any) => + metricDescriptors.filter((m: any) => m.service === service); -export const getMetricTypes = (metricDescriptors, metricType, interpolatedMetricType, selectedService) => { - const metricTypes = getMetricTypesByService(metricDescriptors, selectedService).map(m => ({ +export const getMetricTypes = ( + metricDescriptors: any[], + metricType: string, + interpolatedMetricType: any, + selectedService: any +) => { + const metricTypes = getMetricTypesByService(metricDescriptors, selectedService).map((m: any) => ({ value: m.type, name: m.displayName, })); - const metricTypeExistInArray = metricTypes.some(m => m.value === interpolatedMetricType); + const metricTypeExistInArray = metricTypes.some((m: any) => m.value === interpolatedMetricType); const selectedMetricType = metricTypeExistInArray ? metricType : metricTypes[0].value; return { metricTypes, @@ -19,7 +26,7 @@ export const getMetricTypes = (metricDescriptors, metricType, interpolatedMetric }; }; -export const getAlignmentOptionsByMetric = (metricValueType, metricKind) => { +export const getAlignmentOptionsByMetric = (metricValueType: any, metricKind: any) => { return !metricValueType ? [] : alignOptions.filter(i => { @@ -27,7 +34,7 @@ export const getAlignmentOptionsByMetric = (metricValueType, metricKind) => { }); }; -export const getAggregationOptionsByMetric = (valueType, metricKind) => { +export const getAggregationOptionsByMetric = (valueType: ValueTypes, metricKind: MetricKind) => { return !metricKind ? [] : aggOptions.filter(i => { @@ -35,7 +42,7 @@ export const getAggregationOptionsByMetric = (valueType, metricKind) => { }); }; -export const getLabelKeys = async (datasource, selectedMetricType) => { +export const getLabelKeys = async (datasource: any, selectedMetricType: any) => { const refId = 'handleLabelKeysQuery'; const response = await datasource.getLabels(selectedMetricType, refId); const labelKeys = response.meta @@ -47,7 +54,10 @@ export const getLabelKeys = async (datasource, selectedMetricType) => { return labelKeys; }; -export const getAlignmentPickerData = ({ valueType, metricKind, perSeriesAligner }, templateSrv) => { +export const getAlignmentPickerData = ( + { valueType, metricKind, perSeriesAligner }: Partial, + templateSrv: TemplateSrv +) => { const options = getAlignmentOptionsByMetric(valueType, metricKind).map(option => ({ ...option, label: option.text, diff --git a/public/app/plugins/datasource/stackdriver/query_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_ctrl.ts index 3a2d0bb970a62..1d8f7832d262c 100644 --- a/public/app/plugins/datasource/stackdriver/query_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/query_ctrl.ts @@ -3,13 +3,14 @@ import _ from 'lodash'; import { QueryCtrl } from 'app/plugins/sdk'; import { StackdriverQuery } from './types'; import { TemplateSrv } from 'app/features/templating/template_srv'; +import { auto } from 'angular'; export class StackdriverQueryCtrl extends QueryCtrl { static templateUrl = 'partials/query.editor.html'; templateSrv: TemplateSrv; /** @ngInject */ - constructor($scope, $injector, templateSrv) { + constructor($scope: any, $injector: auto.IInjectorService, templateSrv: TemplateSrv) { super($scope, $injector); this.templateSrv = templateSrv; this.onQueryChange = this.onQueryChange.bind(this); diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts index 0cbd1bac56408..dbc8e59688c83 100644 --- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts @@ -1,6 +1,8 @@ import coreModule from 'app/core/core_module'; import _ from 'lodash'; import { FilterSegments, DefaultFilterValue } from './filter_segments'; +import { TemplateSrv } from 'app/features/templating/template_srv'; +import { Segment } from './types'; export class StackdriverFilterCtrl { defaultRemoveGroupByValue = '-- remove group by --'; @@ -13,11 +15,11 @@ export class StackdriverFilterCtrl { hideGroupBys: boolean; labelData: any; loading: Promise; - filtersChanged: (filters) => void; - groupBysChanged: (groupBys) => void; + filtersChanged: (filters: any) => void; + groupBysChanged: (groupBys: any) => void; /** @ngInject */ - constructor(private $scope, private uiSegmentSrv, private templateSrv) { + constructor(private $scope: any, private uiSegmentSrv: any, private templateSrv: TemplateSrv) { this.$scope.ctrl = this; this.initSegments(this.hideGroupBys); } @@ -74,7 +76,7 @@ export class StackdriverFilterCtrl { return elements; } - async getFilterKeys(segment, removeText: string) { + async getFilterKeys(segment: { type: string }, removeText: string) { let elements = await this.createLabelKeyElements(); if (this.filters.indexOf(this.resourceTypeValue) !== -1) { @@ -94,7 +96,7 @@ export class StackdriverFilterCtrl { ]; } - async getGroupBys(segment) { + async getGroupBys(segment: { type: any }) { let elements = await this.createLabelKeyElements(); elements = elements.filter(e => this.groupBys.indexOf(e.value) === -1); const noValueOrPlusButton = !segment || segment.type === 'plus-button'; @@ -106,14 +108,14 @@ export class StackdriverFilterCtrl { return segment.type === 'plus-button' ? elements : [...elements, this.removeSegment]; } - groupByChanged(segment, index) { + groupByChanged(segment: any, index?: number) { if (segment.value === this.removeSegment.value) { this.groupBySegments.splice(index, 1); } else { segment.type = 'value'; } - const reducer = (memo, seg) => { + const reducer = (memo: any[], seg: { fake: any; value: any }) => { if (!seg.fake) { memo.push(seg.value); } @@ -125,13 +127,13 @@ export class StackdriverFilterCtrl { this.ensurePlusButton(this.groupBySegments); } - async getFilters(segment, index) { + async getFilters(segment: { type: string }, index: number) { await this.loading; const hasNoFilterKeys = this.labelData.metricLabels && Object.keys(this.labelData.metricLabels).length === 0; return this.filterSegments.getFilters(segment, index, hasNoFilterKeys); } - getFilterValues(index) { + getFilterValues(index: number) { const filterKey = this.templateSrv.replace(this.filterSegments.filterSegments[index - 2].value); if (!filterKey || !this.labelData.metricLabels || Object.keys(this.labelData.metricLabels).length === 0) { return []; @@ -154,14 +156,14 @@ export class StackdriverFilterCtrl { return []; } - filterSegmentUpdated(segment, index) { + filterSegmentUpdated(segment: { value: string; type: string }, index: number) { const filters = this.filterSegments.filterSegmentUpdated(segment, index); if (!filters.some(f => f === DefaultFilterValue)) { this.filtersChanged({ filters }); } } - ensurePlusButton(segments) { + ensurePlusButton(segments: Segment[]) { const count = segments.length; const lastSegment = segments[Math.max(count - 1, 0)]; diff --git a/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts b/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts index 09aac57002973..4252bc7932b85 100644 --- a/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts +++ b/public/app/plugins/datasource/stackdriver/specs/datasource.test.ts @@ -8,6 +8,11 @@ import { StackdriverOptions } from '../types'; import { BackendSrv } from 'app/core/services/backend_srv'; import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; +interface Result { + status: any; + message?: any; +} + describe('StackdriverDataSource', () => { const instanceSettings = ({ jsonData: { @@ -20,7 +25,7 @@ describe('StackdriverDataSource', () => { describe('when performing testDataSource', () => { describe('and call to stackdriver api succeeds', () => { let ds; - let result; + let result: Result; beforeEach(async () => { const backendSrv = ({ async datasourceRequest() { @@ -37,7 +42,7 @@ describe('StackdriverDataSource', () => { describe('and a list of metricDescriptors are returned', () => { let ds; - let result; + let result: Result; beforeEach(async () => { const backendSrv = ({ datasourceRequest: async () => Promise.resolve({ status: 200, data: metricDescriptors }), @@ -52,7 +57,7 @@ describe('StackdriverDataSource', () => { describe('and call to stackdriver api fails with 400 error', () => { let ds; - let result; + let result: Result; beforeEach(async () => { const backendSrv = ({ datasourceRequest: async () => @@ -92,8 +97,8 @@ describe('StackdriverDataSource', () => { }; describe('and no time series data is returned', () => { - let ds; - const response = { + let ds: StackdriverDataSource; + const response: any = { results: { A: { refId: 'A', @@ -114,7 +119,7 @@ describe('StackdriverDataSource', () => { }); it('should return a list of datapoints', () => { - return ds.query(options).then(results => { + return ds.query(options as any).then(results => { expect(results.data.length).toBe(0); }); }); @@ -124,7 +129,7 @@ describe('StackdriverDataSource', () => { describe('when performing getMetricTypes', () => { describe('and call to stackdriver api succeeds', () => {}); let ds; - let result; + let result: any; beforeEach(async () => { const backendSrv = ({ async datasourceRequest() { @@ -145,6 +150,7 @@ describe('StackdriverDataSource', () => { }, } as unknown) as BackendSrv; ds = new StackdriverDataSource(instanceSettings, backendSrv, templateSrv, timeSrv); + // @ts-ignore result = await ds.getMetricTypes(); }); it('should return successfully', () => { @@ -162,7 +168,7 @@ describe('StackdriverDataSource', () => { const noopBackendSrv = ({} as unknown) as BackendSrv; describe('when interpolating a template variable for the filter', () => { - let interpolated; + let interpolated: any[]; describe('and is single value variable', () => { beforeEach(() => { const filterTemplateSrv = initTemplateSrv('filtervalue1'); @@ -190,7 +196,7 @@ describe('StackdriverDataSource', () => { }); describe('when interpolating a template variable for group bys', () => { - let interpolated; + let interpolated: any[]; describe('and is single value variable', () => { beforeEach(() => { @@ -221,7 +227,7 @@ describe('StackdriverDataSource', () => { }); describe('unit parsing', () => { - let ds, res; + let ds: StackdriverDataSource, res: any; beforeEach(() => { ds = new StackdriverDataSource(instanceSettings, noopBackendSrv, templateSrv, timeSrv); }); diff --git a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts index b492cb72e90f1..947d0e36c2dee 100644 --- a/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts +++ b/public/app/plugins/datasource/stackdriver/specs/query_filter_ctrl.test.ts @@ -3,9 +3,9 @@ import { TemplateSrvStub } from 'test/specs/helpers'; import { DefaultRemoveFilterValue, DefaultFilterValue } from '../filter_segments'; describe('StackdriverQueryFilterCtrl', () => { - let ctrl; - let result; - let groupByChangedMock; + let ctrl: Partial; + let result: any; + let groupByChangedMock: any; describe('when initializing query editor', () => { beforeEach(() => { @@ -363,34 +363,34 @@ describe('StackdriverQueryFilterCtrl', () => { function createCtrlWithFakes(existingFilters?: string[]) { const fakeSegmentServer = { - newKey: val => { + newKey: (val: any) => { return { value: val, type: 'key' }; }, - newKeyValue: val => { + newKeyValue: (val: any) => { return { value: val, type: 'value' }; }, - newSegment: obj => { + newSegment: (obj: any) => { return { value: obj.value ? obj.value : obj }; }, - newOperators: ops => { - return ops.map(o => { + newOperators: (ops: any) => { + return ops.map((o: any) => { return { type: 'operator', value: o }; }); }, - newFake: (value, type, cssClass) => { + newFake: (value: any, type: any, cssClass: any) => { return { value, type, cssClass }; }, - newOperator: op => { + newOperator: (op: any) => { return { value: op, type: 'operator' }; }, newPlusButton: () => { return { type: 'plus-button' }; }, - newCondition: val => { + newCondition: (val: any) => { return { type: 'condition', value: val }; }, }; - const scope = { + const scope: any = { hideGroupBys: false, groupBys: [], filters: existingFilters || [], @@ -410,5 +410,6 @@ function createCtrlWithFakes(existingFilters?: string[]) { }; Object.assign(StackdriverFilterCtrl.prototype, scope); + // @ts-ignore return new StackdriverFilterCtrl(scope, fakeSegmentServer, new TemplateSrvStub()); } diff --git a/public/app/plugins/datasource/stackdriver/types.ts b/public/app/plugins/datasource/stackdriver/types.ts index f9a829279c32c..258153bb2d40f 100644 --- a/public/app/plugins/datasource/stackdriver/types.ts +++ b/public/app/plugins/datasource/stackdriver/types.ts @@ -75,3 +75,8 @@ export interface MetricDescriptor { displayName: string; description: string; } + +export interface Segment { + type: string; + value: string; +} diff --git a/public/app/plugins/datasource/testdata/StreamHandler.ts b/public/app/plugins/datasource/testdata/StreamHandler.ts index 389c20a8bf356..42b80db0bf83e 100644 --- a/public/app/plugins/datasource/testdata/StreamHandler.ts +++ b/public/app/plugins/datasource/testdata/StreamHandler.ts @@ -2,7 +2,7 @@ import defaults from 'lodash/defaults'; import { DataQueryRequest, FieldType, - SeriesData, + DataFrame, DataQueryResponse, DataQueryError, DataStreamObserver, @@ -18,6 +18,7 @@ export const defaultQuery: StreamingQuery = { speed: 250, // ms spread: 3.5, noise: 2.2, + bands: 1, }; type StreamWorkers = { @@ -42,7 +43,7 @@ export class StreamHandler { // set stream option defaults query.stream = defaults(query.stream, defaultQuery); // create stream key - const key = req.dashboardId + '/' + req.panelId + '/' + query.refId; + const key = req.dashboardId + '/' + req.panelId + '/' + query.refId + '@' + query.stream.bands; if (this.workers[key]) { const existing = this.workers[key]; @@ -146,38 +147,46 @@ export class StreamWorker { export class SignalWorker extends StreamWorker { value: number; + bands = 1; + constructor(key: string, query: TestDataQuery, request: DataQueryRequest, observer: DataStreamObserver) { super(key, query, request, observer); setTimeout(() => { this.stream.series = [this.initBuffer(query.refId)]; this.looper(); }, 10); + + this.bands = query.stream.bands ? query.stream.bands : 0; } nextRow = (time: number) => { const { spread, noise } = this.query; this.value += (Math.random() - 0.5) * spread; - return [ - time, - this.value, // Value - this.value - Math.random() * noise, // MIN - this.value + Math.random() * noise, // MAX - ]; + const row = [time, this.value]; + for (let i = 0; i < this.bands; i++) { + const v = row[row.length - 1]; + row.push(v - Math.random() * noise); // MIN + row.push(v + Math.random() * noise); // MAX + } + return row; }; - initBuffer(refId: string): SeriesData { + initBuffer(refId: string): DataFrame { const { speed, buffer } = this.query; const data = { - fields: [ - { name: 'Time', type: FieldType.time }, - { name: 'Value', type: FieldType.number }, - { name: 'Min', type: FieldType.number }, - { name: 'Max', type: FieldType.number }, - ], + fields: [{ name: 'Time', type: FieldType.time }, { name: 'Value', type: FieldType.number }], rows: [], refId, name: 'Signal ' + refId, - } as SeriesData; + } as DataFrame; + + for (let i = 0; i < this.bands; i++) { + const suffix = this.bands > 1 ? ` ${i + 1}` : ''; + data.fields.push({ name: 'Min' + suffix, type: FieldType.number }); + data.fields.push({ name: 'Max' + suffix, type: FieldType.number }); + } + + console.log('START', data); const request = this.stream.request; @@ -251,7 +260,7 @@ export class FetchWorker extends StreamWorker { return this.reader.read().then(this.processChunk); }; - onHeader = (series: SeriesData) => { + onHeader = (series: DataFrame) => { series.refId = this.refId; this.stream.series = [series]; }; @@ -314,14 +323,14 @@ export class LogsWorker extends StreamWorker { return [time, '[' + this.getRandomLogLevel() + '] ' + this.getRandomLine()]; }; - initBuffer(refId: string): SeriesData { + initBuffer(refId: string): DataFrame { const { speed, buffer } = this.query; const data = { fields: [{ name: 'Time', type: FieldType.time }, { name: 'Line', type: FieldType.string }], rows: [], refId, name: 'Logs ' + refId, - } as SeriesData; + } as DataFrame; const request = this.stream.request; diff --git a/public/app/plugins/datasource/testdata/partials/query.editor.html b/public/app/plugins/datasource/testdata/partials/query.editor.html index e70abb4d96de2..4a2f59e749f5a 100644 --- a/public/app/plugins/datasource/testdata/partials/query.editor.html +++ b/public/app/plugins/datasource/testdata/partials/query.editor.html @@ -43,7 +43,7 @@
      @@ -78,6 +78,16 @@ step="0.1" ng-change="ctrl.streamChanged()" />
      +
      + + +
      { + .then((res: any) => { this.scenarioList = res; this.scenario = _.find(this.scenarioList, { id: this.target.scenarioId }); }); diff --git a/public/app/plugins/datasource/testdata/types.ts b/public/app/plugins/datasource/testdata/types.ts index 73d562add926c..12c14426b40b8 100644 --- a/public/app/plugins/datasource/testdata/types.ts +++ b/public/app/plugins/datasource/testdata/types.ts @@ -18,6 +18,7 @@ export interface StreamingQuery { speed: number; spread: number; noise: number; // wiggle around the signal for min/max + bands?: number; // number of bands around the middle van buffer?: number; url?: string; // the Fetch URL } diff --git a/public/app/plugins/panel/alertlist/module.ts b/public/app/plugins/panel/alertlist/module.ts index d602c6d77a0c1..85acd9cb2d087 100644 --- a/public/app/plugins/panel/alertlist/module.ts +++ b/public/app/plugins/panel/alertlist/module.ts @@ -4,6 +4,8 @@ import { PanelCtrl } from 'app/plugins/sdk'; import * as dateMath from '@grafana/ui/src/utils/datemath'; import { dateTime } from '@grafana/ui/src/utils/moment_wrapper'; +import { auto } from 'angular'; +import { BackendSrv } from '@grafana/runtime'; class AlertListPanel extends PanelCtrl { static templateUrl = 'module.html'; @@ -24,7 +26,7 @@ class AlertListPanel extends PanelCtrl { templateSrv: string; // Set and populate defaults - panelDefaults = { + panelDefaults: any = { show: 'current', limit: 10, stateFilter: [], @@ -36,7 +38,7 @@ class AlertListPanel extends PanelCtrl { }; /** @ngInject */ - constructor($scope, $injector, private backendSrv) { + constructor($scope: any, $injector: auto.IInjectorService, private backendSrv: BackendSrv) { super($scope, $injector); _.defaults(this.panel, this.panelDefaults); @@ -49,9 +51,10 @@ class AlertListPanel extends PanelCtrl { } } - sortResult(alerts) { + sortResult(alerts: any[]) { if (this.panel.sortOrder === 3) { return _.sortBy(alerts, a => { + // @ts-ignore return alertDef.alertStateSortScore[a.state]; }); } diff --git a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx b/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx index 87e52b2e08fec..4a0bdc95a7e37 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx @@ -43,8 +43,8 @@ export class BarGaugePanelEditor extends PureComponent this.props.onOptionsChange({ ...this.props.options, orientation: value }); - onDisplayModeChange = ({ value }) => this.props.onOptionsChange({ ...this.props.options, displayMode: value }); + onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value }); + onDisplayModeChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, displayMode: value }); render() { const { options } = this.props; diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index ba6f1a8b4f46d..933f8f95a9b40 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -1,6 +1,9 @@ import _ from 'lodash'; import { PanelCtrl } from 'app/plugins/sdk'; import impressionSrv from 'app/core/services/impression_srv'; +import { auto } from 'angular'; +import { BackendSrv } from 'app/core/services/backend_srv'; +import { DashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; class DashListCtrl extends PanelCtrl { static templateUrl = 'module.html'; @@ -9,7 +12,7 @@ class DashListCtrl extends PanelCtrl { groups: any[]; modes: any[]; - panelDefaults = { + panelDefaults: any = { query: '', limit: 10, tags: [], @@ -21,7 +24,12 @@ class DashListCtrl extends PanelCtrl { }; /** @ngInject */ - constructor($scope, $injector, private backendSrv, private dashboardSrv) { + constructor( + $scope: any, + $injector: auto.IInjectorService, + private backendSrv: BackendSrv, + private dashboardSrv: DashboardSrv + ) { super($scope, $injector); _.defaults(this.panel, this.panelDefaults); @@ -105,8 +113,8 @@ class DashListCtrl extends PanelCtrl { }); } - starDashboard(dash, evt) { - this.dashboardSrv.starDashboard(dash.id, dash.isStarred).then(newState => { + starDashboard(dash: any, evt: any) { + this.dashboardSrv.starDashboard(dash.id, dash.isStarred).then((newState: any) => { dash.isStarred = newState; }); diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx index 6b8c5fe2492d9..007e940ba1e13 100644 --- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx +++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx @@ -80,7 +80,7 @@ export class GettingStarted extends PureComponent { check: () => { return getBackendSrv() .get('/api/org/users') - .then(res => { + .then((res: any) => { return res.length > 1; }); }, @@ -93,7 +93,7 @@ export class GettingStarted extends PureComponent { check: () => { return getBackendSrv() .get('/api/plugins', { embedded: 0, core: 0 }) - .then(plugins => { + .then((plugins: any[]) => { return plugins.length > 0; }); }, @@ -108,7 +108,7 @@ export class GettingStarted extends PureComponent { }); } - nextStep() { + nextStep(): any { if (this.stepIndex === this.steps.length - 1) { return Promise.resolve(); } diff --git a/public/app/plugins/panel/graph/GraphContextMenuCtrl.ts b/public/app/plugins/panel/graph/GraphContextMenuCtrl.ts index f32f98444c9ba..59a4463493c44 100644 --- a/public/app/plugins/panel/graph/GraphContextMenuCtrl.ts +++ b/public/app/plugins/panel/graph/GraphContextMenuCtrl.ts @@ -21,7 +21,7 @@ export class GraphContextMenuCtrl { isVisible: boolean; - constructor($scope) { + constructor($scope: any) { this.isVisible = false; this.menuItems = []; this.scope = $scope; diff --git a/public/app/plugins/panel/graph/Legend/Legend.tsx b/public/app/plugins/panel/graph/Legend/Legend.tsx index b60755311a020..b5f483ebc6c96 100644 --- a/public/app/plugins/panel/graph/Legend/Legend.tsx +++ b/public/app/plugins/panel/graph/Legend/Legend.tsx @@ -4,21 +4,22 @@ import { TimeSeries } from 'app/core/core'; import { CustomScrollbar } from '@grafana/ui'; import { LegendItem, LEGEND_STATS } from './LegendSeriesItem'; +type Sort = 'min' | 'max' | 'avg' | 'current' | 'total'; interface LegendProps { seriesList: TimeSeries[]; optionalClass?: string; } interface LegendEventHandlers { - onToggleSeries?: (hiddenSeries) => void; - onToggleSort?: (sortBy, sortDesc) => void; + onToggleSeries?: (hiddenSeries: any) => void; + onToggleSort?: (sortBy: any, sortDesc: any) => void; onToggleAxis?: (series: TimeSeries) => void; onColorChange?: (series: TimeSeries, color: string) => void; } interface LegendComponentEventHandlers { - onToggleSeries?: (series, event) => void; - onToggleSort?: (sortBy, sortDesc) => void; + onToggleSeries?: (series: TimeSeries, event: any) => void; + onToggleSort?: (sortBy: Sort, sortDesc: any) => void; onToggleAxis?: (series: TimeSeries) => void; onColorChange?: (series: TimeSeries, color: string) => void; } @@ -42,7 +43,7 @@ interface LegendValuesProps { } interface LegendSortProps { - sort?: 'min' | 'max' | 'avg' | 'current' | 'total'; + sort?: Sort; sortDesc?: boolean; } @@ -80,7 +81,7 @@ export class GraphLegend extends PureComponent { onColorChange: () => {}, }; - constructor(props) { + constructor(props: GraphLegendProps) { super(props); this.state = { hiddenSeries: this.props.hiddenSeries, @@ -104,7 +105,7 @@ export class GraphLegend extends PureComponent { return seriesList; } - onToggleSeries = (series, event) => { + onToggleSeries = (series: TimeSeries, event: any) => { let hiddenSeries = { ...this.state.hiddenSeries }; if (event.ctrlKey || event.metaKey || event.shiftKey) { if (hiddenSeries[series.alias]) { @@ -119,7 +120,7 @@ export class GraphLegend extends PureComponent { this.props.onToggleSeries(hiddenSeries); }; - toggleSeriesExclusiveMode(series) { + toggleSeriesExclusiveMode(series: TimeSeries) { const hiddenSeries = { ...this.state.hiddenSeries }; if (hiddenSeries[series.alias]) { @@ -226,7 +227,7 @@ class LegendSeriesList extends PureComponent { } class LegendTable extends PureComponent> { - onToggleSort = stat => { + onToggleSort = (stat: Sort) => { let sortDesc = this.props.sortDesc; let sortBy = this.props.sort; if (stat !== sortBy) { @@ -247,7 +248,7 @@ class LegendTable extends PureComponent> { render() { const seriesList = this.props.seriesList; const { values, min, max, avg, current, total, sort, sortDesc, hiddenSeries } = this.props; - const seriesValuesProps = { values, min, max, avg, current, total }; + const seriesValuesProps: any = { values, min, max, avg, current, total }; return ( diff --git a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx index 37b9a2728ca3a..f24e9ab0b1a8e 100644 --- a/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx +++ b/public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx @@ -9,9 +9,9 @@ export interface LegendLabelProps { series: TimeSeries; asTable?: boolean; hidden?: boolean; - onLabelClick?: (series, event) => void; - onColorChange?: (series, color: string) => void; - onToggleAxis?: (series) => void; + onLabelClick?: (series: any, event: any) => void; + onColorChange?: (series: any, color: string) => void; + onToggleAxis?: (series: any) => void; } export interface LegendValuesProps { @@ -38,14 +38,14 @@ export class LegendItem extends PureComponent onToggleAxis: () => {}, }; - constructor(props) { + constructor(props: LegendItemProps) { super(props); this.state = { yaxis: this.props.series.yaxis, }; } - onLabelClick = e => this.props.onLabelClick(this.props.series, e); + onLabelClick = (e: any) => this.props.onLabelClick(this.props.series, e); onToggleAxis = () => { const yaxis = this.state.yaxis === 2 ? 1 : 2; @@ -54,7 +54,7 @@ export class LegendItem extends PureComponent this.props.onToggleAxis(info); }; - onColorChange = color => { + onColorChange = (color: string) => { this.props.onColorChange(this.props.series, color); // Because of PureComponent nature it makes only shallow props comparison and changing of series.color doesn't run // component re-render. In this case we can't rely on color, selected by user, because it may be overwritten @@ -66,6 +66,7 @@ export class LegendItem extends PureComponent const { series, asTable } = this.props; const legendValueItems = []; for (const valueName of LEGEND_STATS) { + // @ts-ignore if (this.props[valueName]) { const valueFormatted = series.formatValue(series.stats[valueName]); legendValueItems.push( @@ -116,11 +117,11 @@ interface LegendSeriesLabelProps { label: string; color: string; yaxis?: number; - onLabelClick?: (event) => void; + onLabelClick?: (event: any) => void; } class LegendSeriesLabel extends PureComponent { - static defaultProps = { + static defaultProps: Partial = { yaxis: undefined, onLabelClick: () => {}, }; @@ -154,12 +155,12 @@ interface LegendSeriesIconState { color: string; } -function SeriesIcon({ color }) { +function SeriesIcon({ color }: { color: string }) { return ; } class LegendSeriesIcon extends PureComponent { - static defaultProps = { + static defaultProps: Partial = { yaxis: undefined, onColorChange: () => {}, onToggleAxis: () => {}, diff --git a/public/app/plugins/panel/graph/align_yaxes.ts b/public/app/plugins/panel/graph/align_yaxes.ts index f52138ea40e25..9a6439c546813 100644 --- a/public/app/plugins/panel/graph/align_yaxes.ts +++ b/public/app/plugins/panel/graph/align_yaxes.ts @@ -5,7 +5,7 @@ import _ from 'lodash'; * @param yAxes data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}] * @param level Y level */ -export function alignYLevel(yAxes, level) { +export function alignYLevel(yAxes: any, level: any) { if (isNaN(level) || !checkCorrectAxis(yAxes)) { return; } @@ -65,7 +65,7 @@ export function alignYLevel(yAxes, level) { restoreLevelFromZero(yLeft, yRight, level); } -function expandStuckValues(yLeft, yRight) { +function expandStuckValues(yLeft: { max: number; min: number }, yRight: { max: number; min: number }) { // wide Y min and max using increased wideFactor const wideFactor = 0.25; if (yLeft.max === yLeft.min) { @@ -78,7 +78,7 @@ function expandStuckValues(yLeft, yRight) { } } -function moveLevelToZero(yLeft, yRight, level) { +function moveLevelToZero(yLeft: { min: number; max: number }, yRight: { min: number; max: number }, level: number) { if (level !== 0) { yLeft.min -= level; yLeft.max -= level; @@ -87,7 +87,11 @@ function moveLevelToZero(yLeft, yRight, level) { } } -function restoreLevelFromZero(yLeft, yRight, level) { +function restoreLevelFromZero( + yLeft: { min: number; max: number }, + yRight: { min: number; max: number }, + level: number +) { if (level !== 0) { yLeft.min += level; yLeft.max += level; @@ -96,30 +100,35 @@ function restoreLevelFromZero(yLeft, yRight, level) { } } -function checkCorrectAxis(axis) { +interface AxisSide { + max: number; + min: number; +} + +function checkCorrectAxis(axis: any[]) { return axis.length === 2 && checkCorrectAxes(axis[0]) && checkCorrectAxes(axis[1]); } -function checkCorrectAxes(axes) { +function checkCorrectAxes(axes: any) { return 'min' in axes && 'max' in axes; } -function checkOneSide(yLeft, yRight) { +function checkOneSide(yLeft: AxisSide, yRight: AxisSide) { // on the one hand with respect to zero return (yLeft.min >= 0 && yRight.min >= 0) || (yLeft.max <= 0 && yRight.max <= 0); } -function checkTwoCross(yLeft, yRight) { +function checkTwoCross(yLeft: AxisSide, yRight: AxisSide) { // both across zero return yLeft.min <= 0 && yLeft.max >= 0 && yRight.min <= 0 && yRight.max >= 0; } -function checkOppositeSides(yLeft, yRight) { +function checkOppositeSides(yLeft: AxisSide, yRight: AxisSide) { // on the opposite sides with respect to zero return (yLeft.min >= 0 && yRight.max <= 0) || (yLeft.max <= 0 && yRight.min >= 0); } -function getRate(yLeft, yRight) { +function getRate(yLeft: AxisSide, yRight: AxisSide) { let rateLeft, rateRight, rate; if (checkTwoCross(yLeft, yRight)) { rateLeft = yRight.min ? yLeft.min / yRight.min : 0; diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts index 37fe9f3e21953..bbc438e1c5761 100644 --- a/public/app/plugins/panel/graph/data_processor.ts +++ b/public/app/plugins/panel/graph/data_processor.ts @@ -1,15 +1,15 @@ import _ from 'lodash'; -import { TimeRange, colors, getColorFromHexRgbOrName, FieldCache, FieldType, Field, SeriesData } from '@grafana/ui'; +import { TimeRange, colors, getColorFromHexRgbOrName, FieldCache, FieldType, Field, DataFrame } from '@grafana/ui'; import TimeSeries from 'app/core/time_series2'; import config from 'app/core/config'; type Options = { - dataList: SeriesData[]; + dataList: DataFrame[]; range?: TimeRange; }; export class DataProcessor { - constructor(private panel) {} + constructor(private panel: any) {} getSeriesList(options: Options): TimeSeries[] { const list: TimeSeries[] = []; @@ -140,7 +140,7 @@ export class DataProcessor { } } - getXAxisValueOptions(options) { + getXAxisValueOptions(options: any) { switch (this.panel.xaxis.mode) { case 'series': { return [ diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index ffc95502bc461..42e5590947aaa 100644 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -16,7 +16,7 @@ import GraphTooltip from './graph_tooltip'; import { ThresholdManager } from './threshold_manager'; import { TimeRegionManager } from './time_region_manager'; import { EventManager } from 'app/features/annotations/all'; -import { LinkService } from 'app/features/panel/panellinks/link_srv'; +import { LinkService, LinkSrv } from 'app/features/panel/panellinks/link_srv'; import { convertToHistogramData } from './histogram'; import { alignYLevel } from './align_yaxes'; import config from 'app/core/config'; @@ -29,6 +29,8 @@ import { getValueFormat, ContextMenuItem, ContextMenuGroup, DataLink } from '@gr import { provideTheme } from 'app/core/utils/ConfigProvider'; import { toUtc } from '@grafana/ui/src/utils/moment_wrapper'; import { GraphContextMenuCtrl, FlotDataPoint } from './GraphContextMenuCtrl'; +import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; +import { ContextSrv } from 'app/core/services/context_srv'; const LegendWithThemeProvider = provideTheme(Legend); @@ -48,8 +50,7 @@ class GraphElement { timeRegionManager: TimeRegionManager; legendElem: HTMLElement; - // @ts-ignore - constructor(private scope, private elem, private timeSrv, private linkSrv: LinkService) { + constructor(private scope: any, private elem: JQuery, private timeSrv: TimeSrv, private linkSrv: LinkService) { this.ctrl = scope.ctrl; this.contextMenu = scope.ctrl.contextMenuCtrl; this.dashboard = this.ctrl.dashboard; @@ -60,6 +61,7 @@ class GraphElement { this.eventManager = new EventManager(this.ctrl); this.thresholdManager = new ThresholdManager(this.ctrl); this.timeRegionManager = new TimeRegionManager(this.ctrl, config.theme.type); + // @ts-ignore this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => { return this.sortedSeries; }); @@ -80,7 +82,7 @@ class GraphElement { } } - onRender(renderData) { + onRender(renderData: any[]) { this.data = renderData || this.data; if (!this.data) { return; @@ -217,7 +219,7 @@ class GraphElement { onPlotClick(event: JQueryEventObject, pos: any, item: any) { const scrollContextElement = this.elem.closest('.view') ? this.elem.closest('.view').get()[0] : null; const contextMenuSourceItem = item; - let contextMenuItems; + let contextMenuItems: ContextMenuItem[]; if (this.panel.xaxis.mode !== 'time') { // Skip if panel in histogram or series mode @@ -235,7 +237,7 @@ class GraphElement { return; } else { this.tooltip.clear(this.plot); - contextMenuItems = this.getContextMenuItems(pos, item); + contextMenuItems = this.getContextMenuItems(pos, item) as ContextMenuItem[]; this.scope.$apply(() => { // Setting nearest CustomScrollbar element as a scroll context for graph context menu this.contextMenu.setScrollContextElement(scrollContextElement); @@ -258,7 +260,7 @@ class GraphElement { return false; } - drawHook(plot) { + drawHook(plot: any) { // add left axis labels if (this.panel.yaxes[0].label && this.panel.yaxes[0].show) { $("
      ") @@ -281,7 +283,7 @@ class GraphElement { this.timeRegionManager.draw(plot); } - processOffsetHook(plot, gridMargin) { + processOffsetHook(plot: any, gridMargin: { left: number; right: number }) { const left = this.panel.yaxes[0]; const right = this.panel.yaxes[1]; if (left.show && left.label) { @@ -294,14 +296,14 @@ class GraphElement { // apply y-axis min/max options const yaxis = plot.getYAxes(); for (let i = 0; i < yaxis.length; i++) { - const axis = yaxis[i]; + const axis: any = yaxis[i]; const panelOptions = this.panel.yaxes[i]; axis.options.max = axis.options.max !== null ? axis.options.max : panelOptions.max; axis.options.min = axis.options.min !== null ? axis.options.min : panelOptions.min; } } - processRangeHook(plot) { + processRangeHook(plot: any) { const yAxes = plot.getYAxes(); const align = this.panel.yaxis.align || false; @@ -314,7 +316,7 @@ class GraphElement { // Series could have different timeSteps, // let's find the smallest one so that bars are correctly rendered. // In addition, only take series which are rendered as bars for this. - getMinTimeStepOfSeries(data) { + getMinTimeStepOfSeries(data: any[]) { let min = Number.MAX_VALUE; for (let i = 0; i < data.length; i++) { @@ -364,7 +366,7 @@ class GraphElement { this.callPlot(options, true); } - buildFlotPairs(data) { + buildFlotPairs(data: any) { for (let i = 0; i < data.length; i++) { const series = data[i]; series.data = series.getFlotPairs(series.nullPointMode || this.panel.nullPointMode); @@ -377,7 +379,7 @@ class GraphElement { } } - prepareXAxis(options, panel) { + prepareXAxis(options: any, panel: any) { switch (panel.xaxis.mode) { case 'series': { options.series.bars.barWidth = 0.7; @@ -430,7 +432,7 @@ class GraphElement { } } - callPlot(options, incrementRenderCounter) { + callPlot(options: any, incrementRenderCounter: boolean) { try { this.plot = $.plot(this.elem, this.sortedSeries, options); if (this.ctrl.renderError) { @@ -449,13 +451,13 @@ class GraphElement { } } - buildFlotOptions(panel) { + buildFlotOptions(panel: any) { let gridColor = '#c8c8c8'; if (config.bootData.user.lightTheme === true) { gridColor = '#a1a1a1'; } const stack = panel.stack ? true : null; - const options = { + const options: any = { hooks: { draw: [this.drawHook.bind(this)], processOffset: [this.processOffsetHook.bind(this)], @@ -518,7 +520,7 @@ class GraphElement { return options; } - sortSeries(series, panel) { + sortSeries(series: any, panel: any) { const sortBy = panel.legend.sort; const sortOrder = panel.legend.sortDesc; const haveSortBy = sortBy !== null && sortBy !== undefined && panel.legend[sortBy]; @@ -551,7 +553,7 @@ class GraphElement { } } - addTimeAxis(options) { + addTimeAxis(options: any) { const ticks = this.panelWidth / 100; const min = _.isUndefined(this.ctrl.range.from) ? null : this.ctrl.range.from.valueOf(); const max = _.isUndefined(this.ctrl.range.to) ? null : this.ctrl.range.to.valueOf(); @@ -568,7 +570,7 @@ class GraphElement { }; } - addXSeriesAxis(options) { + addXSeriesAxis(options: any) { const ticks = _.map(this.data, (series, index) => { return [index + 1, series.alias]; }); @@ -584,7 +586,7 @@ class GraphElement { }; } - addXHistogramAxis(options, bucketSize) { + addXHistogramAxis(options: any, bucketSize: number) { let ticks, min, max; const defaultTicks = this.panelWidth / 50; @@ -637,7 +639,7 @@ class GraphElement { this.configureAxisMode(options.xaxis, 'short'); } - addXTableAxis(options) { + addXTableAxis(options: any) { let ticks = _.map(this.data, (series, seriesIndex) => { return _.map(series.datapoints, (point, pointIndex) => { const tickIndex = seriesIndex * series.datapoints.length + pointIndex; @@ -658,7 +660,7 @@ class GraphElement { }; } - configureYAxisOptions(data, options) { + configureYAxisOptions(data: any, options: any) { const defaults = { position: 'left', show: this.panel.yaxes[0].show, @@ -703,7 +705,7 @@ class GraphElement { return _.toNumber(value); } - applyLogScale(axis, data) { + applyLogScale(axis: any, data: any) { if (axis.logBase === 1) { return; } @@ -733,10 +735,10 @@ class GraphElement { } } - axis.transform = v => { + axis.transform = (v: number) => { return v < Number.MIN_VALUE ? null : Math.log(v) / Math.log(axis.logBase); }; - axis.inverseTransform = v => { + axis.inverseTransform = (v: any) => { return Math.pow(axis.logBase, v); }; @@ -784,7 +786,7 @@ class GraphElement { } } - generateTicksForLogScaleYAxis(min, max, logBase) { + generateTicksForLogScaleYAxis(min: any, max: number, logBase: number) { let ticks = []; let nextTick; @@ -806,7 +808,7 @@ class GraphElement { return ticks; } - configureAxisMode(axis, format) { + configureAxisMode(axis: { tickFormatter: (val: any, axis: any) => string }, format: string) { axis.tickFormatter = (val, axis) => { const formatter = getValueFormat(format); @@ -817,7 +819,7 @@ class GraphElement { }; } - time_format(ticks, min, max) { + time_format(ticks: number, min: number, max: number) { if (min && max && ticks) { const range = max - min; const secPerTick = range / ticks / 1000; @@ -846,11 +848,11 @@ class GraphElement { } /** @ngInject */ -function graphDirective(timeSrv, popoverSrv, contextSrv, linkSrv) { +function graphDirective(timeSrv: TimeSrv, popoverSrv: any, contextSrv: ContextSrv, linkSrv: LinkSrv) { return { restrict: 'A', template: '', - link: (scope, elem) => { + link: (scope: any, elem: JQuery) => { return new GraphElement(scope, elem, timeSrv, linkSrv); }, }; diff --git a/public/app/plugins/panel/graph/graph_tooltip.ts b/public/app/plugins/panel/graph/graph_tooltip.ts index aeba9fa6ed3bc..ebf694b693c71 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.ts +++ b/public/app/plugins/panel/graph/graph_tooltip.ts @@ -1,7 +1,7 @@ import $ from 'jquery'; import { appEvents } from 'app/core/core'; -export default function GraphTooltip(this: any, elem, dashboard, scope, getSeriesFn) { +export default function GraphTooltip(this: any, elem: any, dashboard: any, scope: any, getSeriesFn: any) { const self = this; const ctrl = scope.ctrl; const panel = ctrl.panel; @@ -12,7 +12,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie $tooltip.remove(); }; - this.findHoverIndexFromDataPoints = (posX, series, last) => { + this.findHoverIndexFromDataPoints = (posX: number, series: any, last: number) => { const ps = series.datapoints.pointsize; const initial = last * ps; const len = series.datapoints.points.length; @@ -30,7 +30,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie return j / ps - 1; }; - this.findHoverIndexFromData = (posX, series) => { + this.findHoverIndexFromData = (posX: any, series: any) => { let lower = 0; let upper = series.data.length - 1; let middle; @@ -49,14 +49,14 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie } }; - this.renderAndShow = (absoluteTime, innerHtml, pos, xMode) => { + this.renderAndShow = (absoluteTime: string, innerHtml: string, pos: { pageX: number; pageY: any }, xMode: string) => { if (xMode === 'time') { innerHtml = '
      ' + absoluteTime + '
      ' + innerHtml; } $tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY); }; - this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) { + this.getMultiSeriesPlotHoverInfo = function(seriesList: any[], pos: { x: number }) { let value, i, series, hoverIndex, hoverDistance, pointTime, yaxis; // 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis. let results: any = [[], [], []]; @@ -158,7 +158,7 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie appEvents.emit('graph-hover-clear'); }); - elem.bind('plothover', (event, pos, item) => { + elem.bind('plothover', (event: any, pos: { panelRelY: number; pageY: number }, item: any) => { self.show(pos, item); // broadcast to other graph panels that we are hovering! @@ -166,17 +166,17 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie appEvents.emit('graph-hover', { pos: pos, panel: panel }); }); - elem.bind('plotclick', (event, pos, item) => { + elem.bind('plotclick', (event: any, pos: any, item: any) => { appEvents.emit('graph-click', { pos: pos, panel: panel, item: item }); }); - this.clear = plot => { + this.clear = (plot: { clearCrosshair: () => void; unhighlight: () => void }) => { $tooltip.detach(); plot.clearCrosshair(); plot.unhighlight(); }; - this.show = (pos, item) => { + this.show = (pos: any, item: any) => { const plot = elem.data().plot; const plotData = plot.getData(); const xAxes = plot.getXAxes(); @@ -232,11 +232,11 @@ export default function GraphTooltip(this: any, elem, dashboard, scope, getSerie // Dynamically reorder the hovercard for the current time point if the // option is enabled. if (panel.tooltip.sort === 2) { - seriesHoverInfo.sort((a, b) => { + seriesHoverInfo.sort((a: { value: number }, b: { value: number }) => { return b.value - a.value; }); } else if (panel.tooltip.sort === 1) { - seriesHoverInfo.sort((a, b) => { + seriesHoverInfo.sort((a: { value: number }, b: { value: number }) => { return a.value - b.value; }); } diff --git a/public/app/plugins/panel/graph/histogram.ts b/public/app/plugins/panel/graph/histogram.ts index b5c478198c077..d7c1c8f21e83b 100644 --- a/public/app/plugins/panel/graph/histogram.ts +++ b/public/app/plugins/panel/graph/histogram.ts @@ -30,7 +30,7 @@ export function getSeriesValues(dataList: TimeSeries[]): number[] { * @param bucketSize */ export function convertValuesToHistogram(values: number[], bucketSize: number, min: number, max: number): any[] { - const histogram = {}; + const histogram: any = {}; const minBound = getBucketBound(min, bucketSize); const maxBound = getBucketBound(max, bucketSize); @@ -71,7 +71,7 @@ export function convertToHistogramData( min: number, max: number ): any[] { - return data.map(series => { + return data.map((series: any) => { const values = getSeriesValues([series]); series.histogram = true; if (!hiddenSeries[series.alias]) { diff --git a/public/app/plugins/panel/graph/jquery.flot.events.ts b/public/app/plugins/panel/graph/jquery.flot.events.ts index a5d7f658ccf4c..ba4df3b2b9dcc 100644 --- a/public/app/plugins/panel/graph/jquery.flot.events.ts +++ b/public/app/plugins/panel/graph/jquery.flot.events.ts @@ -1,10 +1,12 @@ import angular from 'angular'; import $ from 'jquery'; import _ from 'lodash'; +//@ts-ignore import Drop from 'tether-drop'; +import { CreatePlotOverlay } from '@grafana/ui'; /** @ngInject */ -export function createAnnotationToolip(element, event, plot) { +const createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => { const injector = angular.element(document).injector(); const content = document.createElement('div'); content.innerHTML = ''; @@ -45,12 +47,12 @@ export function createAnnotationToolip(element, event, plot) { }); }, ]); -} +}; -let markerElementToAttachTo = null; +let markerElementToAttachTo: any = null; /** @ngInject */ -export function createEditPopover(element, event, plot) { +const createEditPopover: CreatePlotOverlay = (element, event, plot) => { const eventManager = plot.getOptions().events.manager; if (eventManager.editorOpen) { // update marker element to attach to (needed in case of legend on the right @@ -75,7 +77,7 @@ export function createEditPopover(element, event, plot) { '$rootScope', ($compile, $rootScope) => { const scope = $rootScope.$new(true); - let drop; + let drop: any; scope.event = event; scope.panelCtrl = eventManager.panelCtrl; @@ -111,7 +113,9 @@ export function createEditPopover(element, event, plot) { }, ]); }, 100); -} +}; + +export { createEditPopover, createAnnotationToolip }; /* * jquery.flot.events @@ -141,12 +145,21 @@ export class DrawableEvent { _height: any; /** @ngInject */ - constructor(object, drawFunc, clearFunc, moveFunc, left, top, width, height) { + constructor( + object: JQuery, + drawFunc: any, + clearFunc: any, + moveFunc: any, + left: number, + top: number, + width: number, + height: number + ) { this._object = object; this._drawFunc = drawFunc; this._clearFunc = clearFunc; this._moveFunc = moveFunc; - this._position = { left: left, top: top }; + this._position = { left, top }; this._width = width; this._height = height; } @@ -169,7 +182,7 @@ export class DrawableEvent { getObject() { return this._object; } - moveTo(position) { + moveTo(position: { left: number; top: number }) { this._position = position; this._moveFunc(this._object, this._position); } @@ -185,7 +198,7 @@ export class VisualEvent { _hidden: any; /** @ngInject */ - constructor(options, drawableEvent) { + constructor(options: any, drawableEvent: DrawableEvent) { this._options = options; this._drawableEvent = drawableEvent; this._hidden = false; @@ -221,7 +234,7 @@ export class EventMarkers { eventsEnabled: any; /** @ngInject */ - constructor(plot) { + constructor(plot: any) { this._events = []; this._types = []; this._plot = plot; @@ -232,14 +245,14 @@ export class EventMarkers { return this._events; } - setTypes(types) { + setTypes(types: any) { return (this._types = types); } /** * create internal objects for the given events */ - setupEvents(events) { + setupEvents(events: any[]) { const parts = _.partition(events, 'isRegion'); const regions = parts[0]; events = parts[1]; @@ -254,7 +267,7 @@ export class EventMarkers { this._events.push(vre); }); - this._events.sort((a, b) => { + this._events.sort((a: any, b: any) => { const ao = a.getOptions(), bo = b.getOptions(); if (ao.min > bo.min) { @@ -315,7 +328,7 @@ export class EventMarkers { /** * create a DOM element for the given event */ - _buildDiv(event) { + _buildDiv(event: { eventType: any; min: any; editModel: any }) { const that = this; const container = this._plot.getPlaceholder(); @@ -440,13 +453,13 @@ export class EventMarkers { const drawableEvent = new DrawableEvent( line, - function drawFunc(obj) { + function drawFunc(obj: { show: () => void }) { obj.show(); }, - obj => { + (obj: { remove: () => void }) => { obj.remove(); }, - (obj, position) => { + (obj: any, position: { top: any; left: any }) => { obj.css({ top: position.top, left: position.left, @@ -464,13 +477,19 @@ export class EventMarkers { /** * create a DOM element for the given region */ - _buildRegDiv(event) { + _buildRegDiv(event: { eventType: any; min: number; timeEnd: number; editModel: any }) { const that = this; const container = this._plot.getPlaceholder(); const o = this._plot.getPlotOffset(); const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; - let top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip; + let top, + left, + lineWidth: number, + regionWidth, + lineStyle: string | number | cssPropertySetter, + color: string, + markerTooltip; // map the eventType to a types object const eventTypeId = event.eventType; @@ -560,13 +579,13 @@ export class EventMarkers { const drawableEvent = new DrawableEvent( region, - function drawFunc(obj) { + function drawFunc(obj: { show: () => void }) { obj.show(); }, - obj => { + (obj: { remove: () => void }) => { obj.remove(); }, - (obj, position) => { + (obj: { css: (arg0: { top: any; left: any }) => void }, position: { top: any; left: any }) => { obj.css({ top: position.top, left: position.left, @@ -584,7 +603,7 @@ export class EventMarkers { /** * check if the event is inside visible range */ - _insidePlot(x) { + _insidePlot(x: any) { const xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1]; const xc = xaxis.p2c(x); return xc > 0 && xc < xaxis.p2c(xaxis.max); @@ -596,7 +615,7 @@ export class EventMarkers { */ /** @ngInject */ -export function init(this: any, plot) { +export function init(this: any, plot: any) { /*jshint validthis:true */ const that = this; const eventMarkers = new EventMarkers(plot); @@ -624,20 +643,20 @@ export function init(this: any, plot) { }; // change events on an existing plot - plot.setEvents = events => { + plot.setEvents = (events: any[]) => { if (eventMarkers.eventsEnabled) { eventMarkers.setupEvents(events); } }; - plot.hooks.processOptions.push((plot, options) => { + plot.hooks.processOptions.push((plot: any, options: any) => { // enable the plugin if (options.events.data != null) { eventMarkers.eventsEnabled = true; } }); - plot.hooks.draw.push(plot => { + plot.hooks.draw.push((plot: any) => { const options = plot.getOptions(); if (eventMarkers.eventsEnabled) { @@ -654,7 +673,7 @@ export function init(this: any, plot) { }); } -const defaultOptions = { +const defaultOptions: any = { events: { data: null, types: null, diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index cb54260d22b56..511593ed0c412 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -11,19 +11,22 @@ import { DataProcessor } from './data_processor'; import { axesEditorComponent } from './axes_editor'; import config from 'app/core/config'; import TimeSeries from 'app/core/time_series2'; -import { getColorFromHexRgbOrName, LegacyResponseData, SeriesData, DataLink, VariableSuggestion } from '@grafana/ui'; -import { getProcessedSeriesData } from 'app/features/dashboard/state/PanelQueryState'; +import { getColorFromHexRgbOrName, LegacyResponseData, DataFrame, DataLink, VariableSuggestion } from '@grafana/ui'; +import { getProcessedDataFrame } from 'app/features/dashboard/state/PanelQueryState'; import { PanelQueryRunnerFormat } from 'app/features/dashboard/state/PanelQueryRunner'; import { GraphContextMenuCtrl } from './GraphContextMenuCtrl'; import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv'; +import { auto } from 'angular'; +import { AnnotationsSrv } from 'app/features/annotations/all'; + class GraphCtrl extends MetricsPanelCtrl { static template = template; renderError: boolean; hiddenSeries: any = {}; seriesList: TimeSeries[] = []; - dataList: SeriesData[] = []; + dataList: DataFrame[] = []; annotations: any = []; alertState: any; @@ -35,7 +38,7 @@ class GraphCtrl extends MetricsPanelCtrl { contextMenuCtrl: GraphContextMenuCtrl; linkVariableSuggestions: VariableSuggestion[] = getDataLinksVariableSuggestions(); - panelDefaults = { + panelDefaults: any = { // datasource name, null = default datasource datasource: null, // sets client side (flot) or native graphite png renderer (png) @@ -130,7 +133,7 @@ class GraphCtrl extends MetricsPanelCtrl { }; /** @ngInject */ - constructor($scope, $injector, private annotationsSrv) { + constructor($scope: any, $injector: auto.IInjectorService, private annotationsSrv: AnnotationsSrv) { super($scope, $injector); _.defaults(this.panel, this.panelDefaults); @@ -162,12 +165,12 @@ class GraphCtrl extends MetricsPanelCtrl { this.subTabIndex = 0; } - onInitPanelActions(actions) { + onInitPanelActions(actions: any[]) { actions.push({ text: 'Export CSV', click: 'ctrl.exportCsv()' }); actions.push({ text: 'Toggle legend', click: 'ctrl.toggleLegend()', shortcut: 'p l' }); } - issueQueries(datasource) { + issueQueries(datasource: any) { this.annotationsPromise = this.annotationsSrv.getAnnotations({ dashboard: this.dashboard, panel: this.panel, @@ -180,16 +183,16 @@ class GraphCtrl extends MetricsPanelCtrl { * (but not wait for completion). This resolves * issue 11806. */ - return this.annotationsSrv.datasourcePromises.then(r => { + return this.annotationsSrv.datasourcePromises.then((r: any) => { return super.issueQueries(datasource); }); } - zoomOut(evt) { + zoomOut(evt: any) { this.publishAppEvent('zoom-out', 2); } - onDataSnapshotLoad(snapshotData) { + onDataSnapshotLoad(snapshotData: any) { this.annotationsPromise = this.annotationsSrv.getAnnotations({ dashboard: this.dashboard, panel: this.panel, @@ -198,7 +201,7 @@ class GraphCtrl extends MetricsPanelCtrl { this.onDataReceived(snapshotData); } - onDataError(err) { + onDataError(err: any) { this.seriesList = []; this.annotations = []; this.render([]); @@ -206,12 +209,12 @@ class GraphCtrl extends MetricsPanelCtrl { // This should only be called from the snapshot callback onDataReceived(dataList: LegacyResponseData[]) { - this.handleSeriesData(getProcessedSeriesData(dataList)); + this.handleDataFrame(getProcessedDataFrame(dataList)); } - // Directly support SeriesData skipping event callbacks - handleSeriesData(data: SeriesData[]) { - super.handleSeriesData(data); + // Directly support DataFrame skipping event callbacks + handleDataFrame(data: DataFrame[]) { + super.handleDataFrame(data); this.dataList = data; this.seriesList = this.processor.getSeriesList({ @@ -242,7 +245,7 @@ class GraphCtrl extends MetricsPanelCtrl { } this.annotationsPromise.then( - result => { + (result: { alertState: any; annotations: any }) => { this.loading = false; this.alertState = result.alertState; this.annotations = result.annotations; @@ -269,24 +272,24 @@ class GraphCtrl extends MetricsPanelCtrl { } } - onColorChange = (series, color) => { + onColorChange = (series: any, color: string) => { series.setColor(getColorFromHexRgbOrName(color, config.theme.type)); this.panel.aliasColors[series.alias] = color; this.render(); }; - onToggleSeries = hiddenSeries => { + onToggleSeries = (hiddenSeries: any) => { this.hiddenSeries = hiddenSeries; this.render(); }; - onToggleSort = (sortBy, sortDesc) => { + onToggleSort = (sortBy: any, sortDesc: any) => { this.panel.legend.sort = sortBy; this.panel.legend.sortDesc = sortDesc; this.render(); }; - onToggleAxis = info => { + onToggleAxis = (info: { alias: any; yaxis: any }) => { let override: any = _.find(this.panel.seriesOverrides, { alias: info.alias }); if (!override) { override = { alias: info.alias }; @@ -303,11 +306,11 @@ class GraphCtrl extends MetricsPanelCtrl { }); } - addSeriesOverride(override) { + addSeriesOverride(override: any) { this.panel.seriesOverrides.push(override || {}); } - removeSeriesOverride(override) { + removeSeriesOverride(override: any) { this.panel.seriesOverrides = _.without(this.panel.seriesOverrides, override); this.render(); } diff --git a/public/app/plugins/panel/graph/series_overrides_ctrl.ts b/public/app/plugins/panel/graph/series_overrides_ctrl.ts index fdb8f06c2701d..ecc504133c442 100644 --- a/public/app/plugins/panel/graph/series_overrides_ctrl.ts +++ b/public/app/plugins/panel/graph/series_overrides_ctrl.ts @@ -2,17 +2,17 @@ import _ from 'lodash'; import coreModule from 'app/core/core_module'; /** @ngInject */ -export function SeriesOverridesCtrl($scope, $element, popoverSrv) { +export function SeriesOverridesCtrl($scope: any, $element: JQuery, popoverSrv: any) { $scope.overrideMenu = []; $scope.currentOverrides = []; $scope.override = $scope.override || {}; - $scope.addOverrideOption = (name, propertyName, values) => { + $scope.addOverrideOption = (name: string, propertyName: string, values: any) => { const option = { text: name, propertyName: propertyName, index: $scope.overrideMenu.length, - values: values, + values, submenu: _.map(values, value => { return { text: String(value), value: value }; }), @@ -21,7 +21,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) { $scope.overrideMenu.push(option); }; - $scope.setOverride = (item, subItem) => { + $scope.setOverride = (item: { propertyName: string }, subItem: { value: any }) => { // handle color overrides if (item.propertyName === 'color') { $scope.openColorSelector($scope.override['color']); @@ -41,14 +41,14 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) { $scope.ctrl.render(); }; - $scope.colorSelected = color => { + $scope.colorSelected = (color: any) => { $scope.override['color'] = color; $scope.updateCurrentOverrides(); $scope.ctrl.render(); }; - $scope.openColorSelector = color => { - const fakeSeries = { color: color }; + $scope.openColorSelector = (color: any) => { + const fakeSeries = { color }; popoverSrv.show({ element: $element.find('.dropdown')[0], position: 'top center', @@ -67,7 +67,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) { }); }; - $scope.removeOverride = option => { + $scope.removeOverride = (option: { propertyName: string | number }) => { delete $scope.override[option.propertyName]; $scope.updateCurrentOverrides(); $scope.ctrl.refresh(); diff --git a/public/app/plugins/panel/graph/specs/data_processor.test.ts b/public/app/plugins/panel/graph/specs/data_processor.test.ts index d8b791bd38638..f76d34934c968 100644 --- a/public/app/plugins/panel/graph/specs/data_processor.test.ts +++ b/public/app/plugins/panel/graph/specs/data_processor.test.ts @@ -1,5 +1,5 @@ import { DataProcessor } from '../data_processor'; -import { getProcessedSeriesData } from 'app/features/dashboard/state/PanelQueryState'; +import { getProcessedDataFrame } from 'app/features/dashboard/state/PanelQueryState'; describe('Graph DataProcessor', () => { const panel: any = { @@ -11,7 +11,7 @@ describe('Graph DataProcessor', () => { describe('getTimeSeries from LegacyResponseData', () => { // Try each type of data - const dataList = getProcessedSeriesData([ + const dataList = getProcessedDataFrame([ { alias: 'First (time_series)', datapoints: [[1, 1001], [2, 1002], [3, 1003]], diff --git a/public/app/plugins/panel/graph/specs/graph.test.ts b/public/app/plugins/panel/graph/specs/graph.test.ts index f674213498492..5f09abecea557 100644 --- a/public/app/plugins/panel/graph/specs/graph.test.ts +++ b/public/app/plugins/panel/graph/specs/graph.test.ts @@ -29,7 +29,7 @@ import { graphDirective } from '../graph'; import { dateTime } from '@grafana/ui/src/utils/moment_wrapper'; const ctx = {} as any; -let ctrl; +let ctrl: any; const scope = { ctrl: {}, range: { @@ -41,7 +41,7 @@ const scope = { let link; describe('grafanaGraph', () => { - const setupCtx = (beforeRender?) => { + const setupCtx = (beforeRender?: any) => { config.bootData = { user: { lightTheme: false, @@ -110,15 +110,19 @@ describe('grafanaGraph', () => { }, { get: () => {}, - }, - {} + } as any, + {} as any ); // @ts-ignore $.plot = ctrl.plot = jest.fn(); scope.ctrl = ctrl; - link = graphDirective({}, {}, {}, {}).link(scope, { width: () => 500, mouseleave: () => {}, bind: () => {} }); + link = graphDirective({} as any, {}, {} as any, {} as any).link(scope, { + width: () => 500, + mouseleave: () => {}, + bind: () => {}, + } as any); if (typeof beforeRender === 'function') { beforeRender(); } @@ -555,9 +559,9 @@ describe('grafanaGraph', () => { }); it('should not contain values lower than min', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -576,9 +580,9 @@ describe('grafanaGraph', () => { }); it('should not contain values lower than zero', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -597,9 +601,9 @@ describe('grafanaGraph', () => { }); it('xaxis min should not affect the histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -618,9 +622,9 @@ describe('grafanaGraph', () => { }); it('xaxis min should not affect the histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -639,9 +643,9 @@ describe('grafanaGraph', () => { }); it('should not contain values greater than max', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(200); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200); }); }); @@ -660,9 +664,9 @@ describe('grafanaGraph', () => { }); it('should not contain values greater than zero', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(-100); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100); }); }); @@ -681,9 +685,9 @@ describe('grafanaGraph', () => { }); it('xaxis max should not affect the histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -702,9 +706,9 @@ describe('grafanaGraph', () => { }); it('xaxis max should not should node affect the histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(-100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(-100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -724,9 +728,9 @@ describe('grafanaGraph', () => { }); it('should not contain values lower than min and greater than max', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(200); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200); }); }); @@ -746,9 +750,9 @@ describe('grafanaGraph', () => { }); it('xaxis max should be ignored otherwise the bucketSize is zero', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -768,9 +772,9 @@ describe('grafanaGraph', () => { }); it('xaxis min and max should not affect the histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -790,9 +794,9 @@ describe('grafanaGraph', () => { }); it('xaxis min and max should not affect the histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -812,9 +816,9 @@ describe('grafanaGraph', () => { }); it('xaxis max should be ignored otherwise the bucketSize is negative', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(200); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(200); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -834,9 +838,9 @@ describe('grafanaGraph', () => { }); it('xaxis min should be ignored otherwise the bucketSize is negative', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -855,9 +859,9 @@ describe('grafanaGraph', () => { }); it('xaxis min should be ignored otherwise the bucketSize is zero', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -876,9 +880,9 @@ describe('grafanaGraph', () => { }); it('xaxis min should not affect the histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); @@ -897,9 +901,9 @@ describe('grafanaGraph', () => { }); it('should calculate correct histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(100); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); }); }); @@ -918,7 +922,7 @@ describe('grafanaGraph', () => { }); it('should calculate empty histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); expect(nonZero.length).toBe(0); }); }); @@ -938,9 +942,9 @@ describe('grafanaGraph', () => { }); it('should calculate correct histogram', () => { - const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0); - expect(Math.min.apply(Math, nonZero.map(t => t[0]))).toBe(100); - expect(Math.max.apply(Math, nonZero.map(t => t[0]))).toBe(300); + const nonZero = ctx.plotData[0].data.filter((t: number[]) => t[1] > 0); + expect(Math.min.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(100); + expect(Math.max.apply(Math, nonZero.map((t: number[]) => t[0]))).toBe(300); }); }); }); diff --git a/public/app/plugins/panel/graph/specs/graph_ctrl.test.ts b/public/app/plugins/panel/graph/specs/graph_ctrl.test.ts index 114d32eba4a71..1fe9a533b7572 100644 --- a/public/app/plugins/panel/graph/specs/graph_ctrl.test.ts +++ b/public/app/plugins/panel/graph/specs/graph_ctrl.test.ts @@ -33,7 +33,7 @@ describe('GraphCtrl', () => { const ctx = {} as any; beforeEach(() => { - ctx.ctrl = new GraphCtrl(scope, injector, {}); + ctx.ctrl = new GraphCtrl(scope, injector as any, {} as any); ctx.ctrl.events = { emit: () => {}, }; @@ -86,7 +86,7 @@ describe('GraphCtrl', () => { describe('datapointsCount given 2 series', () => { beforeEach(() => { - const data = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }]; + const data: any = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }]; ctx.ctrl.onDataReceived(data); }); diff --git a/public/app/plugins/panel/graph/specs/graph_tooltip.test.ts b/public/app/plugins/panel/graph/specs/graph_tooltip.test.ts index 00a3cf0dcf1cc..efd27b5e0858e 100644 --- a/public/app/plugins/panel/graph/specs/graph_tooltip.test.ts +++ b/public/app/plugins/panel/graph/specs/graph_tooltip.test.ts @@ -13,7 +13,7 @@ const elem = $('
      '); const dashboard = {}; const getSeriesFn = () => {}; -function describeSharedTooltip(desc, fn) { +function describeSharedTooltip(desc: string, fn: any) { const ctx: any = {}; ctx.ctrl = scope.ctrl; ctx.ctrl.panel = { @@ -24,13 +24,14 @@ function describeSharedTooltip(desc, fn) { stack: false, }; - ctx.setup = setupFn => { + ctx.setup = (setupFn: any) => { ctx.setupFn = setupFn; }; describe(desc, () => { beforeEach(() => { ctx.setupFn(); + // @ts-ignore const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn); ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos); }); @@ -40,6 +41,7 @@ function describeSharedTooltip(desc, fn) { } describe('findHoverIndexFromData', () => { + // @ts-ignore const tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn); const series = { data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]], @@ -66,7 +68,7 @@ describe('findHoverIndexFromData', () => { }); }); -describeSharedTooltip('steppedLine false, stack false', ctx => { +describeSharedTooltip('steppedLine false, stack false', (ctx: any) => { ctx.setup(() => { ctx.data = [ { data: [[10, 15], [12, 20]], lines: {}, hideTooltip: false }, @@ -90,14 +92,14 @@ describeSharedTooltip('steppedLine false, stack false', ctx => { }); }); -describeSharedTooltip('one series is hidden', ctx => { +describeSharedTooltip('one series is hidden', (ctx: any) => { ctx.setup(() => { ctx.data = [{ data: [[10, 15], [12, 20]] }, { data: [] }]; ctx.pos = { x: 11 }; }); }); -describeSharedTooltip('steppedLine false, stack true, individual false', ctx => { +describeSharedTooltip('steppedLine false, stack true, individual false', (ctx: any) => { ctx.setup(() => { ctx.data = [ { @@ -130,7 +132,7 @@ describeSharedTooltip('steppedLine false, stack true, individual false', ctx => }); }); -describeSharedTooltip('steppedLine false, stack true, individual false, series stack false', ctx => { +describeSharedTooltip('steppedLine false, stack true, individual false, series stack false', (ctx: any) => { ctx.setup(() => { ctx.data = [ { @@ -163,7 +165,7 @@ describeSharedTooltip('steppedLine false, stack true, individual false, series s }); }); -describeSharedTooltip('steppedLine false, stack true, individual true', ctx => { +describeSharedTooltip('steppedLine false, stack true, individual true', (ctx: any) => { ctx.setup(() => { ctx.data = [ { diff --git a/public/app/plugins/panel/graph/specs/histogram.test.ts b/public/app/plugins/panel/graph/specs/histogram.test.ts index d6b8527910bd3..7cb4e3e748327 100644 --- a/public/app/plugins/panel/graph/specs/histogram.test.ts +++ b/public/app/plugins/panel/graph/specs/histogram.test.ts @@ -2,7 +2,7 @@ import { convertValuesToHistogram, getSeriesValues } from '../histogram'; describe('Graph Histogam Converter', () => { describe('Values to histogram converter', () => { - let values; + let values: any; let bucketSize = 10; beforeEach(() => { @@ -27,7 +27,7 @@ describe('Graph Histogam Converter', () => { }); describe('Series to values converter', () => { - let data; + let data: any; beforeEach(() => { data = [ diff --git a/public/app/plugins/panel/graph/specs/series_override_ctrl.test.ts b/public/app/plugins/panel/graph/specs/series_override_ctrl.test.ts index 40b6c1ba5617f..0cee670a46164 100644 --- a/public/app/plugins/panel/graph/specs/series_override_ctrl.test.ts +++ b/public/app/plugins/panel/graph/specs/series_override_ctrl.test.ts @@ -3,7 +3,7 @@ import { SeriesOverridesCtrl } from '../series_overrides_ctrl'; describe('SeriesOverridesCtrl', () => { const popoverSrv = {}; - let $scope; + let $scope: any; beforeEach(() => { $scope = { @@ -14,7 +14,7 @@ describe('SeriesOverridesCtrl', () => { }, render: jest.fn(() => {}), }; - SeriesOverridesCtrl($scope, {}, popoverSrv); + SeriesOverridesCtrl($scope, {} as JQuery, popoverSrv); }); describe('When setting an override', () => { diff --git a/public/app/plugins/panel/graph/specs/threshold_manager.test.ts b/public/app/plugins/panel/graph/specs/threshold_manager.test.ts index bbeaf1b993ad2..c96471502d5ef 100644 --- a/public/app/plugins/panel/graph/specs/threshold_manager.test.ts +++ b/public/app/plugins/panel/graph/specs/threshold_manager.test.ts @@ -3,7 +3,7 @@ import TimeSeries from 'app/core/time_series2'; import { ThresholdManager } from '../threshold_manager'; describe('ThresholdManager', () => { - function plotOptionsScenario(desc, func) { + function plotOptionsScenario(desc: string, func: any) { describe(desc, () => { const ctx: any = { panel: { @@ -15,7 +15,7 @@ describe('ThresholdManager', () => { panelCtrl: {}, }; - ctx.setup = (thresholds, data) => { + ctx.setup = (thresholds: any, data: any) => { ctx.panel.thresholds = thresholds; const manager = new ThresholdManager(ctx.panelCtrl); if (data !== undefined) { @@ -30,7 +30,7 @@ describe('ThresholdManager', () => { } describe('When creating plot markings', () => { - plotOptionsScenario('for simple gt threshold', ctx => { + plotOptionsScenario('for simple gt threshold', (ctx: any) => { ctx.setup([{ op: 'gt', value: 300, fill: true, line: true, colorMode: 'critical' }]); it('should add fill for threshold with fill: true', () => { @@ -49,7 +49,7 @@ describe('ThresholdManager', () => { }); }); - plotOptionsScenario('for two gt thresholds', ctx => { + plotOptionsScenario('for two gt thresholds', (ctx: any) => { ctx.setup([ { op: 'gt', value: 200, fill: true, colorMode: 'warning' }, { op: 'gt', value: 300, fill: true, colorMode: 'critical' }, @@ -68,7 +68,7 @@ describe('ThresholdManager', () => { }); }); - plotOptionsScenario('for lt then gt threshold (inside)', ctx => { + plotOptionsScenario('for lt then gt threshold (inside)', (ctx: any) => { ctx.setup([ { op: 'lt', value: 300, fill: true, colorMode: 'critical' }, { op: 'gt', value: 200, fill: true, colorMode: 'critical' }, @@ -87,7 +87,7 @@ describe('ThresholdManager', () => { }); }); - plotOptionsScenario('for gt then lt threshold (outside)', ctx => { + plotOptionsScenario('for gt then lt threshold (outside)', (ctx: any) => { ctx.setup([ { op: 'gt', value: 300, fill: true, colorMode: 'critical' }, { op: 'lt', value: 200, fill: true, colorMode: 'critical' }, @@ -106,7 +106,7 @@ describe('ThresholdManager', () => { }); }); - plotOptionsScenario('for threshold on two Y axes', ctx => { + plotOptionsScenario('for threshold on two Y axes', (ctx: any) => { const data = new Array(2); data[0] = new TimeSeries({ datapoints: [[0, 1], [300, 2]], diff --git a/public/app/plugins/panel/graph/specs/time_region_manager.test.ts b/public/app/plugins/panel/graph/specs/time_region_manager.test.ts index 97d63bbb75a02..056efab99bca7 100644 --- a/public/app/plugins/panel/graph/specs/time_region_manager.test.ts +++ b/public/app/plugins/panel/graph/specs/time_region_manager.test.ts @@ -2,7 +2,7 @@ import { TimeRegionManager, colorModes } from '../time_region_manager'; import { dateTime } from '@grafana/ui/src/utils/moment_wrapper'; describe('TimeRegionManager', () => { - function plotOptionsScenario(desc, func) { + function plotOptionsScenario(desc: string, func: any) { describe(desc, () => { const ctx: any = { panel: { @@ -19,7 +19,7 @@ describe('TimeRegionManager', () => { }, }; - ctx.setup = (regions, from, to) => { + ctx.setup = (regions: any, from: any, to: any) => { ctx.panel.timeRegions = regions; ctx.panelCtrl.range.from = from; ctx.panelCtrl.range.to = to; @@ -46,7 +46,7 @@ describe('TimeRegionManager', () => { } describe('When colors missing in config', () => { - plotOptionsScenario('should not throw an error when fillColor is undefined', ctx => { + plotOptionsScenario('should not throw an error when fillColor is undefined', (ctx: any) => { const regions = [ { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, lineColor: '#ffffff', colorMode: 'custom' }, ]; @@ -54,7 +54,7 @@ describe('TimeRegionManager', () => { const to = dateTime('2018-01-01T23:59:00+01:00'); expect(() => ctx.setup(regions, from, to)).not.toThrow(); }); - plotOptionsScenario('should not throw an error when lineColor is undefined', ctx => { + plotOptionsScenario('should not throw an error when lineColor is undefined', (ctx: any) => { const regions = [ { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, fillColor: '#ffffff', line: true, colorMode: 'custom' }, ]; @@ -65,7 +65,7 @@ describe('TimeRegionManager', () => { }); describe('When creating plot markings using local time', () => { - plotOptionsScenario('for day of week region', ctx => { + plotOptionsScenario('for day of week region', (ctx: any) => { const regions = [{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, colorMode: 'red' }]; const from = dateTime('2018-01-01T00:00:00+01:00'); const to = dateTime('2018-01-01T23:59:00+01:00'); @@ -97,7 +97,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for time from region', ctx => { + plotOptionsScenario('for time from region', (ctx: any) => { const regions = [{ from: '05:00', fill: true, colorMode: 'red' }]; const from = dateTime('2018-01-01T00:00+01:00'); const to = dateTime('2018-01-03T23:59+01:00'); @@ -124,7 +124,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for time to region', ctx => { + plotOptionsScenario('for time to region', (ctx: any) => { const regions = [{ to: '05:00', fill: true, colorMode: 'red' }]; const from = dateTime('2018-02-01T00:00+01:00'); const to = dateTime('2018-02-03T23:59+01:00'); @@ -151,7 +151,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for time from/to region', ctx => { + plotOptionsScenario('for time from/to region', (ctx: any) => { const regions = [{ from: '00:00', to: '05:00', fill: true, colorMode: 'red' }]; const from = dateTime('2018-12-01T00:00+01:00'); const to = dateTime('2018-12-03T23:59+01:00'); @@ -178,7 +178,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for time from/to region crossing midnight', ctx => { + plotOptionsScenario('for time from/to region crossing midnight', (ctx: any) => { const regions = [{ from: '22:00', to: '00:30', fill: true, colorMode: 'red' }]; const from = dateTime('2018-12-01T12:00+01:00'); const to = dateTime('2018-12-04T08:00+01:00'); @@ -205,7 +205,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for day of week from/to region', ctx => { + plotOptionsScenario('for day of week from/to region', (ctx: any) => { const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }]; const from = dateTime('2018-01-01T18:45:05+01:00'); const to = dateTime('2018-01-22T08:27:00+01:00'); @@ -232,7 +232,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for day of week from region', ctx => { + plotOptionsScenario('for day of week from region', (ctx: any) => { const regions = [{ fromDayOfWeek: 7, fill: true, colorMode: 'red' }]; const from = dateTime('2018-01-01T18:45:05+01:00'); const to = dateTime('2018-01-22T08:27:00+01:00'); @@ -259,7 +259,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for day of week to region', ctx => { + plotOptionsScenario('for day of week to region', (ctx: any) => { const regions = [{ toDayOfWeek: 7, fill: true, colorMode: 'red' }]; const from = dateTime('2018-01-01T18:45:05+01:00'); const to = dateTime('2018-01-22T08:27:00+01:00'); @@ -286,7 +286,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for day of week from/to time region', ctx => { + plotOptionsScenario('for day of week from/to time region', (ctx: any) => { const regions = [{ fromDayOfWeek: 7, from: '23:00', toDayOfWeek: 1, to: '01:40', fill: true, colorMode: 'red' }]; const from = dateTime('2018-12-07T12:51:19+01:00'); const to = dateTime('2018-12-10T13:51:29+01:00'); @@ -304,7 +304,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for day of week from/to time region', ctx => { + plotOptionsScenario('for day of week from/to time region', (ctx: any) => { const regions = [{ fromDayOfWeek: 6, from: '03:00', toDayOfWeek: 7, to: '02:00', fill: true, colorMode: 'red' }]; const from = dateTime('2018-12-07T12:51:19+01:00'); const to = dateTime('2018-12-10T13:51:29+01:00'); @@ -322,7 +322,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for day of week from/to time region with daylight saving time', ctx => { + plotOptionsScenario('for day of week from/to time region with daylight saving time', (ctx: any) => { const regions = [{ fromDayOfWeek: 7, from: '20:00', toDayOfWeek: 7, to: '23:00', fill: true, colorMode: 'red' }]; const from = dateTime('2018-03-17T06:00:00+01:00'); const to = dateTime('2018-04-03T06:00:00+02:00'); @@ -346,7 +346,7 @@ describe('TimeRegionManager', () => { }); }); - plotOptionsScenario('for each day of week with winter time', ctx => { + plotOptionsScenario('for each day of week with winter time', (ctx: any) => { const regions = [{ fromDayOfWeek: 7, toDayOfWeek: 7, fill: true, colorMode: 'red' }]; const from = dateTime('2018-10-20T14:50:11+02:00'); const to = dateTime('2018-11-07T12:56:23+01:00'); diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts index 08acd88755981..7943981fa77ee 100644 --- a/public/app/plugins/panel/graph/thresholds_form.ts +++ b/public/app/plugins/panel/graph/thresholds_form.ts @@ -7,7 +7,7 @@ export class ThresholdFormCtrl { disabled: boolean; /** @ngInject */ - constructor($scope) { + constructor($scope: any) { this.panel = this.panelCtrl.panel; if (this.panel.alert) { @@ -35,7 +35,7 @@ export class ThresholdFormCtrl { this.panelCtrl.render(); } - removeThreshold(index) { + removeThreshold(index: number) { this.panel.thresholds.splice(index, 1); this.panelCtrl.render(); } @@ -44,21 +44,21 @@ export class ThresholdFormCtrl { this.panelCtrl.render(); } - onFillColorChange(index) { - return newColor => { + onFillColorChange(index: number) { + return (newColor: string) => { this.panel.thresholds[index].fillColor = newColor; this.render(); }; } - onLineColorChange(index) { - return newColor => { + onLineColorChange(index: number) { + return (newColor: string) => { this.panel.thresholds[index].lineColor = newColor; this.render(); }; } - onThresholdTypeChange(index) { + onThresholdTypeChange(index: number) { // Because of the ng-model binding, threshold's color mode is already set here if (this.panel.thresholds[index].colorMode === 'custom') { this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase) diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 8380d6383ac84..5056ab013ee8c 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -319,19 +319,19 @@ export class HeatmapCtrl extends MetricsPanelCtrl { this.render(); } - seriesHandler(seriesData: any) { - if (seriesData.datapoints === undefined) { + seriesHandler(dataFrame: any) { + if (dataFrame.datapoints === undefined) { throw new Error('Heatmap error: data should be a time series'); } const series = new TimeSeries({ - datapoints: seriesData.datapoints, - alias: seriesData.target, + datapoints: dataFrame.datapoints, + alias: dataFrame.target, }); series.flotpairs = series.getFlotPairs(this.panel.nullPointMode); - const datapoints = seriesData.datapoints || []; + const datapoints = dataFrame.datapoints || []; if (datapoints && datapoints.length > 0) { const last = datapoints[datapoints.length - 1][1]; const from = this.range.from; diff --git a/public/app/plugins/panel/heatmap/specs/heatmap_ctrl.test.ts b/public/app/plugins/panel/heatmap/specs/heatmap_ctrl.test.ts index a9f33b7e392a9..b30b4a6fb165d 100644 --- a/public/app/plugins/panel/heatmap/specs/heatmap_ctrl.test.ts +++ b/public/app/plugins/panel/heatmap/specs/heatmap_ctrl.test.ts @@ -27,7 +27,7 @@ describe('HeatmapCtrl', () => { describe('when time series are outside range', () => { beforeEach(() => { - const data = [ + const data: any = [ { target: 'test.cpu1', datapoints: [[45, 1234567890], [60, 1234567899]], @@ -52,7 +52,7 @@ describe('HeatmapCtrl', () => { to: dateTime().valueOf(), }; - const data = [ + const data: any = [ { target: 'test.cpu1', datapoints: [[45, range.from + 1000], [60, range.from + 10000]], @@ -70,7 +70,7 @@ describe('HeatmapCtrl', () => { describe('datapointsCount given 2 series', () => { beforeEach(() => { - const data = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }]; + const data: any = [{ target: 'test.cpu1', datapoints: [] }, { target: 'test.cpu2', datapoints: [] }]; ctx.ctrl.onDataReceived(data); }); diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 0d0f695ee945e..937ece9cad219 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -140,10 +140,10 @@ class SingleStatCtrl extends MetricsPanelCtrl { this.render(); } - seriesHandler(seriesData: any) { + seriesHandler(dataFrame: any) { const series = new TimeSeries({ - datapoints: seriesData.datapoints || [], - alias: seriesData.target, + datapoints: dataFrame.datapoints || [], + alias: dataFrame.target, }); series.flotpairs = series.getFlotPairs(this.panel.nullPointMode); diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index 24f396918d606..30c5e3960f97c 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/public/app/plugins/panel/table/module.ts @@ -17,7 +17,7 @@ class TablePanelCtrl extends MetricsPanelCtrl { table: any; renderer: any; - panelDefaults = { + panelDefaults: any = { targets: [{}], transform: 'timeseries_to_columns', pageSize: null, @@ -180,7 +180,7 @@ class TablePanelCtrl extends MetricsPanelCtrl { } link(scope: any, elem: JQuery, attrs: any, ctrl: TablePanelCtrl) { - let data; + let data: any; const panel = ctrl.panel; let pageCount = 0; @@ -194,19 +194,19 @@ class TablePanelCtrl extends MetricsPanelCtrl { return panelHeight - 31 + 'px'; } - function appendTableRows(tbodyElem) { + function appendTableRows(tbodyElem: JQuery) { ctrl.renderer.setTable(data); tbodyElem.empty(); tbodyElem.html(ctrl.renderer.render(ctrl.pageIndex)); } - function switchPage(e) { + function switchPage(e: any) { const el = $(e.currentTarget); ctrl.pageIndex = parseInt(el.text(), 10) - 1; renderPanel(); } - function appendPaginationControls(footerElem) { + function appendPaginationControls(footerElem: JQuery) { footerElem.empty(); const pageSize = panel.pageSize || 100; @@ -251,7 +251,7 @@ class TablePanelCtrl extends MetricsPanelCtrl { selector: '[data-link-tooltip]', }); - function addFilterClicked(e) { + function addFilterClicked(e: any) { const filterData = $(e.currentTarget).data(); const options = { datasource: panel.datasource, @@ -272,7 +272,7 @@ class TablePanelCtrl extends MetricsPanelCtrl { unbindDestroy(); }); - ctrl.events.on('render', renderData => { + ctrl.events.on('render', (renderData: any) => { data = renderData || data; if (data) { renderPanel(); diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index 8916b8135155f..5a7dba332f228 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/public/app/plugins/panel/text/module.ts @@ -1,10 +1,11 @@ import _ from 'lodash'; import { PanelCtrl } from 'app/plugins/sdk'; -import Remarkable from 'remarkable'; + import { sanitize, escapeHtml } from 'app/core/utils/text'; import config from 'app/core/config'; import { auto, ISCEService } from 'angular'; import { TemplateSrv } from 'app/features/templating/template_srv'; +import { renderMarkdown } from '@grafana/data'; const defaultContent = ` # Title @@ -19,7 +20,6 @@ export class TextPanelCtrl extends PanelCtrl { static templateUrl = `public/app/plugins/panel/text/module.html`; static scrollable = true; - remarkable: any; content: string; // Set and populate defaults panelDefaults = { @@ -82,12 +82,8 @@ export class TextPanelCtrl extends PanelCtrl { } renderMarkdown(content: string) { - if (!this.remarkable) { - this.remarkable = new Remarkable(); - } - this.$scope.$applyAsync(() => { - this.updateContent(this.remarkable.render(content)); + this.updateContent(renderMarkdown(content)); }); } diff --git a/public/app/plugins/panel/text2/TextPanel.tsx b/public/app/plugins/panel/text2/TextPanel.tsx index 6f29cc08392bc..bc15509c5cc9f 100644 --- a/public/app/plugins/panel/text2/TextPanel.tsx +++ b/public/app/plugins/panel/text2/TextPanel.tsx @@ -1,7 +1,7 @@ // Libraries import React, { PureComponent } from 'react'; -import Remarkable from 'remarkable'; import { debounce } from 'lodash'; +import { renderMarkdown } from '@grafana/data'; // Utils import { sanitize } from 'app/core/utils/text'; @@ -17,8 +17,6 @@ interface State { } export class TextPanel extends PureComponent { - remarkable: Remarkable; - constructor(props: Props) { super(props); @@ -59,10 +57,7 @@ export class TextPanel extends PureComponent { } prepareMarkdown(content: string): string { - if (!this.remarkable) { - this.remarkable = new Remarkable(); - } - return this.prepareHTML(this.remarkable.render(content)); + return this.prepareHTML(renderMarkdown(content)); } processContent(options: TextOptions): string { diff --git a/public/app/routes/GrafanaCtrl.ts b/public/app/routes/GrafanaCtrl.ts index 6d19399d30b0b..1806c16fd052c 100644 --- a/public/app/routes/GrafanaCtrl.ts +++ b/public/app/routes/GrafanaCtrl.ts @@ -1,6 +1,7 @@ // Libraries import _ from 'lodash'; import $ from 'jquery'; +// @ts-ignore import Drop from 'tether-drop'; // Utils and servies @@ -287,28 +288,6 @@ export function grafanaAppDirective( if (popover.length > 0 && target.parents('.graph-legend').length === 0) { popover.hide(); } - - // hide time picker - const timePickerDropDownIsOpen = elem.find('.gf-timepicker-dropdown').length > 0; - if (timePickerDropDownIsOpen) { - const targetIsInTimePickerDropDown = target.parents('.gf-timepicker-dropdown').length > 0; - const targetIsInTimePickerNav = target.parents('.gf-timepicker-nav').length > 0; - const targetIsDatePickerRowBtn = target.parents('td[id^="datepicker-"]').length > 0; - const targetIsDatePickerHeaderBtn = target.parents('button[id^="datepicker-"]').length > 0; - - if ( - targetIsInTimePickerNav || - targetIsInTimePickerDropDown || - targetIsDatePickerRowBtn || - targetIsDatePickerHeaderBtn - ) { - return; - } - - scope.$apply(() => { - scope.appEvent('closeTimepicker'); - }); - } }); }, }; diff --git a/public/app/routes/registry.ts b/public/app/routes/registry.ts index 19699ca738bb8..072bb0cad0f3f 100644 --- a/public/app/routes/registry.ts +++ b/public/app/routes/registry.ts @@ -1,10 +1,12 @@ +import { route } from 'angular'; + interface RegisterRoutesHandler { - ($routeProvider): any; + ($routeProvider: route.IRouteProvider): any; } const handlers: RegisterRoutesHandler[] = []; -export function applyRouteRegistrationHandlers($routeProvider) { +export function applyRouteRegistrationHandlers($routeProvider: route.IRouteProvider) { for (const handler of handlers) { handler($routeProvider); } diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts index 2c4ad840271d3..6b3c3dafcbc14 100644 --- a/public/app/store/configureStore.ts +++ b/public/app/store/configureStore.ts @@ -36,6 +36,7 @@ import { DateTime, toUtc, dateTime, + AbsoluteTimeRange, } from '@grafana/ui'; import { Observable } from 'rxjs'; import { getQueryResponse } from 'app/core/utils/explore'; @@ -46,6 +47,7 @@ import { TimeSrv, getTimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { UserState } from 'app/types/user'; import { getTimeRange } from 'app/core/utils/explore'; import { getTimeZone } from 'app/features/profile/state/selectors'; +import { getShiftedTimeRange } from 'app/core/utils/timePicker'; const rootReducers = { ...sharedReducers, @@ -87,6 +89,7 @@ export interface EpicDependencies { getTimeZone: (state: UserState) => TimeZone; toUtc: (input?: DateTimeInput, formatInput?: FormatInput) => DateTime; dateTime: (input?: DateTimeInput, formatInput?: FormatInput) => DateTime; + getShiftedTimeRange: (direction: number, origRange: TimeRange, timeZone: TimeZone) => AbsoluteTimeRange; } const dependencies: EpicDependencies = { @@ -96,6 +99,7 @@ const dependencies: EpicDependencies = { getTimeZone, toUtc, dateTime, + getShiftedTimeRange, }; const epicMiddleware = createEpicMiddleware({ dependencies }); diff --git a/public/app/store/store.ts b/public/app/store/store.ts index c8134ae77f3b1..56985c5a404c1 100644 --- a/public/app/store/store.ts +++ b/public/app/store/store.ts @@ -1,5 +1,5 @@ -export let store; +export let store: any; -export function setStore(newStore) { +export function setStore(newStore: any) { store = newStore; } diff --git a/public/app/types/apiKeys.ts b/public/app/types/apiKeys.ts index 6cf92011c69d0..4df2ebd41e81b 100644 --- a/public/app/types/apiKeys.ts +++ b/public/app/types/apiKeys.ts @@ -4,11 +4,14 @@ export interface ApiKey { id: number; name: string; role: OrgRole; + secondsToLive: number; + expiration: string; } export interface NewApiKey { name: string; role: OrgRole; + secondsToLive: number; } export interface ApiKeysState { diff --git a/public/app/types/explore.ts b/public/app/types/explore.ts index e57810b6658a9..2ca3fa99b8d67 100644 --- a/public/app/types/explore.ts +++ b/public/app/types/explore.ts @@ -192,10 +192,6 @@ export interface ExploreItemState { range: TimeRange; absoluteRange: AbsoluteTimeRange; - /** - * Scanner function that calculates a new range, triggers a query run, and returns the new range. - */ - scanner?: RangeScanner; /** * True if scanning for more results is active. */ @@ -261,6 +257,7 @@ export interface ExploreUpdateState { datasource: boolean; queries: boolean; range: boolean; + mode: boolean; ui: boolean; } @@ -274,6 +271,7 @@ export interface ExploreUIState { export interface ExploreUrlState { datasource: string; queries: any[]; // Should be a DataQuery, but we're going to strip refIds, so typing makes less sense + mode: ExploreMode; range: RawTimeRange; ui: ExploreUIState; } @@ -332,8 +330,6 @@ export interface QueryTransaction { scanning?: boolean; } -export type RangeScanner = () => RawTimeRange; - export interface TextMatch { text: string; start: number; diff --git a/public/e2e-test/core/pages.ts b/public/e2e-test/core/pages.ts index 7e2d4ba619270..48124f61d30ab 100644 --- a/public/e2e-test/core/pages.ts +++ b/public/e2e-test/core/pages.ts @@ -49,6 +49,7 @@ export class TestPage implements TestPageType { } Object.keys(this.pageObjects).forEach(key => { + // @ts-ignore const pageObject: PageObject = this.pageObjects[key]; pageObject.init(page); }); diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 16618da6486cd..c94d6b7de70cf 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -2,7 +2,6 @@ @import '../../node_modules/react-table/react-table.css'; // VENDOR -@import '../vendor/css/timepicker.css'; @import '../vendor/css/rc-cascader.scss'; // MIXINS @@ -67,7 +66,6 @@ @import 'components/gf-form'; @import 'components/sidemenu'; @import 'components/navbar'; -@import 'components/timepicker'; @import 'components/filter-controls'; @import 'components/filter-list'; @import 'components/filter-table'; diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index cfe74d03bb1d3..55423fe1f7255 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -6,10 +6,6 @@ max-width: 200px; } -.gf-timepicker-nav-btn { - max-width: 120px; -} - .navbar-buttons--tv, .navbar-buttons--actions { display: none; @@ -30,9 +26,6 @@ .navbar-page-btn { max-width: 250px; } - .gf-timepicker-nav-btn { - max-width: 200px; - } } @include media-breakpoint-up(md) { @@ -43,9 +36,6 @@ .navbar-page-btn { max-width: 325px; } - .gf-timepicker-nav-btn { - max-width: 240px; - } } @include media-breakpoint-up(lg) { @@ -55,9 +45,6 @@ .navbar-page-btn { max-width: 450px; } - .gf-timepicker-nav-btn { - max-width: none; - } } @include media-breakpoint-up(xl) { diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 8ef586b72f949..09f87e7d8ecbc 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -174,7 +174,6 @@ $zindex-tooltip: 1030; $zindex-modal-backdrop: 1040; $zindex-modal: 1050; $zindex-typeahead: 1060; -$zindex-timepicker-popover: 1070; // Buttons // diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 434ecbacb1e44..128a1e6246674 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -35,7 +35,7 @@ .navbar-button--settings, .navbar-page-btn .fa-caret-down, .refresh-picker, - .gf-timepicker-nav { + .time-picker { display: none; } diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss index b0156ce9ceeea..62e9850b7c0a8 100644 --- a/public/sass/components/_panel_logs.scss +++ b/public/sass/components/_panel_logs.scss @@ -81,11 +81,6 @@ $column-horizontal-spacing: 10px; } } -.logs-row__time { - white-space: nowrap; - width: 19em; -} - .logs-row__localtime { white-space: nowrap; width: 12.5em; diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss deleted file mode 100644 index d25d85b3d742c..0000000000000 --- a/public/sass/components/_timepicker.scss +++ /dev/null @@ -1,151 +0,0 @@ -.timepicker-timestring { - font-weight: normal; -} - -.gf-timepicker-nav { - flex-wrap: nowrap; - display: flex; -} - -.gf-timepicker-nav-btn { - text-overflow: ellipsis; - overflow: hidden; - - .fa-clock-o { - margin-right: 4px; - } -} - -.gf-timepicker-dropdown { - background-color: $page-bg; - border-radius: 0 0 0 4px; - box-shadow: $search-shadow; - z-index: $zindex-dropdown; - display: flex; - flex-direction: column; - position: absolute; - left: 20px; - right: 20px; - top: $navbarHeight; - - @include media-breakpoint-up(md) { - left: auto; - width: 550px; - } - - .popover-box { - max-width: 100%; - - &:first-child { - border-radius: $border-radius $border-radius 0 0; - border-bottom: 0; - } - - &:last-child { - border-radius: 0 0 $border-radius $border-radius; - } - } -} - -.gf-timepicker-btn-apply { - margin: 0 0 0 15px; -} - -.gf-timepicker-utc { - color: $orange; - font-size: 75%; - padding: 3px; - border-radius: 2px; - font-weight: 500; - margin-left: 4px; -} - -.gf-timepicker-relative-section { - min-height: 237px; - float: left; - - ul { - list-style: none; - float: left; - margin: 0 30px 10px 0px; - - li { - line-height: 22px; - } - - li.active { - border-bottom: 1px solid $blue; - margin: 3px 0; - font-weight: 500; - } - } -} - -.gf-timepicker-component { - padding: $spacer/2 0 $spacer 0; - - td { - padding: 1px; - } - - button { - @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl); - background-image: none; - border: none; - color: $text-color; - - &.active span { - color: $blue; - font-weight: bold; - } - - .text-info { - color: $orange; - font-weight: bold; - } - - &.btn-sm { - font-size: $font-size-sm; - padding: 5px 11px; - } - - &:hover { - color: $text-color-strong; - } - - &[disabled] { - color: $text-color; - } - } -} - -.input-datetime-format { - color: $link-color-disabled; -} - -.fa { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.fa-chevron-left::before { - content: '\f053'; -} - -.fa-chevron-right::before { - content: '\f054'; -} - -.glyphicon-chevron-right { - @extend .fa; - @extend .fa-chevron-right; -} - -.glyphicon-chevron-left { - @extend .fa; - @extend .fa-chevron-left; -} diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index c06af5864c76c..a3c6b12351a52 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -10,14 +10,6 @@ transform: rotate(90deg); } -.timepicker { - display: flex; -} - -.timepicker-rangestring { - margin-left: 0.5em; -} - .datasource-picker { .ds-picker { min-width: 200px; @@ -91,10 +83,11 @@ display: flex; flex-flow: row wrap; align-items: center; - justify-content: space-between; + justify-content: flex-end; } .explore-toolbar-content-item { + display: flex; padding: 10px 2px; } diff --git a/public/test/core/redux/epicTester.ts b/public/test/core/redux/epicTester.ts index 6da44bfe2cfe5..7b5f0a47b76ea 100644 --- a/public/test/core/redux/epicTester.ts +++ b/public/test/core/redux/epicTester.ts @@ -17,6 +17,8 @@ import { EpicDependencies } from 'app/store/configureStore'; import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { DEFAULT_RANGE } from 'app/core/utils/explore'; +export const MOCKED_ABSOLUTE_RANGE = { from: 1, to: 2 }; + export const epicTester = ( epic: Epic, ActionOf, StoreState, EpicDependencies>, state?: Partial, @@ -48,6 +50,8 @@ export const epicTester = ( const getTimeRange = jest.fn().mockReturnValue(DEFAULT_RANGE); + const getShiftedTimeRange = jest.fn().mockReturnValue(MOCKED_ABSOLUTE_RANGE); + const getTimeZone = jest.fn().mockReturnValue(DefaultTimeZone); const toUtc = jest.fn().mockReturnValue(null); @@ -61,6 +65,7 @@ export const epicTester = ( getTimeZone, toUtc, dateTime, + getShiftedTimeRange, }; const theDependencies: EpicDependencies = { ...defaultDependencies, ...dependencies }; @@ -106,6 +111,7 @@ export const epicTester = ( }; const getDependencyMock = (dependency: string, method?: string) => { + // @ts-ignore const dep = theDependencies[dependency]; let mock = null; if (dep instanceof Function) { diff --git a/public/vendor/angular-ui/ui-bootstrap-tpls.js b/public/vendor/angular-ui/ui-bootstrap-tpls.js deleted file mode 100644 index ad6f3b4b4bc22..0000000000000 --- a/public/vendor/angular-ui/ui-bootstrap-tpls.js +++ /dev/null @@ -1,1274 +0,0 @@ -/* - * angular-ui-bootstrap - * http://angular-ui.github.io/bootstrap/ - - * Version: 0.13.4 - 2015-09-03 - * License: MIT - */ -angular.module("ui.bootstrap", ["ui.bootstrap.tpls","ui.bootstrap.position","ui.bootstrap.dateparser","ui.bootstrap.datepicker"]); -angular.module("ui.bootstrap.tpls", ["template/datepicker/datepicker.html","template/datepicker/day.html","template/datepicker/month.html","template/datepicker/popup.html","template/datepicker/year.html"]); -angular.module('ui.bootstrap.position', []) - -/** - * A set of utility methods that can be use to retrieve position of DOM elements. - * It is meant to be used where we need to absolute-position DOM elements in - * relation to other, existing elements (this is the case for tooltips, popovers, - * typeahead suggestions etc.). - */ - .factory('$position', ['$document', '$window', function($document, $window) { - function getStyle(el, cssprop) { - if (el.currentStyle) { //IE - return el.currentStyle[cssprop]; - } else if ($window.getComputedStyle) { - return $window.getComputedStyle(el)[cssprop]; - } - // finally try and get inline style - return el.style[cssprop]; - } - - /** - * Checks if a given element is statically positioned - * @param element - raw DOM element - */ - function isStaticPositioned(element) { - return (getStyle(element, 'position') || 'static' ) === 'static'; - } - - /** - * returns the closest, non-statically positioned parentOffset of a given element - * @param element - */ - var parentOffsetEl = function(element) { - var docDomEl = $document[0]; - var offsetParent = element.offsetParent || docDomEl; - while (offsetParent && offsetParent !== docDomEl && isStaticPositioned(offsetParent) ) { - offsetParent = offsetParent.offsetParent; - } - return offsetParent || docDomEl; - }; - - return { - /** - * Provides read-only equivalent of jQuery's position function: - * http://api.jquery.com/position/ - */ - position: function(element) { - var elBCR = this.offset(element); - var offsetParentBCR = { top: 0, left: 0 }; - var offsetParentEl = parentOffsetEl(element[0]); - if (offsetParentEl != $document[0]) { - offsetParentBCR = this.offset(angular.element(offsetParentEl)); - offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; - offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; - } - - var boundingClientRect = element[0].getBoundingClientRect(); - return { - width: boundingClientRect.width || element.prop('offsetWidth'), - height: boundingClientRect.height || element.prop('offsetHeight'), - top: elBCR.top - offsetParentBCR.top, - left: elBCR.left - offsetParentBCR.left - }; - }, - - /** - * Provides read-only equivalent of jQuery's offset function: - * http://api.jquery.com/offset/ - */ - offset: function(element) { - var boundingClientRect = element[0].getBoundingClientRect(); - return { - width: boundingClientRect.width || element.prop('offsetWidth'), - height: boundingClientRect.height || element.prop('offsetHeight'), - top: boundingClientRect.top + ($window.pageYOffset || $document[0].documentElement.scrollTop), - left: boundingClientRect.left + ($window.pageXOffset || $document[0].documentElement.scrollLeft) - }; - }, - - /** - * Provides coordinates for the targetEl in relation to hostEl - */ - positionElements: function(hostEl, targetEl, positionStr, appendToBody) { - var positionStrParts = positionStr.split('-'); - var pos0 = positionStrParts[0], pos1 = positionStrParts[1] || 'center'; - - var hostElPos, - targetElWidth, - targetElHeight, - targetElPos; - - hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); - - targetElWidth = targetEl.prop('offsetWidth'); - targetElHeight = targetEl.prop('offsetHeight'); - - var shiftWidth = { - center: function() { - return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; - }, - left: function() { - return hostElPos.left; - }, - right: function() { - return hostElPos.left + hostElPos.width; - } - }; - - var shiftHeight = { - center: function() { - return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; - }, - top: function() { - return hostElPos.top; - }, - bottom: function() { - return hostElPos.top + hostElPos.height; - } - }; - - switch (pos0) { - case 'right': - targetElPos = { - top: shiftHeight[pos1](), - left: shiftWidth[pos0]() - }; - break; - case 'left': - targetElPos = { - top: shiftHeight[pos1](), - left: hostElPos.left - targetElWidth - }; - break; - case 'bottom': - targetElPos = { - top: shiftHeight[pos0](), - left: shiftWidth[pos1]() - }; - break; - default: - targetElPos = { - top: hostElPos.top - targetElHeight, - left: shiftWidth[pos1]() - }; - break; - } - - return targetElPos; - } - }; - }]); - -angular.module('ui.bootstrap.dateparser', []) - -.service('dateParser', ['$log', '$locale', 'orderByFilter', function($log, $locale, orderByFilter) { - // Pulled from https://github.com/mbostock/d3/blob/master/src/format/requote.js - var SPECIAL_CHARACTERS_REGEXP = /[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g; - - this.parsers = {}; - - var formatCodeToRegex = { - 'yyyy': { - regex: '\\d{4}', - apply: function(value) { this.year = +value; } - }, - 'yy': { - regex: '\\d{2}', - apply: function(value) { this.year = +value + 2000; } - }, - 'y': { - regex: '\\d{1,4}', - apply: function(value) { this.year = +value; } - }, - 'MMMM': { - regex: $locale.DATETIME_FORMATS.MONTH.join('|'), - apply: function(value) { this.month = $locale.DATETIME_FORMATS.MONTH.indexOf(value); } - }, - 'MMM': { - regex: $locale.DATETIME_FORMATS.SHORTMONTH.join('|'), - apply: function(value) { this.month = $locale.DATETIME_FORMATS.SHORTMONTH.indexOf(value); } - }, - 'MM': { - regex: '0[1-9]|1[0-2]', - apply: function(value) { this.month = value - 1; } - }, - 'M': { - regex: '[1-9]|1[0-2]', - apply: function(value) { this.month = value - 1; } - }, - 'dd': { - regex: '[0-2][0-9]{1}|3[0-1]{1}', - apply: function(value) { this.date = +value; } - }, - 'd': { - regex: '[1-2]?[0-9]{1}|3[0-1]{1}', - apply: function(value) { this.date = +value; } - }, - 'EEEE': { - regex: $locale.DATETIME_FORMATS.DAY.join('|') - }, - 'EEE': { - regex: $locale.DATETIME_FORMATS.SHORTDAY.join('|') - }, - 'HH': { - regex: '(?:0|1)[0-9]|2[0-3]', - apply: function(value) { this.hours = +value; } - }, - 'hh': { - regex: '0[0-9]|1[0-2]', - apply: function(value) { this.hours = +value; } - }, - 'H': { - regex: '1?[0-9]|2[0-3]', - apply: function(value) { this.hours = +value; } - }, - 'h': { - regex: '[0-9]|1[0-2]', - apply: function(value) { this.hours = +value; } - }, - 'mm': { - regex: '[0-5][0-9]', - apply: function(value) { this.minutes = +value; } - }, - 'm': { - regex: '[0-9]|[1-5][0-9]', - apply: function(value) { this.minutes = +value; } - }, - 'sss': { - regex: '[0-9][0-9][0-9]', - apply: function(value) { this.milliseconds = +value; } - }, - 'ss': { - regex: '[0-5][0-9]', - apply: function(value) { this.seconds = +value; } - }, - 's': { - regex: '[0-9]|[1-5][0-9]', - apply: function(value) { this.seconds = +value; } - }, - 'a': { - regex: $locale.DATETIME_FORMATS.AMPMS.join('|'), - apply: function(value) { - if (this.hours === 12) { - this.hours = 0; - } - - if (value === 'PM') { - this.hours += 12; - } - } - } - }; - - function createParser(format) { - var map = [], regex = format.split(''); - - angular.forEach(formatCodeToRegex, function(data, code) { - var index = format.indexOf(code); - - if (index > -1) { - format = format.split(''); - - regex[index] = '(' + data.regex + ')'; - format[index] = '$'; // Custom symbol to define consumed part of format - for (var i = index + 1, n = index + code.length; i < n; i++) { - regex[i] = ''; - format[i] = '$'; - } - format = format.join(''); - - map.push({ index: index, apply: data.apply }); - } - }); - - return { - regex: new RegExp('^' + regex.join('') + '$'), - map: orderByFilter(map, 'index') - }; - } - - this.parse = function(input, format, baseDate) { - if (!angular.isString(input) || !format) { - return input; - } - - format = $locale.DATETIME_FORMATS[format] || format; - format = format.replace(SPECIAL_CHARACTERS_REGEXP, '\\$&'); - - if (!this.parsers[format]) { - this.parsers[format] = createParser(format); - } - - var parser = this.parsers[format], - regex = parser.regex, - map = parser.map, - results = input.match(regex); - - if (results && results.length) { - var fields, dt; - if (angular.isDate(baseDate) && !isNaN(baseDate.getTime())) { - fields = { - year: baseDate.getFullYear(), - month: baseDate.getMonth(), - date: baseDate.getDate(), - hours: baseDate.getHours(), - minutes: baseDate.getMinutes(), - seconds: baseDate.getSeconds(), - milliseconds: baseDate.getMilliseconds() - }; - } else { - if (baseDate) { - $log.warn('dateparser:', 'baseDate is not a valid date'); - } - fields = { year: 1900, month: 0, date: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }; - } - - for (var i = 1, n = results.length; i < n; i++) { - var mapper = map[i-1]; - if (mapper.apply) { - mapper.apply.call(fields, results[i]); - } - } - - if (isValid(fields.year, fields.month, fields.date)) { - dt = new Date(fields.year, fields.month, fields.date, - fields.hours, fields.minutes, fields.seconds, - fields.milliseconds || 0); - } - - return dt; - } - }; - - // Check if date is valid for specific month (and year for February). - // Month: 0 = Jan, 1 = Feb, etc - function isValid(year, month, date) { - if (date < 1) { - return false; - } - - if (month === 1 && date > 28) { - return date === 29 && ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0); - } - - if (month === 3 || month === 5 || month === 8 || month === 10) { - return date < 31; - } - - return true; - } -}]); - -angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootstrap.position']) - -.value('$datepickerSuppressError', false) - -.constant('datepickerConfig', { - formatDay: 'dd', - formatMonth: 'MMMM', - formatYear: 'yyyy', - formatDayHeader: 'EEE', - formatDayTitle: 'MMMM yyyy', - formatMonthTitle: 'yyyy', - datepickerMode: 'day', - minMode: 'day', - maxMode: 'year', - showWeeks: true, - startingDay: 0, - yearRange: 20, - minDate: null, - maxDate: null, - shortcutPropagation: false -}) - -.controller('DatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$log', 'dateFilter', 'datepickerConfig', '$datepickerSuppressError', function($scope, $attrs, $parse, $interpolate, $log, dateFilter, datepickerConfig, $datepickerSuppressError) { - var self = this, - ngModelCtrl = { $setViewValue: angular.noop }; // nullModelCtrl; - - // Modes chain - this.modes = ['day', 'month', 'year']; - - // Configuration attributes - angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle', - 'showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function(key, index) { - self[key] = angular.isDefined($attrs[key]) ? (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : datepickerConfig[key]; - }); - - // Watchable date attributes - angular.forEach(['minDate', 'maxDate'], function(key) { - if ($attrs[key]) { - $scope.$parent.$watch($parse($attrs[key]), function(value) { - self[key] = value ? new Date(value) : null; - self.refreshView(); - }); - } else { - self[key] = datepickerConfig[key] ? new Date(datepickerConfig[key]) : null; - } - }); - - angular.forEach(['minMode', 'maxMode'], function(key) { - if ($attrs[key]) { - $scope.$parent.$watch($parse($attrs[key]), function(value) { - self[key] = angular.isDefined(value) ? value : $attrs[key]; - $scope[key] = self[key]; - if ((key == 'minMode' && self.modes.indexOf($scope.datepickerMode) < self.modes.indexOf(self[key])) || (key == 'maxMode' && self.modes.indexOf($scope.datepickerMode) > self.modes.indexOf(self[key]))) { - $scope.datepickerMode = self[key]; - } - }); - } else { - self[key] = datepickerConfig[key] || null; - $scope[key] = self[key]; - } - }); - - $scope.datepickerMode = $scope.datepickerMode || datepickerConfig.datepickerMode; - $scope.uniqueId = 'datepicker-' + $scope.$id + '-' + Math.floor(Math.random() * 10000); - - if (angular.isDefined($attrs.initDate)) { - this.activeDate = $scope.$parent.$eval($attrs.initDate) || new Date(); - $scope.$parent.$watch($attrs.initDate, function(initDate) { - if (initDate && (ngModelCtrl.$isEmpty(ngModelCtrl.$modelValue) || ngModelCtrl.$invalid)) { - self.activeDate = initDate; - self.refreshView(); - } - }); - } else { - this.activeDate = new Date(); - } - - $scope.isActive = function(dateObject) { - if (self.compare(dateObject.date, self.activeDate) === 0) { - $scope.activeDateId = dateObject.uid; - return true; - } - return false; - }; - - this.init = function(ngModelCtrl_) { - ngModelCtrl = ngModelCtrl_; - - ngModelCtrl.$render = function() { - self.render(); - }; - }; - - this.render = function() { - if (ngModelCtrl.$viewValue) { - var date = new Date(ngModelCtrl.$viewValue), - isValid = !isNaN(date); - - if (isValid) { - this.activeDate = date; - } else if (!$datepickerSuppressError) { - $log.error('Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.'); - } - } - this.refreshView(); - }; - - this.refreshView = function() { - if (this.element) { - this._refreshView(); - - var date = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null; - ngModelCtrl.$setValidity('dateDisabled', !date || (this.element && !this.isDisabled(date))); - } - }; - - this.createDateObject = function(date, format) { - var model = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null; - return { - date: date, - label: dateFilter(date, format), - selected: model && this.compare(date, model) === 0, - disabled: this.isDisabled(date), - current: this.compare(date, new Date()) === 0, - customClass: this.customClass(date) - }; - }; - - this.isDisabled = function(date) { - return ((this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0) || ($attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode}))); - }; - - this.customClass = function(date) { - return $scope.customClass({date: date, mode: $scope.datepickerMode}); - }; - - // Split array into smaller arrays - this.split = function(arr, size) { - var arrays = []; - while (arr.length > 0) { - arrays.push(arr.splice(0, size)); - } - return arrays; - }; - - // Fix a hard-reprodusible bug with timezones - // The bug depends on OS, browser, current timezone and current date - // i.e. - // var date = new Date(2014, 0, 1); - // console.log(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours()); - // can result in "2013 11 31 23" because of the bug. - this.fixTimeZone = function(date) { - var hours = date.getHours(); - date.setHours(hours === 23 ? hours + 2 : 0); - }; - - $scope.select = function(date) { - if ($scope.datepickerMode === self.minMode) { - var dt = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : new Date(0, 0, 0, 0, 0, 0, 0); - dt.setFullYear(date.getFullYear(), date.getMonth(), date.getDate()); - ngModelCtrl.$setViewValue(dt); - ngModelCtrl.$render(); - } else { - self.activeDate = date; - $scope.datepickerMode = self.modes[self.modes.indexOf($scope.datepickerMode) - 1]; - } - }; - - $scope.move = function(direction) { - var year = self.activeDate.getFullYear() + direction * (self.step.years || 0), - month = self.activeDate.getMonth() + direction * (self.step.months || 0); - self.activeDate.setFullYear(year, month, 1); - self.refreshView(); - }; - - $scope.toggleMode = function(direction) { - direction = direction || 1; - - if (($scope.datepickerMode === self.maxMode && direction === 1) || ($scope.datepickerMode === self.minMode && direction === -1)) { - return; - } - - $scope.datepickerMode = self.modes[self.modes.indexOf($scope.datepickerMode) + direction]; - }; - - // Key event mapper - $scope.keys = { 13: 'enter', 32: 'space', 33: 'pageup', 34: 'pagedown', 35: 'end', 36: 'home', 37: 'left', 38: 'up', 39: 'right', 40: 'down' }; - - var focusElement = function() { - self.element[0].focus(); - }; - - // Listen for focus requests from popup directive - $scope.$on('datepicker.focus', focusElement); - - $scope.keydown = function(evt) { - var key = $scope.keys[evt.which]; - - if (!key || evt.shiftKey || evt.altKey) { - return; - } - - evt.preventDefault(); - if (!self.shortcutPropagation) { - evt.stopPropagation(); - } - - if (key === 'enter' || key === 'space') { - if (self.isDisabled(self.activeDate)) { - return; // do nothing - } - $scope.select(self.activeDate); - focusElement(); - } else if (evt.ctrlKey && (key === 'up' || key === 'down')) { - $scope.toggleMode(key === 'up' ? 1 : -1); - focusElement(); - } else { - self.handleKeyDown(key, evt); - self.refreshView(); - } - }; -}]) - -.directive('datepicker', function() { - return { - restrict: 'EA', - replace: true, - templateUrl: function(element, attrs) { - return attrs.templateUrl || 'template/datepicker/datepicker.html'; - }, - scope: { - datepickerMode: '=?', - dateDisabled: '&', - customClass: '&', - shortcutPropagation: '&?' - }, - require: ['datepicker', '^ngModel'], - controller: 'DatepickerController', - controllerAs: 'datepicker', - link: function(scope, element, attrs, ctrls) { - var datepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1]; - - datepickerCtrl.init(ngModelCtrl); - } - }; -}) - -.directive('daypicker', ['dateFilter', function(dateFilter) { - return { - restrict: 'EA', - replace: true, - templateUrl: 'template/datepicker/day.html', - require: '^datepicker', - link: function(scope, element, attrs, ctrl) { - scope.showWeeks = ctrl.showWeeks; - - ctrl.step = { months: 1 }; - ctrl.element = element; - - var DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; - function getDaysInMonth(year, month) { - return ((month === 1) && (year % 4 === 0) && ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month]; - } - - function getDates(startDate, n) { - var dates = new Array(n), current = new Date(startDate), i = 0, date; - while (i < n) { - date = new Date(current); - ctrl.fixTimeZone(date); - dates[i++] = date; - current.setDate(current.getDate() + 1); - } - return dates; - } - - ctrl._refreshView = function() { - var year = ctrl.activeDate.getFullYear(), - month = ctrl.activeDate.getMonth(), - firstDayOfMonth = new Date(year, month, 1), - difference = ctrl.startingDay - firstDayOfMonth.getDay(), - numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : - difference, - firstDate = new Date(firstDayOfMonth); - - if (numDisplayedFromPreviousMonth > 0) { - firstDate.setDate(-numDisplayedFromPreviousMonth + 1); - } - - // 42 is the number of days on a six-month calendar - var days = getDates(firstDate, 42); - for (var i = 0; i < 42; i ++) { - days[i] = angular.extend(ctrl.createDateObject(days[i], ctrl.formatDay), { - secondary: days[i].getMonth() !== month, - uid: scope.uniqueId + '-' + i - }); - } - - scope.labels = new Array(7); - for (var j = 0; j < 7; j++) { - scope.labels[j] = { - abbr: dateFilter(days[j].date, ctrl.formatDayHeader), - full: dateFilter(days[j].date, 'EEEE') - }; - } - - scope.title = dateFilter(ctrl.activeDate, ctrl.formatDayTitle); - scope.rows = ctrl.split(days, 7); - - if (scope.showWeeks) { - scope.weekNumbers = []; - var thursdayIndex = (4 + 7 - ctrl.startingDay) % 7, - numWeeks = scope.rows.length; - for (var curWeek = 0; curWeek < numWeeks; curWeek++) { - scope.weekNumbers.push( - getISO8601WeekNumber(scope.rows[curWeek][thursdayIndex].date)); - } - } - }; - - ctrl.compare = function(date1, date2) { - return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate())); - }; - - function getISO8601WeekNumber(date) { - var checkDate = new Date(date); - checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); // Thursday - var time = checkDate.getTime(); - checkDate.setMonth(0); // Compare with Jan 1 - checkDate.setDate(1); - return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1; - } - - ctrl.handleKeyDown = function(key, evt) { - var date = ctrl.activeDate.getDate(); - - if (key === 'left') { - date = date - 1; // up - } else if (key === 'up') { - date = date - 7; // down - } else if (key === 'right') { - date = date + 1; // down - } else if (key === 'down') { - date = date + 7; - } else if (key === 'pageup' || key === 'pagedown') { - var month = ctrl.activeDate.getMonth() + (key === 'pageup' ? - 1 : 1); - ctrl.activeDate.setMonth(month, 1); - date = Math.min(getDaysInMonth(ctrl.activeDate.getFullYear(), ctrl.activeDate.getMonth()), date); - } else if (key === 'home') { - date = 1; - } else if (key === 'end') { - date = getDaysInMonth(ctrl.activeDate.getFullYear(), ctrl.activeDate.getMonth()); - } - ctrl.activeDate.setDate(date); - }; - - ctrl.refreshView(); - } - }; -}]) - -.directive('monthpicker', ['dateFilter', function(dateFilter) { - return { - restrict: 'EA', - replace: true, - templateUrl: 'template/datepicker/month.html', - require: '^datepicker', - link: function(scope, element, attrs, ctrl) { - ctrl.step = { years: 1 }; - ctrl.element = element; - - ctrl._refreshView = function() { - var months = new Array(12), - year = ctrl.activeDate.getFullYear(), - date; - - for (var i = 0; i < 12; i++) { - date = new Date(year, i, 1); - ctrl.fixTimeZone(date); - months[i] = angular.extend(ctrl.createDateObject(date, ctrl.formatMonth), { - uid: scope.uniqueId + '-' + i - }); - } - - scope.title = dateFilter(ctrl.activeDate, ctrl.formatMonthTitle); - scope.rows = ctrl.split(months, 3); - }; - - ctrl.compare = function(date1, date2) { - return new Date(date1.getFullYear(), date1.getMonth()) - new Date(date2.getFullYear(), date2.getMonth()); - }; - - ctrl.handleKeyDown = function(key, evt) { - var date = ctrl.activeDate.getMonth(); - - if (key === 'left') { - date = date - 1; // up - } else if (key === 'up') { - date = date - 3; // down - } else if (key === 'right') { - date = date + 1; // down - } else if (key === 'down') { - date = date + 3; - } else if (key === 'pageup' || key === 'pagedown') { - var year = ctrl.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1); - ctrl.activeDate.setFullYear(year); - } else if (key === 'home') { - date = 0; - } else if (key === 'end') { - date = 11; - } - ctrl.activeDate.setMonth(date); - }; - - ctrl.refreshView(); - } - }; -}]) - -.directive('yearpicker', ['dateFilter', function(dateFilter) { - return { - restrict: 'EA', - replace: true, - templateUrl: 'template/datepicker/year.html', - require: '^datepicker', - link: function(scope, element, attrs, ctrl) { - var range = ctrl.yearRange; - - ctrl.step = { years: range }; - ctrl.element = element; - - function getStartingYear( year ) { - return parseInt((year - 1) / range, 10) * range + 1; - } - - ctrl._refreshView = function() { - var years = new Array(range), date; - - for (var i = 0, start = getStartingYear(ctrl.activeDate.getFullYear()); i < range; i++) { - date = new Date(start + i, 0, 1); - ctrl.fixTimeZone(date); - years[i] = angular.extend(ctrl.createDateObject(date, ctrl.formatYear), { - uid: scope.uniqueId + '-' + i - }); - } - - scope.title = [years[0].label, years[range - 1].label].join(' - '); - scope.rows = ctrl.split(years, 5); - }; - - ctrl.compare = function(date1, date2) { - return date1.getFullYear() - date2.getFullYear(); - }; - - ctrl.handleKeyDown = function(key, evt) { - var date = ctrl.activeDate.getFullYear(); - - if (key === 'left') { - date = date - 1; // up - } else if (key === 'up') { - date = date - 5; // down - } else if (key === 'right') { - date = date + 1; // down - } else if (key === 'down') { - date = date + 5; - } else if (key === 'pageup' || key === 'pagedown') { - date += (key === 'pageup' ? - 1 : 1) * ctrl.step.years; - } else if (key === 'home') { - date = getStartingYear(ctrl.activeDate.getFullYear()); - } else if (key === 'end') { - date = getStartingYear(ctrl.activeDate.getFullYear()) + range - 1; - } - ctrl.activeDate.setFullYear(date); - }; - - ctrl.refreshView(); - } - }; -}]) - -.constant('datepickerPopupConfig', { - datepickerPopup: 'yyyy-MM-dd', - datepickerPopupTemplateUrl: 'template/datepicker/popup.html', - datepickerTemplateUrl: 'template/datepicker/datepicker.html', - html5Types: { - date: 'yyyy-MM-dd', - 'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss', - 'month': 'yyyy-MM' - }, - currentText: 'Today', - clearText: 'Clear', - closeText: 'Done', - closeOnDateSelection: true, - appendToBody: false, - showButtonBar: true, - onOpenFocus: true -}) - -.directive('datepickerPopup', ['$compile', '$parse', '$document', '$rootScope', '$position', 'dateFilter', 'dateParser', 'datepickerPopupConfig', '$timeout', -function($compile, $parse, $document, $rootScope, $position, dateFilter, dateParser, datepickerPopupConfig, $timeout) { - return { - restrict: 'EA', - require: 'ngModel', - scope: { - isOpen: '=?', - currentText: '@', - clearText: '@', - closeText: '@', - dateDisabled: '&', - customClass: '&' - }, - link: function(scope, element, attrs, ngModel) { - var dateFormat, - closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection, - appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody, - onOpenFocus = angular.isDefined(attrs.onOpenFocus) ? scope.$parent.$eval(attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus, - datepickerPopupTemplateUrl = angular.isDefined(attrs.datepickerPopupTemplateUrl) ? attrs.datepickerPopupTemplateUrl : datepickerPopupConfig.datepickerPopupTemplateUrl, - datepickerTemplateUrl = angular.isDefined(attrs.datepickerTemplateUrl) ? attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl, - cache = {}; - - scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar; - - scope.getText = function(key) { - return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text']; - }; - - scope.isDisabled = function(date) { - if (date === 'today') { - date = new Date(); - } - - return ((scope.watchData.minDate && scope.compare(date, cache.minDate) < 0) || - (scope.watchData.maxDate && scope.compare(date, cache.maxDate) > 0)); - }; - - scope.compare = function(date1, date2) { - return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate())); - }; - - var isHtml5DateInput = false; - if (datepickerPopupConfig.html5Types[attrs.type]) { - dateFormat = datepickerPopupConfig.html5Types[attrs.type]; - isHtml5DateInput = true; - } else { - dateFormat = attrs.datepickerPopup || datepickerPopupConfig.datepickerPopup; - attrs.$observe('datepickerPopup', function(value, oldValue) { - var newDateFormat = value || datepickerPopupConfig.datepickerPopup; - // Invalidate the $modelValue to ensure that formatters re-run - // FIXME: Refactor when PR is merged: https://github.com/angular/angular.js/pull/10764 - if (newDateFormat !== dateFormat) { - dateFormat = newDateFormat; - ngModel.$modelValue = null; - - if (!dateFormat) { - throw new Error('datepickerPopup must have a date format specified.'); - } - } - }); - } - - if (!dateFormat) { - throw new Error('datepickerPopup must have a date format specified.'); - } - - if (isHtml5DateInput && attrs.datepickerPopup) { - throw new Error('HTML5 date input types do not support custom formats.'); - } - - // popup element used to display calendar - var popupEl = angular.element('
      '); - popupEl.attr({ - 'ng-model': 'date', - 'ng-change': 'dateSelection(date)', - 'template-url': datepickerPopupTemplateUrl - }); - - function cameltoDash(string) { - return string.replace(/([A-Z])/g, function($1) { return '-' + $1.toLowerCase(); }); - } - - // datepicker element - var datepickerEl = angular.element(popupEl.children()[0]); - datepickerEl.attr('template-url', datepickerTemplateUrl); - - if (isHtml5DateInput) { - if (attrs.type === 'month') { - datepickerEl.attr('datepicker-mode', '"month"'); - datepickerEl.attr('min-mode', 'month'); - } - } - - if (attrs.datepickerOptions) { - var options = scope.$parent.$eval(attrs.datepickerOptions); - if (options && options.initDate) { - scope.initDate = options.initDate; - datepickerEl.attr('init-date', 'initDate'); - delete options.initDate; - } - angular.forEach(options, function(value, option) { - datepickerEl.attr( cameltoDash(option), value ); - }); - } - - scope.watchData = {}; - angular.forEach(['minMode', 'maxMode', 'minDate', 'maxDate', 'datepickerMode', 'initDate', 'shortcutPropagation'], function(key) { - if (attrs[key]) { - var getAttribute = $parse(attrs[key]); - scope.$parent.$watch(getAttribute, function(value) { - scope.watchData[key] = value; - if (key === 'minDate' || key === 'maxDate') { - cache[key] = new Date(value); - } - }); - datepickerEl.attr(cameltoDash(key), 'watchData.' + key); - - // Propagate changes from datepicker to outside - if (key === 'datepickerMode') { - var setAttribute = getAttribute.assign; - scope.$watch('watchData.' + key, function(value, oldvalue) { - if (angular.isFunction(setAttribute) && value !== oldvalue) { - setAttribute(scope.$parent, value); - } - }); - } - } - }); - if (attrs.dateDisabled) { - datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })'); - } - - if (attrs.showWeeks) { - datepickerEl.attr('show-weeks', attrs.showWeeks); - } - - if (attrs.customClass) { - datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })'); - } - - function parseDate(viewValue) { - if (angular.isNumber(viewValue)) { - // presumably timestamp to date object - viewValue = new Date(viewValue); - } - - if (!viewValue) { - return null; - } else if (angular.isDate(viewValue) && !isNaN(viewValue)) { - return viewValue; - } else if (angular.isString(viewValue)) { - var date = dateParser.parse(viewValue, dateFormat, scope.date); - if (isNaN(date)) { - return undefined; - } else { - return date; - } - } else { - return undefined; - } - } - - function validator(modelValue, viewValue) { - var value = modelValue || viewValue; - - if (!attrs.ngRequired && !value) { - return true; - } - - if (angular.isNumber(value)) { - value = new Date(value); - } - if (!value) { - return true; - } else if (angular.isDate(value) && !isNaN(value)) { - return true; - } else if (angular.isString(value)) { - var date = dateParser.parse(value, dateFormat); - return !isNaN(date); - } else { - return false; - } - } - - if (!isHtml5DateInput) { - // Internal API to maintain the correct ng-invalid-[key] class - ngModel.$$parserName = 'date'; - ngModel.$validators.date = validator; - ngModel.$parsers.unshift(parseDate); - ngModel.$formatters.push(function(value) { - scope.date = value; - return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat); - }); - } else { - ngModel.$formatters.push(function(value) { - scope.date = value; - return value; - }); - } - - // Inner change - scope.dateSelection = function(dt) { - if (angular.isDefined(dt)) { - scope.date = dt; - } - var date = scope.date ? dateFilter(scope.date, dateFormat) : null; // Setting to NULL is necessary for form validators to function - element.val(date); - ngModel.$setViewValue(date); - - if (closeOnDateSelection) { - scope.isOpen = false; - element[0].focus(); - } - }; - - // Detect changes in the view from the text box - ngModel.$viewChangeListeners.push(function() { - scope.date = dateParser.parse(ngModel.$viewValue, dateFormat, scope.date); - }); - - var documentClickBind = function(event) { - if (scope.isOpen && !(element[0].contains(event.target) || popupEl[0].contains(event.target))) { - scope.$apply(function() { - scope.isOpen = false; - }); - } - }; - - var inputKeydownBind = function(evt) { - if (evt.which === 27 && scope.isOpen) { - evt.preventDefault(); - evt.stopPropagation(); - scope.$apply(function() { - scope.isOpen = false; - }); - element[0].focus(); - } else if (evt.which === 40 && !scope.isOpen) { - evt.preventDefault(); - evt.stopPropagation(); - scope.$apply(function() { - scope.isOpen = true; - }); - } - }; - element.bind('keydown', inputKeydownBind); - - scope.keydown = function(evt) { - if (evt.which === 27) { - scope.isOpen = false; - element[0].focus(); - } - }; - - scope.$watch('isOpen', function(value) { - if (value) { - scope.position = appendToBody ? $position.offset(element) : $position.position(element); - scope.position.top = scope.position.top + element.prop('offsetHeight'); - - $timeout(function() { - if (onOpenFocus) { - scope.$broadcast('datepicker.focus'); - } - $document.bind('click', documentClickBind); - }, 0, false); - } else { - $document.unbind('click', documentClickBind); - } - }); - - scope.select = function(date) { - if (date === 'today') { - var today = new Date(); - if (angular.isDate(scope.date)) { - date = new Date(scope.date); - date.setFullYear(today.getFullYear(), today.getMonth(), today.getDate()); - } else { - date = new Date(today.setHours(0, 0, 0, 0)); - } - } - scope.dateSelection(date); - }; - - scope.close = function() { - scope.isOpen = false; - element[0].focus(); - }; - - var $popup = $compile(popupEl)(scope); - // Prevent jQuery cache memory leak (template is now redundant after linking) - popupEl.remove(); - - if (appendToBody) { - $document.find('body').append($popup); - } else { - element.after($popup); - } - - scope.$on('$destroy', function() { - if (scope.isOpen === true) { - if (!$rootScope.$$phase) { - scope.$apply(function() { - scope.isOpen = false; - }); - } - } - - $popup.remove(); - element.unbind('keydown', inputKeydownBind); - $document.unbind('click', documentClickBind); - }); - } - }; -}]) - -.directive('datepickerPopupWrap', function() { - return { - restrict:'EA', - replace: true, - transclude: true, - templateUrl: function(element, attrs) { - return attrs.templateUrl || 'template/datepicker/popup.html'; - } - }; -}); - - -angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function($templateCache) { - $templateCache.put("template/datepicker/datepicker.html", - "
      \n" + - " \n" + - " \n" + - " \n" + - "
      "); -}]); - -angular.module("template/datepicker/day.html", []).run(["$templateCache", function($templateCache) { - $templateCache.put("template/datepicker/day.html", - "
      \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - "
      {{::label.abbr}}
      {{ weekNumbers[$index] }}\n" + - " \n" + - "
      \n" + - ""); -}]); - -angular.module("template/datepicker/month.html", []).run(["$templateCache", function($templateCache) { - $templateCache.put("template/datepicker/month.html", - "\n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - "
      \n" + - " \n" + - "
      \n" + - ""); -}]); - -angular.module("template/datepicker/popup.html", []).run(["$templateCache", function($templateCache) { - $templateCache.put("template/datepicker/popup.html", - "
        \n" + - "
      • \n" + - "
      • \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - "
        • \n" + - "
      \n" + - ""); -}]); - -angular.module("template/datepicker/year.html", []).run(["$templateCache", function($templateCache) { - $templateCache.put("template/datepicker/year.html", - "\n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - " \n" + - "
      \n" + - " \n" + - "
      \n" + - ""); -}]); - diff --git a/public/vendor/jquery-ui/custom.js b/public/vendor/jquery-ui/custom.js deleted file mode 100644 index aa3e5d8b6bafb..0000000000000 --- a/public/vendor/jquery-ui/custom.js +++ /dev/null @@ -1,4034 +0,0 @@ -/*! jQuery UI - v1.12.1 - 2017-06-13 -* http://jqueryui.com -* Includes: widget.js, data.js, disable-selection.js, scroll-parent.js, widgets/draggable.js, widgets/droppable.js, widgets/resizable.js, widgets/mouse.js -* Copyright jQuery Foundation and other contributors; Licensed MIT */ - -(function( factory ) { - if ( typeof define === "function" && define.amd ) { - - // AMD. Register as an anonymous module. - define([ "jquery" ], factory ); - } else { - - // Browser globals - factory( jQuery ); - } -}(function( $ ) { - -$.ui = $.ui || {}; - -var version = $.ui.version = "1.12.1"; - - -/*! - * jQuery UI Widget 1.12.1 - * http://jqueryui.com - * - * Copyright jQuery Foundation and other contributors - * Released under the MIT license. - * http://jquery.org/license - */ - -//>>label: Widget -//>>group: Core -//>>description: Provides a factory for creating stateful widgets with a common API. -//>>docs: http://api.jqueryui.com/jQuery.widget/ -//>>demos: http://jqueryui.com/widget/ - - - -var widgetUuid = 0; -var widgetSlice = Array.prototype.slice; - -$.cleanData = ( function( orig ) { - return function( elems ) { - var events, elem, i; - for ( i = 0; ( elem = elems[ i ] ) != null; i++ ) { - try { - - // Only trigger remove when necessary to save time - events = $._data( elem, "events" ); - if ( events && events.remove ) { - $( elem ).triggerHandler( "remove" ); - } - - // Http://bugs.jquery.com/ticket/8235 - } catch ( e ) {} - } - orig( elems ); - }; -} )( $.cleanData ); - -$.widget = function( name, base, prototype ) { - var existingConstructor, constructor, basePrototype; - - // ProxiedPrototype allows the provided prototype to remain unmodified - // so that it can be used as a mixin for multiple widgets (#8876) - var proxiedPrototype = {}; - - var namespace = name.split( "." )[ 0 ]; - name = name.split( "." )[ 1 ]; - var fullName = namespace + "-" + name; - - if ( !prototype ) { - prototype = base; - base = $.Widget; - } - - if ( $.isArray( prototype ) ) { - prototype = $.extend.apply( null, [ {} ].concat( prototype ) ); - } - - // Create selector for plugin - $.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) { - return !!$.data( elem, fullName ); - }; - - $[ namespace ] = $[ namespace ] || {}; - existingConstructor = $[ namespace ][ name ]; - constructor = $[ namespace ][ name ] = function( options, element ) { - - // Allow instantiation without "new" keyword - if ( !this._createWidget ) { - return new constructor( options, element ); - } - - // Allow instantiation without initializing for simple inheritance - // must use "new" keyword (the code above always passes args) - if ( arguments.length ) { - this._createWidget( options, element ); - } - }; - - // Extend with the existing constructor to carry over any static properties - $.extend( constructor, existingConstructor, { - version: prototype.version, - - // Copy the object used to create the prototype in case we need to - // redefine the widget later - _proto: $.extend( {}, prototype ), - - // Track widgets that inherit from this widget in case this widget is - // redefined after a widget inherits from it - _childConstructors: [] - } ); - - basePrototype = new base(); - - // We need to make the options hash a property directly on the new instance - // otherwise we'll modify the options hash on the prototype that we're - // inheriting from - basePrototype.options = $.widget.extend( {}, basePrototype.options ); - $.each( prototype, function( prop, value ) { - if ( !$.isFunction( value ) ) { - proxiedPrototype[ prop ] = value; - return; - } - proxiedPrototype[ prop ] = ( function() { - function _super() { - return base.prototype[ prop ].apply( this, arguments ); - } - - function _superApply( args ) { - return base.prototype[ prop ].apply( this, args ); - } - - return function() { - var __super = this._super; - var __superApply = this._superApply; - var returnValue; - - this._super = _super; - this._superApply = _superApply; - - returnValue = value.apply( this, arguments ); - - this._super = __super; - this._superApply = __superApply; - - return returnValue; - }; - } )(); - } ); - constructor.prototype = $.widget.extend( basePrototype, { - - // TODO: remove support for widgetEventPrefix - // always use the name + a colon as the prefix, e.g., draggable:start - // don't prefix for widgets that aren't DOM-based - widgetEventPrefix: existingConstructor ? ( basePrototype.widgetEventPrefix || name ) : name - }, proxiedPrototype, { - constructor: constructor, - namespace: namespace, - widgetName: name, - widgetFullName: fullName - } ); - - // If this widget is being redefined then we need to find all widgets that - // are inheriting from it and redefine all of them so that they inherit from - // the new version of this widget. We're essentially trying to replace one - // level in the prototype chain. - if ( existingConstructor ) { - $.each( existingConstructor._childConstructors, function( i, child ) { - var childPrototype = child.prototype; - - // Redefine the child widget using the same prototype that was - // originally used, but inherit from the new version of the base - $.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, - child._proto ); - } ); - - // Remove the list of existing child constructors from the old constructor - // so the old child constructors can be garbage collected - delete existingConstructor._childConstructors; - } else { - base._childConstructors.push( constructor ); - } - - $.widget.bridge( name, constructor ); - - return constructor; -}; - -$.widget.extend = function( target ) { - var input = widgetSlice.call( arguments, 1 ); - var inputIndex = 0; - var inputLength = input.length; - var key; - var value; - - for ( ; inputIndex < inputLength; inputIndex++ ) { - for ( key in input[ inputIndex ] ) { - value = input[ inputIndex ][ key ]; - if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) { - - // Clone objects - if ( $.isPlainObject( value ) ) { - target[ key ] = $.isPlainObject( target[ key ] ) ? - $.widget.extend( {}, target[ key ], value ) : - - // Don't extend strings, arrays, etc. with objects - $.widget.extend( {}, value ); - - // Copy everything else by reference - } else { - target[ key ] = value; - } - } - } - } - return target; -}; - -$.widget.bridge = function( name, object ) { - var fullName = object.prototype.widgetFullName || name; - $.fn[ name ] = function( options ) { - var isMethodCall = typeof options === "string"; - var args = widgetSlice.call( arguments, 1 ); - var returnValue = this; - - if ( isMethodCall ) { - - // If this is an empty collection, we need to have the instance method - // return undefined instead of the jQuery instance - if ( !this.length && options === "instance" ) { - returnValue = undefined; - } else { - this.each( function() { - var methodValue; - var instance = $.data( this, fullName ); - - if ( options === "instance" ) { - returnValue = instance; - return false; - } - - if ( !instance ) { - return $.error( "cannot call methods on " + name + - " prior to initialization; " + - "attempted to call method '" + options + "'" ); - } - - if ( !$.isFunction( instance[ options ] ) || options.charAt( 0 ) === "_" ) { - return $.error( "no such method '" + options + "' for " + name + - " widget instance" ); - } - - methodValue = instance[ options ].apply( instance, args ); - - if ( methodValue !== instance && methodValue !== undefined ) { - returnValue = methodValue && methodValue.jquery ? - returnValue.pushStack( methodValue.get() ) : - methodValue; - return false; - } - } ); - } - } else { - - // Allow multiple hashes to be passed on init - if ( args.length ) { - options = $.widget.extend.apply( null, [ options ].concat( args ) ); - } - - this.each( function() { - var instance = $.data( this, fullName ); - if ( instance ) { - instance.option( options || {} ); - if ( instance._init ) { - instance._init(); - } - } else { - $.data( this, fullName, new object( options, this ) ); - } - } ); - } - - return returnValue; - }; -}; - -$.Widget = function( /* options, element */ ) {}; -$.Widget._childConstructors = []; - -$.Widget.prototype = { - widgetName: "widget", - widgetEventPrefix: "", - defaultElement: "
      ", - - options: { - classes: {}, - disabled: false, - - // Callbacks - create: null - }, - - _createWidget: function( options, element ) { - element = $( element || this.defaultElement || this )[ 0 ]; - this.element = $( element ); - this.uuid = widgetUuid++; - this.eventNamespace = "." + this.widgetName + this.uuid; - - this.bindings = $(); - this.hoverable = $(); - this.focusable = $(); - this.classesElementLookup = {}; - - if ( element !== this ) { - $.data( element, this.widgetFullName, this ); - this._on( true, this.element, { - remove: function( event ) { - if ( event.target === element ) { - this.destroy(); - } - } - } ); - this.document = $( element.style ? - - // Element within the document - element.ownerDocument : - - // Element is window or document - element.document || element ); - this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow ); - } - - this.options = $.widget.extend( {}, - this.options, - this._getCreateOptions(), - options ); - - this._create(); - - if ( this.options.disabled ) { - this._setOptionDisabled( this.options.disabled ); - } - - this._trigger( "create", null, this._getCreateEventData() ); - this._init(); - }, - - _getCreateOptions: function() { - return {}; - }, - - _getCreateEventData: $.noop, - - _create: $.noop, - - _init: $.noop, - - destroy: function() { - var that = this; - - this._destroy(); - $.each( this.classesElementLookup, function( key, value ) { - that._removeClass( value, key ); - } ); - - // We can probably remove the unbind calls in 2.0 - // all event bindings should go through this._on() - this.element - .off( this.eventNamespace ) - .removeData( this.widgetFullName ); - this.widget() - .off( this.eventNamespace ) - .removeAttr( "aria-disabled" ); - - // Clean up events and states - this.bindings.off( this.eventNamespace ); - }, - - _destroy: $.noop, - - widget: function() { - return this.element; - }, - - option: function( key, value ) { - var options = key; - var parts; - var curOption; - var i; - - if ( arguments.length === 0 ) { - - // Don't return a reference to the internal hash - return $.widget.extend( {}, this.options ); - } - - if ( typeof key === "string" ) { - - // Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } } - options = {}; - parts = key.split( "." ); - key = parts.shift(); - if ( parts.length ) { - curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] ); - for ( i = 0; i < parts.length - 1; i++ ) { - curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {}; - curOption = curOption[ parts[ i ] ]; - } - key = parts.pop(); - if ( arguments.length === 1 ) { - return curOption[ key ] === undefined ? null : curOption[ key ]; - } - curOption[ key ] = value; - } else { - if ( arguments.length === 1 ) { - return this.options[ key ] === undefined ? null : this.options[ key ]; - } - options[ key ] = value; - } - } - - this._setOptions( options ); - - return this; - }, - - _setOptions: function( options ) { - var key; - - for ( key in options ) { - this._setOption( key, options[ key ] ); - } - - return this; - }, - - _setOption: function( key, value ) { - if ( key === "classes" ) { - this._setOptionClasses( value ); - } - - this.options[ key ] = value; - - if ( key === "disabled" ) { - this._setOptionDisabled( value ); - } - - return this; - }, - - _setOptionClasses: function( value ) { - var classKey, elements, currentElements; - - for ( classKey in value ) { - currentElements = this.classesElementLookup[ classKey ]; - if ( value[ classKey ] === this.options.classes[ classKey ] || - !currentElements || - !currentElements.length ) { - continue; - } - - // We are doing this to create a new jQuery object because the _removeClass() call - // on the next line is going to destroy the reference to the current elements being - // tracked. We need to save a copy of this collection so that we can add the new classes - // below. - elements = $( currentElements.get() ); - this._removeClass( currentElements, classKey ); - - // We don't use _addClass() here, because that uses this.options.classes - // for generating the string of classes. We want to use the value passed in from - // _setOption(), this is the new value of the classes option which was passed to - // _setOption(). We pass this value directly to _classes(). - elements.addClass( this._classes( { - element: elements, - keys: classKey, - classes: value, - add: true - } ) ); - } - }, - - _setOptionDisabled: function( value ) { - this._toggleClass( this.widget(), this.widgetFullName + "-disabled", null, !!value ); - - // If the widget is becoming disabled, then nothing is interactive - if ( value ) { - this._removeClass( this.hoverable, null, "ui-state-hover" ); - this._removeClass( this.focusable, null, "ui-state-focus" ); - } - }, - - enable: function() { - return this._setOptions( { disabled: false } ); - }, - - disable: function() { - return this._setOptions( { disabled: true } ); - }, - - _classes: function( options ) { - var full = []; - var that = this; - - options = $.extend( { - element: this.element, - classes: this.options.classes || {} - }, options ); - - function processClassString( classes, checkOption ) { - var current, i; - for ( i = 0; i < classes.length; i++ ) { - current = that.classesElementLookup[ classes[ i ] ] || $(); - if ( options.add ) { - current = $( $.unique( current.get().concat( options.element.get() ) ) ); - } else { - current = $( current.not( options.element ).get() ); - } - that.classesElementLookup[ classes[ i ] ] = current; - full.push( classes[ i ] ); - if ( checkOption && options.classes[ classes[ i ] ] ) { - full.push( options.classes[ classes[ i ] ] ); - } - } - } - - this._on( options.element, { - "remove": "_untrackClassesElement" - } ); - - if ( options.keys ) { - processClassString( options.keys.match( /\S+/g ) || [], true ); - } - if ( options.extra ) { - processClassString( options.extra.match( /\S+/g ) || [] ); - } - - return full.join( " " ); - }, - - _untrackClassesElement: function( event ) { - var that = this; - $.each( that.classesElementLookup, function( key, value ) { - if ( $.inArray( event.target, value ) !== -1 ) { - that.classesElementLookup[ key ] = $( value.not( event.target ).get() ); - } - } ); - }, - - _removeClass: function( element, keys, extra ) { - return this._toggleClass( element, keys, extra, false ); - }, - - _addClass: function( element, keys, extra ) { - return this._toggleClass( element, keys, extra, true ); - }, - - _toggleClass: function( element, keys, extra, add ) { - add = ( typeof add === "boolean" ) ? add : extra; - var shift = ( typeof element === "string" || element === null ), - options = { - extra: shift ? keys : extra, - keys: shift ? element : keys, - element: shift ? this.element : element, - add: add - }; - options.element.toggleClass( this._classes( options ), add ); - return this; - }, - - _on: function( suppressDisabledCheck, element, handlers ) { - var delegateElement; - var instance = this; - - // No suppressDisabledCheck flag, shuffle arguments - if ( typeof suppressDisabledCheck !== "boolean" ) { - handlers = element; - element = suppressDisabledCheck; - suppressDisabledCheck = false; - } - - // No element argument, shuffle and use this.element - if ( !handlers ) { - handlers = element; - element = this.element; - delegateElement = this.widget(); - } else { - element = delegateElement = $( element ); - this.bindings = this.bindings.add( element ); - } - - $.each( handlers, function( event, handler ) { - function handlerProxy() { - - // Allow widgets to customize the disabled handling - // - disabled as an array instead of boolean - // - disabled class as method for disabling individual parts - if ( !suppressDisabledCheck && - ( instance.options.disabled === true || - $( this ).hasClass( "ui-state-disabled" ) ) ) { - return; - } - return ( typeof handler === "string" ? instance[ handler ] : handler ) - .apply( instance, arguments ); - } - - // Copy the guid so direct unbinding works - if ( typeof handler !== "string" ) { - handlerProxy.guid = handler.guid = - handler.guid || handlerProxy.guid || $.guid++; - } - - var match = event.match( /^([\w:-]*)\s*(.*)$/ ); - var eventName = match[ 1 ] + instance.eventNamespace; - var selector = match[ 2 ]; - - if ( selector ) { - delegateElement.on( eventName, selector, handlerProxy ); - } else { - element.on( eventName, handlerProxy ); - } - } ); - }, - - _off: function( element, eventName ) { - eventName = ( eventName || "" ).split( " " ).join( this.eventNamespace + " " ) + - this.eventNamespace; - element.off( eventName ).off( eventName ); - - // Clear the stack to avoid memory leaks (#10056) - this.bindings = $( this.bindings.not( element ).get() ); - this.focusable = $( this.focusable.not( element ).get() ); - this.hoverable = $( this.hoverable.not( element ).get() ); - }, - - _delay: function( handler, delay ) { - function handlerProxy() { - return ( typeof handler === "string" ? instance[ handler ] : handler ) - .apply( instance, arguments ); - } - var instance = this; - return setTimeout( handlerProxy, delay || 0 ); - }, - - _hoverable: function( element ) { - this.hoverable = this.hoverable.add( element ); - this._on( element, { - mouseenter: function( event ) { - this._addClass( $( event.currentTarget ), null, "ui-state-hover" ); - }, - mouseleave: function( event ) { - this._removeClass( $( event.currentTarget ), null, "ui-state-hover" ); - } - } ); - }, - - _focusable: function( element ) { - this.focusable = this.focusable.add( element ); - this._on( element, { - focusin: function( event ) { - this._addClass( $( event.currentTarget ), null, "ui-state-focus" ); - }, - focusout: function( event ) { - this._removeClass( $( event.currentTarget ), null, "ui-state-focus" ); - } - } ); - }, - - _trigger: function( type, event, data ) { - var prop, orig; - var callback = this.options[ type ]; - - data = data || {}; - event = $.Event( event ); - event.type = ( type === this.widgetEventPrefix ? - type : - this.widgetEventPrefix + type ).toLowerCase(); - - // The original event may come from any element - // so we need to reset the target on the new event - event.target = this.element[ 0 ]; - - // Copy original event properties over to the new event - orig = event.originalEvent; - if ( orig ) { - for ( prop in orig ) { - if ( !( prop in event ) ) { - event[ prop ] = orig[ prop ]; - } - } - } - - this.element.trigger( event, data ); - return !( $.isFunction( callback ) && - callback.apply( this.element[ 0 ], [ event ].concat( data ) ) === false || - event.isDefaultPrevented() ); - } -}; - -$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { - $.Widget.prototype[ "_" + method ] = function( element, options, callback ) { - if ( typeof options === "string" ) { - options = { effect: options }; - } - - var hasOptions; - var effectName = !options ? - method : - options === true || typeof options === "number" ? - defaultEffect : - options.effect || defaultEffect; - - options = options || {}; - if ( typeof options === "number" ) { - options = { duration: options }; - } - - hasOptions = !$.isEmptyObject( options ); - options.complete = callback; - - if ( options.delay ) { - element.delay( options.delay ); - } - - if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) { - element[ method ]( options ); - } else if ( effectName !== method && element[ effectName ] ) { - element[ effectName ]( options.duration, options.easing, callback ); - } else { - element.queue( function( next ) { - $( this )[ method ](); - if ( callback ) { - callback.call( element[ 0 ] ); - } - next(); - } ); - } - }; -} ); - -var widget = $.widget; - - -/*! - * jQuery UI :data 1.12.1 - * http://jqueryui.com - * - * Copyright jQuery Foundation and other contributors - * Released under the MIT license. - * http://jquery.org/license - */ - -//>>label: :data Selector -//>>group: Core -//>>description: Selects elements which have data stored under the specified key. -//>>docs: http://api.jqueryui.com/data-selector/ - - -var data = $.extend( $.expr[ ":" ], { - data: $.expr.createPseudo ? - $.expr.createPseudo( function( dataName ) { - return function( elem ) { - return !!$.data( elem, dataName ); - }; - } ) : - - // Support: jQuery <1.8 - function( elem, i, match ) { - return !!$.data( elem, match[ 3 ] ); - } -} ); - -/*! - * jQuery UI Disable Selection 1.12.1 - * http://jqueryui.com - * - * Copyright jQuery Foundation and other contributors - * Released under the MIT license. - * http://jquery.org/license - */ - -//>>label: disableSelection -//>>group: Core -//>>description: Disable selection of text content within the set of matched elements. -//>>docs: http://api.jqueryui.com/disableSelection/ - -// This file is deprecated - - -var disableSelection = $.fn.extend( { - disableSelection: ( function() { - var eventType = "onselectstart" in document.createElement( "div" ) ? - "selectstart" : - "mousedown"; - - return function() { - return this.on( eventType + ".ui-disableSelection", function( event ) { - event.preventDefault(); - } ); - }; - } )(), - - enableSelection: function() { - return this.off( ".ui-disableSelection" ); - } -} ); - - -/*! - * jQuery UI Scroll Parent 1.12.1 - * http://jqueryui.com - * - * Copyright jQuery Foundation and other contributors - * Released under the MIT license. - * http://jquery.org/license - */ - -//>>label: scrollParent -//>>group: Core -//>>description: Get the closest ancestor element that is scrollable. -//>>docs: http://api.jqueryui.com/scrollParent/ - - - -var scrollParent = $.fn.scrollParent = function( includeHidden ) { - var position = this.css( "position" ), - excludeStaticParent = position === "absolute", - overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/, - scrollParent = this.parents().filter( function() { - var parent = $( this ); - if ( excludeStaticParent && parent.css( "position" ) === "static" ) { - return false; - } - return overflowRegex.test( parent.css( "overflow" ) + parent.css( "overflow-y" ) + - parent.css( "overflow-x" ) ); - } ).eq( 0 ); - - return position === "fixed" || !scrollParent.length ? - $( this[ 0 ].ownerDocument || document ) : - scrollParent; -}; - - - - -// This file is deprecated -var ie = $.ui.ie = !!/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ); - -/*! - * jQuery UI Mouse 1.12.1 - * http://jqueryui.com - * - * Copyright jQuery Foundation and other contributors - * Released under the MIT license. - * http://jquery.org/license - */ - -//>>label: Mouse -//>>group: Widgets -//>>description: Abstracts mouse-based interactions to assist in creating certain widgets. -//>>docs: http://api.jqueryui.com/mouse/ - - - -var mouseHandled = false; -$( document ).on( "mouseup", function() { - mouseHandled = false; -} ); - -var widgetsMouse = $.widget( "ui.mouse", { - version: "1.12.1", - options: { - cancel: "input, textarea, button, select, option", - distance: 1, - delay: 0 - }, - _mouseInit: function() { - var that = this; - - this.element - .on( "mousedown." + this.widgetName, function( event ) { - return that._mouseDown( event ); - } ) - .on( "click." + this.widgetName, function( event ) { - if ( true === $.data( event.target, that.widgetName + ".preventClickEvent" ) ) { - $.removeData( event.target, that.widgetName + ".preventClickEvent" ); - event.stopImmediatePropagation(); - return false; - } - } ); - - this.started = false; - }, - - // TODO: make sure destroying one instance of mouse doesn't mess with - // other instances of mouse - _mouseDestroy: function() { - this.element.off( "." + this.widgetName ); - if ( this._mouseMoveDelegate ) { - this.document - .off( "mousemove." + this.widgetName, this._mouseMoveDelegate ) - .off( "mouseup." + this.widgetName, this._mouseUpDelegate ); - } - }, - - _mouseDown: function( event ) { - - // don't let more than one widget handle mouseStart - if ( mouseHandled ) { - return; - } - - this._mouseMoved = false; - - // We may have missed mouseup (out of window) - ( this._mouseStarted && this._mouseUp( event ) ); - - this._mouseDownEvent = event; - - var that = this, - btnIsLeft = ( event.which === 1 ), - - // event.target.nodeName works around a bug in IE 8 with - // disabled inputs (#7620) - elIsCancel = ( typeof this.options.cancel === "string" && event.target.nodeName ? - $( event.target ).closest( this.options.cancel ).length : false ); - if ( !btnIsLeft || elIsCancel || !this._mouseCapture( event ) ) { - return true; - } - - this.mouseDelayMet = !this.options.delay; - if ( !this.mouseDelayMet ) { - this._mouseDelayTimer = setTimeout( function() { - that.mouseDelayMet = true; - }, this.options.delay ); - } - - if ( this._mouseDistanceMet( event ) && this._mouseDelayMet( event ) ) { - this._mouseStarted = ( this._mouseStart( event ) !== false ); - if ( !this._mouseStarted ) { - event.preventDefault(); - return true; - } - } - - // Click event may never have fired (Gecko & Opera) - if ( true === $.data( event.target, this.widgetName + ".preventClickEvent" ) ) { - $.removeData( event.target, this.widgetName + ".preventClickEvent" ); - } - - // These delegates are required to keep context - this._mouseMoveDelegate = function( event ) { - return that._mouseMove( event ); - }; - this._mouseUpDelegate = function( event ) { - return that._mouseUp( event ); - }; - - this.document - .on( "mousemove." + this.widgetName, this._mouseMoveDelegate ) - .on( "mouseup." + this.widgetName, this._mouseUpDelegate ); - - event.preventDefault(); - - mouseHandled = true; - return true; - }, - - _mouseMove: function( event ) { - - // Only check for mouseups outside the document if you've moved inside the document - // at least once. This prevents the firing of mouseup in the case of IE<9, which will - // fire a mousemove event if content is placed under the cursor. See #7778 - // Support: IE <9 - if ( this._mouseMoved ) { - - // IE mouseup check - mouseup happened when mouse was out of window - if ( $.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && - !event.button ) { - return this._mouseUp( event ); - - // Iframe mouseup check - mouseup occurred in another document - } else if ( !event.which ) { - - // Support: Safari <=8 - 9 - // Safari sets which to 0 if you press any of the following keys - // during a drag (#14461) - if ( event.originalEvent.altKey || event.originalEvent.ctrlKey || - event.originalEvent.metaKey || event.originalEvent.shiftKey ) { - this.ignoreMissingWhich = true; - } else if ( !this.ignoreMissingWhich ) { - return this._mouseUp( event ); - } - } - } - - if ( event.which || event.button ) { - this._mouseMoved = true; - } - - if ( this._mouseStarted ) { - this._mouseDrag( event ); - return event.preventDefault(); - } - - if ( this._mouseDistanceMet( event ) && this._mouseDelayMet( event ) ) { - this._mouseStarted = - ( this._mouseStart( this._mouseDownEvent, event ) !== false ); - ( this._mouseStarted ? this._mouseDrag( event ) : this._mouseUp( event ) ); - } - - return !this._mouseStarted; - }, - - _mouseUp: function( event ) { - this.document - .off( "mousemove." + this.widgetName, this._mouseMoveDelegate ) - .off( "mouseup." + this.widgetName, this._mouseUpDelegate ); - - if ( this._mouseStarted ) { - this._mouseStarted = false; - - if ( event.target === this._mouseDownEvent.target ) { - $.data( event.target, this.widgetName + ".preventClickEvent", true ); - } - - this._mouseStop( event ); - } - - if ( this._mouseDelayTimer ) { - clearTimeout( this._mouseDelayTimer ); - delete this._mouseDelayTimer; - } - - this.ignoreMissingWhich = false; - mouseHandled = false; - event.preventDefault(); - }, - - _mouseDistanceMet: function( event ) { - return ( Math.max( - Math.abs( this._mouseDownEvent.pageX - event.pageX ), - Math.abs( this._mouseDownEvent.pageY - event.pageY ) - ) >= this.options.distance - ); - }, - - _mouseDelayMet: function( /* event */ ) { - return this.mouseDelayMet; - }, - - // These are placeholder methods, to be overriden by extending plugin - _mouseStart: function( /* event */ ) {}, - _mouseDrag: function( /* event */ ) {}, - _mouseStop: function( /* event */ ) {}, - _mouseCapture: function( /* event */ ) { return true; } -} ); - - - - -// $.ui.plugin is deprecated. Use $.widget() extensions instead. -var plugin = $.ui.plugin = { - add: function( module, option, set ) { - var i, - proto = $.ui[ module ].prototype; - for ( i in set ) { - proto.plugins[ i ] = proto.plugins[ i ] || []; - proto.plugins[ i ].push( [ option, set[ i ] ] ); - } - }, - call: function( instance, name, args, allowDisconnected ) { - var i, - set = instance.plugins[ name ]; - - if ( !set ) { - return; - } - - if ( !allowDisconnected && ( !instance.element[ 0 ].parentNode || - instance.element[ 0 ].parentNode.nodeType === 11 ) ) { - return; - } - - for ( i = 0; i < set.length; i++ ) { - if ( instance.options[ set[ i ][ 0 ] ] ) { - set[ i ][ 1 ].apply( instance.element, args ); - } - } - } -}; - - - -var safeActiveElement = $.ui.safeActiveElement = function( document ) { - var activeElement; - - // Support: IE 9 only - // IE9 throws an "Unspecified error" accessing document.activeElement from an