76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<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>
|