diff --git a/public/markdown/monitoring.md b/public/markdown/monitoring.md new file mode 100644 index 0000000..8d03535 --- /dev/null +++ b/public/markdown/monitoring.md @@ -0,0 +1 @@ +Monitor your system with Grafana diff --git a/public/markdown/support.md b/public/markdown/support.md new file mode 100644 index 0000000..88e8dd4 --- /dev/null +++ b/public/markdown/support.md @@ -0,0 +1 @@ +Access documentation and forum diff --git a/src/components/UserModal/consts.ts b/src/components/UserModal/consts.ts index 8f2aa98..d17985a 100644 --- a/src/components/UserModal/consts.ts +++ b/src/components/UserModal/consts.ts @@ -25,6 +25,12 @@ export const appAccessList = [ label: 'Zulip', documentationUrl: 'https://docs.zulip.com/help/', }, + { + name: 'monitoring', + image: '/assets/monitoring.svg', + label: 'Monitoring', + documentationUrl: 'https://grafana.com/docs/', + }, ]; export const allAppAccessList = [ diff --git a/src/modules/apps/Apps.tsx b/src/modules/apps/Apps.tsx index 945146a..ed5f01c 100644 --- a/src/modules/apps/Apps.tsx +++ b/src/modules/apps/Apps.tsx @@ -5,7 +5,6 @@ import { SearchIcon } from '@heroicons/react/solid'; import { showToast, ToastType } from 'src/common/util/show-toast'; import _, { debounce } from 'lodash'; import { Table } from 'src/components'; -import { appAccessList } from 'src/components/UserModal/consts'; import { App, AppStatus, useApps } from 'src/services/apps'; import { AppInstallModal } from './components'; import { getConstForStatus } from './consts'; @@ -40,11 +39,10 @@ export const Apps: React.FC = () => { accessor: 'name', Cell: (e: any) => { const app = e.cell.row.original as App; - const imageSrc = _.find(appAccessList, { name: app.slug })?.image; return (
- {app.name} + {app.name}
{app.name}
diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx index 612cc39..cb8f44f 100644 --- a/src/modules/dashboard/Dashboard.tsx +++ b/src/modules/dashboard/Dashboard.tsx @@ -1,15 +1,14 @@ /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect } from 'react'; -import clsx from 'clsx'; import { useApps } from 'src/services/apps'; -// import { DASHBOARD_QUICK_ACCESS } from './consts'; -import { DashboardCard } from './components'; +import { DASHBOARD_QUICK_ACCESS } from './consts'; +import { DashboardCard, DashboardUtility } from './components'; export const Dashboard: React.FC = () => { const host = window.location.hostname; const splitedDomain = host.split('.'); splitedDomain.shift(); - const { apps, appTableLoading, loadApps } = useApps(); + const { apps, loadApps } = useApps(); // Tell React to load the apps useEffect(() => { @@ -29,11 +28,27 @@ export const Dashboard: React.FC = () => {
{apps - .filter((app) => app.slug !== 'dashboard') + .filter((app) => ['dashboard', 'monitoring'].indexOf(app.slug) === -1) .map((app) => ( ))}
+
+
+

Utilities

+
+ +
+ {DASHBOARD_QUICK_ACCESS.map((item) => ( + + ))} + {apps + .filter((app) => app.slug === 'monitoring' && app.url !== null) + .map((app) => ( + + ))} +
+
); diff --git a/src/modules/dashboard/components/DashboardUtility/DashboardUtility.tsx b/src/modules/dashboard/components/DashboardUtility/DashboardUtility.tsx new file mode 100644 index 0000000..22d2e14 --- /dev/null +++ b/src/modules/dashboard/components/DashboardUtility/DashboardUtility.tsx @@ -0,0 +1,38 @@ +import React, { useState, useEffect } from 'react'; +import ReactMarkdown from 'react-markdown'; + +export const DashboardUtility: React.FC = ({ item }: { item: any }) => { + const [content, setContent] = useState(''); + + useEffect(() => { + fetch(item.markdownSrc) + .then((res) => res.text()) + .then((md) => { + return setContent(md); + }) + .catch(() => {}); + }, [item.markdownSrc]); + + return ( + <> + +
+ {item.icon &&
+
+
{item.name}
+
+ {content} +
+
+ + + ); +}; diff --git a/src/modules/dashboard/components/DashboardUtility/index.ts b/src/modules/dashboard/components/DashboardUtility/index.ts new file mode 100644 index 0000000..24e4b68 --- /dev/null +++ b/src/modules/dashboard/components/DashboardUtility/index.ts @@ -0,0 +1 @@ +export { DashboardUtility } from './DashboardUtility'; diff --git a/src/modules/dashboard/components/index.ts b/src/modules/dashboard/components/index.ts index 479e087..2a14682 100644 --- a/src/modules/dashboard/components/index.ts +++ b/src/modules/dashboard/components/index.ts @@ -1 +1,2 @@ export { DashboardCard } from './DashboardCard'; +export { DashboardUtility } from './DashboardUtility'; diff --git a/src/modules/dashboard/consts.ts b/src/modules/dashboard/consts.ts index c33481a..340e261 100644 --- a/src/modules/dashboard/consts.ts +++ b/src/modules/dashboard/consts.ts @@ -1,51 +1,10 @@ -import { ChartBarIcon, InformationCircleIcon } from '@heroicons/react/outline'; +import { InformationCircleIcon } from '@heroicons/react/outline'; -export const DASHBOARD_APPS = (rootDomain: string) => [ +export const DASHBOARD_QUICK_ACCESS = [ { - id: 1, - name: 'Nextcloud', - assetSrc: '/assets/nextcloud.svg', - markdownSrc: '/markdown/nextcloud.md', - url: `https://files.${rootDomain}`, - }, - { - id: 2, - name: 'Wekan', - assetSrc: '/assets/wekan.svg', - markdownSrc: '/markdown/wekan.md', - url: `https://wekan.${rootDomain}`, - }, - { - id: 3, - name: 'Zulip', - assetSrc: '/assets/zulip.svg', - markdownSrc: '/markdown/zulip.md', - url: `https://zulip.${rootDomain}`, - }, - { - id: 4, - name: 'Wordpress', - assetSrc: '/assets/wordpress.svg', - markdownSrc: '/markdown/wordpress.md', - url: `https://www.${rootDomain}`, - }, -]; - -export const DASHBOARD_QUICK_ACCESS = (rootDomain: string) => [ - { - id: 1, - name: 'Monitoring →', - url: `https://grafana.${rootDomain}`, - description: 'Monitor your system with Grafana', - icon: ChartBarIcon, - active: true, - }, - { - id: 2, - name: 'Support →', + name: 'Support', url: 'https://docs.stackspin.net', - description: 'Access documentation and forum', + markdownSrc: '/markdown/support.md', icon: InformationCircleIcon, - active: true, }, ];