kubeflow
/
website
mirror of https://github.com/kubeflow/website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve sidebar style for deeply nested pages (#3816) 

* Improve sidebar style for deep nesting

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* ensure bottom of sidebar is always scrollable

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* improve the look of the seperator lines

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Set max width for large screens

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Remove arrow rotation on hover

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Fix KFP API reference pages (remove extra bootstrap)

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Fix homepage and small screen alignment.

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Reduce sidebar size

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Fix styles + Add swagger-ui for KFP

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Don't break swagger mid-word unless necessary.

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Allow setting a swagger "base URL" + Add preamble

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Fix small mobile scrollbar

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Clean up swagger pages (remove extra heading/intro)

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Add logs to help debug missing remote swagger JSON

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Use H2 headings on swagger pages

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

* Fix sidebar color + logo position

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>

---------

Signed-off-by: Mathew Wicks <5735406+thesuperzapper@users.noreply.github.com>
This commit is contained in:
Mathew Wicks 2024-08-09 19:34:38 -07:00 committed by GitHub
parent 482a3c3306
commit 6d53777fdf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 902 additions and 15446 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

385
assets/scss/_styles_project.scss
View File

@ -1,35 +1,154 @@
// --------------------------------------------------
// fix header position
// reduce padding for small screens
// --------------------------------------------------
@include media-breakpoint-up(md) {
header {
position: sticky;
top: 0;
z-index: 1000;
}
.td-navbar:not(.td-navbar-cover) {
position: unset;
}
@include media-breakpoint-down(md) {
.td-main {
main {
padding-top: 1rem;
}
.td-sidebar {
padding-top: 0rem;
}
.td-sidebar-toc {
padding-top: 1.25rem;
}
}
}
// --------------------------------------------------
// increase 80% content width limit for large screens
// --------------------------------------------------
.td-max-width-on-larger-screens {
@include media-breakpoint-up(lg) {
max-width: 90%;
}
}
// --------------------------------------------------
// color the sidebars darker than main content area
// --------------------------------------------------
@include media-breakpoint-down(sm) {
.td-main {
padding-left: 0;
padding-right: 0;
}
.td-sidebar {
background-color: $td-sidebar-bg-color;
}
}
@include media-breakpoint-up(md) {
.td-outer {
height: 100%;
background-color: $td-sidebar-bg-color;
height: unset;
}
.td-sidebar, .td-sidebar-toc {
background-color: unset;
}
.td-main {
padding-left: 0;
padding-right: 0;
}
main {
background-color: #ffffff;
}
}
// --------------------------------------------------
// add border below search on small devices
// --------------------------------------------------
@include media-breakpoint-down(md) {
.td-sidebar {
border-bottom: 0.1rem solid $border-color;
}
}
// --------------------------------------------------
// fix positions
// --------------------------------------------------
@include media-breakpoint-up(md) {
.td-main {
.td-main_inner {
// note, this is required to ensure the footer not visible for short pages
// which is important to prevent the "search" and "toc" sidebars from being
// underneath the the header
min-height: 100vh;
// ensure the background color is not visible because of left-right padding
// note that there is a default left-right margin of -15px, which we are
// selectively overwriting depending on the screen width
// - there is a left sidebar for md and above
// - there is a right sidebar for xl and above
margin-left: 0;
@include media-breakpoint-up(xl) {
margin-right: 0;
}
}
// left-hand sidebar
.td-sidebar {
padding-left: 0;
padding-right: 0.25rem;
padding-top: 7rem;
padding-bottom: 0;
.td-sidebar__inner {
position: sticky;
top: 7rem;
height: calc(100vh - 7rem);
padding-left: 0;
padding-right: 0;
}
}
// main content area
main {
padding-top: 7rem;
padding-bottom: 3rem;
}
// right hand sidebar
.td-sidebar-toc {
height: unset;
padding-left: 0;
padding-right: 0;
padding-top: 7rem;
padding-bottom: 0;
// the default theme makes the outer div stickey, but we use the inner div
position: relative;
top: unset;
overflow-y: unset;
.td-sidebar-toc__inner {
position: sticky;
top: 7rem;
height: calc(100vh - 7rem);
padding-left: 1rem;
padding-right: 1.5rem;
// allow the toc to scroll
overflow-y: auto;
}
// add separator line before toc list
.td-toc {
padding-top: 1rem;
border-top: 0.1rem solid $border-color;
// fix the padding of the toc list
ul {
margin-bottom: 0;
}
a {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
}
}
}
}
// --------------------------------------------------
// prevent sidebar from appearing over the footer
// --------------------------------------------------
footer {
z-index: 1000;
}
// --------------------------------------------------
@ -49,12 +168,150 @@ footer {
}
// --------------------------------------------------
// prevent overflow of long names in sidebar
// sidebar styling
// --------------------------------------------------
.td-sidebar {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.5rem;
@include media-breakpoint-down(md) {
padding-top: 2rem;
}
}
// sidebar search styling
.td-sidebar__search {
padding-top: 0;
padding-bottom: 0.5rem;
margin: 0;
.td-search {
width: 100%;
}
@include media-breakpoint-down(md) {
padding-left: 0.75rem;
padding-right: 0.75rem;
.td-search {
padding-right: 0.25rem;
}
}
@include media-breakpoint-up(md) {
padding-left: 0;
padding-right: 0;
.td-search {
padding-right: 0.5rem;
}
}
}
.td-sidebar-nav {
padding-left: 0;
padding-right: 0.75rem;
padding-top: 0;
padding-bottom: 2rem;
margin-left: 0;
margin-right: 0;
margin-top: 1rem;
margin-bottom: 0;
// extra padding on mobile (in collapsible menu)
@include media-breakpoint-down(sm) {
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 1.5rem;
margin-top: 0.5rem;
}
}
// reduce padding for the root level of the sidebar
nav.foldable-nav .with-child, nav.foldable-nav .without-child {
padding-left: 0;
position: unset;
}
// style the sidebar like a folder tree
nav.foldable-nav {
// apply styles to the main sidebar sections
.ul-1 {
// reduce padding of the sidebar links
.with-child {
padding-left: 1.5rem;
position: relative;
}
.without-child {
padding-left: 0.7rem;
position: relative;
}
// make the active link bold
a.active {
color: $primary !important;
font-weight: 700 !important;
}
// bold the chain of pages leading to the active page
.with-child.active-path > label a {
font-weight: 700;
}
// show a border on the left of open sections
.with-child > input:checked ~ ul {
border-left: .1rem dotted $gray-400;
// round the bottom left corner
border-bottom-left-radius: 1rem;
// position the border correctly
padding-bottom: 0.25rem;
margin-bottom: 0.5rem;
margin-left: -0.77rem;
}
// color the border for the active path
.with-child.active-path > ul {
border-left: .1rem solid rgb(190, 212, 255) !important;
}
// make the arrow for open non-active sections gray
.with-child > input:checked ~ label:before {
color: $gray-900;
}
// make the arrow for open active sections blue
.with-child.active-path > input:checked ~ label:before {
color: $primary;
}
}
}
// prevent overflow of long names in sidebar
.td-sidebar-nav__section > ul {
overflow-wrap: break-word;
}
// --------------------------------------------------
// fix the arrow transform animation on desktop
// --------------------------------------------------
@media (hover: hover) and (pointer: fine) {
nav.foldable-nav {
.ul-1 .with-child > label:hover:before {
transition: transform 0.3s;
}
.ul-1 .with-child > input:checked ~ label:hover:before {
transition: transform 0.3s;
}
}
}
// --------------------------------------------------
// custom navbar with larger logo, dropdown on mobile
// --------------------------------------------------
@ -76,6 +333,7 @@ footer {
top: 0;
z-index: 33;
padding: 10px;
margin: 0;
height: 95px;
background: white;
border: 2px solid #4279f4;
@ -90,7 +348,39 @@ footer {
}
}
// this filler ensures that the navbar links are on the right
// and the links do not go under the logo (which uses absolute positioning)
.filler {
flex-grow: 1;
min-width: 120px;
@include media-breakpoint-down(md) {
min-width: 100px;
}
}
// extra padding on mobile (in collapsible menu)
@include media-breakpoint-down(sm) {
.navbar-collapse {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
.navbar-nav {
// allow wrapping of navbar links
white-space: normal;
.dropdown-toggle {
white-space: normal;
}
// prevent long links from taking up too much space
@include media-breakpoint-between(sm, lg) {
.nav-item.long-content {
font-size: 70%;
}
}
@include media-breakpoint-down(md) {
font-size: .875rem;
.dropdown {
@ -100,24 +390,22 @@ footer {
}
}
.td-sidebar {
padding-bottom: 0.5rem;
.td-sidebar__inner {
padding-top: 30px;
height: unset;
@include media-breakpoint-down(md) {
padding-top: 10px;
}
}
}
// --------------------------------------------------
// Home page
// --------------------------------------------------
.td-home {
// dont color the outer div with the sidebar color
// as there is no sidebar on the main page
.td-outer {
background-color: unset;
}
// animate the background color change of navbar
.td-navbar {
transition: background-color 75ms linear;
}
.card-img-top {
object-fit: scale-down;
}
@ -185,7 +473,7 @@ footer {
margin: 0 0 1.5em 1.5em;
}
#overview, .components, #cncf, #community {
#overview, #pageContent, #cncf, #community {
padding: 4rem 0 4rem 0 !important;
}
@ -195,19 +483,20 @@ footer {
#overview {
border-bottom: 0.1rem solid #b6d0ff;
text-align: center;
}
#pageContent .container {
max-width: 70rem;
}
#community {
border-top: 0.1rem solid #b6d0ff;
border-bottom: 0.1rem solid #b6d0ff;
text-align: center;
}
#cncf {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
text-align: center;
.cncf-title {
color: #6b7281;
@ -230,7 +519,7 @@ footer {
font-size: 1em;
}
@media screen and (min-width: 480px) {
@include media-breakpoint-up(sm) {
#overview, #community {
font-size: 1.125em;
}
@ -243,7 +532,7 @@ footer {
}
}
@media screen and (min-width: 769px) {
@include media-breakpoint-up(md) {
#pageContent .lead {
margin-top: 1em;
display: -ms-flexbox;
@ -319,11 +608,11 @@ footer {
margin-bottom: 20px;
}
@media (min-width: 768px) and (max-width: 991px) {
@include media-breakpoint-between(md, lg) {
margin-top: 100px;
}
@media (max-width: 767px) {
@include media-breakpoint-down(md) {
margin-top: 50px;
}
}
@ -354,12 +643,4 @@ footer {
&:first-of-type.active {
border-top-left-radius: 0;
}
}
nav.foldable-nav .ul-1 .with-child>label:hover:before {
transform: none;
}
nav.foldable-nav .ul-1 .with-child>input:checked~label:hover:before {
transform: rotate(90deg) !important;
}

9
assets/scss/_variables_project.scss
View File

@ -6,6 +6,15 @@ html.smooth-scroll {
scroll-behavior: smooth;
}
// Bootstrap container-max-widths
// NOTE: we increase the max-widths to make the content wider compared to the Bootstrap defaults
$container-max-widths: (
sm: 768px, // default: 540px, breakpoint: 576px
md: 992px, // default: 720px, breakpoint: 768px
lg: 1200px, // default: 960px, breakpoint: 992px
xl: 1440px // default: 1140px, breakpoint: 1200px
);
// Theme colors
$primary: #4279f4;
$secondary: #fff;

29
config.toml
View File

@ -33,16 +33,16 @@ ignoreFiles = []
pre = "<i class='fas fa-calendar pr-2' style='color: #FFC107'></i>"
post = "<br><span class='badge badge-warning'>Nov 12th, 2024</span> <span class='badge badge-warning'>Salt Lake City, Utah</span> "
url = "https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/co-located-events/cloud-native-kubernetes-ai-day/"
[[menu.main]]
name = "Events"
weight = -102
pre = "<i class='fas fa-calendar pr-2'></i>"
url = "/events/"
[[menu.main]]
name = "Docs"
weight = -101
weight = -102
pre = "<i class='fas fa-book pr-2'></i>"
url = "/docs/"
[[menu.main]]
name = "Events"
weight = -101
pre = "<i class='fas fa-calendar pr-2'></i>"
url = "/events/"
[[menu.main]]
name = "Blog"
weight = -100
@ -54,6 +54,12 @@ ignoreFiles = []
pre = "<i class='fab fa-github pr-2'></i>"
url = "https://github.com/kubeflow/"
###############################################################################
# Docsy - Output Formats
###############################################################################
[outputs]
section = [ "HTML" ]
###############################################################################
# Docsy - Goldmark markdown parser
###############################################################################
@ -128,7 +134,7 @@ enable = true
gcs_engine_id = "007239566369470735695:624rglujm-w"
# Text label for the version menu in the top bar of the website.
version_menu = "Kubeflow Version"
version_menu = "Version"
# The major.minor version tag for the version of the docs represented in this
# branch of the repository. Used in the "version-banner" partial to display a
@ -151,6 +157,10 @@ enable = true
# NOTE: enable it per-page with `mathjax: true` in front matter
mathjax = false
# Disable Swagger UI by default
# NOTE: enable it per-page with `swaggerui: true` in front matter
swaggerui = false
# Social media accounts
[params.social]
@ -245,8 +255,9 @@ enable = true
[params.ui.feedback]
enable = true
# The responses that the user sees after clicking "yes" (the page was helpful) or "no" (the page was not helpful).
yes = 'Glad to hear it! Please <a href="https://github.com/kubeflow/website/issues/new">tell us how we can improve</a>.'
no = 'Sorry to hear that. Please <a href="https://github.com/kubeflow/website/issues/new">tell us how we can improve</a>.'
# NOTE: the actual content of the responses is set in the "layouts/partials/feedback.html" file.
yes = ""
no = ""
# Links in footer
[params.links]

44
content/en/_index.html
View File

@ -4,34 +4,30 @@ title = "Kubeflow"
<!-- Hero section -->
{{<blocks/cover title="Kubeflow" image_anchor="center" color="dark">}}
<div class="mx-auto">
<p class="lead mt-5">The Machine Learning Toolkit for Kubernetes</p>
<a
class="btn btn-lg btn-primary mr-3 mb-4"
href="/docs/started/"
>
Get Started <i class="fas fa-arrow-alt-circle-right ml-2"></i>
</a>
<a
class="btn btn-lg btn-secondary mr-3 mb-4"
href="/docs/about/contributing/"
>
Contribute <i class="fas fa-pencil-alt ml-2"></i>
</a>
<div class="mx-auto mt-5">
<div class="px-2">
<p class="lead mt-5 mb-3">The Machine Learning Toolkit for Kubernetes</p>
<div class="mx-auto">
<a class="btn btn-lg btn-primary mr-1 mb-4" href="/docs/started/">
Get Started <i class="fas fa-arrow-alt-circle-right ml-2"></i>
</a>
<a class="btn btn-lg btn-secondary ml-1 mb-4" href="/docs/about/contributing/">
Contribute <i class="fas fa-pencil-alt ml-2"></i>
</a>
</div>
<div class="mt-5">
{{<blocks/link-down color="light">}}
</div>
</div>
{{</blocks/cover>}}
<div id="overview">
<div id="overview" class="text-center">
<h3 class="section-head">What is Kubeflow?</h3>
<div class="container">
<h3 class="section-head">What is Kubeflow?</h3>
<p class="mx-auto col-md-8 px-0">
<p class="mx-auto col-11 col-xl-7 px-0">
Kubeflow makes artificial intelligence and machine learning simple, portable, and scalable.
We are an <i>ecosystem</i> of <a href="https://kubernetes.io/" target="_blank">Kubernetes</a>
based components for each stage in
<a href="/docs/started/architecture/#kubeflow-components-in-the-ml-lifecycle" target="_blank">the AI/ML Lifecycle</a>
based components for each stage in
<a href="/docs/started/architecture/#kubeflow-components-in-the-ml-lifecycle" target="_blank">the AI/ML Lifecycle</a>
with support for best-in-class open source <a href="/docs/started/architecture/#kubeflow-ecosystem" target="_blank">tools and frameworks</a>.
<br><br>
<a href="/docs/started/installing-kubeflow/" target="_blank">Deploy Kubeflow</a> anywhere you run Kubernetes.
@ -39,7 +35,7 @@ title = "Kubeflow"
</div>
</div>
<section id="pageContent" class="components">
<section id="pageContent">
<h3 class="section-head text-center">Kubeflow Components</h3>
<div class="container">
<div class="card-deck">
@ -157,9 +153,9 @@ title = "Kubeflow"
</div>
</section>
<div id="community">
<div id="community" class="text-center">
<h3 class="section-head">Join our Community</h3>
<div class="container">
<h3 class="section-head">Join our Community</h3>
<p class="mx-auto col-md-7 px-0">
We are an open and welcoming <a href="/docs/about/community/" target="_blank" rel="noopener">community</a> of software developers, data scientists, and organizations!
Check out the <a href="/docs/about/community/#kubeflow-community-call">weekly community call</a>, get involved in discussions on the <a href="/docs/about/community/#kubeflow-mailing-list">mailing list</a> or chat with others on the <a href="/docs/about/community/#kubeflow-slack-channels">Slack Workspace</a>!
@ -167,7 +163,7 @@ title = "Kubeflow"
</div>
</div>
<div id="cncf">
<div id="cncf" class="text-center">
<div class="container">
<div class="mx-auto col-md-4">
<img

5
content/en/docs/about/community.md
View File

@ -69,6 +69,11 @@ The following calendars are maintained by [Kubeflow Working Groups](#kubeflow-wo
This is an aggregated view of the community calendars and should be displayed in your device's timezone.
<style>
#calendar-container {
overflow: auto;
}
</style>
<div id="calendar-container"></div>
<script type="text/javascript">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

3
content/en/docs/about/events.md
View File

@ -2,5 +2,6 @@
title = "Events"
description = "Kubeflow Community Events and Meetups"
weight = 15
manualLinkRelref = "../../events/"
manualLink = "/events/"
icon = "fa-solid fa-arrow-up-right-from-square"
+++

7508
content/en/docs/components/pipelines/legacy-v1/reference/api/kubeflow-pipeline-api-spec.html
View File

File diff suppressed because one or more lines are too long

55
content/en/docs/components/pipelines/legacy-v1/reference/api/kubeflow-pipeline-api-spec.md Normal file
View File

@ -0,0 +1,55 @@
+++
title = "Pipelines API Reference (v1beta1)"
description = "API Reference for Kubeflow Pipelines API - v1beta1"
weight = 3
swaggerui = true
+++
{{% alert title="Old Version" color="warning" %}}
This page is about __Kubeflow Pipelines V1__, please see the [V2 documentation](/docs/components/pipelines) for the latest information.
Note, while the V2 backend is able to run pipelines submitted by the V1 SDK, we strongly recommend [migrating to the V2 SDK](/docs/components/pipelines/user-guides/migration).
For reference, the final release of the V1 SDK was [`kfp==1.8.22`](https://pypi.org/project/kfp/1.8.22/), and its reference documentation is [available here](https://kubeflow-pipelines.readthedocs.io/en/1.8.22/).
{{% /alert %}}
This document describes the API specification for the `v1beta1` Kubeflow Pipelines REST API.
## About the REST API
In most deployments of the [Kubeflow Platform](/docs/started/installing-kubeflow/#kubeflow-platform), the Kubeflow Pipelines REST API is available under the `/pipeline/` HTTP path.
For example, if you host Kubeflow at `https://kubeflow.example.com`, the API will be available at `https://kubeflow.example.com/pipeline/`.
{{% alert title="Tip" color="dark" %}}
We recommend using the [Kubeflow Pipelines Python SDK](/docs/components/pipelines/legacy-v1/reference/sdk/) as it provides a more user-friendly interface.
See the [Connect SDK to the API](/docs/components/pipelines/user-guides/core-functions/connect-api/) guide for more information.
{{% /alert %}}
### Authentication
How requests are authenticated and authorized will depend on the distribution you are using.
Typically, you will need to provide a token or cookie in the request headers.
Please refer to the documentation of your [Kubeflow distribution](/docs/started/installing-kubeflow/#kubeflow-platform) for more information.
### Example Usage
To use the API, you will need to send HTTP requests to the appropriate endpoints.
For example, to list pipeline runs in the `team-1` namespace, send a `GET` request to the following URL:
```
https://kubeflow.example.com/pipeline/apis/v1beta1/runs?resource_reference_key.type=NAMESPACE&resource_reference_key.id=team-1
```
## Swagger UI
The following [Swagger UI](https://github.com/swagger-api/swagger-ui) is automatically generated from the [`{{% pipelines/latest-version %}}`](https://github.com/kubeflow/pipelines/releases/tag/{{% pipelines/latest-version %}}) version of Kubeflow Pipelines for the [`v1beta1` REST API](https://github.com/kubeflow/pipelines/blob/{{% pipelines/latest-version %}}/backend/api/v1beta1/swagger/kfp_api_single_file.swagger.json).
{{% alert title="Note" color="info" %}}
The _try it out_ feature of Swagger UI does not work due to authentication and CORS, but it can help you construct the correct API calls.
{{% /alert %}}
{{< swaggerui-inline >}}
https://raw.githubusercontent.com/kubeflow/pipelines/{{% pipelines/latest-version %}}/backend/api/v1beta1/swagger/kfp_api_single_file.swagger.json
{{< /swaggerui-inline >}}

2
content/en/docs/components/pipelines/legacy-v1/reference/sdk.md
View File

@ -12,5 +12,5 @@ For reference, the final release of the V1 SDK was [`kfp==1.8.22`](https://pypi.
{{% /alert %}}
See the [generated reference docs for the Python
SDK](https://kubeflow-pipelines.readthedocs.io/en/stable/) (hosted on
SDK](https://kubeflow-pipelines.readthedocs.io/en/1.8.22/) (hosted on
*Read the Docs*).

6
content/en/docs/components/pipelines/legacy-v1/sdk/OWNERS.md
View File

@ -1,6 +0,0 @@
approvers:
- neuromage
- Ark-kun
- numerology
reviewers:
- RFMVasconcelos

7839
content/en/docs/components/pipelines/reference/api/kubeflow-pipeline-api-spec.html
View File

File diff suppressed because one or more lines are too long

48
content/en/docs/components/pipelines/reference/api/kubeflow-pipeline-api-spec.md Normal file
View File

@ -0,0 +1,48 @@
+++
title = "Pipelines API Reference (v2beta1)"
description = "API Reference for Kubeflow Pipelines API - v2beta1"
weight = 3
swaggerui = true
+++
This document describes the API specification for the `v2beta1` Kubeflow Pipelines REST API.
## About the REST API
In most deployments of the [Kubeflow Platform](/docs/started/installing-kubeflow/#kubeflow-platform), the Kubeflow Pipelines REST API is available under the `/pipeline/` HTTP path.
For example, if you host Kubeflow at `https://kubeflow.example.com`, the API will be available at `https://kubeflow.example.com/pipeline/`.
{{% alert title="Tip" color="dark" %}}
We recommend using the [Kubeflow Pipelines Python SDK](docs/components/pipelines/reference/sdk/) as it provides a more user-friendly interface.
See the [Connect SDK to the API](/docs/components/pipelines/user-guides/core-functions/connect-api/) guide for more information.
{{% /alert %}}
### Authentication
How requests are authenticated and authorized will depend on the distribution you are using.
Typically, you will need to provide a token or cookie in the request headers.
Please refer to the documentation of your [Kubeflow distribution](/docs/started/installing-kubeflow/#kubeflow-platform) for more information.
### Example Usage
To use the API, you will need to send HTTP requests to the appropriate endpoints.
For example, to list pipeline runs in the `team-1` namespace, send a `GET` request to the following URL:
```
https://kubeflow.example.com/pipeline/apis/v2beta1/runs?namespace=team-1
```
## Swagger UI
The following [Swagger UI](https://github.com/swagger-api/swagger-ui) is automatically generated from the [`{{% pipelines/latest-version %}}`](https://github.com/kubeflow/pipelines/releases/tag/{{% pipelines/latest-version %}}) version of Kubeflow Pipelines for the [`v2beta1` REST API](https://github.com/kubeflow/pipelines/blob/{{% pipelines/latest-version %}}/backend/api/v2beta1/swagger/kfp_api_single_file.swagger.json).
{{% alert title="Note" color="info" %}}
The _try it out_ feature of Swagger UI does not work due to authentication and CORS, but it can help you construct the correct API calls.
{{% /alert %}}
{{< swaggerui-inline >}}
https://raw.githubusercontent.com/kubeflow/pipelines/{{% pipelines/latest-version %}}/backend/api/v2beta1/swagger/kfp_api_single_file.swagger.json
{{< /swaggerui-inline >}}

1
content/en/docs/distributions/list.md
View File

@ -3,6 +3,7 @@ title = "List of Kubeflow Distributions"
description = "A list showing packaged distributions of Kubeflow"
weight = 10
manualLinkRelref = "../started/installing-kubeflow.md#packaged-distributions"
icon = "fa-solid fa-arrow-up-right-from-square"
+++
We maintain a list showing __packaged distributions of Kubeflow__ on the [Installing Kubeflow](/docs/started/installing-kubeflow/#packaged-distributions) page.

7
content/en/events/docs.md Normal file
View File

@ -0,0 +1,7 @@
+++
title = "Documentation"
description = "Return to Kubeflow documentation"
weight = 1
manualLink = "/docs/about/"
icon = "fa-solid fa-arrow-up-right-from-square"
+++

5
content/en/events/gsoc-2024.md
View File

@ -23,6 +23,11 @@ Please __do not__ reach out privately to mentors, instead, start a thread in the
You may wish to attend the next community meeting for the group that is leading your chosen project, please see the calendar below for more information.
<style>
#calendar-container {
overflow: auto;
}
</style>
<div id="calendar-container"></div>
<script type="text/javascript">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

8
i18n/en.toml Normal file
View File

@ -0,0 +1,8 @@
[post_create_issue]
other = "Give page feedback"
[post_create_project_issue]
other = "Create project issue"
[print_entire_section]
other = "Print this section"

20
layouts/_default/content.html Normal file
View File

@ -0,0 +1,20 @@
<div class="td-content">
<h1>{{ .Title }}</h1>
{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
<header class="article-meta">
{{ partial "taxonomy_terms_article_wrapper.html" . }}
{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) }}
{{ partial "reading-time.html" . }}
{{ end }}
</header>
{{ .Content }}
{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
{{ partial "feedback.html" . }}
<br />
{{ end }}
{{ if (.Site.Params.DisqusShortname) }}
<br />
{{ partial "disqus-comment.html" . }}
{{ end }}
{{ partial "page-meta-lastmod.html" . }}
</div>

34
layouts/docs/baseof.html Normal file
View File

@ -0,0 +1,34 @@
<!doctype html>
<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
<head>
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-outer">
<div class="container td-main">
<div class="row flex-xl-nowrap td-main_inner">
<aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
{{ partial "sidebar.html" . }}
</aside>
<aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
<div class="td-sidebar-toc__inner">
{{ partial "page-meta-links.html" . }}
{{ partial "toc.html" . }}
{{ partial "taxonomy_terms_clouds.html" . }}
</div>
</aside>
<main class="col-12 col-md-9 col-xl-8 px-4 pl-md-4 pr-md-5 pl-xl-5" role="main">
{{ partial "version-banner.html" . }}
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
{{ block "main" . }}{{ end }}
</main>
</div>
</div>
{{ partial "footer.html" . }}
</div>
{{ partial "scripts.html" . }}
</body>
</html>

23
layouts/docs/list.html Normal file
View File

@ -0,0 +1,23 @@
{{ define "main" }}
<div class="td-content">
<h1>{{ .Title }}</h1>
{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
<header class="article-meta">
{{ partial "taxonomy_terms_article_wrapper.html" . }}
{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) }}
{{ partial "reading-time.html" . }}
{{ end }}
</header>
{{ .Content }}
{{ partial "section-index.html" . }}
{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
{{ partial "feedback.html" . }}
<br />
{{ end }}
{{ if (.Site.DisqusShortname) }}
<br />
{{ partial "disqus-comment.html" . }}
{{ end }}
{{ partial "page-meta-lastmod.html" . }}
</div>
{{ end }}

11
layouts/partials/feedback.html
View File

@ -13,17 +13,22 @@
display: block;
}
</style>
<div class="card mt-4 col-12 col-sm-6">
<div class="card mt-4 col-12 col-sm-7 d-print-none">
<div class="card-body">
<h3 class="card-title">Feedback</h3>
<p class="card-text">Was this page helpful?</p>
<button class="btn btn-primary feedback--answer feedback--answer-yes" style="width: 5rem;">Yes</button>
<button class="btn btn-primary feedback--answer feedback--answer-no" style="width: 5rem;">No</button>
<p class="feedback--response feedback--response-yes">
{{ .yes | safeHTML }}
Thank you for your feedback!
</p>
<p class="feedback--response feedback--response-no">
{{ .no | safeHTML }}
We're sorry this page wasn't helpful.
{{- if .File }}
{{- $gh_repo := ($.Param "github_repo") }}
{{- $issuesURL := printf "%s/issues/new?title=[Feedback]+%s" $gh_repo (safeURL .File.Path) }}
If you have a moment, please <a href="{{ $issuesURL }}" target="_blank">share your feedback</a> so we can improve.
{{- end }}
</p>
</div>
</div>

2
layouts/partials/footer.html
View File

@ -1,6 +1,6 @@
{{ $links := .Site.Params.links }}
<footer class="bg-dark pt-3 row d-print-none" xmlns="http://www.w3.org/1999/html">
<div class="container-fluid mx-sm-5">
<div class="container px-5">
<div class="row">
<div class="col-6 col-sm-2 text-xs-center order-sm-2">
{{ with $links }}

4
layouts/partials/head.html
View File

@ -50,6 +50,10 @@
{{ partialCached "math.html" . }}
{{ end }}
{{ if .Param "swaggerui" }}
{{ partialCached "swaggerui.html" . }}
{{ end }}
{{ if .Store.Get "hasMermaid" }}
{{ partialCached "mermaid.html" . }}
{{ end }}

8
layouts/partials/navbar.html
View File

@ -5,6 +5,7 @@
<nav class="js-navbar-scroll navbar navbar-expand-md navbar-dark
{{- if $cover }} td-navbar-cover {{- end }} td-navbar">
<div class="container px-0">
<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
{{- /**/ -}}
<span class="navbar-brand__logo navbar-logo">
@ -20,6 +21,7 @@
</span>
{{- /**/ -}}
</a>
<div class="filler"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_navbar" aria-controls="main_navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -27,7 +29,8 @@
<ul class="navbar-nav ml-auto pt-4 pt-md-0 my-2 my-md-1">
{{ $p := . -}}
{{ range .Site.Menus.main -}}
<li class="nav-item mr-2 mr-lg-4 mt-1 mt-lg-0">
{{ $longContent := gt (len .Name) 10 -}}
<li class="nav-item mr-2 mr-lg-4 mt-1 mt-lg-0 {{- if $longContent }} long-content {{- end }}">
{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) -}}
{{ with .Page }}{{ $active = or $active ( $.IsDescendant .) }}{{ end -}}
{{ $pre := .Pre -}}
@ -48,7 +51,7 @@
</li>
{{ end -}}
{{ if .Site.Params.versions -}}
<li class="nav-item dropdown mt-1 mt-lg-0 mr-2">
<li class="nav-item dropdown mt-1 mt-lg-0">
{{ partial "navbar-version-selector.html" . -}}
</li>
{{ end -}}
@ -59,4 +62,5 @@
{{ end -}}
</ul>
</div>
</div>
</nav>

54
layouts/partials/page-meta-links.html Normal file
View File

@ -0,0 +1,54 @@
{{ if .File }}
{{ $pathFormatted := replace .File.Path "\\" "/" -}}
{{ $gh_repo := ($.Param "github_repo") -}}
{{ $gh_url := ($.Param "github_url") -}}
{{ $gh_subdir := ($.Param "github_subdir") -}}
{{ $gh_project_repo := ($.Param "github_project_repo") -}}
{{ $gh_branch := (default "main" ($.Param "github_branch")) -}}
<div class="td-page-meta pb-3">
{{ if $gh_url -}}
{{ warnf "Warning: use of `github_url` is deprecated. For details see https://www.docsy.dev/docs/adding-content/repository-links/#github_url-optional" -}}
<a href="{{ $gh_url }}" target="_blank"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
{{ else if $gh_repo -}}
{{ $gh_repo_path := printf "%s/content/%s" $gh_branch $pathFormatted -}}
{{ if and ($gh_subdir) (.Site.Language.Lang) -}}
{{ $gh_repo_path = printf "%s/%s/content/%s/%s" $gh_branch $gh_subdir ($.Site.Language.Lang) $pathFormatted -}}
{{ else if .Site.Language.Lang -}}
{{ $gh_repo_path = printf "%s/content/%s/%s" $gh_branch ($.Site.Language.Lang) $pathFormatted -}}
{{ else if $gh_subdir -}}
{{ $gh_repo_path = printf "%s/%s/content/%s" $gh_branch $gh_subdir $pathFormatted -}}
{{ end -}}
{{/* Adjust $gh_repo_path based on path_base_for_github_subdir */ -}}
{{ $ghs_base := $.Param "path_base_for_github_subdir" -}}
{{ $ghs_rename := "" -}}
{{ if reflect.IsMap $ghs_base -}}
{{ $ghs_rename = $ghs_base.to -}}
{{ $ghs_base = $ghs_base.from -}}
{{ end -}}
{{ with $ghs_base -}}
{{ $gh_repo_path = replaceRE . $ghs_rename $gh_repo_path -}}
{{ end -}}
{{ $viewURL := printf "%s/tree/%s" $gh_repo $gh_repo_path -}}
{{ $editURL := printf "%s/edit/%s" $gh_repo $gh_repo_path -}}
{{ $issuesURL := printf "%s/issues/new?title=[Feedback]+%s" $gh_repo (safeURL $.File.Path ) -}}
{{ $newPageStub := resources.Get "stubs/new-page-template.md" -}}
{{ $newPageQS := querify "value" $newPageStub.Content "filename" "change-me.md" | safeURL -}}
{{ $newPageURL := printf "%s/new/%s?%s" $gh_repo $gh_repo_path $newPageQS -}}
<!-- <a href="{{ $viewURL }}" class="td-page-meta&#45;&#45;view" target="_blank" rel="noopener"><i class="fa-solid fa-file-lines fa-fw"></i> {{ T "post_view_this" }}</a>-->
<a href="{{ $editURL }}" class="td-page-meta--edit" target="_blank" rel="noopener"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_edit_this" }}</a>
<!-- <a href="{{ $newPageURL }}" class="td-page-meta&#45;&#45;child" target="_blank" rel="noopener"><i class="fa-solid fa-pen-to-square fa-fw"></i> {{ T "post_create_child_page" }}</a>-->
<a href="{{ $issuesURL }}" class="td-page-meta--issue" target="_blank" rel="noopener"><i class="fa-solid fa-comment fa-fw"></i> {{ T "post_create_issue" }}</a>
{{ with $gh_project_repo -}}
{{ $project_issueURL := printf "%s/issues/new/choose" . -}}
<!-- <a href="{{ $project_issueURL }}" class="td-page-meta&#45;&#45;project-issue" target="_blank" rel="noopener"><i class="fa-solid fa-bug fa-fw"></i> {{ T "post_create_project_issue" }}</a>-->
{{ end -}}
{{ end -}}
{{ with .CurrentSection.AlternativeOutputFormats.Get "print" -}}
<a id="print" href="{{ .Permalink | safeURL }}"><i class="fa-solid fa-print fa-fw"></i> {{ T "print_entire_section" }}</a>
{{ end }}
</div>
{{ end -}}

71
layouts/partials/sidebar-tree.html Normal file
View File

@ -0,0 +1,71 @@
{{/* We cache this partial for bigger sites and set the active class client side. */}}
{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit -}}
<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
{{ if not .Site.Params.ui.sidebar_search_disable -}}
<form class="td-sidebar__search d-flex align-items-center">
{{ partial "search-input.html" . }}
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
</button>
</form>
{{ else -}}
<div id="content-mobile">
<form class="td-sidebar__search d-flex align-items-center">
{{ partial "search-input.html" . }}
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
</button>
</form>
</div>
<div id="content-desktop"></div>
{{ end -}}
<nav class="collapse td-sidebar-nav{{ if .Site.Params.ui.sidebar_menu_foldable }} foldable-nav{{ end }}" id="td-section-nav">
{{ if (gt (len .Site.Home.Translations) 0) -}}
<div class="nav-item dropdown d-block d-lg-none">
{{ partial "navbar-lang-selector.html" . }}
</div>
{{ end -}}
{{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection -}}
{{ $ulNr := 0 -}}
{{ $ulShow := cond (isset .Site.Params.ui "ul_show") .Site.Params.ui.ul_show 1 -}}
{{ $sidebarMenuTruncate := cond (isset .Site.Params.ui "sidebar_menu_truncate") .Site.Params.ui.sidebar_menu_truncate 50 -}}
<ul class="td-sidebar-nav__section ul-{{ $ulNr }}">
{{ template "section-tree-nav-section" (dict "page" . "section" $navRoot "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
</ul>
</nav>
</div>
{{ define "section-tree-nav-section" -}}
{{ $s := .section -}}
{{ $p := .page -}}
{{ $shouldDelayActive := .shouldDelayActive -}}
{{ $sidebarMenuTruncate := .sidebarMenuTruncate -}}
{{ $treeRoot := cond (eq .ulNr 0) true false -}}
{{ $ulNr := .ulNr -}}
{{ $ulShow := .ulShow -}}
{{ $active := and (not $shouldDelayActive) (eq $s $p) -}}
{{ $activePath := and (not $shouldDelayActive) (or (eq $p $s) ($p.IsDescendant $s)) -}}
{{ $show := cond (or (lt $ulNr $ulShow) $activePath (and (not $shouldDelayActive) (eq $s.Parent $p.Parent)) (and (not $shouldDelayActive) (eq $s.Parent $p)) (not $p.Site.Params.ui.sidebar_menu_compact) (and (not $shouldDelayActive) ($p.IsDescendant $s.Parent))) true false -}}
{{ $mid := printf "m-%s" ($s.RelPermalink | anchorize) -}}
{{ $pages_tmp := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true -}}
{{ $pages := $pages_tmp | first $sidebarMenuTruncate -}}
{{ $withChild := gt (len $pages) 0 -}}
{{ $manualLink := cond (isset $s.Params "manuallink") $s.Params.manualLink ( cond (isset $s.Params "manuallinkrelref") (relref $s $s.Params.manualLinkRelref) $s.RelPermalink) -}}
{{ $manualLinkTitle := cond (isset $s.Params "manuallinktitle") $s.Params.manualLinkTitle $s.Title -}}
<li class="td-sidebar-nav__section-title td-sidebar-nav__section{{ if $withChild }} with-child{{ else }} without-child{{ end }}{{ if $activePath }} active-path{{ end }}{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
{{ if (and $p.Site.Params.ui.sidebar_menu_foldable (ge $ulNr 1)) -}}
<input type="checkbox" id="{{ $mid }}-check"{{ if $activePath}} checked{{ end }}/>
<label for="{{ $mid }}-check"><a href="{{ $manualLink }}"{{ if ne $s.LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with $s.Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0 {{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a></label>
{{ else -}}
<a href="{{ $manualLink }}"{{ if ne $s.LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with $s.Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a>
{{- end }}
{{- if $withChild }}
{{- $ulNr := add $ulNr 1 }}
<ul class="ul-{{ $ulNr }}{{ if (gt $ulNr 1)}} foldable{{end}}">
{{ range $pages -}}
{{ if (not (and (eq $s $p.Site.Home) (eq .Params.toc_root true))) -}}
{{ template "section-tree-nav-section" (dict "page" $p "section" . "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" $ulShow) }}
{{- end }}
{{- end }}
</ul>
{{- end }}
</li>
{{- end }}

11
layouts/partials/swaggerui.html Normal file
View File

@ -0,0 +1,11 @@
<!-- NOTE: when updating, don't forget to update the style version in `shortcodes/swaggerui-inline.html` -->
<script
src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.17.14/swagger-ui-bundle.js"
integrity="sha384-wmyclcVGX/WhUkdkATwhaK1X1JtiNrr2EoYJ+diV3vj4v6OC5yCeSu+yW13SYJep"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.17.14/swagger-ui-standalone-preset.js"
integrity="sha384-2YH8WDRaj7V2OqU/trsmzSagmk/E2SutiCsGkdgoQwC9pNUJV1u/141DHB6jgs8t"
crossorigin="anonymous">
</script>

156
layouts/shortcodes/swaggerui-inline.html Normal file
View File

@ -0,0 +1,156 @@
{{- $remote_url := replaceRE `\s` "" .Inner }}
{{- warnf "Getting remote resource %q for page: %q" $remote_url .Page.File.Path }}
{{- $swagger_json := resources.GetRemote $remote_url }}
{{- if not $swagger_json }}
{{- errorf "Unable to get remote resource %q" $remote_url }}
{{- end }}
<div id="swagger-ui-container"></div>
<script>
window.onload = function () {
// we create a shadow DOM to encapsulate the swagger UI,
// this avoids style conflicts with the rest of the page
const shadowRoot = document.getElementById('swagger-ui-container').attachShadow({mode: 'open'});
// add the swagger UI CSS
const linkNode = document.createElement('link');
linkNode.rel = 'stylesheet';
linkNode.href = 'https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.17.14/swagger-ui.css';
linkNode.integrity = 'sha384-wxLW6kwyHktdDGr6Pv1zgm/VGJh99lfUbzSn6HNHBENZlCN7W602k9VkGdxuFvPn';
linkNode.crossOrigin = 'anonymous';
shadowRoot.appendChild(linkNode);
// add custom styles to the shadow DOM
const styleNode = document.createElement('style');
styleNode.textContent = `
#swagger-ui-container_inner {
@media (max-width: 768px) {
overflow-wrap: anywhere;
}
}
.swagger-ui .wrapper {
padding: 0;
}
`;
shadowRoot.appendChild(styleNode);
// create an input div to encapsulate the input and description
const inputDiv = document.createElement('div');
inputDiv.style.display = 'flex';
inputDiv.style.flexDirection = 'column';
inputDiv.style.marginBottom = '1rem';
shadowRoot.appendChild(inputDiv);
// add a description for the input
const descriptionNode = document.createElement('p');
descriptionNode.textContent = 'Enter the base URL of your Kubeflow Pipelines API:';
descriptionNode.style.marginBottom = '0.5rem';
inputDiv.appendChild(descriptionNode);
// create an input so users can change the base URL
const validColor = '#f3ffef';
const invalidColor = '#ffefef';
const inputNode = document.createElement('input');
inputNode.type = 'url';
inputNode.defaultValue = "https://kubeflow.example.com/pipeline/"
inputNode.style.width = '90%';
inputNode.style.padding = '1rem';
inputNode.style.border = '1px solid rgba(0, 0, 0, 0.125)';
inputNode.style.backgroundColor = validColor;
inputNode.disabled = true;
inputDiv.appendChild(inputNode);
// if the user changes the base url, ensure its valid
inputNode.addEventListener('input', (event) => {
var parsedURL;
try {
parsedURL = new URL(event.target.value);
if (parsedURL.protocol !== 'http:' && parsedURL.protocol !== 'https:') {
throw new Error('Invalid protocol');
}
event.target.style.backgroundColor = validColor;
event.target.setCustomValidity('');
} catch (error) {
event.target.style.backgroundColor = invalidColor;
event.target.setCustomValidity(error.message);
}
event.target.reportValidity();
});
// create the swagger UI container
const swaggerNode = document.createElement('div');
swaggerNode.id = 'swagger-ui-container_inner';
shadowRoot.appendChild(swaggerNode);
// define a request interceptor to update the base URL
const requestInterceptor = (request) => {
if (!request.loadSpec) {
// get path from the request URL
// NOTE: we remove the beginning slash which is always present
requestURL = new URL(request.url);
requestPath = requestURL.pathname.substring(1);
// get the path of the user-provided base URL
// NOTE: we remove the trailing slash, if present
if (inputNode.validity.valid) {
baseURL = new URL(inputNode.value);
} else {
baseURL = new URL(inputNode.defaultValue);
}
pathToAdd = baseURL.pathname;
pathToAdd = pathToAdd.endsWith('/') ? pathToAdd.substring(0, pathToAdd.length - 1) : pathToAdd;
// update the request URL
requestURL.protocol = baseURL.protocol;
requestURL.host = baseURL.host;
requestURL.port = baseURL.port;
requestURL.pathname = pathToAdd + '/' + requestPath;
// update the request
request.url = requestURL.toString();
}
return request;
};
// fetch the spec as a JavaScript object and store as `swaggerSpec` variable
const request = new Request({{ $swagger_json.RelPermalink }});
fetch(request)
.then((response) => {
if (!response.ok) {
throw new Error('Failed to fetch the swagger spec');
}
return response.json();
})
.then((swaggerSpec) => {
// remove the info section from the spec
// NOTE: this prevents having an extra heading and other info
delete swaggerSpec.info;
// remove the schemes section from the spec
// NOTE: this prevents having a dropdown for HTTP/HTTPS
delete swaggerSpec.schemes;
// remove the security sections from the spec
// NOTE: this prevents having the "authorization" buttons
delete swaggerSpec.security;
delete swaggerSpec.securityDefinitions;
// add the base URL to the spec
swaggerSpec.host = 'HOST_NAME';
swaggerSpec.basePath = 'BASE_PATH';
// initialize the swagger UI
const ui = SwaggerUIBundle({
spec: swaggerSpec,
domNode: swaggerNode,
presets: [SwaggerUIBundle.presets.apis],
requestInterceptor: requestInterceptor,
});
// enable the input field
inputNode.disabled = false;
})
.catch((error) => {
console.error(error);
});
};
</script>