Skip to content

Commit 6e03252

Browse files
MohamedElmdaryMohamedElmdary
committed
save work
1 parent 9f483eb commit 6e03252

7 files changed

Lines changed: 89 additions & 44 deletions

File tree

‎frontend/kubecloud-v2/components/SSHKey.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
<div class="d-flex align-center ga-1 mt-1">
3737
<VIcon icon="mdi-calendar-outline" size="x-small" color="accent" />
38-
<span class="text-subtitle-2 text-accent">Added on {{ addedAt }}</span>
38+
<span class="text-caption text-accent">Added on {{ addedAt }}</span>
3939
</div>
4040
</div>
4141

‎frontend/kubecloud-v2/components/StatsCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
rounded="lg"
99
/>
1010

11-
<p class="text-h4 font-weight-bold mt-4 mb-1 text-no-wrap" v-text="value" />
11+
<p class="text-h5 font-weight-bold mt-4 mb-1 text-no-wrap" v-text="value" />
1212
<p class="text-subtitle-2 text-uppercase text-accent" v-text="title" />
1313
</v-card>
1414
</template>

‎frontend/kubecloud-v2/components/UserCreditDialogCard.vue‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<DialogCardLayout title="Credit Balance" icon="mdi-cash-plus" @cancel="$emit('cancel')">
3-
<template #description>
4-
<div>
5-
<span class="text-subtitle-2 opacity-50">Apply credits to user:</span>&nbsp;
6-
<span
7-
class="text-subtitle-2 text-primary px-2 py-1 rounded-lg"
8-
:style="{
9-
backgroundColor: 'rgba(var(--v-theme-primary), var(--v-border-opacity))',
10-
}"
11-
>{{ user?.email ?? "N/A" }}</span>
12-
</div>
13-
</template>
2+
<v-form ref="form" @submit.prevent="submit()">
3+
<DialogCardLayout title="Credit Balance" icon="mdi-cash-plus" @cancel="$emit('cancel')">
4+
<template #description>
5+
<div>
6+
<span class="text-subtitle-2 opacity-50">Apply credits to user:</span>&nbsp;
7+
<span
8+
class="text-subtitle-2 text-primary px-2 py-1 rounded-lg"
9+
:style="{
10+
backgroundColor: 'rgba(var(--v-theme-primary), var(--v-border-opacity))',
11+
}"
12+
>{{ user?.email ?? "N/A" }}</span>
13+
</div>
14+
</template>
1415

15-
<v-form ref="form" @submit.prevent="submit()">
1616
<v-row>
1717
<v-col cols="12">
1818
<div class="d-flex justify-space-between align-center">
@@ -71,7 +71,7 @@
7171
/>
7272
</v-col>
7373

74-
<v-col cols="12">
74+
<!-- <v-col cols="12">
7575
<v-btn
7676
type="submit"
7777
block
@@ -82,10 +82,22 @@
8282
variant="outlined"
8383
:disabled="!form?.isValid"
8484
/>
85-
</v-col>
85+
</v-col> -->
8686
</v-row>
87-
</v-form>
88-
</DialogCardLayout>
87+
88+
<template #actions>
89+
<v-btn
90+
type="submit"
91+
class="btn-form"
92+
text="Apply Credits"
93+
prepend-icon="mdi-cash-plus"
94+
variant="outlined"
95+
block
96+
:disabled="!form?.isValid"
97+
/>
98+
</template>
99+
</DialogCardLayout>
100+
</v-form>
89101
</template>
90102

91103
<script setup lang="ts">

‎frontend/kubecloud-v2/components/UserRemoveDialogCard.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@
2828
<v-btn
2929
variant="text"
3030
color="error"
31+
:style="{ '--v-border-opacity': 0.5 }"
3132
prepend-icon="mdi-trash-can-outline"
33+
3234
@click="$emit('confirm')"
3335
>
3436
Remove User

‎frontend/kubecloud-v2/components/dialogs/InvoiceDialogCard.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<p class="text-subtitle-2 opacity-50 mb-1 text-uppercase">
1313
Total Amount
1414
</p>
15-
<p class="text-h3 font-weight-bold">
15+
<p class="text-h4 mt-2 font-weight-bold">
1616
${{ toPrecision(invoice?.total ?? 0, 3) }}
1717
</p>
1818
</v-col>
@@ -21,7 +21,7 @@
2121
<p class="text-subtitle-2 opacity-50 mb-1 text-uppercase">
2222
Tax Applied
2323
</p>
24-
<p class="text-h3 font-weight-bold">
24+
<p class="text-h4 mt-2 font-weight-bold">
2525
${{ toPrecision(invoice?.tax ?? 0, 3) }}
2626
</p>
2727
</v-col>

‎frontend/kubecloud-v2/composables/stats.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export type Resources
1212
| "nodes"
1313
| "countries"
1414
| "balance"
15-
| "memory"
15+
| "cpu"
1616
| "storage"
1717

1818
export interface UseStatsOptions {
@@ -22,7 +22,7 @@ export interface UseStatsOptions {
2222
export function useStats(options?: UseStatsOptions) {
2323
const api = useApi()
2424

25-
const { state, isLoading } = useAsyncState(async () => {
25+
const { state, isLoading, error } = useAsyncState(async () => {
2626
const { data } = await api.admin.getStats({ unauthenticated: true })
2727
return data.data
2828
}, null)
@@ -86,11 +86,11 @@ export function useStats(options?: UseStatsOptions) {
8686
})
8787
}
8888

89-
if (!exclude.includes("memory")) {
89+
if (!exclude.includes("cpu")) {
9090
resources.push({
91-
id: "memory",
92-
title: "Total Memory",
93-
icon: "mdi-memory",
91+
id: "cpu",
92+
title: "CPU Cores",
93+
icon: "mdi-cpu-64-bit",
9494
color: "#EA2831",
9595
value: s.cores ?? 0,
9696
})
@@ -109,5 +109,5 @@ export function useStats(options?: UseStatsOptions) {
109109
return resources
110110
})
111111

112-
return { isLoading, stats, data: state }
112+
return { isLoading, stats, data: state, error }
113113
}

‎frontend/kubecloud-v2/pages/index.vue‎

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,55 @@
11
<template>
2-
<v-container class="pt-16">
3-
<h1 class="text-h4 font-weight-bold text-center mb-4">
4-
Mycelium Cloud
5-
</h1>
6-
<p class="text-body-1 text-center text-primary mx-auto" :style="{ maxWidth: '600px' }">
7-
Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native
8-
applications at scale
9-
</p>
2+
<div>
3+
<div
4+
class="border-b d-flex justify-center align-center"
5+
:style="{
6+
minHeight: '500px',
7+
background: `
8+
url(${myceliumBg1}) no-repeat bottom right/40%,
9+
url(${myceliumBg2}) no-repeat -120px 80px/30%,
10+
linear-gradient(100.95deg, #0B1A30 71.46%, #225196 145.62%)
11+
`,
12+
}"
13+
>
14+
<v-container>
15+
<h1 class="text-h1 font-weight-bold text-center mb-4">
16+
Mycelium Cloud
17+
</h1>
18+
<p class="text-body-1 text-center text-primary mx-auto" :style="{ maxWidth: '600px' }">
19+
Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native
20+
applications at scale
21+
</p>
22+
</v-container>
23+
</div>
1024

11-
{{ isLoading }}
12-
{{ state }}
13-
</v-container>
25+
<v-container class="my-16">
26+
<div v-if="isLoading || stats.length === 0" class="d-flex justify-center align-center" :style="{ height: '198px' }">
27+
<v-progress-linear indeterminate color="primary" :style="{ maxWidth: '600px' }" />
28+
</div>
29+
30+
<v-fade-transition>
31+
<v-row v-if="stats.length > 0 && !isLoading" class="justify-center">
32+
<v-col
33+
v-for="resource in stats"
34+
:key="resource.id"
35+
cols="12"
36+
sm="6"
37+
md="4"
38+
lg="3"
39+
>
40+
<StatsCard v-bind="resource" />
41+
</v-col>
42+
</v-row>
43+
</v-fade-transition>
44+
</v-container>
45+
</div>
1446
</template>
1547

1648
<script setup lang="ts">
49+
import myceliumBg1 from "~/assets/images/mycelium_bg_1.svg"
50+
import myceliumBg2 from "~/assets/images/mycelium_bg_2.svg"
51+
1752
definePageMeta({ middleware: "public" })
1853
19-
const api = useApi()
20-
const { state, isLoading } = useAsyncState(async () => {
21-
const { data } = await api.admin.getStats({ unauthenticated: true })
22-
return data.data
23-
}, null)
54+
const { stats, isLoading } = useStats({ exclude: ["users", "clusters", "balance"] })
2455
</script>

0 commit comments

Comments
 (0)