1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<script>
import { GlEmptyState, GlLink, GlTable } from '@gitlab/ui';
import { encodeSaferUrl, setUrlParams } from '~/lib/utils/url_utility';
import { s__ } from '~/locale';
const i18n = {
noInstancesTitle: s__('CloudSeed|No instances'),
noInstancesDescription: s__('CloudSeed|There are no instances to display.'),
title: s__('CloudSeed|Instances'),
description: s__('CloudSeed|Database instances associated with this project'),
};
export default {
components: { GlEmptyState, GlLink, GlTable },
props: {
cloudsqlInstances: {
type: Array,
required: true,
},
emptyIllustrationUrl: {
type: String,
required: true,
},
},
computed: {
tableData() {
return this.cloudsqlInstances.filter((instance) => instance.instance_name);
},
},
methods: {
gcpProjectUrl(id) {
return setUrlParams({ project: id }, 'https://console.cloud.google.com/sql/instances');
},
instanceUrl(name, id) {
const saferName = encodeSaferUrl(name);
return setUrlParams(
{ project: id },
`https://console.cloud.google.com/sql/instances/${saferName}/overview`,
);
},
},
fields: [
{ key: 'ref', label: s__('CloudSeed|Environment') },
{ key: 'gcp_project', label: s__('CloudSeed|Google Cloud Project') },
{ key: 'instance_name', label: s__('CloudSeed|CloudSQL Instance') },
{ key: 'version', label: s__('CloudSeed|Version') },
],
i18n,
};
</script>
<template>
<div class="gl-mx-3">
<gl-empty-state
v-if="tableData.length === 0"
:title="$options.i18n.noInstancesTitle"
:description="$options.i18n.noInstancesDescription"
:svg-path="emptyIllustrationUrl"
/>
<div v-else>
<h2 class="gl-font-size-h2">{{ $options.i18n.title }}</h2>
<p>{{ $options.i18n.description }}</p>
<gl-table :fields="$options.fields" :items="tableData">
<template #cell(gcp_project)="{ value }">
<gl-link :href="gcpProjectUrl(value)">{{ value }}</gl-link>
</template>
<template #cell(instance_name)="{ item: { instance_name, gcp_project } }">
<a :href="instanceUrl(instance_name, gcp_project)">{{ instance_name }}</a>
</template>
</gl-table>
</div>
</div>
</template>
|
