github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

Update build and UI components

Browse Source
This commit is contained in:
Simon Larsen
2024-03-13 18:41:32 +00:00
parent f5c128fd6a
commit 5d37de0c71
6 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
CommonUI/src/Components/Card/Card.tsx
View File

@@ -28,8 +28,8 @@ export interface ComponentProps {
const Card: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
const noRightElementsOrButtons = !props.rightElement && (!props.buttons || props.buttons.length === 0);
const noRightElementsOrButtons: boolean =
!props.rightElement && (!props.buttons || props.buttons.length === 0);
return (
<React.Fragment>
@@ -37,7 +37,11 @@ const Card: FunctionComponent<ComponentProps> = (
<div className="shadow sm:rounded-md">
<div className="bg-white py-6 px-4 sm:p-6">
<div className="flex justify-between">
<div className={`${noRightElementsOrButtons ? 'w-full' : ''}`}>
<div
className={`${
noRightElementsOrButtons ? 'w-full' : ''
}`}
>
<h2
data-testid="card-details-heading"
id="card-details-heading"

7
CommonUI/src/Components/CodeBlock/CodeBlock.tsx
View File

@@ -1,5 +1,6 @@
import React, { FunctionComponent, ReactElement } from 'react';
import Highlight from 'react-highlight'
import Highlight from 'react-highlight';
import 'highlight.js/styles/a11y-dark.css';
export interface ComponentProps {
code: string | ReactElement;
@@ -10,7 +11,9 @@ const CodeBlock: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
return (
<Highlight className={`language-${props.language}`}>
<Highlight
className={`p-3 language-${props.language} rounded-md shadow`}
>
{props.code}
</Highlight>
);

27
Dashboard/src/Components/Monitor/ServerMonitor/Documentation.tsx
View File

@@ -1,4 +1,3 @@
import ObjectID from 'Common/Types/ObjectID';
import Card from 'CommonUI/src/Components/Card/Card';
import CodeBlock from 'CommonUI/src/Components/CodeBlock/CodeBlock';
@@ -12,22 +11,32 @@ export interface ComponentProps {
const ServerMonitorDocumentation: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
const host: string = `${HTTP_PROTOCOL}${HOST}`;
let showHost: boolean = true;
const host = `${HTTP_PROTOCOL}${HOST}`;
if (host === 'https://oneuptime.com') {
showHost = false;
}
return (
<>
<Card
title={`Set up your Server Monitor`}
description={
<div className='space-y-2 w-full'>
<div>Please install NPM on your server. </div>
<CodeBlock language='bash' code={<div>
<p>npm install -g @oneuptime/infrastructure-agent</p>
<p>oneuptime-infrastructure-agent --secret-key={props.secretKey.toString()} --oneuptime-url={host}</p>
</div>} />
</div>
<div className="space-y-2 w-full mt-5">
<CodeBlock
language="bash"
code={`
# Please make sure you have NPM installed on your server
npm install -g @oneuptime/infrastructure-agent
oneuptime-infrastructure-agent --secret-key=${props.secretKey.toString()} ${
showHost ? '--oneuptime-url=' + host : ''
}
`}
/>
</div>
}
/>
</>

12
Dashboard/src/Pages/Monitor/View/Index.tsx
View File

@@ -133,7 +133,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
color: true,
},
incomingRequestSecretKey: true,
serverMonitorSecretKey: true
serverMonitorSecretKey: true,
},
});
@@ -295,7 +295,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
color={
(
item[
'currentMonitorStatus'
'currentMonitorStatus'
] as JSONObject
)['color'] as Color
}
@@ -303,7 +303,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
text={
(
item[
'currentMonitorStatus'
'currentMonitorStatus'
] as JSONObject
)['name'] as string
}
@@ -333,7 +333,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
labels={
BaseModel.fromJSON(
(item['labels'] as JSONArray) ||
[],
[],
Label
) as Array<Label>
}
@@ -354,7 +354,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
{/* Heartbeat URL */}
{monitorType === MonitorType.IncomingRequest &&
monitor?.incomingRequestSecretKey ? (
monitor?.incomingRequestSecretKey ? (
<IncomingMonitorLink
secretKey={monitor?.incomingRequestSecretKey}
/>
@@ -363,7 +363,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
)}
{monitorType === MonitorType.Server &&
monitor?.serverMonitorSecretKey ? (
monitor?.serverMonitorSecretKey ? (
<ServerMonitorDocumentation
secretKey={monitor?.serverMonitorSecretKey}
/>

6
Dashboard/src/Pages/Monitor/View/Settings.tsx
View File

@@ -140,7 +140,8 @@ const MonitorCriteria: FunctionComponent<PageComponentProps> = (
title={'Reset Incoming Request Secret Key'}
description={
<p className="mt-2">
Your current incoming request secret key is {' '}
Your current incoming request secret key is{' '}
{' '}
<InlineCode
text={
monitor.incomingRequestSecretKey?.toString() ||
@@ -170,7 +171,8 @@ const MonitorCriteria: FunctionComponent<PageComponentProps> = (
title={'Reset Server Monitor Secret Key'}
description={
<p className="mt-2">
Your current server monitor secret key is {' '}
Your current server monitor secret key is{' '}
{' '}
<InlineCode
text={
monitor.serverMonitorSecretKey?.toString() ||

3
InfrastructureAgent/Scripts/Build/Base.sh
View File

@@ -1,9 +1,10 @@
cd ..
cd Common && npm install && cd ..
cd Model && npm install && cd ..
cd CommonServer && npm install && cd ..
cd CommonUI && npm install --force && cd ..
cd InfrastructureAgent
npm install
npm run compile
npm run build