From 4919ccd7dddd30869edd1baed681326f429f6e14 Mon Sep 17 00:00:00 2001
From: Tin Geber <tin@greenhost.nl>
Date: Fri, 26 May 2023 12:01:51 +0200
Subject: [PATCH] added system info JSON, updated README
---
README.md | 86 +++++++++++++------
frontend/src/modules/dashboard/Dashboard.tsx | 9 +-
.../DashboardCard/DashboardCard.tsx | 10 ++-
.../src/modules/dashboard/systemInfo.json | 15 ++++
4 files changed, 90 insertions(+), 30 deletions(-)
create mode 100644 frontend/src/modules/dashboard/systemInfo.json
diff --git a/README.md b/README.md
index 3d6bd755..22405e49 100644
--- a/README.md
+++ b/README.md
@@ -17,25 +17,25 @@ identity provider, login, consent and logout endpoints for the OpenID Connect
The application relies on the following components:
- - **Hydra**: Hydra is an open source OIDC server.
- It means applications can connect to Hydra to start a session with a user.
- Hydra provides the application with the username
- and other roles/claims for the application.
- Hydra is developed by Ory and has security as one of their top priorities.
-
- - **Kratos**: This is Identity Manager
- and contains all the user profiles and secrets (passwords).
- Kratos is designed to work mostly between UI (browser) and kratos directly,
- over a public API endpoint.
- Authentication, form-validation, etc. are all handled by Kratos.
- Kratos only provides an API and not UI itself.
- Kratos provides an admin API as well,
- which is only used from the server-side flask app to create/delete users.
-
- - **MariaDB**: The login application, as well as Hydra and Kratos, need to store data.
- This is done in a MariaDB database server.
- There is one instance with three databases.
- As all databases are very small we do not foresee resource limitation problems.
+- **Hydra**: Hydra is an open source OIDC server.
+ It means applications can connect to Hydra to start a session with a user.
+ Hydra provides the application with the username
+ and other roles/claims for the application.
+ Hydra is developed by Ory and has security as one of their top priorities.
+
+- **Kratos**: This is Identity Manager
+ and contains all the user profiles and secrets (passwords).
+ Kratos is designed to work mostly between UI (browser) and kratos directly,
+ over a public API endpoint.
+ Authentication, form-validation, etc. are all handled by Kratos.
+ Kratos only provides an API and not UI itself.
+ Kratos provides an admin API as well,
+ which is only used from the server-side flask app to create/delete users.
+
+- **MariaDB**: The login application, as well as Hydra and Kratos, need to store data.
+ This is done in a MariaDB database server.
+ There is one instance with three databases.
+ As all databases are very small we do not foresee resource limitation problems.
If Hydra hits a new session/user, it has to know if this user has access.
To do so, the user has to login through a login application.
@@ -67,10 +67,11 @@ These need to be available locally, because Kratos wants to run on the same
domain as the front-end that serves the login interface.
### Setup
+
Before you start, make sure your machine has the required software installed, as per official documentation: https://docs.stackspin.net/en/v2/installation/install_cli.html#preparing-the-provisioning-machine.
Please read through all subsections to set up your environment before
-attempting to run the dashboard locally.
+attempting to run the dashboard locally.
#### 1. Stackspin cluster
@@ -106,21 +107,48 @@ The script needs you to have access to the Kubernetes cluster that runs
Stackspin. Point the `KUBECONFIG` environment variable to a kubectl config.
Attention points:
-* The kubeconfig will be mounted inside docker containers, so also make sure
+- The kubeconfig will be mounted inside docker containers, so also make sure
your Docker user can read it.
-* The bind-mount done by docker might not work if the file pointed to is
+- The bind-mount done by docker might not work if the file pointed to is
part of a filesystem such as sshfs. In that case, copy the file to a local
drive first.
-### Build and run
+## 5. Build and run
+
+To recap, you now have:
+
+- A running Stackspin _provisioning machine_ (the [Stackspin repository](https://open.greenhost.net/stackspin/stackspin) is installed and running on your computer)
+- A running Stackspin cluster (a VPS that you successfully connected to from your computer)
+- Implemented overrides for local dashboard development (by installing and running the [Dashboard Dev Overrides](https://open.greenhost.net/stackspin/dashboard-dev-overrides) repository, editing your `/etc/hosts` file, etc)
+- A copy of the [Stackspin Dashboard repository](https://open.greenhost.net/stackspin/dashboard) on your device.
+
+That's a lot of work! Good job.
+
+### Setup your local dev environment
+
+Before you actually run the main script, `cd` into the `/frontend` directory and run`yarn install`.
+
+This is not strictly necessary for development, as the script also builds and installs all the necessary stuff in the dashboard's docker container. But running `yarn install` locally will let your IDE enable all of its bells and whistles, as it will be expecting to find all the necessary in the `node_modules` folder.
+
+### Let's Run this App
-After you've finished all setup steps, you can run everything using
+After you've finished all setup steps, you can run everything using:
- ./run_app.sh
+```
+./run_app.sh
+```
+
+This script
+
+- sets a few environment variables based on the content in your cluster
+ secrets, and
+- runs `docker compose up` to build and run all necessary components, including a reverse proxy and the backend flask application.
-This sets a few environment variables based on what is in your cluster
-secrets, and run `docker compose up` to build and run all necessary components,
-including a reverse proxy and the backend flask application.
+If you're curious about what `docker compose up` does, you can check out the `docker-compose.yml` file. If you are curious about what `docker compose up` _means,_ you can start here: https://github.com/docker/compose or even here: https://en.wikipedia.org/wiki/Infrastructure_as_code.
+
+This should be it, congratulations!! If you're having issues, or if something is not working properly, please open an issue or get in touch: info@stackspin.net
+
+---
## Testing as a part of Stackspin
@@ -136,6 +164,7 @@ version in the Gitlab helm chart repo for the dashboard project, but in the
have been merged to the `main` branch.
Once your package is published, use it by
+
1. changing the `spec.url` field of the `flux-system/dashboard`
`HelmRepository` object in the cluster where you want to run this, replacing
`stable` by `unstable`; and
@@ -145,6 +174,7 @@ Once your package is published, use it by
## Release process
To publish a new version of the helm chart:
+
1. Increase the docker image tag in `deployment/helmchart/values.yaml` so it uses the new tag (to be
created in a later step of this release).
2. Update the appVersion in `deployment/helmchart/Chart.yaml` to match that new tag version.
diff --git a/frontend/src/modules/dashboard/Dashboard.tsx b/frontend/src/modules/dashboard/Dashboard.tsx
index 47968ef6..04f16bc4 100644
--- a/frontend/src/modules/dashboard/Dashboard.tsx
+++ b/frontend/src/modules/dashboard/Dashboard.tsx
@@ -5,12 +5,16 @@
* "Utilities" is a special section that links to the Stackspin documentation,
* and that shows the "Monitoring" application if it is installed.
*/
+
import React, { useEffect } from 'react';
import { useApps } from 'src/services/apps';
import { AppStatusEnum } from 'src/services/apps/types';
+import systemInfo from './systemInfo.json';
import { DashboardCard, DashboardUtility } from './components';
import { DASHBOARD_QUICK_ACCESS, HIDDEN_APPS, UTILITY_APPS } from './consts';
+const appVersion = systemInfo.appVersions;
+
export const Dashboard: React.FC = () => {
const host = window.location.hostname;
const splitedDomain = host.split('.');
@@ -38,7 +42,10 @@ export const Dashboard: React.FC = () => {
.filter((app) => HIDDEN_APPS.concat(UTILITY_APPS).indexOf(app.slug) === -1)
.filter((app) => app.status !== AppStatusEnum.NotInstalled)
.map((app) => (
- <DashboardCard app={app} key={app.name} />
+ <>
+ {/* {appVersion = systemInfo.appVersions[app.name as keyof typeof systemInfo.appVersions];} */}
+ <DashboardCard app={app} key={app.name} version={appVersion[app.slug as keyof typeof appVersion]} />
+ </>
))}
</div>
<div className="max-w-4xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
diff --git a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
index e675a1d6..cf6464b3 100644
--- a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
+++ b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
@@ -3,8 +3,15 @@ import { Modal } from 'src/components';
import ReactMarkdown from 'react-markdown';
import matter from 'gray-matter';
import { QuestionMarkCircleIcon } from '@heroicons/react/outline';
+// import { array } from 'yup';
-export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
+type DashboardCardProps = {
+ app: any;
+ version: string;
+};
+
+export const DashboardCard = ({ app, version }: DashboardCardProps) => {
+ // export const DashboardCard: React.FC<{ any, string }> = ({ app }: { app: any }, { version }: { version: string }) => {
const [readMoreVisible, setReadMoreVisible] = useState(false);
const [rawMarkdown, setContent] = useState('');
@@ -44,6 +51,7 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
<h2 className="text-xl leading-8 font-bold">{app.name}</h2>
</div>
</div>
+ <p className="text-xs">{version} is the version</p>
<p className="text-gray-500 mt-2 text-sm leading-5 font-normal">{appDescription.data.tileExcerpt}</p>
</div>
<div className="px-2.5 py-2.5 sm:px-4 flex justify-end">
diff --git a/frontend/src/modules/dashboard/systemInfo.json b/frontend/src/modules/dashboard/systemInfo.json
new file mode 100644
index 00000000..70b1928d
--- /dev/null
+++ b/frontend/src/modules/dashboard/systemInfo.json
@@ -0,0 +1,15 @@
+{
+ "appVersions": {
+ "dashboard": "0.6.5",
+ "nextcloud": "25.0.4",
+ "velero": "1.9.4",
+ "wekan": "5.93",
+ "wordpress": "6.0.1",
+ "zulip": "6.0",
+ "hedgedoc": "4.2"
+ },
+ "lastRelease": "2.4",
+ "lastUpdated": "2023-03-16T11:41:24Z",
+ "releaseNotesUrl": "https://open.greenhost.net/stackspin/stackspin/-/blob/main/CHANGELOG.md#anchor-24",
+ "version": "2.4"
+}
--
GitLab