Skip to content

Commit

Permalink
Merge pull request #47 from krumIO/general-cleanup
Browse files Browse the repository at this point in the history 
General cleanup
  • Loading branch information
@krumware
krumware authored Nov 25, 2024
2 parents 33e47ff + 3880668 commit 1d21396
Show file tree
Hide file tree
Showing 8 changed files with 293 additions and 203 deletions.
54 changes: 42 additions & 12 deletions pkg/app-launcher/components/AppLauncherCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default {
window.open(link);
},
toggleFavorite() {
this.$emit('toggle-favorite', this.app)
this.$emit('toggle-favorite', this.app);
},
},
computed: {
Expand All @@ -38,9 +38,11 @@ export default {
const endpoint = `${
isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
}:${this.app.metadata?.name}:${port.port}`;
return {
label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
value: `/k8s/clusters/${this.app.clusterId}/api/v1/namespaces/${this.app.metadata.namespace}/services/${endpoint}/proxy`,
value: `/k8s/clusters/${this.app.clusterId}/api/v1/namespaces/` +
`${this.app.metadata.namespace}/services/${endpoint}/proxy`,
};
}) ?? []
);
Expand Down Expand Up @@ -83,17 +85,37 @@ export default {
</script>
<template>
<Card class="app-launcher-card" :show-highlight-border="false" :sticky="true" v-if="app">
<Card
v-if="app"
class="app-launcher-card"
:show-highlight-border="false"
:sticky="true"
>
<template #title>
<div style="width: 100%">
<p style="font-size: 1.2rem">
{{ app.metadata?.name }}
</p>
<div style="color: var(--input-label); display: flex; justify-content: space-between; margin-top: 4px;">
<p v-if="app.kind === 'Service' && app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined">
<div
style="
color: var(--input-label); display: flex;
justify-content: space-between; margin-top: 4px;
"
>
<p
v-if="
app.kind === 'Service' &&
app.metadata?.labels?.['app.kubernetes.io/version'] !== undefined
"
>
{{ kubernetesVersion }}
</p>
<p v-if="app.kind === '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.kind === 'Ingress'">
Expand All @@ -104,10 +126,18 @@ export default {
</template>
<template #body>
<p v-if="app.kind === 'Service'">
{{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}/` : '' }}{{ namespace }}/{{ name }}
{{
(isGlobalApp || isFavorited) &&
isInGlobalView ? `${app.clusterName}/` : ''
}}
{{ namespace }}/{{ name }}
</p>
<p v-if="app.kind === 'Ingress'">
{{ (isGlobalApp || isFavorited) && isInGlobalView ? `${app.clusterName}: ` : '' }}{{ ingressPath }}
{{
(isGlobalApp || isFavorited) &&
isInGlobalView ? `${app.clusterName}: ` : ''
}}
{{ ingressPath }}
</p>
</template>
<template #actions>
Expand All @@ -121,9 +151,10 @@ export default {
:href="endpoints[0]?.value"
target="_blank"
rel="noopener noreferrer nofollow"
:title="endpoints?.length === 0 ? t('appLauncher.noEndpointFoundForApp') : t('appLauncher.launchEndpoint', {
endpoint: endpoints[0].label,
})"
:title="endpoints?.length === 0 ? t('appLauncher.noEndpointFoundForApp')
: t('appLauncher.launchEndpoint', {
endpoint: endpoints[0].label,
})"
class="btn role-primary"
>
{{ t('appLauncher.launch') }}
Expand All @@ -149,7 +180,6 @@ export default {
</template>
<style lang="scss" scoped>
.app-launcher-card {
::v-deep .card-body {
overflow: hidden !important;
Expand Down
131 changes: 76 additions & 55 deletions pkg/app-launcher/components/ClusterActions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,92 @@
export default {
name: 'ClusterActions',
props: {
searchQuery: {
type: String,
required: true,
},
isGridView: {
type: Boolean,
required: true,
},
sortOrder: {
type: String,
required: true,
},
selectedCluster: {
type: String,
required: true,
},
clusterOptions: {
type: Array,
required: true,
},
searchQuery: {
type: String,
required: true,
},
isGridView: {
type: Boolean,
required: true,
},
sortOrder: {
type: String,
required: true,
},
selectedCluster: {
type: String,
required: true,
},
clusterOptions: {
type: Array,
required: true,
},
},
computed: {
aToZorZtoA() {
console.log(this.$store.getters['i18n/t']('appLauncher.aToZ'));
return this.sortOrder === 'asc' ? this.$store.getters['i18n/t']('appLauncher.aToZ') : this.$store.getters['i18n/t']('appLauncher.zToA');
},
aToZorZtoA() {
return this.sortOrder === 'asc' ? this.$store.getters['i18n/t']('appLauncher.aToZ') : this.$store.getters['i18n/t']('appLauncher.zToA');
},
},
emits: ['update:search-query', 'toggle-sort', 'update:selected-cluster', 'set-view'],
};
</script>

<template>
<div class="cluster-actions">
<div class="search-input">
<input :value="searchQuery" :placeholder="$store.getters['i18n/t']('appLauncher.filter')" @input="$emit('update:search-query', $event.target.value)" />
</div>
<div class="sort-buttons" v-if="isGridView" @click="$emit('toggle-sort')">
<div class="sort-button" :class="{ active: sortOrder === 'asc' }" :disabled="sortOrder === 'asc'">
<i class="icon-chevron-up"></i>
</div>
<div class="sort-label">
<p>{{ aToZorZtoA }}</p>
</div>
<div class="sort-button" :class="{ active: sortOrder === 'desc' }" :disabled="sortOrder === 'desc'">
<i class="icon-chevron-down"></i>
</div>
</div>
<div class="select-wrapper">
<select :value="selectedCluster" class="cluster-select" @change="$emit('update:selected-cluster', $event.target.value)">
<option v-for="option in clusterOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</div>
<button class="icon-button" @click="$emit('set-view', 'grid')">
<i class="icon icon-apps" />
</button>
<button class="icon-button" @click="$emit('set-view', 'list')">
<i class="icon icon-list-flat" />
</button>
<div class="cluster-actions">
<div class="search-input">
<input
:value="searchQuery"
:placeholder="$store.getters['i18n/t']('appLauncher.filter')"
@input="$emit('update:search-query', $event.target.value)"
/>
</div>
<div
v-if="isGridView"
class="sort-buttons"
@click="$emit('toggle-sort')"
>
<div
class="sort-button"
:class="{ active: sortOrder === 'asc' }"
:disabled="sortOrder === 'asc'"
>
<i class="icon-chevron-up"></i>
</div>
<div class="sort-label">
<p>{{ aToZorZtoA }}</p>
</div>
<div
class="sort-button"
:class="{ active: sortOrder === 'desc' }"
:disabled="sortOrder === 'desc'"
>
<i class="icon-chevron-down"></i>
</div>
</div>
<div class="select-wrapper">
<select
:value="selectedCluster"
class="cluster-select"
@change="$emit('update:selected-cluster', $event.target.value)"
>
<option
v-for="option in clusterOptions"
:key="option.value"
:value="option.value"
>
{{ option.label }}
</option>
</select>
</div>
<button class="icon-button" @click="$emit('set-view', 'grid')">
<i class="icon icon-apps" />
</button>
<button class="icon-button" @click="$emit('set-view', 'list')">
<i class="icon icon-list-flat" />
</button>
</div>
</template>


<style scoped>
.cluster-actions {
display: flex;
Expand All @@ -78,7 +100,6 @@ export default {
padding-bottom: 0.425rem;
padding-right: 4.4rem;
background: inherit;
border-bottom: var(--header-border-size) solid var(--header-border);
}
.icon-button {
Expand Down Expand Up @@ -140,4 +161,4 @@ export default {
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</style>
56 changes: 29 additions & 27 deletions pkg/app-launcher/components/ClusterGridView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,42 @@
import AppLauncherCard from './AppLauncherCard.vue';
export default {
name: 'ClusterGridView',
components: {
AppLauncherCard,
name: 'ClusterGridView',
components: {
AppLauncherCard,
},
props: {
clusterData: {
type: Object,
required: true,
},
props: {
clusterData: {
type: Object,
required: true,
},
favoritedApps: {
type: Array,
required: true,
},
favoritedApps: {
type: Array,
required: true,
},
emits: ['toggle-favorite'],
},
emits: ['toggle-favorite'],
};
</script>

<template>
<div class="cluster-grid-view">
<div class="cluster-header">
<h1>
{{ clusterData.name }}
</h1>
</div>
<div class="services-by-cluster-grid">
<AppLauncherCard
v-for="app in clusterData.filteredApps"
:key="`${app.clusterId}-${app.id}-${app.kind}`"
:app="app" :isInGlobalView="false" :favorited-apps="favoritedApps"
@toggle-favorite="$emit('toggle-favorite', $event)"
/>
</div>
<div class="cluster-grid-view">
<div class="cluster-header">
<h1>
{{ clusterData.name }}
</h1>
</div>
<div class="services-by-cluster-grid">
<AppLauncherCard
v-for="app in clusterData.filteredApps"
:key="`${app.clusterId}-${app.id}-${app.kind}`"
:app="app"
:is-in-global-view="false"
:favorited-apps="favoritedApps"
@toggle-favorite="$emit('toggle-favorite', $event)"
/>
</div>
</div>
</template>

<style scoped lang="scss">
Expand Down
Loading

0 comments on commit 1d21396

Please sign in to comment.