Skip to content

Commit 958e068

Browse files
tjeerddieGeorgi2704
tjeerddie
and
Georgi2704
authored
Add Environment Variables tab in settings page (#2055)
* Add Environment Variables tab in settings page * Add message when backend doesnt expose env vars yet * Add translations and change color to theme version * rename function to mapToRepresentableVariables --------- Co-authored-by: Georgi Manev <[email protected]>
1 parent b6e3bb0 commit 958e068

File tree

6 files changed

+202
-13
lines changed

6 files changed

+202
-13
lines changed

‎packages/orchestrator-ui-components/src/configuration/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const SETTINGS_WORKER_STATUS_ENDPOINT = `${SETTINGS_ENDPOINT}/worker-stat
1717
export const SETTINGS_CACHE_NAMES_ENDPOINT = `${SETTINGS_ENDPOINT}/cache-names`;
1818
export const SETTINGS_CACHE_ENDPOINT = `${SETTINGS_ENDPOINT}/cache`;
1919
export const SETTINGS_SEARCH_INDEX_RESET_ENDPOINT = `${SETTINGS_ENDPOINT}/search-index/reset`;
20+
export const SETTINGS_OVERVIEW = `${SETTINGS_ENDPOINT}/overview`;
2021
//ipam
2122
export const IPAM_ENDPOINT = 'surf/ipam';
2223
export const IPAM_PREFIX_FILTERS_ENDPOINT = `${IPAM_ENDPOINT}/prefix_filters`;

‎packages/orchestrator-ui-components/src/messages/en-GB.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,13 @@
412412
"numberOfRunningJobs": "Number of running jobs",
413413
"numberOfWorkersOnline": "Number of workers online",
414414
"viewStatusPage": "View AO status page",
415-
"aoStackStatus": "AO stack status"
415+
"aoStackStatus": "AO stack status",
416+
"noSettingsExposed": "No settings exposed by the backend, to enable this, please refer to the",
417+
"settingsOverviewLink": "Settings Overview page in the documentation"
418+
},
419+
"tabs": {
420+
"actions": "Actions",
421+
"envSettings": "Environment Settings"
416422
}
417423
},
418424
"startPage": {

‎packages/orchestrator-ui-components/src/messages/nl-NL.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,13 @@
407407
"status": "Status",
408408
"numberOfQueuedJobs": "Aantal queued jobs",
409409
"numberOfRunningJobs": "Aantal running jobs",
410-
"numberOfWorkersOnline": "Aantal workers online"
410+
"numberOfWorkersOnline": "Aantal workers online",
411+
"noSettingsExposed": "Er zijn geen instellingen beschikbaar vanuit de backend. Om dit in te schakelen, raadpleeg de ",
412+
"settingsOverviewLink": "pagina Instellingenoverzicht in de documentatie"
413+
},
414+
"tabs": {
415+
"actions": "Acties",
416+
"envSettings": "Environment Settings"
411417
}
412418
},
413419
"startPage": {

‎packages/orchestrator-ui-components/src/pages/settings/WfoSettingsPage.tsx‎

Lines changed: 161 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22

33
import { useTranslations } from 'next-intl';
4+
import { StringParam, useQueryParam, withDefault } from 'use-query-params';
45

5-
import { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
6+
import {
7+
EuiCodeBlock,
8+
EuiFlexItem,
9+
EuiPanel,
10+
EuiSpacer,
11+
EuiTab,
12+
EuiTabs,
13+
EuiText,
14+
} from '@elastic/eui';
15+
import { css } from '@emotion/react';
616

717
import {
818
WfoEngineStatus,
@@ -11,21 +21,27 @@ import {
1121
WfoWorkerStatus,
1222
} from '@/components';
1323
import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
24+
import { getStyles } from '@/components/WfoFilterTabs/styles';
1425
import { WfoAoStackStatus } from '@/components/WfoSettings/WfoAoStackStatus';
15-
import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
26+
import {
27+
useGetOrchestratorConfig,
28+
useOrchestratorTheme,
29+
useWithOrchestratorTheme,
30+
} from '@/hooks';
31+
import { useGetEnvironmentVariablesQuery } from '@/rtk';
32+
import { EnvironmentVariable, EnvironmentVariables } from '@/types';
1633

17-
export const WfoSettingsPage = () => {
34+
export enum WfoSettingsTab {
35+
ACTIONS = 'ACTIONS',
36+
ENV_SETTINGS = 'ENV_SETTINGS',
37+
}
38+
39+
export const WfoActionSettings = () => {
1840
const { theme } = useOrchestratorTheme();
19-
const t = useTranslations('main');
2041
const { enableAoStackStatus } = useGetOrchestratorConfig();
2142

2243
return (
2344
<>
24-
<WfoContentHeader
25-
title={t('settings')}
26-
subtitle={<EuiHorizontalRule margin="s" />}
27-
/>
28-
2945
<div css={{ maxWidth: theme.base * 40 }}>
3046
<WfoFlushSettings />
3147
<EuiSpacer />
@@ -44,3 +60,138 @@ export const WfoSettingsPage = () => {
4460
</>
4561
);
4662
};
63+
64+
export const WfoEnvSettings = () => {
65+
const t = useTranslations('settings.page');
66+
const { theme } = useOrchestratorTheme();
67+
const { data } = useGetEnvironmentVariablesQuery();
68+
69+
const mapToRepresentableVariables = (variables: EnvironmentVariable[]) => {
70+
return variables
71+
.map(({ env_name, env_value }) => `${env_name}=${env_value}`)
72+
.join('\n');
73+
};
74+
75+
const renderEnvSettings = () => {
76+
return (
77+
data &&
78+
data.map(({ name, variables }: EnvironmentVariables) => {
79+
const showVariables = mapToRepresentableVariables(variables);
80+
81+
return (
82+
<>
83+
<EuiFlexItem>
84+
<EuiPanel
85+
hasShadow={false}
86+
color="subdued"
87+
paddingSize="l"
88+
>
89+
<EuiText size="s">
90+
<h2>
91+
{name.replace('_', ' ').toUpperCase()}
92+
</h2>
93+
</EuiText>
94+
95+
<EuiSpacer />
96+
97+
<EuiCodeBlock
98+
fontSize="m"
99+
paddingSize="m"
100+
css={css({
101+
background: theme.colors.lightShade,
102+
})}
103+
>
104+
{showVariables}
105+
</EuiCodeBlock>
106+
</EuiPanel>
107+
</EuiFlexItem>
108+
<EuiSpacer />
109+
</>
110+
);
111+
})
112+
);
113+
};
114+
115+
const emptyEnvSettings = () => {
116+
return (
117+
<EuiFlexItem>
118+
<EuiPanel hasShadow={false} color="subdued" paddingSize="l">
119+
<EuiText size="s">
120+
<h2>
121+
{t('noSettingsExposed')}{' '}
122+
<a
123+
href="https://workfloworchestrator.org/orchestrator-core/reference-docs/app/settings_overview/"
124+
target="_blank"
125+
>
126+
{t('settingsOverviewLink')}
127+
</a>
128+
</h2>
129+
</EuiText>
130+
</EuiPanel>
131+
</EuiFlexItem>
132+
);
133+
};
134+
135+
return (
136+
<div css={{ maxWidth: theme.base * 45 }}>
137+
{data?.length ? renderEnvSettings() : emptyEnvSettings()}
138+
</div>
139+
);
140+
};
141+
142+
export const settingsTabs = [
143+
{
144+
id: WfoSettingsTab.ACTIONS,
145+
translationKey: 'actions',
146+
content: <WfoActionSettings />,
147+
},
148+
{
149+
id: WfoSettingsTab.ENV_SETTINGS,
150+
translationKey: 'envSettings',
151+
content: <WfoEnvSettings />,
152+
},
153+
];
154+
155+
export const WfoSettingsPage = () => {
156+
const t = useTranslations('main');
157+
const tabTranslations = useTranslations('settings.tabs');
158+
const { tabStyle } = useWithOrchestratorTheme(getStyles);
159+
160+
const [selectedTabId, setSelectedTabId] = useQueryParam(
161+
'activeTab',
162+
withDefault(StringParam, WfoSettingsTab.ACTIONS),
163+
);
164+
165+
const selectedTabContent = useMemo(() => {
166+
return settingsTabs.find((obj) => obj.id === selectedTabId)?.content;
167+
}, [selectedTabId]);
168+
169+
const onSelectedTabChanged = (id: string) => {
170+
setSelectedTabId(id);
171+
};
172+
173+
const renderTabs = () => {
174+
return settingsTabs.map((tab, index) => (
175+
<EuiTab
176+
css={tabStyle}
177+
key={index}
178+
onClick={() => onSelectedTabChanged(tab.id)}
179+
isSelected={tab.id === selectedTabId}
180+
>
181+
{tabTranslations(tab.translationKey)}
182+
</EuiTab>
183+
));
184+
};
185+
186+
return (
187+
<>
188+
<WfoContentHeader title={t('settings')} />
189+
190+
<EuiTabs>{renderTabs()}</EuiTabs>
191+
192+
<EuiSpacer size="xxl" />
193+
194+
{selectedTabContent}
195+
</>
196+
);
197+
};

‎packages/orchestrator-ui-components/src/rtk/endpoints/settings.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@ import {
22
SETTINGS_CACHE_ENDPOINT,
33
SETTINGS_CACHE_NAMES_ENDPOINT,
44
SETTINGS_ENGINE_STATUS_ENDPOINT,
5+
SETTINGS_OVERVIEW,
56
SETTINGS_SEARCH_INDEX_RESET_ENDPOINT,
67
SETTINGS_WORKER_STATUS_ENDPOINT,
78
} from '@/configuration';
89
import { BaseQueryTypes, orchestratorApi } from '@/rtk';
9-
import { CacheNames, CacheTagType, EngineStatus, WorkerTypes } from '@/types';
10+
import {
11+
CacheNames,
12+
CacheTagType,
13+
EngineStatus,
14+
EnvironmentVariables,
15+
WorkerTypes,
16+
} from '@/types';
1017
import { getCacheTag } from '@/utils/cacheTag';
1118

1219
interface EngineStatusReturnValue {
@@ -112,6 +119,12 @@ const statusApi = orchestratorApi.injectEndpoints({
112119
},
113120
invalidatesTags: getCacheTag(CacheTagType.engineStatus),
114121
}),
122+
getEnvironmentVariables: build.query<EnvironmentVariables[], void>({
123+
query: () => SETTINGS_OVERVIEW,
124+
extraOptions: {
125+
baseQueryType: BaseQueryTypes.fetch,
126+
},
127+
}),
115128
}),
116129
});
117130

@@ -122,4 +135,5 @@ export const {
122135
useResetTextSearchIndexMutation,
123136
useSetEngineStatusMutation,
124137
useGetWorkerStatusQuery,
138+
useGetEnvironmentVariablesQuery,
125139
} = statusApi;

‎packages/orchestrator-ui-components/src/types/types.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,17 @@ export interface CacheOption {
423423

424424
export type CacheNames = { [key: string]: string };
425425

426+
export type EnvironmentVariable = {
427+
env_name: string;
428+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
429+
env_value: any;
430+
};
431+
432+
export type EnvironmentVariables = {
433+
name: string;
434+
variables: EnvironmentVariable[];
435+
};
436+
426437
export enum Locale {
427438
enGB = 'en-GB',
428439
nlNL = 'nl-NL',

0 commit comments

Comments
 (0)