You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2019/10/30 09:02:22 UTC
[airflow-site] branch aip-11 updated: Add integration search (#96)
This is an automated email from the ASF dual-hosted git repository.
kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/aip-11 by this push:
new 917c7c7 Add integration search (#96)
917c7c7 is described below
commit 917c7c7466eb6e9a15509a4d56e978284f46d4dc
Author: Kamil Breguła <mi...@users.noreply.github.com>
AuthorDate: Wed Oct 30 10:02:14 2019 +0100
Add integration search (#96)
---
landing-pages/package.json | 1 +
landing-pages/site/assets/scss/_home-page.scss | 4 +
landing-pages/site/assets/scss/_list-boxes.scss | 1 +
landing-pages/site/data/integrations.json | 28 +-
landing-pages/site/layouts/index.html | 36 ++-
landing-pages/site/static/integrations.json | 406 ++++++++++++++++++++++++
landing-pages/src/index.js | 1 +
landing-pages/src/js/integrationList.js | 147 +++++++++
8 files changed, 592 insertions(+), 32 deletions(-)
diff --git a/landing-pages/package.json b/landing-pages/package.json
index 99d8810..d760d0c 100644
--- a/landing-pages/package.json
+++ b/landing-pages/package.json
@@ -24,6 +24,7 @@
"start:webpack": "webpack-dev-server --config webpack.dev.js --hot"
},
"dependencies": {
+ "lodash": "^4.17.15",
"lunr": "^2.3.8",
"p5": "^0.10.2",
"parser-front-matter": "^1.6.4"
diff --git a/landing-pages/site/assets/scss/_home-page.scss b/landing-pages/site/assets/scss/_home-page.scss
index feaea7c..b8ac901 100644
--- a/landing-pages/site/assets/scss/_home-page.scss
+++ b/landing-pages/site/assets/scss/_home-page.scss
@@ -35,3 +35,7 @@
margin-bottom: 30px;
}
}
+
+#integration .search-form {
+ margin-bottom: 24px;
+}
diff --git a/landing-pages/site/assets/scss/_list-boxes.scss b/landing-pages/site/assets/scss/_list-boxes.scss
index a031349..ea665a9 100644
--- a/landing-pages/site/assets/scss/_list-boxes.scss
+++ b/landing-pages/site/assets/scss/_list-boxes.scss
@@ -182,6 +182,7 @@ $card-margin: 20px;
&--name {
@extend .subtitle__medium--brownish-grey;
font-weight: bold;
+ text-align: center;
}
}
}
diff --git a/landing-pages/site/data/integrations.json b/landing-pages/site/data/integrations.json
deleted file mode 100644
index 7cd0d0a..0000000
--- a/landing-pages/site/data/integrations.json
+++ /dev/null
@@ -1,27 +0,0 @@
-[
- {
- "name": "Microsoft Azure",
- "logo_path": "icons/azure-logo.svg",
- "url": ""
- },
- {
- "name": "Microsoft Azure",
- "logo_path": "icons/azure-logo.svg",
- "url": ""
- },
- {
- "name": "Microsoft Azure",
- "logo_path": "icons/azure-logo.svg",
- "url": ""
- },
- {
- "name": "Microsoft Azure",
- "logo_path": "icons/azure-logo.svg",
- "url": ""
- },
- {
- "name": "Microsoft Azure",
- "logo_path": "icons/azure-logo.svg",
- "url": ""
- }
-]
diff --git a/landing-pages/site/data/integrations.json b/landing-pages/site/data/integrations.json
new file mode 120000
index 0000000..a6a2daf
--- /dev/null
+++ b/landing-pages/site/data/integrations.json
@@ -0,0 +1 @@
+../static/integrations.json
\ No newline at end of file
diff --git a/landing-pages/site/layouts/index.html b/landing-pages/site/layouts/index.html
index 84eca94..cf069fa 100644
--- a/landing-pages/site/layouts/index.html
+++ b/landing-pages/site/layouts/index.html
@@ -36,15 +36,41 @@
{{ partial "feature" (dict "logo_path" "icons/easy-use-icon.svg" "header" "Easy to use" "text" "Anyone with Python knowledge can deploy a workflow. Apache Airflow does not limit scopes of your pipelines. You can use it for building ML models, transferring data or managing your infrastructure.") }}
{{ partial "feature" (dict "logo_path" "icons/open-source-icon.svg" "header" "Open source" "text" "Wherever you want to share your improvement you can do this by opening a PR. It’s simple as that, no barriers, no prolonged procedures. Airflow has many active users who willingly share their experiences. Have any questions? Check our buzzing slack.") }}
</div>
+
</div>
<div>
<h4 class="page-header integrations-header">Integrations</h4>
- <div id="integrations-container" class="list-items">
- {{ range .Site.Data.integrations }}
- <a class="list-item" href="{{ .url }}">
- {{ partial "boxes/integration" . }}
+ <div id="integrations">
+ <script type="application/x-template" id="integration-template">
+ <a class="list-item" href="">
+ <div class="card">
+ <div class="box-event box-event__integration">
+ <span class="box-event__integration--name" data-name="name"></span>
+ </div>
+ </div>
+ </a>
+ </script>
+ <form class="search-form">
+ <input class="search-form__input" placeholder="Search" name="q" type="search"/>
+ <button class="search-form__button" type="submit">
+ {{ with resources.Get "icons/search-icon.svg" }}
+ {{ .Content | safeHTML }}
+ {{ end }}
+ </button>
+ </form>
+ <div id="integrations-container" class="list-items">
+ {{ range $elem_index, $elem_val := (shuffle .Site.Data.integrations) }}
+ {{ if lt $elem_index 8 }}
+ <a class="list-item" href="{{ $elem_val.url }}">
+ {{ partial "boxes/integration" $elem_val }}
</a>
- {{ end }}
+ {{ end}}
+ {{ end }}
+ </div>
+ <div class="loading" style="display: none">Loading..</div>
+ <div class="show-more-button">
+ {{ partial "buttons/button-filled" (dict "text" "Show more" "id" "show-more-integration")}}
+ </div>
</div>
</div>
{{ end }}
diff --git a/landing-pages/site/static/integrations.json b/landing-pages/site/static/integrations.json
new file mode 100644
index 0000000..fde5f3c
--- /dev/null
+++ b/landing-pages/site/static/integrations.json
@@ -0,0 +1,406 @@
+[
+ {
+ "name": "Apache Cassandra",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Apache Druid",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Hadoop Distributed File System (HDFS)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Apache Hive",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Apache Pig",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Apache Pinot",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Apache Spark",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Apache Sqoop",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "WebHDFS",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#asf-apache-software-foundation"
+ },
+ {
+ "name": "Azure Blob Storage",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#azure-microsoft-azure"
+ },
+ {
+ "name": "Azure Container Instances",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#azure-microsoft-azure"
+ },
+ {
+ "name": "Azure Cosmos DB",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#azure-microsoft-azure"
+ },
+ {
+ "name": "Azure Data Lake Storage",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#azure-microsoft-azure"
+ },
+ {
+ "name": "Azure Files",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#azure-microsoft-azure"
+ },
+ {
+ "name": "Amazon Athena",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "AWS Batch",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon CloudWatch Logs",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon DynamoDB",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon EC2",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon EMR",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "AWS Glue Catalog",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon Kinesis Data Firehose",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "AWS Lambda",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon Redshift",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon Simple Storage Service (S3)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon SageMaker",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon Simple Notification Service (SNS)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "Amazon Simple Queue Service (SQS)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#aws-amazon-web-services"
+ },
+ {
+ "name": "AutoML",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "BigQuery",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "BigQuery Data Transfer Service",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Bigtable",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Build",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Compute Engine",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Data Loss Prevention (DLP)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Dataflow",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Dataproc",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Datastore",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Functions",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Key Management Service (KMS)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Kubernetes Engine",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Machine Learning Engine",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Memorystore",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Natural Language",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Pub/Sub",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Spanner",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Speech-to-Text",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud SQL",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Storage (GCS)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Storage Transfer Service",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Tasks",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Text-to-Speech",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Translation",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Video Intelligence",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Cloud Vision",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#gcp-google-cloud-platform"
+ },
+ {
+ "name": "Atlassian Jira",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Databricks",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Datadog",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Dingding",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Discord",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Google Campaign Manager",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Google Display&Video 360",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Google Drive",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Google Search Ads 360",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Google Spreadsheet",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "IBM Cloudant",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Jenkins",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Opsgenie",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Qubole",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Salesforce",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Segment",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Slack",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Snowflake",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Vertica",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Zendesk",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#service-integrations"
+ },
+ {
+ "name": "Celery",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Docker",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "GNU Bash",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Kubernetes",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Microsoft SQL Server (MSSQL)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "MongoDB",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "MySQL",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "OpenFaaS",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Oracle",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Papermill",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "PostgresSQL",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Presto",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Python",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Redis",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Samba",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "SQLite",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#software-integrations"
+ },
+ {
+ "name": "Internet Message Access Protocol (IMAP)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "Secure Shell (SSH)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "Filesystem",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "SSH File Transfer Protocol (SFTP)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "File Transfer Protocol (FTP)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "Hypertext Transfer Protocol (HTTP)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "gRPC",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "Simple Mail Transfer Protocol (SMTP)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "Java Database Connectivity (JDBC)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ },
+ {
+ "name": "Windows Remote Management (WinRM)",
+ "url": "https://airflow.readthedocs.io/en/latest/operators-and-hooks-ref.html#protocol-integrations"
+ }
+]
diff --git a/landing-pages/src/index.js b/landing-pages/src/index.js
index f0ce0fb..f5cab88 100644
--- a/landing-pages/src/index.js
+++ b/landing-pages/src/index.js
@@ -36,3 +36,4 @@ if (document.querySelector("#header")) {
module.initHeaderAnimation();
});
}
+require("./js/integrationList.js");
diff --git a/landing-pages/src/js/integrationList.js b/landing-pages/src/js/integrationList.js
new file mode 100644
index 0000000..46282cb
--- /dev/null
+++ b/landing-pages/src/js/integrationList.js
@@ -0,0 +1,147 @@
+
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import debounce from "lodash/debounce";
+import shuffle from "lodash/shuffle";
+
+function handleIntegration() {
+ const root = document.querySelector("#integrations");
+
+ if (!root) {
+ return;
+ }
+
+ const templateText = root.querySelector("#integration-template").innerText;
+ const templateElement = document.createElement("div");
+ templateElement.innerHTML = templateText;
+
+ const loadingIndicator = root.querySelector(".loading");
+ const listItems = root.querySelector(".list-items");
+ const searchBox = root.querySelector('[type="search"]');
+ const moreButton = root.querySelector("#show-more-integration");
+
+ let currentPage = 1;
+ let currentQeury = "";
+ function setIndicatorVisibility(visible) {
+ loadingIndicator.style.display = visible ? "" : "none";
+ listItems.style.display = visible ? "none" : "";
+ }
+ setIndicatorVisibility(false);
+ function setMoreButtonVisibility(visible) {
+ moreButton.style.display = visible ? "" : "none";
+ }
+ setMoreButtonVisibility(true);
+
+ const sortByLogoAvailability = (a, b) => {
+ const a_key = a.logo ? 1 : -1;
+ const b_key = b.logo ? 1 : -1;
+ return a_key - b_key;
+ };
+
+ let fetchIntegrationRequest = null;
+
+ function fetchIntegration() {
+ if (fetchIntegrationRequest) {
+ return fetchIntegrationRequest;
+ }
+ const request = Promise.all([
+ fetch("/integrations.json"),
+ () => {
+ setIndicatorVisibility(true);
+ }
+ ])
+ .then(([resp]) => resp.json())
+ .then((integrations) => {
+ setIndicatorVisibility(false);
+ return Promise.resolve(integrations);
+ })
+ .then((integrations) => {
+ integrations = shuffle(integrations);
+ integrations.sort(sortByLogoAvailability);
+ integrations.forEach((i, index) => i.inddex = index);
+ return Promise.resolve(integrations);
+ });
+ fetchIntegrationRequest = request;
+ return request;
+ }
+
+ function createElement(item) {
+ const element = templateElement.cloneNode(true);
+ element.querySelector('[data-name="name"]').innerText = item.name;
+ element.querySelector("a").href = item.url;
+ return element.firstElementChild;
+ }
+
+ function setItems(items) {
+ if (items.length === 0) {
+ listItems.innerText = "No items";
+ } else {
+ while (listItems.firstChild) {
+ listItems.removeChild(listItems.firstChild);
+ }
+ items.forEach((item) => {
+ const element = createElement(item);
+ listItems.append(element);
+ });
+ }
+ }
+
+ function showItems(keyword, page) {
+ const showMoreButtonIfNeeded = (integrations) => {
+ setMoreButtonVisibility(integrations.length > (page * 8));
+ };
+
+ const filterMatchingItems = (integrations) => {
+ if (!keyword) {
+ return Promise.resolve(integrations);
+ }
+ const selectedIntegration = integrations.filter(
+ (integration) => integration.name.indexOf(keyword) >= 0
+ );
+ return Promise.resolve(selectedIntegration);
+ };
+
+ const filterVisible = (integrations) => {
+ return Promise.resolve(integrations.slice(0, page * 8));
+ };
+
+ const itemsPromise = fetchIntegration()
+ .then(filterMatchingItems);
+ itemsPromise.then(filterVisible).then(setItems);
+ itemsPromise.then(showMoreButtonIfNeeded);
+ }
+
+ function setSearchQuery(keyword) {
+ currentQeury = keyword;
+ showItems(currentQeury, currentPage);
+ }
+
+ searchBox.addEventListener("keyup", debounce(function() {
+ currentPage = 1;
+ setSearchQuery(searchBox.value);
+ }, 0));
+
+ moreButton.addEventListener("click", function() {
+ currentPage = currentPage + 1;
+ setSearchQuery(searchBox.value);
+ });
+}
+
+handleIntegration();