Skip to content

Commit 7e15ebf

Browse files
johncowenjohncowen
authoredOct 12, 2023
chore: adds memory warning persistently if storeType=memory (kumahq#1589)
Adds/uses new index.html `storeType` variable and shows a persistent warning if that equals `memory` I also moved `pathConfigDefault` over into `src/services/env` as we only use it for `env` type things so that seemed to make sense. Lastly, I noticed a CSS issue in onboarding with the radio groups, so I fixed that up while I was here. Signed-off-by: John Cowen <[email protected]>
1 parent 58e7abf commit 7e15ebf

File tree

16 files changed

+128
-104
lines changed

16 files changed

+128
-104
lines changed
 

‎cypress/support/step_definitions/visit.ts

+3
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ When('I visit the {string} URL', function (path: string) {
2121
case 'KUMA_ENVIRONMENT':
2222
config.environment = item.value
2323
break
24+
case 'KUMA_STORE_TYPE':
25+
config.storeType = item.value
26+
break
2427
}
2528
})
2629
node.textContent = JSON.stringify(config)

‎features/application/Warnings.feature

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
Feature: application / warnings
2+
Background:
3+
Given the CSS selectors
4+
| Alias | Selector |
5+
| memory-store-type-warning | [data-testid='warning-GLOBAL_STORE_TYPE_MEMORY'] |
6+
7+
Scenario: Using the memory store type shows a warning
8+
Given the environment
9+
"""
10+
KUMA_STORE_TYPE: memory
11+
"""
12+
When I visit the "/" URL
13+
Then the "$memory-store-type-warning" element exists
14+
15+
Scenario: Using the postgres store type doesn't show a warning
16+
Given the environment
17+
"""
18+
KUMA_STORE_TYPE: postgres
19+
"""
20+
When I visit the "/" URL
21+
Then the "$memory-store-type-warning" element doesn't exist
22+

‎src/app/App.vue

+20
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,23 @@
2424
<AppSidebar v-if="!isWizard" />
2525

2626
<AppView>
27+
<KAlert
28+
v-if="!can('use state')"
29+
class="mb-4"
30+
appearance="warning"
31+
>
32+
<template #alertMessage>
33+
<ul>
34+
<!-- eslint-disable vue/no-v-html -->
35+
<li
36+
data-testid="warning-GLOBAL_STORE_TYPE_MEMORY"
37+
v-html="t('common.warnings.GLOBAL_STORE_TYPE_MEMORY')"
38+
/>
39+
<!-- eslint-enable -->
40+
</ul>
41+
</template>
42+
</KAlert>
43+
2744
<AppOnboardingNotification v-if="!isWizard" />
2845

2946
<RouterView v-slot="{ Component }">
@@ -50,6 +67,7 @@
5067
import { computed } from 'vue'
5168
import { useRoute } from 'vue-router'
5269
70+
import { useCan, useI18n } from '@/app/application'
5371
import AppView from '@/app/application/components/app-view/AppView.vue'
5472
import DataSource from '@/app/application/components/data-source/DataSource.vue'
5573
import RouteView from '@/app/application/components/route-view/RouteView.vue'
@@ -79,6 +97,8 @@ const [
7997
useAppOnboardingNotification(),
8098
]
8199
const route = useRoute()
100+
const can = useCan()
101+
const { t } = useI18n()
82102
83103
const isWizard = computed(() => route.meta.isWizard === true)
84104

‎src/app/main-overview/features.ts

+3
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,8 @@ export const features = (env: Env['var']): Features => {
55
'use kubernetes': (_can: Can) => {
66
return env('KUMA_ENVIRONMENT') === 'kubernetes'
77
},
8+
'use state': (_can: Can) => {
9+
return env('KUMA_STORE_TYPE') !== 'memory'
10+
},
811
}
912
}

‎src/app/onboarding/views/ConfigurationTypes.vue

+29-42
Original file line numberDiff line numberDiff line change
@@ -17,45 +17,35 @@
1717
</template>
1818

1919
<template #content>
20-
<DataSource
21-
v-slot="{ data }: ConfigSource"
22-
:src="`/config`"
23-
@change="change"
24-
>
25-
<template
26-
v-if="(typeof data !== 'undefined')"
27-
>
28-
<div class="graph-list mb-6">
29-
<component :is="currentGraphComponent" />
30-
</div>
20+
<div class="graph-list mb-6">
21+
<component :is="currentGraphComponent" />
22+
</div>
3123

32-
<div class="radio-button-group">
33-
<KRadio
34-
v-model="mode"
35-
name="deployment"
36-
selected-value="kubernetes"
37-
>
38-
Kubernetes
39-
</KRadio>
24+
<div class="radio-button-group">
25+
<KRadio
26+
v-model="mode"
27+
name="deployment"
28+
selected-value="kubernetes"
29+
>
30+
Kubernetes
31+
</KRadio>
4032

41-
<KRadio
42-
v-model="mode"
43-
name="deployment"
44-
selected-value="postgres"
45-
>
46-
Postgres
47-
</KRadio>
33+
<KRadio
34+
v-model="mode"
35+
name="deployment"
36+
selected-value="postgres"
37+
>
38+
Postgres
39+
</KRadio>
4840

49-
<KRadio
50-
v-model="mode"
51-
name="deployment"
52-
selected-value="memory"
53-
>
54-
Memory
55-
</KRadio>
56-
</div>
57-
</template>
58-
</DataSource>
41+
<KRadio
42+
v-model="mode"
43+
name="deployment"
44+
selected-value="memory"
45+
>
46+
Memory
47+
</KRadio>
48+
</div>
5949
</template>
6050

6151
<template #navigation>
@@ -75,13 +65,14 @@ import { computed, ref } from 'vue'
7565
import OnboardingHeading from '../components/OnboardingHeading.vue'
7666
import OnboardingNavigation from '../components/OnboardingNavigation.vue'
7767
import OnboardingPage from '../components/OnboardingPage.vue'
78-
import type { ConfigSource, Config } from '@/app/diagnostics/sources'
7968
import {
8069
useKubernetesGraph,
8170
useMemoryGraph,
8271
usePostgresGraph,
8372
} from '@/components'
73+
import { useEnv } from '@/utilities'
8474
75+
const env = useEnv()
8576
const KubernetesGraph = useKubernetesGraph()
8677
const MemoryGraph = useMemoryGraph()
8778
const PostgresGraph = usePostgresGraph()
@@ -92,11 +83,7 @@ const componentMap: Record<string, any> = {
9283
kubernetes: KubernetesGraph,
9384
}
9485
95-
const mode = ref<'kubernetes' | 'postgres' | 'memory'>('kubernetes')
96-
97-
const change = (e: Config) => {
98-
mode.value = e.store.type
99-
}
86+
const mode = ref<string>(env('KUMA_STORE_TYPE'))
10087
10188
const currentGraphComponent = computed(() => componentMap[mode.value])
10289
</script>

‎src/app/zones/views/CreateView.vue

+5
Original file line numberDiff line numberDiff line change
@@ -498,3 +498,8 @@ function toggleConfirmModal() {
498498
isConfirmModalVisible.value = !isConfirmModalVisible.value
499499
}
500500
</script>
501+
<style lang="scss" scoped>
502+
.radio-button-group > * + * {
503+
margin-block-start: $kui-space-40;
504+
}
505+
</style>

‎src/assets/styles/_forms.scss

-3
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,6 @@
8080
display: flex;
8181
}
8282

83-
.radio-button-group>*+* {
84-
margin-block-start: $kui-space-40;
85-
}
8683

8784
.instruction-list >*+* {
8885
margin-top: $kui-space-50;

‎src/locales/en-us/common/index.yaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ common:
1818
CERT_EXPIRED: !!text/markdown |
1919
The certificate for this dataplane has expired
2020
ZONE_STORE_TYPE_MEMORY: !!text/markdown |
21-
This zone is using the `memory` store type, because the state is not persisted this store should **not** be used in production. <a target="_blank" href="{KUMA_DOCS_URL}/documentation/configuration/#store">Read more about store types</a>
21+
This zone is using the `memory` store type. **Don't** use this store in production because the state isn't persisted. <a target="_blank" href="{KUMA_DOCS_URL}/documentation/configuration/#store">Read more about store types</a>
2222
GLOBAL_STORE_TYPE_MEMORY: !!text/markdown |
23-
This control plane is using the `memory` store type, because the state is not persisted this store should **not** be used in production. <a target="_blank" href="{KUMA_DOCS_URL}/documentation/configuration/#store">Read more about store types</a>
23+
This control plane is using the `memory` store type. **Don't** use this store in production because the state isn't persisted. <a target="_blank" href="{KUMA_DOCS_URL}/documentation/configuration/#store">Read more about store types</a>
2424
INCOMPATIBLE_UNSUPPORTED_ENVOY: !!text/markdown |
2525
Envoy (**{ envoy }**) is unsupported by the current version of Kuma DP (**{ kumaDp }**)
2626
INCOMPATIBLE_UNSUPPORTED_KUMA_DP: !!text/markdown |

‎src/pathConfigDefault.ts

-13
This file was deleted.

‎src/services/env/CliEnv.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import Env from './Env'
2-
import { getPathConfigDefault } from '@/pathConfigDefault'
1+
import Env, { getPathConfigDefault } from './Env'
32
export default class CliEnv extends Env {
43
protected getConfig() {
54
return getPathConfigDefault(import.meta.env.VITE_KUMA_API_SERVER_URL)

‎src/services/env/Env.ts

+25-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { getPathConfigDefault } from '@/pathConfigDefault'
2-
import { PathConfig } from '@/types/index'
1+
type PathConfig = ReturnType<typeof getPathConfigDefault>
32

43
export type EnvArgs = {
54
KUMA_PRODUCT_NAME: string
@@ -18,6 +17,7 @@ type EnvProps = {
1817
KUMA_UTM_QUERY_PARAMS: string
1918
KUMA_MODE: string
2019
KUMA_ENVIRONMENT: string
20+
KUMA_STORE_TYPE: string
2121
}
2222
export type EnvVars = EnvArgs & EnvProps
2323

@@ -46,6 +46,7 @@ export default class Env {
4646
KUMA_BASE_PATH: env('KUMA_BASE_PATH') || config.baseGuiPath,
4747
KUMA_MODE: env('KUMA_MODE') || config.mode,
4848
KUMA_ENVIRONMENT: env('KUMA_ENVIRONMENT') || config.environment,
49+
KUMA_STORE_TYPE: env('KUMA_STORE_TYPE') || config.storeType,
4950
}
5051
}
5152

@@ -86,6 +87,28 @@ export default class Env {
8687
return config
8788
}
8889
}
90+
export function getPathConfigDefault(apiUrlDefault: string = '') {
91+
return {
92+
/**
93+
* The base GUI path. Will include a leading slash. Won’t include a trailing slash.
94+
*
95+
* **Example**: `'/gui'`
96+
*/
97+
baseGuiPath: '/gui',
98+
/**
99+
* The base API URL. Won’t include a trailing slash.
100+
*
101+
* **Example**: `'http://localhost:5681'`
102+
*/
103+
apiUrl: apiUrlDefault,
104+
version: '2.4.0',
105+
product: 'Kuma',
106+
mode: 'global',
107+
environment: 'universal',
108+
storeType: 'postgres',
109+
apiReadOnly: false,
110+
}
111+
}
89112
function stripTrailingSlashes(url: string): string {
90113
return url.endsWith('/') ? stripTrailingSlashes(url.slice(0, -1)) : url
91114
}

‎src/services/env/env.spec.ts

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ describe('env', () => {
2222
product: 'Kuma',
2323
mode: 'standalone',
2424
environment: 'universal',
25+
storeType: 'postgres',
2526
apiReadOnly: false,
2627
}
2728
}

‎src/test-support/mocks/src/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ export default ({ env }: EndpointDependencies): MockResponder => (_req) => {
242242
},
243243
user: 'kuma',
244244
},
245-
type: env('KUMA_STORE_TYPE', 'memory'),
245+
type: env('KUMA_STORE_TYPE', 'postgres'),
246246
upsert: {
247247
conflictRetryBaseBackoff: '100ms',
248248
conflictRetryMaxTimes: 5,

‎src/types/index.d.ts

-29
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,6 @@ export type Unsaved<RT> = Omit<RT, 'creationTime' | 'modificationTime'>
77

88
export type StatusKeyword = 'online' | 'offline' | 'partially_degraded' | 'not_available'
99

10-
export type PathConfig = {
11-
/**
12-
* The base API URL. Won’t include a trailing slash.
13-
*
14-
* **Example**: `'http://localhost:5681'`
15-
*/
16-
apiUrl: string
17-
18-
/**
19-
* The base GUI path. Will include a leading slash. Won’t include a trailing slash.
20-
*
21-
* **Example**: `'/gui'`
22-
*/
23-
baseGuiPath: string
24-
25-
/**
26-
* The version of the underlying host application (e.g. Kuma).
27-
*
28-
* **Example**: `'2.0.1'`
29-
*/
30-
version: string
31-
32-
product: string,
33-
mode: string,
34-
environment: string,
35-
apiReadOnly: boolean,
36-
37-
}
38-
3910
export type TableHeader = {
4011
key: string
4112
label: string

‎vite.config.preview.ts

+15-9
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import { readFile as read, stat } from 'fs/promises'
22
import { fileURLToPath, URL } from 'url'
33
import { defineConfig, createLogger } from 'vite'
44

5+
import type { getPathConfigDefault } from '@/services/env/Env'
56
import type { UserConfigFn } from 'vite'
67

8+
type PathConfig = ReturnType<typeof getPathConfigDefault>
9+
710
// https://vitejs.dev/config/
811
const exists = async (path: string) => {
912
try {
@@ -52,15 +55,18 @@ export const config: (context: PreviewConfigContext) => UserConfigFn = ({
5255
const body = template
5356
.replace('{{.BaseGuiPath}}', base)
5457
.replace('{{.}}', JSON.stringify(
55-
{
56-
baseGuiPath: base,
57-
apiUrl: api,
58-
version,
59-
product: 'Kuma',
60-
mode: cookies.KUMA_MODE ?? 'global',
61-
environment: cookies.KUMA_ENVIRONMENT ?? 'universal',
62-
apiReadOnly: false,
63-
},
58+
((config: PathConfig) => config)(
59+
{
60+
baseGuiPath: base,
61+
apiUrl: api,
62+
version,
63+
product: 'Kuma',
64+
mode: cookies.KUMA_MODE ?? 'global',
65+
environment: cookies.KUMA_ENVIRONMENT ?? 'universal',
66+
storeType: cookies.KUMA_STORE_TYPE ?? 'postgres',
67+
apiReadOnly: false,
68+
},
69+
),
6470
))
6571
if ((req.originalUrl || '').startsWith(base) && !await exists(`${root}${req.originalUrl}`)) {
6672
res.end(body)

‎vite.config.production.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import pluginRewriteAll from 'vite-plugin-rewrite-all'
1010
import svgLoader from 'vite-svg-loader'
1111

1212
import { hoistUseStatements } from './dev-utilities/hoistUseStatements'
13-
import { getPathConfigDefault } from './src/pathConfigDefault'
13+
import { getPathConfigDefault } from './src/services/env/Env'
1414

1515
dotenv.config()
1616

0 commit comments

Comments
 (0)
Please sign in to comment.