Development: Adding Components

Overview

When adding support to StackStudio for a new top-level component, you should start with these required additions. Once you've got these changes in place, you'll have a viewable page to work with.

Component Specific

js/views/{component}

You'll want to start by adding a new view namespace (directory) for your component. For example, if you're adding support for 'meshes' you'll want to add js/views/meshes directory, which will eventually contain all the necessary views for your 'meshes' page.

js/views/{component}/{component}View.js

Next, create a component view to represent the primary container page to navigate to. This page will handle rendering and navigation of sub-views of your component. This component view should be very basic, at least to start out.

templates/{component}

You'll also want to add a new template namespace (directory) for your component.

models/{[sub]component}.js

You component/subcomponents must map to a model in order to interact with the backend application.

Global

index.html

A nav link will be required in the root index.html in order to navigate through the UI to your shiny new component.

NOTE: You may want to wait on this under development is finished. Hiding the direct navigation to your component might allow you to push changes upstream without effecting usability of the console.

Example:

...
<ul class="nav navbar-nav side-nav main-nav">
    <li><a href="/" id="dashboard_nav"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
    <li><a href="#meshes" id="meshes_nav"><i class="fa fa-share-square"></i> <span>Meshes</span></a></li>
</ul>
...

js/routers/router.js

This is required to be updated for proper routing.

Example:

...
        meshesRoute: function(action) {
            $("#sidebar").empty();
            $("#sidebar").hide();
            $(".main-nav a").removeClass("nav_selected");
            $("#meshes_nav").addClass("nav_selected");
            this.trigger("route:meshes");
        },
...

js/views/topNav.js

This global view is responsible for enabling and disabling the environment modes.

Example:

...
    modeMap: {
      images: ["dev"],
      components: ["test"],
      assemblies: ["dev", "prod"],
      stacks: ["dev", "prod"],
      offerings: ["prod"],
      meshes: ["prod"]
    },
...

js/main.js

This main.js file will load the necessary files for all available components.

Example:

...
    require([
            'views/topNav',
            'views/account/navLogin',
            dashboardView,
            'views/projectSidebarView',
            'views/account/accountManagementView',
            'views/projectAppView',
            'views/projectResourceSidebarView',
            'views/projectEditView',
            'views/resource/resourceNavigationView',
            'views/images/imagesView',
            'views/assemblies/assembliesView',
            'views/platform_components/platformComponentsView',
            'views/stacks/stacksView',
            'views/offerings/offeringsView',
            'views/meshes/meshesView',
            ], function(TopNavView, NavLogin, DashboardView) {
        var topNav = new TopNavView(),
         navLogin = new NavLogin();
        topNav.render();
        navLogin.render();
        common.backbone.history.start();
    });
...