Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 90dee52

Browse files
VitaliiShpitalStorj Robot
VitaliiShpital
authored and
Storj Robot
committed
web/satellite: wired up compute ssh key delete with the backend
Issue: storj/compute#12 Change-Id: I9791334a2b2cca1006618b1e58d4b853f9909abb
1 parent bf7ff99 commit 90dee52

File tree

4 files changed

+134
-2
lines changed

4 files changed

+134
-2
lines changed

‎web/satellite/src/api/compute.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,10 @@ export class ComputeAPI implements IComputeAPI {
5454
public async deleteSSHKey(baseURL: string, authToken: string, id: string): Promise<void> {
5555
const path = `${baseURL}/api/v1/ssh-key/${id}`;
5656
const response = await this.http.delete(path, null, { authToken });
57-
const result = await response.json();
5857

5958
if (response.status !== 204) {
59+
const result = await response.json();
60+
6061
throw new APIError({
6162
status: response.status,
6263
message: result.message || 'Can not delete SSH Key',

‎web/satellite/src/components/ComputeKeysTableComponent.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,20 @@
4040
{{ Time.formattedDate(item.created) }}
4141
</span>
4242
</template>
43-
<template #item.actions>
43+
<template #item.actions="{ item }">
4444
<v-btn
4545
size="small"
4646
variant="outlined"
4747
color="default"
48+
@click="onDelete(item)"
4849
>
4950
Remove
5051
</v-btn>
5152
</template>
5253
</v-data-table>
5354
</v-card>
55+
56+
<delete-compute-s-s-h-key-dialog v-model="isDeleteDialog" :ssh-key="keyToDelete" />
5457
</template>
5558

5659
<script setup lang="ts">
@@ -73,6 +76,8 @@ import { useLoading } from '@/composables/useLoading';
7376
import { useNotify } from '@/composables/useNotify';
7477
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
7578
79+
import DeleteComputeSSHKeyDialog from '@/components/dialogs/DeleteComputeSSHKeyDialog.vue';
80+
7681
const computeStore = useComputeStore();
7782
7883
const { isLoading, withLoading } = useLoading();
@@ -89,6 +94,8 @@ const headers: DataTableHeader[] = [
8994
{ title: '', key: 'actions', align: 'end', sortable: false },
9095
];
9196
97+
const isDeleteDialog = ref<boolean>(false);
98+
const keyToDelete = ref<SSHKey>(new SSHKey());
9299
const search = ref<string>('');
93100
94101
const keys = computed<SSHKey[]>(() => computeStore.state.sshKeys);
@@ -103,6 +110,11 @@ function fetch(): void {
103110
});
104111
}
105112
113+
function onDelete(key: SSHKey): void {
114+
keyToDelete.value = key;
115+
isDeleteDialog.value = true;
116+
}
117+
106118
onMounted(() => {
107119
fetch();
108120
});

‎web/satellite/src/components/dialogs/DeleteComputeSSHKeyDialog.vue‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// Copyright (C) 2025 Storj Labs, Inc.
2+
// See LICENSE for copying information.
3+
4+
<template>
5+
<v-dialog
6+
v-model="model"
7+
max-width="420px"
8+
transition="fade-transition"
9+
:persistent="isLoading"
10+
>
11+
<v-card>
12+
<v-card-item class="pa-6">
13+
<template #prepend>
14+
<v-sheet
15+
class="border-sm d-flex justify-center align-center"
16+
width="40"
17+
height="40"
18+
rounded="lg"
19+
>
20+
<component :is="Trash2" :size="18" />
21+
</v-sheet>
22+
</template>
23+
<v-card-title class="font-weight-bold">
24+
Remove SSH Key
25+
</v-card-title>
26+
<template #append>
27+
<v-btn
28+
icon="$close"
29+
variant="text"
30+
size="small"
31+
color="default"
32+
:disabled="isLoading"
33+
@click="model = false"
34+
/>
35+
</template>
36+
</v-card-item>
37+
38+
<v-divider />
39+
40+
<div class="pa-6">
41+
<p class="mb-3">
42+
The following SSH Key will be deleted.
43+
</p>
44+
<v-chip :title="sshKey.name" class="font-weight-bold text-wrap h-100 py-2">
45+
{{ sshKey.name }}
46+
</v-chip>
47+
</div>
48+
49+
<v-divider />
50+
51+
<v-card-actions class="pa-6">
52+
<v-row>
53+
<v-col>
54+
<v-btn variant="outlined" color="default" block :disabled="isLoading" @click="model = false">
55+
Cancel
56+
</v-btn>
57+
</v-col>
58+
<v-col>
59+
<v-btn color="error" variant="flat" block :loading="isLoading" @click="onDeleteClick">
60+
Remove
61+
</v-btn>
62+
</v-col>
63+
</v-row>
64+
</v-card-actions>
65+
</v-card>
66+
</v-dialog>
67+
</template>
68+
69+
<script setup lang="ts">
70+
import {
71+
VDialog,
72+
VCard,
73+
VCardItem,
74+
VSheet,
75+
VCardTitle,
76+
VDivider,
77+
VCardActions,
78+
VRow,
79+
VCol,
80+
VBtn,
81+
VChip,
82+
} from 'vuetify/components';
83+
import { Trash2 } from 'lucide-vue-next';
84+
85+
import { useLoading } from '@/composables/useLoading';
86+
import { useNotify } from '@/composables/useNotify';
87+
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
88+
import { useComputeStore } from '@/store/modules/computeStore';
89+
import { SSHKey } from '@/types/compute';
90+
91+
const computeStore = useComputeStore();
92+
93+
const notify = useNotify();
94+
const { isLoading, withLoading } = useLoading();
95+
96+
const props = defineProps<{
97+
sshKey: SSHKey;
98+
}>();
99+
100+
const model = defineModel<boolean>({ required: true });
101+
102+
function onDeleteClick(): void {
103+
withLoading(async () => {
104+
if (!props.sshKey) {
105+
notify.error('Key is required to delete a key');
106+
return;
107+
}
108+
109+
try {
110+
await computeStore.deleteSSHKey(props.sshKey.id);
111+
notify.success(`SSH Key deleted successfully`);
112+
model.value = false;
113+
} catch (error) {
114+
notify.notifyError(error, AnalyticsErrorEventSource.CONFIRM_DELETE_COMPUTE_SSH_KEY_MODAL);
115+
}
116+
});
117+
}
118+
</script>

‎web/satellite/src/utils/constants/analyticsEventNames.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export enum AnalyticsErrorEventSource {
7979
SETUP_ACCESS_MODAL = 'Setup access modal',
8080
CONFIRM_DELETE_AG_MODAL = 'Confirm delete access grant modal',
8181
CONFIRM_DELETE_DOMAIN_MODAL = 'Confirm delete domain modal',
82+
CONFIRM_DELETE_COMPUTE_SSH_KEY_MODAL = 'Confirm delete compute ssh key modal',
8283
FILE_BROWSER_LIST_CALL = 'File browser - list API call',
8384
FILE_BROWSER_ENTRY = 'File browser entry',
8485
FILE_BROWSER = 'File browser',

0 commit comments

Comments
 (0)