Skip to content

Commit

Permalink
Merge new version to docker-metastore.
Browse files Browse the repository at this point in the history
  • Loading branch information
@VolkerHartmann
VolkerHartmann committed Nov 22, 2023
2 parents 8a309a3 + 2ab130e commit 2f6a15f
Show file tree
Hide file tree
Showing 73 changed files with 5,663 additions and 1,372 deletions.
63 changes: 32 additions & 31 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

This repository contains a collection of generic web frontends for accessing RESTful services from the KIT Data Manager service portfolio. The idea is to have graphical user interfaces available such that certain base services can be directly used for performing basic tasks without the need of integrating them in your own frontends before being able to use them the first time.

However, for some application cases, these generic web frontends might even be sufficient for direct interaction with our services and they might be offered to the end-user. To allow that, all frontends of this collection offer a certain degree of customization to slightly adapt their presentation to specific needs.
However, for some application cases, these generic web frontends might even be sufficient for direct interaction with our services, and they might be offered to the end-user. To allow that, all frontends of this collection offer a certain degree of customization to slightly adapt their presentation to specific needs.

## Installation

Installing the frontend collection is relatively easy, as it is based only on HTML and vanilla JavaScript and therefore needs no external dependencies or frameworks to be installed. The only thing you'll need is a web server hosting the contents, e.g., an Apache HTTP server, an NGINX server, or for testing purposes a simple HTTP server provided by Python, which is the one we'll focus here.

If you don't have Python installed, this would be the first step for you. You may either install Python 2.x or 3.x, depending on your preferences.

Afterwards, you have to clone this repository to a directory of your choice, e.g., /home/user/, and change into the 'frontend-collection' subfolder:
Afterwards, you have to clone this repository to a directory of your choice, e.g., /home/user/, and change into the 'frontend-collection' sub folder:

```bash
user@hostname:~ git clone https://github.com/kit-data-manager/frontend-collection
Expand All @@ -34,57 +34,58 @@ user@hostname:~/frontent-collection python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
```

After this, the output should tell you that the content is served at [http://localhost:8000/](http://localhost:8000/). Hostname and/or port might be different depending on your local configuration.
After this, the output should tell you that the content is served at [http://localhost:8000/](http://localhost:8000/).
Hostname and/or port might be different depending on your local configuration.

You can now access the HTML pages of the single frontends directly, which are:

| Service | Frontend Location|
|---------------|------------------|
| [base-repo](https://github.com/kit-data-manager/base-repo) | http://localhost:8000/repo-management.html
| [metastore](https://github.com/kit-data-manager/metastore2) | http://localhost:8000/metadata-management.html or http://localhost:8000/schema-management.html
| Service | Frontend Location|
|------------------------------------------------------------------------|------------------|
| [base-repo](https://github.com/kit-data-manager/base-repo) | http://localhost:8000/repo-management.html
| [metastore](https://github.com/kit-data-manager/metastore2) | http://localhost:8000/metadata-management.html or http://localhost:8000/schema-management.html
| [typed-pid-maker](https://github.com/kit-data-manager/pit-service) | http://localhost:8000/typed-pid-maker-ui.html
| [mapping-service](https://github.com/kit-data-manager/mapping-service) | http://localhost:8000/mapping-service-ui.html
| fdo-creator | http://localhost:8000/fdo-creator-ui.html

## Basic Customization

For basic customization please check the .settings.js files in the js subfolder of this repository. For each frontend, you'll find one settings file, e.g., `base-repo.settings.js` for repo-management.html or `metastore.settings.js` for metadata-management.html and schema-management.html.
For basic customization please check the .settings.js files in the `settings` sub folder of this repository.
Settings for the dashboard page can be found in `dashboard.settings.js`.
Settings applied for different frontends the same way can be found in `general.settings.js`.
In addition, for each frontend you'll find a specific settings file, e.g., `base-repo.settings.js` for repo-management.html or
`metastore.settings.js` for metadata-management.html and schema-management.html.

Depending on the service, there might be different settings available depending on the service's capabilities. There are some commons property variables listed in the following table:

| Variable | Description |
|---------------|------------------|
| ajaxBaseUrl | The base URL for requests to this service, e.g., http://localhost:8080/api/v1/ Be aware, that providing a wrong base URL will result in loading errors in the frontend.
| keycloak | If you want to enable authentication via Keycloak, you have to assign a proper value according to the example to this variable. Otherwise, no user login will be provided.
| showServiceUrl | Setting this variable `true` will allow to change ajaxBaseUrl in the frontend. This setting is meant for developers only. In production environments, only `ajaxBaseUrl` should be used.
| appDescription | Here you can customize the header of your frontend, e.g., by providing a custom logo, title, or subtitle.

For the base-repo frontend, there is another variable named `tags`. This variable allows to provide a list of tags and their color, which are then presented to the user to tag content elements in the frontend. Please note, that tag colors re only used in the frontend and are not stored at the base-repo service. Browsing a base-repo instance with another instance of the frontend having a different tag coloring scheme will render the tags according to the configuration in the currently used frontend instance.
For more information please refer to the documentation inside the setting files.

## Issues

:grey_question:
**The table showing service entries shows an error and no data is loaded.**

:grey_exclamation:
Typically, this is an issue with the ajaxBaseURL, which was either provided in the settings.js file or via the input of the frontend page. At first, you should check the format. The URL should look similar to http://localhost:8080/api/v1/ , i.e., it should contain protocol, hostname and port depending on the addressed service instance followed by api/v1/, which is the base path of the API itself and **must** end with /
Typically, this is an issue with the ajaxBaseURL, which was either provided in the service's settings.js file or via the input of the frontend page.
At first, you should check the format. The URL should look similar to http://localhost:8080/api/v1/ or http://localhost:8090/, i.e.,
it should contain protocol, hostname and port depending on the addressed service instance optionally followed by an API base path, e.g., api/v1/,
which is the base path of the API itself. The ajaxBaseURL **must** end with /

If everything looks fine, ensure that no authentication is used by the service you want to address. If Keycloak-based authentication is used, please adapt the settings.js accordingly to gain access.
If everything looks fine, ensure that no authentication is used by the service you want to address. If Keycloak-based
authentication is used by the service, please also adapt the `general.settings.js` accordingly to gain access.

If both checks succeed, please also check by which protocol the server providing your frontend is accessible. If it is `https` you are only allowed to load information from `https` resources. Accessing a service via `http` from a frontend running with `https` is not possible for security reasons.
If both checks succeed, please also check by which protocol the server providing your frontend is accessible.
If it is `https` you are only allowed to load information from `https` resources. Accessing a service via `http`
from a frontend running with `https` is not possible for security reasons.

Finally, if everything looks fine so far there might also be an issue with the service itself. Try to access the service without frontend to ensure
it is up and running.
---

:grey_question:
**Applying filters to the tables in `metadata-management.html` and `schema-management.html` results in incomplete pages.**

:grey_exclamation:
The reason here is, that pagination for the MetaStore frontend is build remotely, whereas filering happens on the client-side. In future this will change in a way, that both is done on the client side.

---

:grey_question: **The tables in `repo-management.html` seem not to contain all resources I have in my system.**
**After applying a filter to the MetaStore and base-repo frontends, no results are shown even when I'm sure that there should be one.**

:grey_exclamation:
For the base-repo frontent, pagination is done locally instead of remotely. However, for proper local pagination, the Tabulator library we are using for handling tables requires a certain response format which is not yet provided by base-repo. Therefore, Tabulator-wise only one page with 20 elements is loaded. This will change in future.

The reason here is, that the tables are loaded page-wise with max. 20 entries at once. New data is only loaded on scrolling. As filtering
happens on the client-side, only the data already loaded is filtered. This may result in an empty table if elements known to match
the filter criteria are not loaded yet. The only solution for this for now is scrolling the table to the end before applying filters.

## License

Expand Down
16 changes: 16 additions & 0 deletions compile.sh
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
#!/bin/bash

for FILE in ./definitions/search/*.handlebars;
do
handlebars $FILE -f "${FILE}.js"
done

for FILE in ./definitions/base-repo/*.handlebars;
do
handlebars $FILE -f "${FILE}.js"
done

for FILE in ./definitions/metastore/*.handlebars;
do
handlebars $FILE -f "${FILE}.js"
done
93 changes: 57 additions & 36 deletions dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@

<script src="js/semantic-ui/transition.min.js"></script>
<script src="js/semantic-ui/dimmer.min.js"></script>
<script src="settings/dashboard.settings.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@kit-data-manager/[email protected]/deps/opt/fontawesome/css/all.min.css">
href="https://cdn.jsdelivr.net/npm/@kit-data-manager/[email protected]/deps/opt/fontawesome/css/all.min.css">
<link rel="stylesheet" href="./css/semantic.min.css">
<link rel="stylesheet" href="./css/styles.css" />
<style>
Expand All @@ -34,15 +35,15 @@
<body class="ui">
<div class="main">
<h1 class="ui block header">
<img id="app-logo" src="./images/kitdm.png" class="ui circular image">
<img id="app-logo" src="./images/Logo_KIT.png" class="ui circular image">
<div id="app-title" class="content">
Frontend Collection Dashboard
<div id="app-subtitle" class="sub header">A collection of web frontends</div>
</div>
</h1>

<div class="ui padded container">
<div class="ui large segment">
<div class="ui large segment" id="app-description">
<p>This collection of generic web frontends provides access to RESTful services of the KIT Data Manager
service portfolio.
The idea is to have graphical user interfaces available such that certain base services can be
Expand All @@ -63,7 +64,7 @@ <h1 class="ui block header">
</div>

<div class="ui special centered cards">
<div class="card">
<div class="card" id="metastore-card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
Expand All @@ -80,14 +81,8 @@ <h1 class="ui block header">
<span>Manage and access your metadata schemas and documents.</span>
</div>
</div>
<!--div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div-->
</div>
<div class="card">
<div class="card" id="base-repo-card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
Expand All @@ -104,14 +99,8 @@ <h1 class="ui block header">
<span>Manage and access your research data described by DataCite metadata.</span>
</div>
</div>
<!--div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div-->
</div>
<div class="card">
</div>
<div class="card" id="typed-pid-maker-card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
Expand All @@ -129,14 +118,27 @@ <h1 class="ui block header">
<span>View all PIDs created with your Typed PID Maker instance.</span>
</div>
</div>
<!--div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div-->
</div>
<div class="card">
<div class="card" id="fdo-builder-card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div id="fdo-builder-ui" class="ui primary button">Open</div>
</div>
</div>
</div>
<img src="./images/typed-pid-maker-full.svg" class="ui fluid image"
style="padding: 1em; aspect-ratio: 640 / 427;">
</div>
<div class="content">
<a class="header">FDO Builder UI</a>
<div class="meta">
<span>Graphical creation of FDOs.</span>
</div>
</div>
</div>
<div class="card" id="mapping-service-card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
Expand All @@ -153,29 +155,45 @@ <h1 class="ui block header">
<span>View Mapping Service interface.</span>
</div>
</div>
<!--div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div-->
</div>
<script>
if(!showMetaStore){
$('#metastore-card').attr("style", "display:none");
}
if(!showBaseRepo){
$('#base-repo-card').attr("style", "display:none");
}
if(!showTypedPIDMaker){
$('#typed-pid-maker-card').attr("style", "display:none");
}
if(!showFDOBuilder){
$('#fdo-builder-card').attr("style", "display:none");
}
if(!showMappingService){
$('#mapping-service-card').attr("style", "display:none");
}

$('#app-logo').attr("src", appDescription["app-logo"]);
let header = appDescription["app-title"] +
'<div id="app-subtitle" class="sub header">' + appDescription["app-subtitle"] + '</div>';

$('#app-title').html(header);
$('#app-description').html(appDescription["app-description"]);
</script>

</div>
</div>
</div>
<div class="ui inverted attached footer segment">
<div class="ui container">
<div class="ui secondary inverted menu">

<div class="item">
<a href="https://github.com/kit-data-manager/frontend-collection"><em
class="fa-brands fa-github"></em></a>
</div>
<div class="right item">
<a href="https://www.kit.edu/legals.php">Legals</a>
</div>


</div>
</div>
</div>
Expand All @@ -192,10 +210,13 @@ <h1 class="ui block header">
$('#typed-pid-maker-ui').click(() => {
window.open("typed-pid-maker-ui.html", "_self");
});
$('#fdo-builder-ui').click(() => {
window.open("fdo-builder-ui.html", "_self");
});
$('#mapping-service-ui').click(() => {
window.open("mapping-service-ui.html", "_self");
});
</script>
</body>

</html>
</html>
Loading

0 comments on commit 2f6a15f

Please sign in to comment.