Blueprints Catalog

AngularJS directive that displays the list of repositories containing blueprints that are ready to deploy.

Installation

You can install the plugin using bower:

bower install [email protected]:adubovsky/blueprints-catalog.git#master --save

Or just download the plugin archive.

Configuring

If you are already use AngularJS on your page then you just need to include the following widget assets to yor page:

<link rel="stylesheet" href="dist/blueprinting_catalog_base.min.css">

<script src="dist/blueprinting_catalog_widget.min.js"></script>

And add a blueprintingCatalogWidget to your app dependencies. Important note: if you are using routes you have to set the reloadOnSearch options to FALSE for the routes corresponding to the page with plugin.

If you would like to use the widget on the page without AngularJS, you would need to add angular script and additional widget asset before the assets, added on previous step:

<script src="angular/angular.min.js"></script>
<script src="dist/blueprinting_catalog_app.min.js"></script>

Add Widget to the Page

Add the following markup to the your page to initialize widget (add the ng-app="blueprintingCatalogApp" attribute to any parent element if you had not used AngularJS on the page):

<section blueprinting-catalog
         data-catalog-list-title="Cloudify Examples"
         data-catalog-list-description='These are example blueprint archives that are ready to deploy. Click on "Upload to Manager" to publish to an existing manager and create a deployment now, or you can download and customize to your needs. Click on the "Source" to see the source at GitHub. Click on the name of the blueprint for more information about what it does.'
         data-catalog-back-text="back"
         data-catalog-how-use-link="http://example.com/faq"
         data-catalog-how-contribute-link="http://example.com/contribute"
         data-catalog-github-query="/search/repositories?q=repo:*-example+user:cloudify-examples"
         data-catalog-default-manager="http://example.com"
         data-catalog-cors-proxy="https://example.com/proxy"
         data-catalog-default-version="CFY-3574-Ansible-Nodecellar"
         data-catalog-default-version-fallback="master">
</section>

The following options are supported:

data-catalog-list-title - Defines the title of the repositories list (Default: none)

data-catalog-list-description - Defines the description under the title (Default: none)

data-catalog-how-use-link - Defines the link to the "How to Use" instruction (Default: none)

data-catalog-how-contribute-link - Defines the link to the "How to Contribute" instruction (Default: none)

data-catalog-back-text - Defines the title of the back link on the details view (Default: none)

data-catalog-blueprints-github-query - Defines the github search query to be used to retrieve the blueprints repositories list (Default: '-example+in:name+fork:true+user:cloudify-examples')

data-catalog-plugins-github-query - Defines the github search query to be used to retrieve the plugins repositories list (Default: '-plugin+in:name+fork:true+user:cloudify-examples')

data-catalog-integrations-github-query - Defines the github search query to be used to retrieve the integrations repositories list (Default: '-integration+in:name+fork:true+user:cloudify-examples')

data-catalog-default-manager - Defines the default value for "Manager Endpoint" field (Default: none)

data-catalog-cors-proxy - Define proxy which should be used to upload blueprint to user-provided manager endpoint. (Default: none) Note: the proxy is used to allow user to upload blueprints to the manager endpoints which do not support CORS. The proxy server should accept POST requests with the following json body:

{
    "method": "PUT",
    "url": "http://cloudify-manager-api/blueprints/new"
}

It should sent the request to the provided url and respond with any success status (e.g. 200) in case of success or any error status (e.g. 400) and error message in the body in case of failure.

data-catalog-default-version - Defines the default selected branch / tag (Default: value defined via "data-catalog-default-version-fallback" option)

data-catalog-default-version-fallback - Defines the branch / tag to be selected in case of no default branch (Default: repository's default branch)

Styling

The widget contains only the basic set of css rules so you can easily change the widget look & feel using css.

edenpessach / blueprints-catalog Goto Github PK