Skip to content

G
gitlab-ce
Commit 1e25d605 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch '207322-remove-redundant-slots' into 'master' 

Refactor redundant divs on Kubernetes apps page

See merge request gitlab-org/gitlab!33452
parents 60921a97 f0c4a3bb
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 250 deletions
app/assets/javascripts/clusters/components/application_row.vue
View file @ 1e25d605
...@@ -339,7 +339,9 @@ export default { ...@@ -339,7 +339,9 @@ export default {
class="js-cluster-application-installed-via" class="js-cluster-application-installed-via"
v-html="installedVia" v-html="installedVia"
></span> ></span>
<slot name="description"></slot> <div>
<slot name="description"></slot>
</div>
<div v-if="hasError" class="cluster-application-error text-danger prepend-top-10"> <div v-if="hasError" class="cluster-application-error text-danger prepend-top-10">
<p class="js-cluster-application-general-error-message gl-mb-0"> <p class="js-cluster-application-general-error-message gl-mb-0">
{{ generalErrorDescription }} {{ generalErrorDescription }}
......
app/assets/javascripts/clusters/components/applications.vue
View file @ 1e25d605
...@@ -218,14 +218,12 @@ export default { ...@@ -218,14 +218,12 @@ export default {
title-link="https://docs.helm.sh/" title-link="https://docs.helm.sh/"
> >
<template #description> <template #description>
<div> {{
{{ s__(`ClusterIntegration|Helm streamlines installing
s__(`ClusterIntegration|Helm streamlines installing and managing Kubernetes applications.
and managing Kubernetes applications. Tiller runs inside of your Kubernetes Cluster,
Tiller runs inside of your Kubernetes Cluster, and manages releases of your charts.`)
and manages releases of your charts.`) }}
}}
</div>
</template> </template>
</application-row> </application-row>
<div v-show="!helmInstalled" class="cluster-application-warning"> <div v-show="!helmInstalled" class="cluster-application-warning">
...@@ -257,92 +255,88 @@ export default { ...@@ -257,92 +255,88 @@ export default {
title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/" title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
> >
<template #description> <template #description>
<div> <p>
<p> {{
{{ s__(`ClusterIntegration|Ingress gives you a way to route
s__(`ClusterIntegration|Ingress gives you a way to route requests to services based on the request host or path,
requests to services based on the request host or path, centralizing a number of services into a single entrypoint.`)
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">{{ <label for="ingress-endpoint">{{ s__('ClusterIntegration|Ingress Endpoint') }}</label>
s__('ClusterIntegration|Ingress Endpoint') <div class="input-group">
}}</label> <template v-if="ingressExternalEndpoint">
<div class="input-group"> <input
<template v-if="ingressExternalEndpoint"> id="ingress-endpoint"
<input :value="ingressExternalEndpoint"
id="ingress-endpoint" type="text"
:value="ingressExternalEndpoint" class="form-control js-endpoint"
type="text" readonly
class="form-control js-endpoint" />
readonly <span class="input-group-append">
/> <clipboard-button
<span class="input-group-append"> :text="ingressExternalEndpoint"
<clipboard-button :title="s__('ClusterIntegration|Copy Ingress Endpoint')"
:text="ingressExternalEndpoint" class="input-group-text js-clipboard-btn"
: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> </span>
</div> </template>
<p class="form-text text-muted"> <template v-else>
{{ <input type="text" class="form-control js-endpoint" readonly />
s__(`ClusterIntegration|Point a wildcard DNS to this <gl-loading-icon
generated endpoint in order to access class="position-absolute align-self-center ml-2 js-ingress-ip-loading-icon"
your application after it has been deployed.`) />
}} </template>
<gl-link :href="ingressDnsHelpPath" target="_blank">
{{ __('More information') }}
</gl-link>
</p>
</div> </div>
<p class="form-text text-muted">
<p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
{{ {{
s__(`ClusterIntegration|The endpoint is in s__(`ClusterIntegration|Point a wildcard DNS to this
the process of being assigned. Please check your Kubernetes generated endpoint in order to access
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`) your application after it has been deployed.`)
}} }}
<gl-link :href="ingressDnsHelpPath" target="_blank"> <gl-link :href="ingressDnsHelpPath" target="_blank">
{{ __('More information') }} {{ __('More information') }}
</gl-link> </gl-link>
</p> </p>
</template> </div>
<template v-else>
<div class="bs-callout bs-callout-info"> <p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
<strong> {{
<gl-sprintf s__(`ClusterIntegration|The endpoint is in
:message=" the process of being assigned. Please check your Kubernetes
s__( cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
'ClusterIntegration|Installing Ingress may incur additional costs. Learn more about %{pricingLink}.', }}
) <gl-link :href="ingressDnsHelpPath" target="_blank">
" {{ __('More information') }}
> </gl-link>
<template #pricingLink> </p>
<gl-link href="https://cloud.google.com/compute/pricing#lb" target="_blank">{{ </template>
s__('ClusterIntegration|pricing') <template v-else>
}}</gl-link> <div class="bs-callout bs-callout-info">
</template> <strong>
</gl-sprintf> <gl-sprintf
</strong> :message="
</div> s__(
</template> 'ClusterIntegration|Installing Ingress may incur additional costs. Learn more about %{pricingLink}.',
</div> )
"
>
<template #pricingLink>
<gl-link href="https://cloud.google.com/compute/pricing#lb" target="_blank">{{
s__('ClusterIntegration|pricing')
}}</gl-link>
</template>
</gl-sprintf>
</strong>
</div>
</template>
</template> </template>
</application-row> </application-row>
<application-row <application-row
...@@ -363,47 +357,45 @@ export default { ...@@ -363,47 +357,45 @@ export default {
title-link="https://cert-manager.readthedocs.io/en/latest/#" title-link="https://cert-manager.readthedocs.io/en/latest/#"
> >
<template #description> <template #description>
<div> <p>
<p> <gl-sprintf
<gl-sprintf :message="
:message=" s__(`ClusterIntegration|Cert-Manager is a native Kubernetes certificate management controller that helps with issuing certificates.
s__(`ClusterIntegration|Cert-Manager is a native Kubernetes certificate management controller that helps with issuing certificates. Installing Cert-Manager on your cluster will issue a certificate by %{letsEncrypt} and ensure that certificates
Installing Cert-Manager on your cluster will issue a certificate by %{letsEncrypt} and ensure that certificates are valid and up-to-date.`)
are valid and up-to-date.`) "
" >
<template #letsEncrypt>
<gl-link href="https://letsencrypt.org/" target="_blank">{{
s__(`ClusterIntegration|Let's Encrypt`)
}}</gl-link>
</template>
</gl-sprintf>
</p>
<div class="form-group">
<label for="cert-manager-issuer-email">
{{ s__('ClusterIntegration|Issuer Email') }}
</label>
<div class="input-group">
<input
id="cert-manager-issuer-email"
v-model="applications.cert_manager.email"
:readonly="certManagerInstalled"
type="text"
class="form-control js-email"
/>
</div>
<p class="form-text text-muted">
{{
s__(`ClusterIntegration|Issuers represent a certificate authority.
You must provide an email address for your Issuer. `)
}}
<gl-link
href="http://docs.cert-manager.io/en/latest/reference/issuers.html?highlight=email"
target="_blank"
>{{ __('More information') }}</gl-link
> >
<template #letsEncrypt>
<gl-link href="https://letsencrypt.org/" target="_blank">{{
s__(`ClusterIntegration|Let's Encrypt`)
}}</gl-link>
</template>
</gl-sprintf>
</p> </p>
<div class="form-group">
<label for="cert-manager-issuer-email">
{{ s__('ClusterIntegration|Issuer Email') }}
</label>
<div class="input-group">
<input
id="cert-manager-issuer-email"
v-model="applications.cert_manager.email"
:readonly="certManagerInstalled"
type="text"
class="form-control js-email"
/>
</div>
<p class="form-text text-muted">
{{
s__(`ClusterIntegration|Issuers represent a certificate authority.
You must provide an email address for your Issuer. `)
}}
<gl-link
href="http://docs.cert-manager.io/en/latest/reference/issuers.html?highlight=email"
target="_blank"
>{{ __('More information') }}</gl-link
>
</p>
</div>
</div> </div>
</template> </template>
</application-row> </application-row>
...@@ -463,14 +455,12 @@ export default { ...@@ -463,14 +455,12 @@ export default {
title-link="https://docs.gitlab.com/runner/" title-link="https://docs.gitlab.com/runner/"
> >
<template #description> <template #description>
<div> {{
{{ s__(`ClusterIntegration|GitLab Runner connects to the
s__(`ClusterIntegration|GitLab Runner connects to the repository and executes CI/CD jobs,
repository and executes CI/CD jobs, pushing results back and deploying
pushing results back and deploying applications to production.`)
applications to production.`) }}
}}
</div>
</template> </template>
</application-row> </application-row>
<application-row <application-row
...@@ -491,31 +481,29 @@ export default { ...@@ -491,31 +481,29 @@ export default {
title-link="https://crossplane.io" title-link="https://crossplane.io"
> >
<template #description> <template #description>
<div> <p>
<p> <gl-sprintf
<gl-sprintf :message="
:message=" s__(
s__( `ClusterIntegration|Crossplane enables declarative provisioning of managed services from your cloud of choice using %{codeStart}kubectl%{codeEnd} or %{gitlabIntegrationLink}.
`ClusterIntegration|Crossplane enables declarative provisioning of managed services from your cloud of choice using %{codeStart}kubectl%{codeEnd} or %{gitlabIntegrationLink}. Crossplane runs inside your Kubernetes cluster and supports secure connectivity and secrets management between app containers and the cloud services they depend on.`,
Crossplane runs inside your Kubernetes cluster and supports secure connectivity and secrets management between app containers and the cloud services they depend on.`, )
) "
" >
> <template #code="{content}">
<template #code="{content}"> <code>{{ content }}</code>
<code>{{ content }}</code> </template>
</template> <template #gitlabIntegrationLink>
<template #gitlabIntegrationLink> <gl-link
<gl-link href="https://docs.gitlab.com/ee/user/clusters/applications.html#crossplane"
href="https://docs.gitlab.com/ee/user/clusters/applications.html#crossplane" target="_blank"
target="_blank" >{{ s__('ClusterIntegration|Gitlab Integration') }}</gl-link
>{{ s__('ClusterIntegration|Gitlab Integration') }}</gl-link >
> </template>
</template> </gl-sprintf>
</gl-sprintf> </p>
</p> <div class="form-group">
<div class="form-group"> <CrossplaneProviderStack :crossplane="crossplane" @set="setCrossplaneProviderStack" />
<CrossplaneProviderStack :crossplane="crossplane" @set="setCrossplaneProviderStack" />
</div>
</div> </div>
</template> </template>
</application-row> </application-row>
...@@ -538,52 +526,48 @@ export default { ...@@ -538,52 +526,48 @@ export default {
title-link="https://jupyterhub.readthedocs.io/en/stable/" title-link="https://jupyterhub.readthedocs.io/en/stable/"
> >
<template #description> <template #description>
<div> <p>
<p> {{
{{ s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns, manages, and proxies multiple instances of the single-user
manages, and proxies multiple instances of the single-user Jupyter notebook server. JupyterHub can be used to serve
Jupyter notebook server. JupyterHub can be used to serve notebooks to a class of students, a corporate data science group,
notebooks to a class of students, a corporate data science group, or a scientific research 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">{{ <label for="jupyter-hostname">{{ s__('ClusterIntegration|Jupyter Hostname') }}</label>
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 class="input-group-btn"> </span>
<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.`)
}}
<gl-link :href="ingressDnsHelpPath" target="_blank">
{{ __('More information') }}
</gl-link>
</p>
</div> </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.`)
}}
<gl-link :href="ingressDnsHelpPath" target="_blank">
{{ __('More information') }}
</gl-link>
</p>
</div>
</template>
</template> </template>
</application-row> </application-row>
<application-row <application-row
...@@ -610,31 +594,29 @@ export default { ...@@ -610,31 +594,29 @@ export default {
title-link="https://github.com/knative/docs" title-link="https://github.com/knative/docs"
> >
<template #description> <template #description>
<div> <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info">
<p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info"> {{
{{ s__(`ClusterIntegration|You must have an RBAC-enabled cluster
s__(`ClusterIntegration|You must have an RBAC-enabled cluster to install Knative.`)
to install Knative.`) }}
}} <gl-link :href="helpPath" target="_blank">{{ __('More information') }}</gl-link>
<gl-link :href="helpPath" target="_blank">{{ __('More information') }}</gl-link> </p>
</p> <p>
<p> {{
{{ s__(`ClusterIntegration|Knative extends Kubernetes to provide
s__(`ClusterIntegration|Knative extends Kubernetes to provide a set of middleware components that are essential to build modern,
a set of middleware components that are essential to build modern, source-centric, and container-based applications that can run
source-centric, and container-based applications that can run anywhere: on premises, in the cloud, or even in a third-party data center.`)
anywhere: on premises, in the cloud, or even in a third-party data center.`) }}
}} </p>
</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>
</template> </template>
</application-row> </application-row>
<application-row <application-row
...@@ -659,15 +641,13 @@ export default { ...@@ -659,15 +641,13 @@ export default {
title-link="https://gitlab.com/gitlab-org/charts/elastic-stack" title-link="https://gitlab.com/gitlab-org/charts/elastic-stack"
> >
<template #description> <template #description>
<div> <p>
<p> {{
{{ s__(
s__( `ClusterIntegration|The elastic stack collects logs from all pods in your cluster`,
`ClusterIntegration|The elastic stack collects logs from all pods in your cluster`, )
) }}
}} </p>
</p>
</div>
</template> </template>
</application-row> </application-row>
...@@ -696,25 +676,23 @@ export default { ...@@ -696,25 +676,23 @@ export default {
title-link="https://github.com/helm/charts/tree/master/stable/fluentd" title-link="https://github.com/helm/charts/tree/master/stable/fluentd"
> >
<template #description> <template #description>
<div> <p>
<p> {{
{{ s__(
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.`,
`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>
</template> </template>
</application-row> </application-row>
</div> </div>
......
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