Skip to content

Commit 346a1fc

Browse files
RecuencoJonesRecuencoJones
committed
ADD new context styles, open manifest by default preference, fix rendering services with no ports
1 parent f9f484c commit 346a1fc

File tree

8 files changed

+231
-51
lines changed

8 files changed

+231
-51
lines changed

‎src/foreground/components/ResourceDetail.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
</tbody>
7171
</table>
7272
</details>
73-
<details>
73+
<details :open="openManifestByDefault">
7474
<summary>
7575
<strong><i class="bi-filetype-yml" /> {{ $t('page.detail.manifest') }}</strong>
7676
</summary>
@@ -95,9 +95,15 @@ export default {
9595
props: [ 'item' ],
9696
data() {
9797
return {
98+
preferences: null,
9899
logs: []
99100
};
100101
},
102+
computed: {
103+
openManifestByDefault() {
104+
return this.preferences?.openManifestByDefault || false;
105+
}
106+
},
101107
methods: {
102108
async init(item) {
103109
if (item.spec?.containers) {
@@ -151,6 +157,9 @@ export default {
151157
}
152158
}
153159
},
160+
async mounted() {
161+
this.preferences = await api.getPreferences();
162+
},
154163
async beforeUnmount() {
155164
await this.close(this.item);
156165
}

‎src/foreground/components/resource-table-adapters/Services.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ export default {
2727
methods: {
2828
formatAge,
2929
formatPorts(ports) {
30+
if (!ports) {
31+
return '-';
32+
}
33+
3034
return ports.map((({ port, targetPort, protocol }) => {
3135
let value = `${targetPort}/${protocol}`;
3236

‎src/foreground/pages/AddContext.vue

Lines changed: 113 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,59 @@
11
<template>
2-
<main>
3-
<form @submit.prevent="handleSubmit">
4-
<section>
5-
<div>
6-
Context name
7-
<input type="text" v-model="name">
8-
</div>
9-
</section>
10-
<section>
11-
<div>
12-
Select kubeconfig from dropdown or file
13-
<select v-model="config" :disabled="!configs">
14-
<option v-for="option in configs" :key="option.path" :value="option.path">{{ option.name }}</option>
15-
</select>
16-
<input type="file" @change="(e) => config = e.target.files[0]">
17-
</div>
18-
</section>
19-
<section>
20-
<div>
21-
Select cluster from dropdown
22-
<select v-model="cluster" :disabled="!clusters">
23-
<option v-for="option in clusters" :key="option" :value="option">{{ option }}</option>
24-
</select>
25-
</div>
26-
<div>
27-
Select user from dropdown
28-
<select v-model="user" :disabled="!users">
29-
<option v-for="option in users" :key="option" :value="option">{{ option }}</option>
30-
</select>
31-
</div>
32-
<div>
33-
Select or type namespace
34-
<select v-model="namespace" :disabled="!namespaces"></select>
35-
<input type="text" v-model="namespace">
36-
</div>
37-
</section>
38-
<section>
39-
<button type="submit">save</button>
40-
</section>
41-
</form>
2+
<main class="toolbar-layout add-context">
3+
<nav class="toolbar">
4+
<button class="btn btn--text" @click="triggerFormSubmit"><i class="bi-save" /> {{ $t('page.addcontext.save') }}</button>
5+
</nav>
6+
<section class="view">
7+
<form ref="form" @submit.prevent="handleSubmit" class="form">
8+
<section>
9+
<h4>{{ $t('page.addcontext.contextname.title') }}</h4>
10+
<p>
11+
{{ $t('page.addcontext.contextname.desc') }}
12+
</p>
13+
<div class="form__value">
14+
<input type="text" v-model="name" :placeholder="$t('page.addcontext.contextname.placeholder')" required>
15+
</div>
16+
</section>
17+
<section>
18+
<h4>{{ $t('page.addcontext.kubeconfig.title') }}</h4>
19+
<p>
20+
{{ $t('page.addcontext.kubeconfig.desc') }}
21+
</p>
22+
<div class="form__field">
23+
<div class="form__value">
24+
<select v-model="config" :disabled="!configs" required>
25+
<option disabled selected value="">{{ $t('page.addcontext.kubeconfig.placeholder') }}</option>
26+
<option v-for="option in configs" :key="option.path" :value="option.path">{{ option.name }}</option>
27+
</select>
28+
</div>
29+
</div>
30+
</section>
31+
<section :class="{ disabled: !config }">
32+
<h4>{{ $t('page.addcontext.contextdetails.title') }}</h4>
33+
<p>
34+
{{ $t('page.addcontext.contextdetails.desc') }}
35+
</p>
36+
<div class="form__field">
37+
<div class="form__value">
38+
<select v-model="cluster" :disabled="!clusters" required>
39+
<option disabled selected value="">{{ $t('page.addcontext.contextdetails.clusterplaceholder') }}</option>
40+
<option v-for="option in clusters" :key="option" :value="option">{{ option }}</option>
41+
</select>
42+
</div>
43+
<div class="form__value">
44+
<select v-model="user" :disabled="!users" required>
45+
<option disabled selected value="">{{ $t('page.addcontext.contextdetails.userplaceholder') }}</option>
46+
<option v-for="option in users" :key="option" :value="option">{{ option }}</option>
47+
</select>
48+
</div>
49+
<div class="form__value">
50+
<input type="text" v-model="namespace" :placeholder="$t('page.addcontext.contextdetails.namespaceplaceholder')" required>
51+
</div>
52+
</div>
53+
</section>
54+
<button ref="submit" type="submit" hidden></button>
55+
</form>
56+
</section>
4257
</main>
4358
</template>
4459

@@ -55,11 +70,11 @@ export default {
5570
return {
5671
name: null,
5772
configs: null,
58-
config: null,
73+
config: '',
5974
clusters: null,
60-
cluster: null,
75+
cluster: '',
6176
users: null,
62-
user: null,
77+
user: '',
6378
namespaces: null,
6479
namespace: null
6580
};
@@ -108,7 +123,17 @@ export default {
108123
this.namespaces = null;
109124
},
110125
126+
triggerFormSubmit() {
127+
this.$refs.submit.click();
128+
},
129+
111130
async handleSubmit() {
131+
const isValid = this.$refs.form.checkValidity();
132+
133+
if (!isValid) {
134+
return;
135+
}
136+
112137
await api.saveContext({
113138
name: this.name,
114139
config: this.config,
@@ -125,3 +150,48 @@ export default {
125150
}
126151
}
127152
</script>
153+
154+
<style lang="scss">
155+
.add-context.toolbar-layout {
156+
.view {
157+
padding: 10vh 20vw;
158+
159+
@media (max-width: 1000px) {
160+
padding-left: 5vw;
161+
padding-right: 5vw;
162+
}
163+
164+
@media (max-width: 600px) {
165+
padding-left: 20vw;
166+
padding-right: 20vw;
167+
}
168+
169+
@media (max-height: 1000px) {
170+
padding-top: 5vh;
171+
padding-bottom: 5vh;
172+
}
173+
174+
@media (max-height: 800px) {
175+
padding-top: 2vh;
176+
padding-bottom: 2vh;
177+
}
178+
179+
section {
180+
padding: 0 2rem 1rem;
181+
margin: 2rem 0;
182+
border: 2px solid var(--color-header-background);
183+
border-radius: 1rem;
184+
transition: filter .25s;
185+
186+
&.disabled {
187+
filter: opacity(.5);
188+
}
189+
}
190+
191+
.or {
192+
align-self: center;
193+
margin: 0 1rem;
194+
}
195+
}
196+
}
197+
</style>

‎src/foreground/pages/ListContexts.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,26 @@ export default {
5757
.view {
5858
padding: 10vh 20vw;
5959
60+
@media (max-width: 1000px) {
61+
padding-left: 5vw;
62+
padding-right: 5vw;
63+
}
64+
65+
@media (max-width: 600px) {
66+
padding-left: 20vw;
67+
padding-right: 20vw;
68+
}
69+
70+
@media (max-height: 1000px) {
71+
padding-top: 5vh;
72+
padding-bottom: 5vh;
73+
}
74+
75+
@media (max-height: 800px) {
76+
padding-top: 2vh;
77+
padding-bottom: 2vh;
78+
}
79+
6080
table {
6181
width: 100%;
6282
border-collapse: collapse;

‎src/foreground/pages/Preferences.vue

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<label for="theme"><i class="bi-translate" /> {{ $t('page.preferences.language') }}</label>
1010
</div>
1111
<div class="form__value">
12-
<select name="language" @change="handleChangeLanguage">
12+
<select name="language" @change="handleChangeSelect($event, 'language')">
1313
<option v-for="language of languages" :key="language.code" :value="language.code" :selected="preferences.language === language.code">{{ language.name }}</option>
1414
</select>
1515
</div>
@@ -20,7 +20,7 @@
2020
</div>
2121
<Colorset />
2222
<div class="form__value">
23-
<select name="theme" @change="handleChangeTheme">
23+
<select name="theme" @change="handleChangeSelect($event, 'theme')">
2424
<option v-for="theme of themes" :key="theme.class" :value="theme.class" :selected="preferences.theme === theme.class">{{ theme.name }}</option>
2525
</select>
2626
</div>
@@ -35,6 +35,23 @@
3535
</div>
3636
</div>
3737
</section>
38+
<section class="form">
39+
<h4>{{ $t('page.preferences.resourcedetails') }}</h4>
40+
<div class="form__fields">
41+
<div class="form__field">
42+
<div class="form__label">
43+
<label for="openManifestByDefault">{{ $t('page.preferences.openmanifestbydefault') }}</label>
44+
</div>
45+
<div class="form__value">
46+
<input
47+
type="checkbox"
48+
name="openManifestByDefault"
49+
:checked="preferences.openManifestByDefault"
50+
@input="handleChangeCheckbox($event, 'openManifestByDefault')">
51+
</div>
52+
</div>
53+
</div>
54+
</section>
3855
<section class="form">
3956
<h4>{{ $t('page.preferences.advanced') }}</h4>
4057
<div class="form__fields">
@@ -73,7 +90,8 @@ export default {
7390
async savePreferences() {
7491
await api.savePreferences({
7592
theme: this.preferences.theme,
76-
language: this.preferences.language
93+
language: this.preferences.language,
94+
openManifestByDefault: this.preferences.openManifestByDefault
7795
});
7896
7997
events.emit('reload-preferences');
@@ -83,14 +101,14 @@ export default {
83101
await api.clearRecentViews();
84102
},
85103
86-
async handleChangeTheme(event) {
87-
this.preferences.theme = event.target.value;
104+
async handleChangeSelect(event, preferenceName) {
105+
this.preferences[preferenceName] = event.target.value;
88106
89107
await this.savePreferences();
90108
},
91109
92-
async handleChangeLanguage(event) {
93-
this.preferences.language = event.target.value;
110+
async handleChangeCheckbox(event, preferenceName) {
111+
this.preferences[preferenceName] = event.target.checked;
94112
95113
await this.savePreferences();
96114
},

‎src/foreground/styles/global.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,21 @@ dl {
103103
}
104104

105105
.form__value {
106+
input {
107+
display: block;
108+
color: inherit;
109+
background: inherit;
110+
border: 1px solid var(--color-outline);
111+
font-size: inherit;
112+
padding: .25rem;
113+
border-radius: .25rem;
114+
115+
&:focus-visible {
116+
outline: 2px dashed var(--color-outline);
117+
outline-offset: .25rem;
118+
}
119+
}
120+
106121
select {
107122
display: block;
108123
color: inherit;

‎src/languages/en.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,26 @@
3232
"addcontext": "Add context",
3333
"choosecontext": "Choose context"
3434
},
35+
"addcontext": {
36+
"save": "Save",
37+
"contextname": {
38+
"title": "Context name",
39+
"desc": "This will be the identifier for the created context",
40+
"placeholder": "Name"
41+
},
42+
"kubeconfig": {
43+
"title": "Kubeconfig",
44+
"desc": "Select kubeconfig to use",
45+
"placeholder": "Choose config"
46+
},
47+
"contextdetails": {
48+
"title": "Context details",
49+
"desc": "Provide details to connect to a cluster and namespace",
50+
"clusterplaceholder": "Choose cluster",
51+
"userplaceholder": "Choose user",
52+
"namespaceplaceholder": "type namespace"
53+
}
54+
},
3555
"resource": {
3656
"refresh": "Refresh",
3757
"filter": "filter",
@@ -61,6 +81,8 @@
6181
"language": "Language",
6282
"recents": "Recents",
6383
"clearrecents": "Clear recents",
84+
"resourcedetails": "Resource Details",
85+
"openmanifestbydefault": "Open YAML manifest by default",
6486
"advanced": "Advanced",
6587
"openappdatalocation": "Open app data location"
6688
}

0 commit comments

Comments
 (0)