Skip to content

G
gitlab-ce
Commit 36bf7e77 authored by Gilang Gumilar's avatar Gilang Gumilar Committed by Natalia Tepluhina
Browse files
Options

Update deprecated slot syntax in `./app/assets/javascripts/clusters/components/applications.vue`

parent 14b11b07
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 178 deletions
app/assets/javascripts/clusters/components/applications.vue
View file @ 36bf7e77
......@@ -281,14 +281,16 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
class="rounded-top"
title-link="https://docs.helm.sh/"
>
<div slot="description">
{{
s__(`ClusterIntegration|Helm streamlines installing
and managing Kubernetes applications.
Tiller runs inside of your Kubernetes Cluster,
and manages releases of your charts.`)
}}
</div>
<template #description>
<div>
{{
s__(`ClusterIntegration|Helm streamlines installing
and managing Kubernetes applications.
Tiller runs inside of your Kubernetes Cluster,
and manages releases of your charts.`)
}}
</div>
</template>
</application-row>
<div v-show="!helmInstalled" class="cluster-application-warning">
<div class="svg-container" v-html="$options.helmInstallIllustration"></div>
......@@ -318,76 +320,80 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:updateable="false"
title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
>
<div slot="description">
<p>
{{
s__(`ClusterIntegration|Ingress gives you a way to route
requests to services based on the request host or path,
centralizing a number of services into a single entrypoint.`)
}}
</p>
<template #description>
<div>
<p>
{{
s__(`ClusterIntegration|Ingress gives you a way to route
requests to services based on the request host or path,
centralizing a number of services into a single entrypoint.`)
}}
</p>
<ingress-modsecurity-settings
:ingress="ingress"
:ingress-mod-security-help-path="ingressModSecurityHelpPath"
/>
<ingress-modsecurity-settings
:ingress="ingress"
:ingress-mod-security-help-path="ingressModSecurityHelpPath"
/>
<template v-if="ingressInstalled">
<div class="form-group">
<label for="ingress-endpoint">{{ s__('ClusterIntegration|Ingress Endpoint') }}</label>
<div class="input-group">
<template v-if="ingressExternalEndpoint">
<input
id="ingress-endpoint"
:value="ingressExternalEndpoint"
type="text"
class="form-control js-endpoint"
readonly
/>
<span class="input-group-append">
<clipboard-button
:text="ingressExternalEndpoint"
:title="s__('ClusterIntegration|Copy Ingress Endpoint')"
class="input-group-text js-clipboard-btn"
<template v-if="ingressInstalled">
<div class="form-group">
<label for="ingress-endpoint">{{
s__('ClusterIntegration|Ingress Endpoint')
}}</label>
<div class="input-group">
<template v-if="ingressExternalEndpoint">
<input
id="ingress-endpoint"
:value="ingressExternalEndpoint"
type="text"
class="form-control js-endpoint"
readonly
/>
</span>
</template>
<template v-else>
<input type="text" class="form-control js-endpoint" readonly />
<gl-loading-icon
class="position-absolute align-self-center ml-2 js-ingress-ip-loading-icon"
/>
</template>
</div>
<p class="form-text text-muted">
{{
s__(`ClusterIntegration|Point a wildcard DNS to this
<span class="input-group-append">
<clipboard-button
:text="ingressExternalEndpoint"
:title="s__('ClusterIntegration|Copy Ingress Endpoint')"
class="input-group-text js-clipboard-btn"
/>
</span>
</template>
<template v-else>
<input type="text" class="form-control js-endpoint" readonly />
<gl-loading-icon
class="position-absolute align-self-center ml-2 js-ingress-ip-loading-icon"
/>
</template>
</div>
<p class="form-text text-muted">
{{
s__(`ClusterIntegration|Point a wildcard DNS to this
generated endpoint in order to access
your application after it has been deployed.`)
}}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
</div>
<p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
{{
s__(`ClusterIntegration|The endpoint is in
the process of being assigned. Please check your Kubernetes
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
}}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
</div>
<p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
{{
s__(`ClusterIntegration|The endpoint is in
the process of being assigned. Please check your Kubernetes
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
}}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
</template>
<template v-else>
<div class="bs-callout bs-callout-info">
<strong v-html="ingressDescription"></strong>
</div>
</template>
</div>
</template>
<template v-else>
<div class="bs-callout bs-callout-info">
<strong v-html="ingressDescription"></strong>
</div>
</template>
</div>
</template>
</application-row>
<application-row
id="cert_manager"
......@@ -406,8 +412,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:disabled="!helmInstalled"
title-link="https://cert-manager.readthedocs.io/en/latest/#"
>
<template>
<div slot="description">
<template #description>
<div>
<p v-html="certManagerDescription"></p>
<div class="form-group">
<label for="cert-manager-issuer-email">
......@@ -455,7 +461,9 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:disabled="!helmInstalled"
title-link="https://prometheus.io/docs/introduction/overview/"
>
<div slot="description" v-html="prometheusDescription"></div>
<template #description>
<div v-html="prometheusDescription"></div>
</template>
</application-row>
<application-row
id="runner"
......@@ -478,14 +486,16 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:disabled="!helmInstalled"
title-link="https://docs.gitlab.com/runner/"
>
<div slot="description">
{{
s__(`ClusterIntegration|GitLab Runner connects to the
repository and executes CI/CD jobs,
pushing results back and deploying
applications to production.`)
}}
</div>
<template #description>
<div>
{{
s__(`ClusterIntegration|GitLab Runner connects to the
repository and executes CI/CD jobs,
pushing results back and deploying
applications to production.`)
}}
</div>
</template>
</application-row>
<application-row
id="crossplane"
......@@ -504,8 +514,8 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:disabled="!helmInstalled"
title-link="https://crossplane.io"
>
<template>
<div slot="description">
<template #description>
<div>
<p v-html="crossplaneDescription"></p>
<div class="form-group">
<CrossplaneProviderStack :crossplane="crossplane" @set="setCrossplaneProviderStack" />
......@@ -531,50 +541,54 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:disabled="!helmInstalled"
title-link="https://jupyterhub.readthedocs.io/en/stable/"
>
<div slot="description">
<p>
{{
s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
manages, and proxies multiple instances of the single-user
Jupyter notebook server. JupyterHub can be used to serve
notebooks to a class of students, a corporate data science group,
or a scientific research group.`)
}}
</p>
<template #description>
<div>
<p>
{{
s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
manages, and proxies multiple instances of the single-user
Jupyter notebook server. JupyterHub can be used to serve
notebooks to a class of students, a corporate data science group,
or a scientific research group.`)
}}
</p>
<template v-if="ingressExternalEndpoint">
<div class="form-group">
<label for="jupyter-hostname">{{ s__('ClusterIntegration|Jupyter Hostname') }}</label>
<template v-if="ingressExternalEndpoint">
<div class="form-group">
<label for="jupyter-hostname">{{
s__('ClusterIntegration|Jupyter Hostname')
}}</label>
<div class="input-group">
<input
id="jupyter-hostname"
v-model="applications.jupyter.hostname"
:readonly="jupyterInstalled"
type="text"
class="form-control js-hostname"
/>
<span class="input-group-btn">
<clipboard-button
:text="jupyterHostname"
:title="s__('ClusterIntegration|Copy Jupyter Hostname')"
class="js-clipboard-btn"
<div class="input-group">
<input
id="jupyter-hostname"
v-model="applications.jupyter.hostname"
:readonly="jupyterInstalled"
type="text"
class="form-control js-hostname"
/>
</span>
</div>
<span class="input-group-btn">
<clipboard-button
:text="jupyterHostname"
:title="s__('ClusterIntegration|Copy Jupyter Hostname')"
class="js-clipboard-btn"
/>
</span>
</div>
<p v-if="ingressInstalled" class="form-text text-muted">
{{
s__(`ClusterIntegration|Replace this with your own hostname if you want.
If you do so, point hostname to Ingress IP Address from above.`)
}}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
</div>
</template>
</div>
<p v-if="ingressInstalled" class="form-text text-muted">
{{
s__(`ClusterIntegration|Replace this with your own hostname if you want.
If you do so, point hostname to Ingress IP Address from above.`)
}}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
</div>
</template>
</div>
</template>
</application-row>
<application-row
id="knative"
......@@ -599,33 +613,36 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
v-bind="applications.knative"
title-link="https://github.com/knative/docs"
>
<div slot="description">
<p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info">
{{
s__(`ClusterIntegration|You must have an RBAC-enabled cluster
to install Knative.`)
}}
<a :href="helpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
<p>
{{
s__(`ClusterIntegration|Knative extends Kubernetes to provide
a set of middleware components that are essential to build modern,
source-centric, and container-based applications that can run
anywhere: on premises, in the cloud, or even in a third-party data center.`)
}}
</p>
<template #description>
<div>
<p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info gl-mb-0">
{{
s__(`ClusterIntegration|You must have an RBAC-enabled cluster
to install Knative.`)
}}
<a :href="helpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
<br />
<p>
{{
s__(`ClusterIntegration|Knative extends Kubernetes to provide
a set of middleware components that are essential to build modern,
source-centric, and container-based applications that can run
anywhere: on premises, in the cloud, or even in a third-party data center.`)
}}
</p>
<knative-domain-editor
v-if="(knative.installed || (helmInstalled && rbac)) && !preInstalledKnative"
:knative="knative"
:ingress-dns-help-path="ingressDnsHelpPath"
@save="saveKnativeDomain"
@set="setKnativeDomain"
/>
</div>
<knative-domain-editor
v-if="(knative.installed || (helmInstalled && rbac)) && !preInstalledKnative"
:knative="knative"
:ingress-dns-help-path="ingressDnsHelpPath"
@save="saveKnativeDomain"
@set="setKnativeDomain"
/>
</div>
</template>
</application-row>
<application-row
id="elastic_stack"
......@@ -648,15 +665,17 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:disabled="!helmInstalled"
title-link="https://gitlab.com/gitlab-org/charts/elastic-stack"
>
<div slot="description">
<p>
{{
s__(
`ClusterIntegration|The elastic stack collects logs from all pods in your cluster`,
)
}}
</p>
</div>
<template #description>
<div>
<p>
{{
s__(
`ClusterIntegration|The elastic stack collects logs from all pods in your cluster`,
)
}}
</p>
</div>
</template>
</application-row>
<application-row
......@@ -683,25 +702,27 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
:updateable="false"
title-link="https://github.com/helm/charts/tree/master/stable/fluentd"
>
<div slot="description">
<p>
{{
s__(
`ClusterIntegration|Fluentd is an open source data collector, which lets you unify the data collection and consumption for a better use and understanding of data. It requires at least one of the following logs to be successfully installed.`,
)
}}
</p>
<template #description>
<div>
<p>
{{
s__(
`ClusterIntegration|Fluentd is an open source data collector, which lets you unify the data collection and consumption for a better use and understanding of data. It requires at least one of the following logs to be successfully installed.`,
)
}}
</p>
<fluentd-output-settings
:port="applications.fluentd.port"
:protocol="applications.fluentd.protocol"
:host="applications.fluentd.host"
:waf-log-enabled="applications.fluentd.wafLogEnabled"
:cilium-log-enabled="applications.fluentd.ciliumLogEnabled"
:status="applications.fluentd.status"
:update-failed="applications.fluentd.updateFailed"
/>
</div>
<fluentd-output-settings
:port="applications.fluentd.port"
:protocol="applications.fluentd.protocol"
:host="applications.fluentd.host"
:waf-log-enabled="applications.fluentd.wafLogEnabled"
:cilium-log-enabled="applications.fluentd.ciliumLogEnabled"
:status="applications.fluentd.status"
:update-failed="applications.fluentd.updateFailed"
/>
</div>
</template>
</application-row>
</div>
</section>
......
spec/frontend/clusters/components/applications_spec.js
View file @ 36bf7e77
......@@ -13,6 +13,14 @@ import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings
describe('Applications', () => {
let vm;
let Applications;
const ApplicationRowStub = {
name: 'application-row-stub',
template: `
<div>
<slot name="description"></slot>
</div>
`,
};
beforeEach(() => {
Applications = Vue.extend(applications);
......@@ -202,7 +210,12 @@ describe('Applications', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(Applications, { propsData });
wrapper = shallowMount(Applications, {
propsData,
stubs: {
ApplicationRow: ApplicationRowStub,
},
});
});
afterEach(() => {
wrapper.destroy();
......@@ -436,7 +449,10 @@ describe('Applications', () => {
let knativeDomainEditor;
beforeEach(() => {
wrapper = shallowMount(Applications, { propsData });
wrapper = shallowMount(Applications, {
propsData,
stubs: { ApplicationRow: ApplicationRowStub },
});
jest.spyOn(eventHub, '$emit');
knativeDomainEditor = wrapper.find(KnativeDomainEditor);
......@@ -504,7 +520,10 @@ describe('Applications', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(Applications, { propsData });
wrapper = shallowMount(Applications, {
propsData,
stubs: { ApplicationRow: ApplicationRowStub },
});
});
afterEach(() => {
wrapper.destroy();
......@@ -563,7 +582,10 @@ describe('Applications', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(Applications, { propsData });
wrapper = shallowMount(Applications, {
propsData,
stubs: { ApplicationRow: ApplicationRowStub },
});
});
afterEach(() => {
wrapper.destroy();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7