Skip to content

Commit 3702bc5

Browse files
TyMarcTyMarc
authored
Merge pull request #35 from Flared/mahinse/status_page
Created the status page, showing basic information of when was the last time the events were ingested
2 parents c2f8ea8 + 97fb9e9 commit 3702bc5

40 files changed

Lines changed: 1247 additions & 71 deletions

‎packages/configuration-screen/.eslintrc.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,16 @@ module.exports = {
66
'react/jsx-filename-extension': [2, { 'extensions': ['.js', '.jsx', '.ts', '.tsx'] }],
77
'no-restricted-syntax': 'off',
88
'no-use-before-define': 'off',
9-
'@typescript-eslint/no-use-before-define': ['warn'],
9+
"@typescript-eslint/explicit-function-return-type": [
10+
"error",
11+
{
12+
"allowExpressions": false,
13+
"allowTypedFunctionExpressions": true,
14+
"allowHigherOrderFunctions": false,
15+
"allowDirectConstAssertionInArrowFunctions": true,
16+
"allowConciseArrowFunctionExpressionsStartingWithVoid": true,
17+
}
18+
],
1019
'@typescript-eslint/no-unused-vars': ['warn'],
1120
'no-unused-vars': ['warn'],
1221
'camelcase': 'off',

‎packages/configuration-screen/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@splunk/configuration-screen",
2+
"name": "@flare/configuration-screen",
33
"version": "0.0.1",
44
"license": "UNLICENSED",
55
"scripts": {

‎packages/configuration-screen/src/ConfigurationScreen.tsx‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
3333

3434
toastManager.setTheme(theme);
3535

36-
function reset() {
36+
function reset(): void {
3737
setApiKey('');
3838
setTenantId(-1);
3939
setUserTenants([]);
4040
setIsLoading(false);
4141
setIsCompleted(false);
4242
}
4343

44-
function getCurrentConfigurationStep() {
44+
function getCurrentConfigurationStep(): ConfigurationSteps {
4545
if (tenants.length === 0) {
4646
return ConfigurationSteps.Initial;
4747
}
@@ -52,13 +52,13 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
5252
return ConfigurationSteps.Completed;
5353
}
5454

55-
const handleApiKeyChange = (e) => setApiKey(e.target.value);
56-
const handleTenantIdChange = (e) => setTenantId(parseInt(e.target.value, 10));
57-
const handleIsIngestingMetadataChange = (e) => {
55+
const handleApiKeyChange = (e): void => setApiKey(e.target.value);
56+
const handleTenantIdChange = (e): void => setTenantId(parseInt(e.target.value, 10));
57+
const handleIsIngestingMetadataChange = (e): void => {
5858
setIsIngestingMetadataOnly(e.target.checked);
5959
};
6060

61-
const handleBackButton = () => {
61+
const handleBackButton = (): void => {
6262
const currentConfigurationStep = getCurrentConfigurationStep();
6363
if (currentConfigurationStep === ConfigurationSteps.Initial) {
6464
redirectToHomepage();
@@ -69,19 +69,19 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
6969
}
7070
};
7171

72-
const handleSubmitApiKey = () => {
72+
const handleSubmitApiKey = (): void => {
7373
setIsLoading(true);
7474
retrieveUserTenants(
7575
apiKey,
76-
(userTenants) => {
76+
(userTenants: Tenant[]) => {
7777
if (tenantId === -1 && userTenants.length > 0) {
7878
setTenantId(userTenants[0].id);
7979
}
8080
setErrorMessage('');
8181
setUserTenants(userTenants);
8282
setIsLoading(false);
8383
},
84-
(error) => {
84+
(error: string) => {
8585
setErrorMessage(error);
8686
setIsLoading(false);
8787
toastManager.show({
@@ -93,7 +93,7 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
9393
);
9494
};
9595

96-
const handleSubmitTenant = () => {
96+
const handleSubmitTenant = (): void => {
9797
setIsLoading(true);
9898
saveConfiguration(apiKey, tenantId, isIngestingMetadataOnly)
9999
.then(() => {
@@ -105,7 +105,7 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
105105
content: 'Configured Flare Account',
106106
});
107107
})
108-
.catch((e) => {
108+
.catch((e: any) => {
109109
setIsLoading(false);
110110
toastManager.show({
111111
id: TOAST_API_KEY_ERROR,
@@ -115,8 +115,8 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
115115
});
116116
};
117117

118-
function getSelectedTenantName() {
119-
const filteredTenants = tenants.filter((p) => p.id === tenantId);
118+
function getSelectedTenantName(): string {
119+
const filteredTenants = tenants.filter((tenant: Tenant) => tenant.id === tenantId);
120120
if (filteredTenants.length > 0) {
121121
return filteredTenants[0].name;
122122
}
@@ -128,10 +128,12 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
128128
if (isCompleted) {
129129
return;
130130
}
131-
retrieveApiKey().then((key) => setApiKey(key));
132-
retrieveTenantId().then((id) => setTenantId(id));
133-
retrieveIngestMetadataOnly().then((ingestMetadataOnly) =>
134-
setIsIngestingMetadataOnly(ingestMetadataOnly)
131+
Promise.all([retrieveApiKey(), retrieveTenantId(), retrieveIngestMetadataOnly()]).then(
132+
([key, id, ingestMetadataOnly]) => {
133+
setApiKey(key);
134+
setTenantId(id);
135+
setIsIngestingMetadataOnly(ingestMetadataOnly);
136+
}
135137
);
136138
}, [isCompleted]);
137139

@@ -168,25 +170,25 @@ const ConfigurationScreen: FC<{ theme: string }> = ({ theme }) => {
168170
apiKey={apiKey}
169171
errorMessage={errorMessage}
170172
isLoading={isLoading}
171-
onBackClicked={handleBackButton}
172-
onNextClicked={handleSubmitApiKey}
173-
onApiKeyChanged={handleApiKeyChange}
173+
onCancelConfigurationClick={handleBackButton}
174+
onSubmitApiKeyClick={handleSubmitApiKey}
175+
onApiKeyChange={handleApiKeyChange}
174176
/>
175177
<ConfigurationUserPreferencesStep
176178
show={currentConfigurationStep === ConfigurationSteps.UserPreferences}
177179
selectedTenantId={tenantId}
178180
tenants={tenants}
179181
isLoading={isLoading}
180182
isIngestingMetadataOnly={isIngestingMetadataOnly}
181-
onBackClicked={handleBackButton}
182-
onNextClicked={handleSubmitTenant}
183-
onTenantIdChanged={handleTenantIdChange}
184-
onIngestingMetadataChanged={handleIsIngestingMetadataChange}
183+
onNavigateBackClick={handleBackButton}
184+
onSubmitUserPreferencesClick={handleSubmitTenant}
185+
onTenantIdChange={handleTenantIdChange}
186+
onIngestingMetadataChange={handleIsIngestingMetadataChange}
185187
/>
186188
<ConfigurationCompletedStep
187189
show={currentConfigurationStep === ConfigurationSteps.Completed}
188190
tenantName={getSelectedTenantName()}
189-
onBackClicked={handleBackButton}
191+
onEditConfigurationClick={handleBackButton}
190192
/>
191193
</div>
192194
<div id="learn-more" className="link">

‎packages/configuration-screen/src/components/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Button: FC<{ onClick: () => void; isSecondary?: boolean; isLoading?: boole
1212
return (
1313
<button
1414
type="button"
15-
onClick={() => onClick()}
15+
onClick={(): void => onClick()}
1616
className={isSecondary ? 'secondary-button' : 'primary-button'}
1717
disabled={isLoading}
1818
>

‎packages/configuration-screen/src/components/ConfigurationCompletedStep.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import './ConfigurationGlobalStep.css';
88
const ConfigurationCompletedStep: FC<{
99
show: boolean;
1010
tenantName: string;
11-
onBackClicked: () => void;
12-
}> = ({ show, tenantName, onBackClicked }) => {
11+
onEditConfigurationClick: () => void;
12+
}> = ({ show, tenantName, onEditConfigurationClick }) => {
1313
const [indexName, setIndexName] = useState<string>();
1414

1515
useEffect(() => {
@@ -25,7 +25,7 @@ const ConfigurationCompletedStep: FC<{
2525
</h5>
2626
<div className="form-group">
2727
<div className="button-group">
28-
<Button onClick={() => onBackClicked()} isSecondary>
28+
<Button onClick={(): void => onEditConfigurationClick()} isSecondary>
2929
Edit Configuration
3030
</Button>
3131
<div className="link">

‎packages/configuration-screen/src/components/ConfigurationInitialStep.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ const ConfigurationInitialStep: FC<{
1212
apiKey?: string;
1313
errorMessage?: string;
1414
isLoading?: boolean;
15-
onBackClicked: () => void;
16-
onNextClicked: () => void;
17-
onApiKeyChanged: (e: ChangeEvent) => void;
15+
onCancelConfigurationClick: () => void;
16+
onSubmitApiKeyClick: () => void;
17+
onApiKeyChange: (e: ChangeEvent) => void;
1818
}> = ({
1919
show = false,
2020
apiKey = '',
2121
errorMessage = '',
2222
isLoading = false,
23-
onBackClicked,
24-
onNextClicked,
25-
onApiKeyChanged,
23+
onCancelConfigurationClick,
24+
onSubmitApiKeyClick,
25+
onApiKeyChange,
2626
}) => {
2727
return (
2828
<div hidden={!show}>
@@ -43,7 +43,7 @@ const ConfigurationInitialStep: FC<{
4343
id="apiKey"
4444
type="password"
4545
value={apiKey}
46-
onChange={onApiKeyChanged}
46+
onChange={onApiKeyChange}
4747
className={`input ${errorMessage.length > 0 ? 'border-error' : ''}`}
4848
placeholder="Your API Key"
4949
/>
@@ -52,10 +52,10 @@ const ConfigurationInitialStep: FC<{
5252
<small>Error. {errorMessage}</small>
5353
</div>
5454
<div className="button-group">
55-
<Button onClick={() => onBackClicked()} isSecondary>
55+
<Button onClick={(): void => onCancelConfigurationClick()} isSecondary>
5656
Cancel
5757
</Button>
58-
<Button onClick={() => onNextClicked()} isLoading={isLoading}>
58+
<Button onClick={(): void => onSubmitApiKeyClick()} isLoading={isLoading}>
5959
Next
6060
</Button>
6161
</div>

‎packages/configuration-screen/src/components/ConfigurationUserPreferencesStep.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,27 @@ const ConfigurationUserPreferencesStep: FC<{
1414
selectedTenantId: number;
1515
isLoading: boolean;
1616
isIngestingMetadataOnly: boolean;
17-
onBackClicked: () => void;
18-
onNextClicked: () => void;
19-
onTenantIdChanged: (e: ChangeEvent) => void;
20-
onIngestingMetadataChanged: (e: ChangeEvent) => void;
17+
onNavigateBackClick: () => void;
18+
onSubmitUserPreferencesClick: () => void;
19+
onTenantIdChange: (e: ChangeEvent) => void;
20+
onIngestingMetadataChange: (e: ChangeEvent) => void;
2121
}> = ({
2222
show,
2323
tenants,
2424
selectedTenantId,
2525
isLoading,
2626
isIngestingMetadataOnly,
27-
onBackClicked,
28-
onNextClicked,
29-
onTenantIdChanged,
30-
onIngestingMetadataChanged,
27+
onNavigateBackClick,
28+
onSubmitUserPreferencesClick,
29+
onTenantIdChange,
30+
onIngestingMetadataChange,
3131
}) => {
3232
return (
3333
<div hidden={!show}>
3434
<h5>Please select the Tenant you want to ingest events from</h5>
3535
<div className="form-group">
3636
<Label isRequired>Tenant</Label>
37-
<Select id="tenants" onChange={onTenantIdChanged} value={selectedTenantId}>
37+
<Select id="tenants" onChange={onTenantIdChange} value={selectedTenantId}>
3838
{tenants.map((tenant) => {
3939
return (
4040
<option key={tenants.indexOf(tenant)} value={tenant.id}>
@@ -46,13 +46,16 @@ const ConfigurationUserPreferencesStep: FC<{
4646
<small className="note">You can only monitor one tenant at a time.</small>
4747
<div className="switch-layout">
4848
<span>Only ingest the metadata of events</span>
49-
<Switch value={isIngestingMetadataOnly} onChange={onIngestingMetadataChanged} />
49+
<Switch value={isIngestingMetadataOnly} onChange={onIngestingMetadataChange} />
5050
</div>
5151
<div className="button-group">
52-
<Button onClick={() => onBackClicked()} isSecondary>
52+
<Button onClick={(): void => onNavigateBackClick()} isSecondary>
5353
Back
5454
</Button>
55-
<Button onClick={() => onNextClicked()} isLoading={isLoading}>
55+
<Button
56+
onClick={(): void => onSubmitUserPreferencesClick()}
57+
isLoading={isLoading}
58+
>
5659
Submit
5760
</Button>
5861
</div>

‎packages/configuration-screen/src/components/Toast.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Toast: FC<ToastProps> = (props) => {
2424
}, 175);
2525
}, duration);
2626

27-
return () => clearTimeout(timer);
27+
return (): void => clearTimeout(timer);
2828
}, [onDestroy, duration]);
2929

3030
return (

‎packages/configuration-screen/src/components/ToastManager.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class ToastManager {
2525
this.containerRef = toastContainer;
2626
}
2727

28-
public setTheme(theme: string) {
28+
public setTheme(theme: string): void {
2929
if (theme === 'dark') {
3030
this.containerRef.className = theme;
3131
} else {
@@ -34,12 +34,11 @@ export class ToastManager {
3434
}
3535

3636
public show(options: ToastOptions): void {
37-
const toast: ToastProps = {
38-
...options,
39-
onDestroy: () => this.destroy(options.id),
40-
};
41-
42-
if (this.toasts.filter((p) => p.id === options.id).length === 0) {
37+
if (this.toasts.filter((toast: ToastProps) => toast.id === options.id).length === 0) {
38+
const toast: ToastProps = {
39+
...options,
40+
onDestroy: () => this.destroy(options.id),
41+
};
4342
this.toasts = [toast, ...this.toasts];
4443
this.render();
4544
}

‎packages/configuration-screen/src/components/Tooltip.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@ const TOOLTIP_WINDOW_ID = 'tooltip-window';
99
const Tooltip: FC<{}> = ({ children }) => {
1010
const [isOpened, setIsOpened] = useState(false);
1111

12-
function globalClickListener(event: MouseEvent) {
12+
function globalClickListener(event: MouseEvent): void {
1313
const tooltipWindow = document.getElementById(TOOLTIP_WINDOW_ID);
1414

1515
if (
1616
tooltipWindow &&
1717
event.target instanceof HTMLElement &&
1818
!tooltipWindow.contains(event.target)
1919
) {
20-
toggleOpened(false);
20+
toggleOpen(false);
2121
}
2222
}
2323

24-
function toggleOpened(open: boolean) {
24+
function toggleOpen(open: boolean): void {
2525
if (open) {
2626
document.addEventListener('click', globalClickListener);
2727
} else {
@@ -32,10 +32,18 @@ const Tooltip: FC<{}> = ({ children }) => {
3232

3333
return (
3434
<div className="tooltip-container">
35-
<span className="tooltip-button" hidden={!isOpened} onClick={() => toggleOpened(false)}>
35+
<span
36+
className="tooltip-button"
37+
hidden={!isOpened}
38+
onClick={(): void => toggleOpen(false)}
39+
>
3640
<CloseIcon remSize={1} />
3741
</span>
38-
<span className="tooltip-button" hidden={isOpened} onClick={() => toggleOpened(true)}>
42+
<span
43+
className="tooltip-button"
44+
hidden={isOpened}
45+
onClick={(): void => toggleOpen(true)}
46+
>
3947
<TooltipIcon remSize={1} />
4048
</span>
4149
<div hidden={!isOpened} id={TOOLTIP_WINDOW_ID} className="tooltip">

0 commit comments

Comments
 (0)