Skip to content
This repository has been archived by the owner on Jul 11, 2022. It is now read-only.

Commit

Permalink
Some README.md fixes and improvements
Browse files Browse the repository at this point in the history
Signed-off-by: Julius Volz <julius.volz@gmail.com>
  • Loading branch information
juliusv committed Aug 4, 2020
1 parent 3742fe4 commit 4de46c9
Showing 1 changed file with 38 additions and 27 deletions.
65 changes: 38 additions & 27 deletions README.md
Expand Up @@ -3,66 +3,77 @@ CodeMirror-mode-promql
[![CircleCI](https://circleci.com/gh/prometheus-community/codemirror-promql.svg?style=shield)](https://circleci.com/gh/prometheus-community/codemirror-promql) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)

## Overview
This project provides a mode for [CodeMirror](https://codemirror.net/) that handles the PromQL ([Prometheus](https://prometheus.io/docs/introduction/overview/) Query Language) syntax.
This project provides a mode for [CodeMirror Next](https://codemirror.net/6) that handles syntax highlighting and autocompletion for the PromQL ([Prometheus Query Language](https://prometheus.io/docs/introduction/overview/)).

Initially the repository was in a private repository, it has been transferred to the prometheus-community (Thanks to [Julius Volz](https://github.com/juliusv) that helped us for that)
During the transfer, the repository and the package changed its name from **codemirror-mode-promql** to the current one: **codemirror-promql**.
Initially this code was in a private repository. It has been transferred to the `prometheus-community` organization (Thanks to [Julius Volz](https://github.com/juliusv) who helped us with that).
During the transfer, the repository and the package changed its name from `codemirror-mode-promql` to the current one: `codemirror-promql`.

### Status
This mode is **not** production ready. If you want to use it, you may encounter some parsing issue.
This mode is **not** production ready. If you want to use it, you may encounter some issues.

For the moment, the mode only proposes an offline mode with a light PromQL grammar inside. That means it is actually parsing what you are writing and will highlight some syntax error when it is possible.
In future release, an online mode will be developed using the different feature provides by the [promQL-langserver](https://github.com/prometheus-community/promql-langserver)
See the [Development](#development) section for more information on features and usage.

### Installation
Language support is available on npm :
This mode is available as an npm package:

| Version | command to use |
| ------------------- | ------------------------------------- |
| >= 0.3.0 | `npm install codemirror-promql` |
| >= 0.2.2 < 0.3.0 | `npm install codemirror-mode-promql` |

### Playground
If you want to test it, you have the last version available on the following website:
You can try out the latest release version of this mode on:

https://prometheus-community.github.io/codemirror-promql/

Here is a picture that displays what happen when you write a promQL expression:
This screenshot demonstrates the syntax highlighting for some example PromQL expressions:

![sample](https://user-images.githubusercontent.com/4548045/76161611-478ff880-6135-11ea-8b73-a35be5f650a7.PNG)
> Samples coming from https://github.com/infinityworks/prometheus-example-queries
### RoadMap
Roadmap is available in the issue [#5](https://github.com/prometheus-community/codemirror-promql/issues/5)
A roadmap is available in the issue [#5](https://github.com/prometheus-community/codemirror-promql/issues/5).

## Usage
* [How to use it in an angular project](./examples/angular-promql/README.md)

## Contributions
Any contribution or suggestion would be really appreciated. Feel free to use the Issue section or to send a pull request.
Any contribution or suggestion would be really appreciated. Feel free to [file an issue](https://github.com/prometheus-community/codemirror-promql/issues) or [send a pull request](https://github.com/prometheus-community/codemirror-promql/pulls).

## Development
In case you want to contribute and change the code by yourself, do the following command:
* `npm install` to install all dependencies
* `npm start` to start the web server. It should create a tab in your browser with the dev app that contains codeMirror with the promQL plugin.

Note: The autocompletion has 3 different mode, and each required a different setup:

* **lsp**: this mode required to start a prometheus server + the [promql-langserver](https://github.com/prometheus-community/promql-langserver) with the following configuration
In case you want to contribute and change the code by yourself, run the following commands:

To install all dependencies:

```
npm install
```

To start the web server:

```
npm start
```

This should create a tab in your browser with the development app that contains CodeMirror Next with the PromQL plugin.

**Note:** The autocompletion feature has 3 different modes, each requiring a different setup:

* **lsp**: This mode requires starting a Prometheus server and the [promql-langserver](https://github.com/prometheus-community/promql-langserver) with the following configuration:
```yaml
prometheus_url: "http://localhost:9090"
rest_api_port: 8080
```
* **prometheus**: this mode required to start a prometheus server available on the port 9090
* **offline**: this mode doesn't require anything.
Note2: to avoid the CORS issue that happen if you are testing the lsp or prometheus completion, you should start your browser with the web security disable.
* Example for Google chrome on windows:
* windows + r : and copy and past `chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security`

### Deploy to Github Page
* **prometheus**: This mode requires starting a Prometheus server listening on port 9090.
* **offline**: This mode doesn't require anything.

**Note 2:** To avoid CORS issues when testing LSP-based completion, start your browser with web security disabled.
* Example for Google Chrome on Windows:
* `<Win>` + `r` and copy and paste `chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security`

### Deploy to Github Pages
* `npm install -g angular-cli-ghpages`
* go on examples/angular-promql
* Change into the `examples/angular-promql` directory.
* `ng build --prod --base-href "https://prometheus-community.github.io/codemirror-promql/"`
* `ngh -d dist/angular-promql`

Expand Down

0 comments on commit 4de46c9

Please sign in to comment.