reworked gui for easier use + updated documentation

This commit is contained in:
Chris Caron 2020-01-18 15:32:53 -05:00
parent c295291263
commit 4bb142aa36
10 changed files with 40 additions and 9152 deletions

View File

@ -6,7 +6,7 @@ Take advantage of [Apprise](https://github.com/caronc/apprise) through your netw
- An incredibly lightweight gateway to Apprise.
- A production ready micro-service at your disposal.
Apprise API was designed to easily fit into existing (and new) eco-systems that are looking for a simple notification solution.
Apprise API was designed to easily fit into existing (and new) eco-systems that is looking for a simple notification solution.
[![Paypal](https://img.shields.io/badge/paypal-donate-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MHANV39UZNQ5E)
[![Follow](https://img.shields.io/twitter/follow/l2gnux)](https://twitter.com/l2gnux/)<br/>
@ -47,13 +47,13 @@ docker-compose up
```
## Apprise URLs
📣 In order to trigger a notifications, you need to generate one or more [Apprise URLs](https://github.com/caronc/apprise/wiki) to pass through this tools API. Apprise supports well over 50 notification services today and is always expanding. Visit https://github.com/caronc/apprise/wiki to see all of the supported Apprise services and how you can generate your own URLs from them.
📣 In order to trigger a notifications, you first need to create one or more [Apprise URLs](https://github.com/caronc/apprise/wiki). Apprise supports well over 50 notification services today and is always expanding to add support for more! Visit https://github.com/caronc/apprise/wiki to see all of the supported Apprise services and how you can generate your own URLs from them.
## API Details
### Stateless Solution
Most people want a sidecar solution that does not make use of any persistent storage. This service allows you to do this if you wish. The following can be used to directly send a notification of your choice to any of the [supported services by Apprise](https://github.com/caronc/apprise/wiki):
Some people may wish to only have a sidecar solution that does require use of any persistent storage. The following API endpoint can be used to directly send a notification of your choice to any of the [supported services by Apprise](https://github.com/caronc/apprise/wiki) without any storage based requirements:
| Path | Method | Description |
|------------- | ------ | ----------- |
@ -69,7 +69,7 @@ curl -X POST -d '{"urls": "mailto://user:pass@gmail.com", "body":"test message"}
### Persistent Storage Solution
The Apprise API has a very low overhead, but can save all of your configuration and/or set of Apprise URLs and associate them with a `{KEY}` of your choosing. You can write as many entries to this store as you like for later retrieval. Here are some of the API calls you can make use of if you plan on using the built in persistent storage:
You can pre-save all of your Apprise configuration and/or set of Apprise URLs and associate them with a `{KEY}` of your choosing. Once set, the configuration persists for retrieval by the `apprise` [CLI tool](https://github.com/caronc/apprise/wiki/CLI_Usage). The built in website associated with comes with a user interface that you can usse to leverage these API calls. However those who wish to build their own application around this can use the following API end points:
| Path | Method | Description |
|------------- | ------ | ----------- |
@ -79,7 +79,7 @@ The Apprise API has a very low overhead, but can save all of your configuration
| `/notify/{KEY}` | POST | Sends a notification based on the Apprise Configuration associated with the specified *{KEY}*.<br/>*Parameters*<br/>📌 **body**: Your message body. This is the *only* required field.<br/>📌 **title**: Optionally define a title to go along with the *body*.<br/>📌 **type**: Defines the message type you want to send as. The valid options are `info`, `success`, `warning`, and `error`. If no *type* is specified then `info` is the default value used.<br/>📌 **tag**: Optionally notify only those tagged accordingly.
| `/json/urls/{KEY}` | GET | Returns a JSON response object that contains all of the URLS and Tags associated with the key specified.
The `/json/urls/{KEY}` response might look like this:
As an example, the `/json/urls/{KEY}` response might return something like this:
```json
{
"tags": ["devops", "admin", "me"],
@ -122,7 +122,7 @@ curl -X POST -d '{"tag":"devops", "body":"test message"}' \
- `{KEY}` must be 1-64 alphanumeric characters in length. In addition to this, the underscore (`_`) and dash (`-`) are also accepted.
- Specify the `Content-Type` of `application/json` to use the JSON support.
- There is no authentication (or SSL encryption) required to use this API; this is by design. The intention here to be a lightweight and fast micro-service that can be parked behind another tier that was designed to handle security.
- There is no authentication (or SSL encryption) required to use this API; this is by design. The intention here to be a lightweight and fast micro-service.
- There are no additional dependencies should you choose to use the optional persistent store (mounted as `/config`).
### Environment Variables
@ -131,11 +131,11 @@ The use of environment variables allow you to provide over-rides to default sett
| Variable | Description |
|--------------------- | ----------- |
| `APPRISE_CONFIG_DIR` | Defines an (optional) persistent store location of all configuration files saved. By default:<br/> - Configuration is written to the `apprise_api/var/config` directory when just using the _Django_ `manage runserver` script. However for the path for containers is `/config`
| `APPRISE_STATELESS_URLS` | For a non-persistent solution, you can take advantage of this global variable. Use this to define a default set of Apprise URLs to notify when using API calls to `/notify`. If no `{KEY}` is defined when calling `/notify` then the URLs defined here are used instead.
| `APPRISE_CONFIG_DIR` | Defines an (optional) persistent store location of all configuration files saved. By default:<br/> - Configuration is written to the `apprise_api/var/config` directory when just using the _Django_ `manage runserver` script. However for the path for the container is `/config`.
| `APPRISE_STATELESS_URLS` | For a non-persistent solution, you can take advantage of this global variable. Use this to define a default set of Apprise URLs to notify when using API calls to `/notify`. If no `{KEY}` is defined when calling `/notify` then the URLs defined here are used instead. By default, nothing is defined for this variable.
| `SECRET_KEY` | A Django variable acting as a *salt* for most things that require security. This API uses it for the hash sequences when writing the configuration files to disk.
| `ALLOWED_HOSTS` | A list of strings representing the host/domain names that this API can serve. This is a security measure to prevent HTTP Host header attacks, which are possible even under many seemingly-safe web server configurations. By default this is set to `*` allowing any host. Use space to delimit more then one host.
| `DEBUG` | This defaults to `False` however can be set to `True`if defined with a non-zero value (such as `1`).
| `DEBUG` | This defaults to `False` however can be set to `True` if defined with a non-zero value (such as `1`).
## Development Environment

Binary file not shown.

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 296 KiB

After

Width:  |  Height:  |  Size: 189 KiB

View File

@ -5,9 +5,9 @@
<div class="row">
<div class="col s12">
<ul class="tabs config-overview">
<li class="tab col s4"><a class="active" href="#overview">{% trans "Overview" %}</a></li>
<li class="tab col s4"><a href="#config">{%trans "Configuration" %}</a></li>
<li class="tab col s4"><a href="#notify">{%trans "Notifications" %}</a></li>
<li class="tab col s4"><a class="active" href="#overview"><i class="material-icons">info</i> {% trans "Overview" %}</a></li>
<li class="tab col s4"><a href="#config"><i class="material-icons">settings</i> {%trans "Configuration" %}</a></li>
<li class="tab col s4"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a></li>
</ul>
</div>
<div id="overview" class="col s12">
@ -34,37 +34,15 @@
</div>
</div>
<div id="config" class="col s12">
<div class="section">
<h5>{% trans "Option 1: Set By URL(s)" %}</h5>
<p>
{% blocktrans %}
Use a comma and/or space to separate one Apprise URL from another.
{% endblocktrans %}
<form id="addurl" action="{% url "add" key %}" method="post">
{{ form_url }}
<button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Submit" %}
<i class="material-icons right">send</i>
</button>
</form>
</p>
</div>
<div class="section">
<h5>{% trans "Option 2: Set By Config" %}</h5>
<p>
{% blocktrans %}
This option grants you a bit more flexability because you can additionally associate tags with your URLs. Those
using YAML configuration can also alter the Apprise Asset object as well for a more customized look and feel.
{% endblocktrans %}
<form id="addconfig" action="{% url "add" key %}" method="post">
{{ form_cfg }}
<button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Submit" %}
<i class="material-icons right">send</i>
</button>
</form>
</p>
</div>
<p>
{% blocktrans %}Define your configuration below:{% endblocktrans %}
<form id="addconfig" action="{% url "add" key %}" method="post">
{{ form_cfg }}
<button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Submit" %}
<i class="material-icons right">send</i>
</button>
</form>
</p>
</div>
<div id="notify" class="col s12">
<p>
@ -159,42 +137,6 @@ async function update() {
update();
// over-ride manual submit for a nicer user experience
document.querySelector('#addurl').onsubmit = function(event) {
event.preventDefault();
const form = this;
const body = new URLSearchParams(new FormData(form));
// perform our status check
let response = fetch('{% url "add" key %}', {
method: 'POST',
body: body,
}).then(function(response) {
if(response.status == 200)
{
// update our settings
update();
// reset our form
form.reset();
Swal.fire(
'Save',
'Successfully saved the specified URL(s).',
'success'
);
} else {
Swal.fire(
'Save',
'Failed to save the specified URL(s).',
'error'
);
}
});
return false;
}
// over-ride manual submit for a nicer user experience
document.querySelector('#addconfig').onsubmit = function(event) {
event.preventDefault();
@ -279,7 +221,12 @@ document.querySelector('#donotify').onsubmit = function(event) {
const form = this;
const body = new URLSearchParams(new FormData(form));
// perform our status check
// perform our notification
Swal.fire(
'Notification',
'Sending notification(s)...',
);
Swal.showLoading()
let response = fetch('{% url "notify" key %}', {
method: 'POST',
body: body,
@ -303,7 +250,6 @@ document.querySelector('#donotify').onsubmit = function(event) {
});
return false;
}
{% endblock %}
{% block onload %}

View File

@ -1,5 +1,4 @@
# -*- coding: utf-8 -*-
# -*- coding: utf-8 -*-
#
# Copyright (C) 2019 Chris Caron <lead2gold@gmail.com>
# All rights reserved.

View File

@ -1,6 +1,6 @@
.nav h1 {
margin: 0;
font-size: 3.1rem;
margin: 0.4rem;
font-size: 2.1rem;
font-weight: bold;
text-transform: uppercase;
}
@ -43,6 +43,7 @@ textarea {
}
.tabs .tab a{
border-radius: 25px 25px 0 0;
color:#2bbbad;
}
.collection a.collection-item:not(.active):hover,
@ -51,7 +52,10 @@ textarea {
}
.tabs .tab a:hover,.tabs .tab a.active {
background-color:transparent;
color:#2bbbad;
/* color:#2bbbad;*/
color:#004d40;
font-weight: bold;
background-color: #eee;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
color:rgba(102,147,153,0.7);
@ -59,3 +63,7 @@ textarea {
.tabs .indicator {
background-color:#004d40;
}
.material-icons{
display: inline-flex;
vertical-align: middle;
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -17,6 +17,8 @@ server {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://apprise_backend;
# Give ample time for notifications to fire
proxy_read_timeout 120s;
}
# Static Content