Skip to content

Commit

Permalink
feat: for APPLAUNCHER-28 various data fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sinjhin
Sinjhin committed Apr 12, 2024
1 parent 0fa04a3 commit 63699e0
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 47 deletions.
61 changes: 44 additions & 17 deletions pkg/app-launcher/components/AppLauncherCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ export default {
type: String,
required: true,
},
clusterName: {
type: String,
required: false,
},
favoritedServices: {
type: Array,
required: true,
Expand All @@ -26,60 +30,79 @@ export default {
type: Object,
default: null,
},
metadata: {
type: Object,
default: null,
},
},
methods: {
openLink(link) {
window.open(link);
},
toggleFavorite() {
this.$emit('toggle-favorite', this.service);
this.$emit('toggle-favorite', this.app)
},
},
computed: {
app() {
return this.service || this.ingress;
if (this.service) {
return {
...this.service,
kind: 'Service',
clusterId: this.clusterId,
clusterName: this.clusterName
};
} else if (this.ingress) {
return {
...this.ingress,
kind: 'Ingress',
clusterId: this.clusterId,
clusterName: this.clusterName
};
}
return null;
},
endpoints() {
return (
this.service?.spec?.ports?.map((port) => {
const endpoint = `${
isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
}:${this.service?.metadata?.name}:${port.port}`;
}:${this.app.metadata?.name}:${port.port}`;
return {
label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.metadata.namespace}/services/${endpoint}/proxy`,
value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.namespace}/services/${endpoint}/proxy`,
};
}) ?? []
);
},
computedServiceName() {
return (
this.service?.metadata?.labels?.['app.kubernetes.io/component'] ??
this.service?.metadata?.name
this.serice?.metadata?.name
);
},
helmChart() {
return this.service?.metadata?.labels?.['helm.sh/chart'];
return this.app?.metadata?.labels?.['helm.sh/chart'];
},
kubernetesVersion() {
return this.service?.metadata?.labels?.['app.kubernetes.io/version'];
return this.app?.metadata?.labels?.['app.kubernetes.io/version'];
},
name() {
return this.service?.metadata?.name;
return this.app?.metadata?.name;
},
namespace() {
return this.service?.metadata?.namespace;
return this.app?.metadata?.namespace;
},
isFavorited() {
return this.favoritedServices.some(
(favoritedService) =>
favoritedService?.clusterId === this.clusterId &&
favoritedService?.service?.id === this.service?.id
favoritedService?.app?.id === this.app?.id &&
favoritedService?.app?.kind === this.app?.kind
);
},
isGlobalApp() {
return this.service?.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true';
return this.app?.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true';
},
ingressPath() {
return ingressFullPath(this.ingress, this.ingress?.spec?.rules?.[0]);
Expand All @@ -98,21 +121,25 @@ export default {
{{ service ? service?.metadata?.name : ingress?.metadata?.name }}
</p>
<div style="color: var(--input-label); display: flex; justify-content: space-between; margin-top: 4px;">
<p v-if="app.type === 'service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
<p v-if="app.kind === 'Service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
{{ kubernetesVersion }}
</p>
<p v-if="app.type === 'service' && app.metadata?.labels?.['helm.sh/chart'] !== undefined">
<p v-if="app.kind === 'Service' && app.metadata?.labels?.['helm.sh/chart'] !== undefined">
{{ helmChart }}
</p>
<p v-if="app.type === 'ingress'">
<p v-if="app.kind === 'Ingress'">
Ingress
</p>
</div>
</div>
</template>
<template #body>
<p v-if="app.type === 'service'">{{ namespace }}/{{ name }}</p>
<p v-if="app.type === 'ingress'">{{ ingressPath }}</p>
<p v-if="app.kind === 'Service'">
{{ isGlobalApp || isFavorited ? `${clusterName}` : '' }}/{{ namespace }}/{{ name }}
</p>
<p v-if="app.Kind === 'Ingress'">
{{ isGlobalApp || isFavorited ? `${clusterName}` : '' }}/{{ ingressPath }}
</p>
</template>
<template #actions>
<button v-if="!isGlobalApp" class="icon-button" @click="toggleFavorite">
Expand Down
83 changes: 53 additions & 30 deletions pkg/app-launcher/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default {
selectedCluster: null,
clusterOptions: [],
selectedView: 'grid',
favoritedServices: [],
favoritedApps: [],
searchQuery: '',
tableHeaders: [
{
Expand Down Expand Up @@ -70,22 +70,34 @@ export default {
}
this.generateClusterOptions();
// Retrieve global apps based on annotations
// Retrieve global services based on annotations
this.servicesByCluster.forEach((cluster) => {
cluster.services.forEach((service) => {
if (service.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
this.favoritedServices.push({
this.favoritedApps.push({
clusterId: cluster.id,
service,
app: service,
});
}
});
});
// Retrieve global ingresses based on annotations
this.ingressesByCluster.forEach((cluster) => {
cluster.ingresses.forEach((ingress) => {
if (ingress.metadata?.annotations?.['extensions.applauncher/global-app'] === 'true') {
this.favoritedApps.push({
clusterId: cluster.id,
app: ingress,
});
}
});
});
// Retrieve favorites from localStorage
const storedFavorites = localStorage.getItem('favoritedServices');
const storedFavorites = localStorage.getItem('favoritedApps');
if (storedFavorites) {
this.favoritedServices.push(...JSON.parse(storedFavorites));
this.favoritedApps.push(...JSON.parse(storedFavorites));
}
} catch (error) {
console.error('Error fetching clusters', error);
Expand All @@ -104,7 +116,7 @@ export default {
return cluster ? cluster.name : '';
},
getCluster(clusterId) {
return this.servicesByCluster.find(c => c.id === clusterId);
return this.servicesByCluster.find(c => c.id === clusterId) || null;
},
async getServicesByCluster(allClusters) {
return await Promise.all(
Expand Down Expand Up @@ -190,28 +202,30 @@ export default {
openLink(link) {
window.open(link, '_blank');
},
toggleFavorite(service) {
const index = this.favoritedServices.findIndex(
(favoritedService) =>
favoritedService.clusterId === this.selectedCluster &&
favoritedService.service.id === service.id
toggleFavorite(item) {
const index = this.favoritedApps.findIndex(
(favoritedApp) =>
favoritedApp.app.id === item.id &&
favoritedApp.app.kind === item.kind
);
if (index !== -1) {
this.favoritedServices.splice(index, 1);
this.favoritedApps.splice(index, 1);
} else {
this.favoritedServices.push({
clusterId: this.selectedCluster,
service,
this.favoritedApps.push({
clusterId: item.clusterId,
app: item,
});
}
// Store updated favorites in localStorage
localStorage.setItem('favoritedServices', JSON.stringify(this.favoritedServices.filter((s) => (s.service.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true'))));
const favsToStore = JSON.stringify(this.favoritedApps.filter((item) => (item.app.metadata.annotations?.['extensions.applauncher/global-app'] !== 'true')));
localStorage.setItem('favoritedApps', favsToStore);
},
isFavorited(service, favoritedServices) {
return favoritedServices.some(
isFavorited(app, favoritedApps) {
return favoritedApps.some(
(favoritedService) =>
favoritedService.clusterId === this.selectedCluster &&
favoritedService.service.id === service.id
favoritedService.app.id === app.id
);
},
},
Expand Down Expand Up @@ -245,6 +259,8 @@ export default {
ingresses,
filteredApps,
};
} else {
console.error('Cluster not found:', this.selectedCluster);
}
return null;
},
Expand Down Expand Up @@ -354,15 +370,20 @@ export default {
<i class="icon icon-list-flat" />
</button>
</div>
<div v-if="favoritedServices.length > 0">
<div v-if="favoritedApps.length > 0">
<div class="cluster-header">
<h2>{{ t('appLauncher.globalApps') }}</h2>
</div>
<div class="services-by-cluster-grid">
<AppLauncherCard v-for="favoritedService in favoritedServices"
:key="`${favoritedService.clusterId}-${favoritedService.service.id}`" :cluster-id="favoritedService.clusterId"
:service="favoritedService.service" :favorited-services="favoritedServices"
@toggle-favorite="toggleFavorite" />
<AppLauncherCard v-for="favoritedService in favoritedApps"
:key="`${favoritedService.clusterId}-${favoritedService.app.id}-${favoritedService.app.kind}`"
:cluster-id="favoritedService.clusterId"
:cluster-name="getClusterName(favoritedService.clusterId)"
:service="favoritedService.app.kind === 'Service' ? favoritedService.app : null"
:ingress="favoritedService.app.kind === 'Ingress' ? favoritedService.app : null"
:favorited-services="favoritedApps"
@toggle-favorite="toggleFavorite"
/>
</div>
</div>
<div v-if="selectedCluster">
Expand All @@ -378,9 +399,11 @@ export default {
v-for="app in clusterData.filteredApps"
:key="app.uniqueId"
:cluster-id="clusterData.id"
:service="app.type === 'service' ? app : null"
:ingress="app.type === 'ingress' ? app : null"
:favorited-services="favoritedServices"
:cluster-name="clusterData.name"
:metadata="app.metadata"
:service="app.kind === 'Service' ? app : null"
:ingress="app.kind === 'Ingress' ? app : null"
:favorited-services="favoritedApps"
@toggle-favorite="toggleFavorite"
/>
</div>
Expand Down Expand Up @@ -417,7 +440,7 @@ export default {
<template #cell:actions="{row}">
<div style="display: flex; justify-content: flex-end;">
<button class="icon-button favorite-icon" @click="toggleFavorite(row)">
<i :class="['icon', isFavorited(row, favoritedServices) ? 'icon-star' : 'icon-star-open']" />
<i :class="['icon', isFavorited(row, favoritedApps) ? 'icon-star' : 'icon-star-open']" />
</button>
<a v-if="getEndpoints(row)?.length <= 1" :href="getEndpoints(row)[0]?.value" target="_blank"
rel="noopener noreferrer nofollow" class="btn role-primary">
Expand Down

0 comments on commit 63699e0

Please sign in to comment.