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