Skip to content

Commit 4411664

Browse files
stephdlstephdl
committed
feat(i18n): add translations for Applications Center features and update UI components
1 parent a26b4c3 commit 4411664

File tree

2 files changed

+85
-48
lines changed

2 files changed

+85
-48
lines changed

‎core/ui/public/i18n/en/translation.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1641,5 +1641,19 @@
16411641
"available_with_subscription_title": "Activate subscription to enable this feature",
16421642
"available_with_subscription": "Send a stream of security logs from applications and nodes of this cluster to Cloud Log Manager, where you can store, archive, and search them in a central place.",
16431643
"cluster_id_notification": "Security logs from this cluster are available in the Cloud Log Manager UI under the host '{clusterId}'."
1644+
},
1645+
"applications_center": {
1646+
"title": "Applications center",
1647+
"description": "Manage and install applications on your cluster",
1648+
"go_to_software_center": "Go to Software center",
1649+
"no_application": "No application",
1650+
"no_application_description": "There is no application installed on this cluster",
1651+
"go_to_core_applications": "Core apps",
1652+
"name": "Name",
1653+
"version": "Version",
1654+
"module": "Module",
1655+
"node": "Node",
1656+
"status": "Status",
1657+
"available_update": "{version} available"
16441658
}
16451659
}

‎core/ui/src/views/ApplicationsCenter.vue‎

Lines changed: 71 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
-->
55
<template>
66
<div>
7+
{{ modules }}
78
<cv-grid fullWidth>
89
<cv-row>
910
<cv-column :md="4" :xlg="10" class="page-title">
@@ -17,7 +18,7 @@
1718
:icon="Application20"
1819
@click="showSoftwareCenterCoreApps()"
1920
class="page-toolbar-item"
20-
>{{ $t("applications_center.core_apps") }}</NsButton
21+
>{{ $t("applications_center.go_to_core_applications") }}</NsButton
2122
>
2223
</div>
2324
</cv-column>
@@ -32,7 +33,6 @@
3233
/>
3334
</cv-column>
3435
</cv-row>
35-
{{ modules }}
3636
<!-- <cv-row v-if="error.listCoreModules">
3737
<cv-column>
3838
<NsInlineNotification
@@ -154,11 +154,23 @@
154154
@updatePage="tablePage = $event"
155155
>
156156
<template slot="empty-state">
157-
<NsEmptyState :title="$t('firewall.no_service')">
157+
<NsEmptyState
158+
:title="$t('applications_center.no_application')"
159+
>
158160
<template #description>
159161
<div>
160-
{{ $t("firewall.no_service_description") }}
162+
{{
163+
$t("applications_center.no_application_description")
164+
}}
161165
</div>
166+
<NsButton
167+
kind="primary"
168+
class="empty-state-button"
169+
:icon="ArrowRight20"
170+
@click="goToSoftwareCenter"
171+
:disabled="loading.listModules"
172+
>{{ $t("applications_center.go_to_software_center") }}
173+
</NsButton>
162174
</template>
163175
</NsEmptyState>
164176
</template>
@@ -178,17 +190,44 @@
178190
</span>
179191
</cv-data-table-cell>
180192
<cv-data-table-cell>
181-
<img :src="getLogoSrc(row.logo)" :alt="row.module" style="height: 32px; vertical-align: middle; margin-right: 8px;" />
193+
<img
194+
:src="
195+
row.logo
196+
? row.logo
197+
: require('@/assets/module_default_logo.png')
198+
"
199+
:alt="row.name + ' logo'"
200+
class="module-logo"
201+
/>
182202
<span>{{ row.module }}</span>
183203
</cv-data-table-cell>
184204
<cv-data-table-cell>
185-
<span>{{ row.node_ui_name ? $t('common.node') + ' ' + row.node + ' (' + row.node_ui_name + ')' : $t('common.node') + ' ' + row.node }}</span>
205+
<span>{{
206+
row.node_ui_name
207+
? $t("common.node") +
208+
" " +
209+
row.node +
210+
" (" +
211+
row.node_ui_name +
212+
")"
213+
: $t("common.node") + " " + row.node
214+
}}</span>
186215
</cv-data-table-cell>
187216
<cv-data-table-cell>
188217
<span>{{ row.version }}</span>
218+
<cv-tag
219+
v-if="row.update"
220+
class="mg-left-sm"
221+
kind="green"
222+
:label="
223+
$t('applications_center.available_update', {
224+
version: row.update,
225+
})
226+
"
227+
/>
189228
</cv-data-table-cell>
190-
<cv-data-table-cell class="table-overflow-menu-cell">
191-
<!-- <cv-overflow-menu
229+
<!-- <cv-data-table-cell class="table-overflow-menu-cell">
230+
<cv-overflow-menu
192231
flip-menu
193232
class="table-overflow-menu"
194233
:data-test-id="row.localuser + '-menu'"
@@ -236,8 +275,8 @@
236275
:label="$t('tasks.informations')"
237276
/>
238277
</cv-overflow-menu-item>
239-
</cv-overflow-menu>-->
240-
</cv-data-table-cell>
278+
</cv-overflow-menu>
279+
</cv-data-table-cell>-->
241280
</cv-data-table-row>
242281
</template>
243282
</NsDataTable>
@@ -292,8 +331,8 @@ export default {
292331
},
293332
error: {
294333
listModules: "",
295-
updateCore: "",
296-
updateModules: "",
334+
// updateCore: "",
335+
// updateModules: "",
297336
},
298337
};
299338
},
@@ -315,7 +354,7 @@ export default {
315354
},
316355
i18nTableColumns() {
317356
return this.tableColumns.map((column) => {
318-
return this.$t("firewall." + column);
357+
return this.$t("applications_center." + column);
319358
});
320359
},
321360
// numInstancesToUpdate() {
@@ -359,17 +398,13 @@ export default {
359398
},
360399
created() {
361400
this.listModules();
362-
this.listRepositories();
401+
// this.listRepositories();
363402
},
364403
methods: {
365404
...mapActions(["setUpdateInProgressInStore"]),
366-
getLogoSrc(logoPath) {
367-
// Rewrite backend absolute path to public path
368-
if (logoPath && logoPath.startsWith('/var/lib/nethserver/cluster/ui/apps/')) {
369-
return logoPath.replace('/var/lib/nethserver/cluster/ui/apps/', '/apps/');
370-
}
371-
return logoPath;
372-
},
405+
goToSoftwareCenter() {
406+
this.$router.push("/software-center");
407+
},
373408
async listModules() {
374409
this.loading.listModules = true;
375410
this.error.listModules = "";
@@ -418,34 +453,9 @@ export default {
418453
// this.repositories = taskResult.output;
419454
// },
420455
listModulesCompleted(taskContext, taskResult) {
421-
this.loading.listModules = false;
422-
let modules = taskResult.output;
423-
modules.sort(this.sortByProperty("name"));
424-
let appUpdates = [];
425-
426-
for (const module of modules) {
427-
const hasStableUpdate = module.updates.some((update) => update.update);
428-
429-
if (hasStableUpdate) {
430-
appUpdates.push(module);
431-
}
432-
433-
// sort installed instances
434-
module.installed.sort(this.sortModuleInstances());
435-
}
436-
this.appUpdates = appUpdates;
437-
// console.log("modules", this.modules);
438-
// console.log("appUpdates", this.appUpdates);
439-
// function extractModules(data) {
440-
// if (!data || !Array.isArray(data.installed)) {
441-
// return [];
442-
// }
443-
444456
function extractModulesWithUpdates(taskResult) {
445457
if (!taskResult || !Array.isArray(taskResult.output)) return [];
446-
447458
const modules = [];
448-
449459
for (const obj of taskResult.output) {
450460
const disabledReason = obj.disabled_updates_reason || "";
451461
const updates = Array.isArray(obj.updates) ? obj.updates : [];
@@ -458,14 +468,15 @@ export default {
458468
console.log("updateEntry", updateEntry);
459469
// if found, merge data from updateEntry into item
460470
const source = updateEntry || item;
461-
471+
console.log("logo", obj.logo);
462472
modules.push({
463473
digest: source.digest || "",
464474
rootfull: source.flags
465475
? source.flags.includes("rootfull")
466476
: false,
467477
id: source.id || "",
468-
logo: source.logo || "",
478+
// Use module logo URL if available, else fallback to instance logo later in the template
479+
logo: obj.logo && obj.logo.startsWith("http") ? obj.logo : "",
469480
module: source.module || "",
470481
node: source.node || "",
471482
node_ui_name: source.node_ui_name || "",
@@ -487,6 +498,8 @@ export default {
487498
488499
this.modules = extractModulesWithUpdates(taskResult);
489500
console.log("extracted modules", this.modules);
501+
this.loading.listModules = false;
502+
// this.modules = [];
490503
// return modules;
491504
// }
492505
// console.log("extracted modules", extractModules(taskResult));
@@ -780,4 +793,14 @@ export default {
780793
margin-top: $spacing-07;
781794
margin-bottom: $spacing-03;
782795
}
796+
797+
.module-logo {
798+
height: 32px;
799+
vertical-align: middle;
800+
margin-right: 8px;
801+
object-fit: contain;
802+
border-radius: 4px;
803+
background: #f4f4f4;
804+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
805+
}
783806
</style>

0 commit comments

Comments
 (0)