As a cloud stove user, I want to see all levels of my application and not only the children of my root-level ingredient, so that I can create complex applications and easily apply constraints where necessary.

Acceptance Criteria:

• Provide the user with an UI-Element to go deeper/higher in the tree-level of the application
• Update the interface accordingly to the tree-level, and display only the ingredients corresponding to the level
• Provide hints to users that ingredients have children, or are childs themselves

1. Open application list view:

1. Register form: http://localhost:1232/register
2. Enter already existing user: [email protected]
3. Press Register => yields an error "Email address is already in use"
4. Choose another username that is not yet taken: [email protected]
5. Resubmit Register

This creates and logs in the newly created user but still displays the error "Email address is already in use" and remains on the register page instead.

When changing the user workload with the slider, the JSON that is passed to the backend only has the num_simultaneous_users property, but it doesn't have any ìngredient_id, hence on the backend, the user_workload does not get assigned to any ingredient.

See also the screenshots of the chrome debugger:

1. Open /applications
2. Copy an application

• Instead of redirecting to the just created copy, it redirects to the original ingredient

Add an overview for compute pricing across providers and regions.

• Prices shown are for one region area (EU, US, SA, AP)
  • If provider has multiple regions in an area, we can either show a price range or just show the cheapest (or most expensive) resource.
• For all providers, show all available resources in a sortable table, maybe with two views:
  • one where resources are grouped by provider
  • one where all resources are shown together
• For sensible sorting, the table should include columns price per VCPU and price per GB RAM.

Optionally, we could also show graphical pricing overview figures, e.g.:

Price per core:

Price per GB RAM:

(This will also require some work in the backend, i.e., an endpoint to retrieve all resources for one region area.)

Unfortunately, uservoice switched to a weird pricing model with a start price of $199/month. I found Userback, another service to gather feedback from customers. It's not exactly a uservoice replacement, though.

There is a widget that can be integrated into the site like so:

<script>
    Userback = window.Userback || {};

    (function(id) {
        if (document.getElementById(id)) {return;}
        var s = document.createElement('script');
        s.id = id;
        s.src = 'https://app.userback.io/widget.js';
        var parent_node = document.head || document.body;
        parent_node.appendChild(s);
    })('userback-sdk');

    Userback.access_token = '346|400|Z7ztSEbVlSR1b1caiHZIIOncJrfPNDGMKfgDTryfkphvrtFJaF';
</script>

Ordering

• 1. Recommendations
• 2. Workload modeler
• 3. Architecture modeler + archetypes

As a cloud stove user, I want to rearrange ingredients of applications and the possibility to preserve this state so that I can layout my application as needed.

Acceptance Criteria:

• When rearranging components, their position should be saved.

Discussion:

We still need some questions answered however how this should be implemented:

• Where does the information get stored? (client-side vs. server-side)
• Does rearranging components impact the view for everyone?
• Can we provide a good default layout, or is the existing pattern good enough?

Currently, when you hit the 'Generate Recommendations' button, the # of users input remains editable. However, since all change to this field are immediately sent to the backend, it can happen that you change the number of users before the recommendation job runs. In that case, the recommendation is generated for the newly set number of users but the db record will still contain the initially requested number of users.

To circumvent this issue for now, we could just disable the # of users input while recommendations are generated.

No connection is being drawn when adding a new dependency constraint.

We should provide users a graphical overview of their application that is similar to a generic architecture diagram.

• Ingredients should be displayed as rectangular boxes, in form of normal divs
• Ingredients should be draggable
• Dependency-Constraints should be visible as lines between Ingredients
• A sensible default should be chosen if no layout is set

Also, an added description remains the same even when changing ingredients

1. Open recommendations view (with chart): http://localhost:1232/recommendations/13
2. Refresh browser

Instead of getting a refreshed page, I get a redirect to the application page: http://localhost:1232/applications

As a cloud stove user, I want to specify load in users and requests of my application, so that this information can be used to calculate growth opportunities and recommendations for different scenarios.

Acceptance Criteria:

• A user can specify how many users a specific ingredient is able to handle, given its CPU/RAM constraints
• Also, a user can specify how many requests per time-unit are derived from this number of users in order to determine the bandwidth requirements of this ingredient.

• Choose a suitable frontend framework and set up an initial scaffold to get started.
• Add initial wercker.yml. See documentation to create a wercker.yml or copy and adapt the cloud-stove config.
• Create app.json file for Heroku Review Apps

At the bottom of the recommendations list (and on the upcoming provider pricing dashboard), add a link to 'Request additional Providers' that links to the Google Form at https://docs.google.com/forms/d/e/1FAIpQLSf5-hmtrw10v57kuVcIX9VURo22hnaT2QrO4oYoHfjMnDGt8Q/viewform

Responses are collected in a Google spreadsheet at https://docs.google.com/spreadsheets/d/1_tolOiREw764SRiGkm0-yyF50l28dj3YVlUjd0D7kGg/edit?usp=sharing

Find good headline titles
Promote 3-main feature matrix to the top alike http://www.scandit.com/
Cool example landing pages:
Heroku: https://www.heroku.com/

We should migrate the project to Angular 2.0 final, as the APIs are now seemingly stable and many of the dependencies we have also upped their versions to support the final release. This is a rather big task though, and I guess it makes sense to do it before adding even more features (because this would only lengthen the migration).

The Chart.js graphs look really good for browser windows >1200px wide. With a smaller window, it looks like this for me:

This seems to be an issue with vertical clearance, since the graphs overlap less and less the narrower i make my browser window:

As a cloud stove user, I want to specify the cpu and ram-requirements of my application and in the future also for individual ingredients, so that I can specify how many cores/ram an application needs to run.

Acceptance Criteria:

• A user can use a segmented slider with predefined stopts to configure the # of CPU-cores a typical ingredient in this application has. This ranges from 1 to MAX_NUM_CORES
• Same for RAM
• These sliders represent a lower bound and get translated intro constraints by the backend, and can thus also be reconstructed from existing constraints.

The new theme looks neat but there are some issues when the browser window is <1200px wide.

When the window is wide enough, everything looks ok:

When we reduce the width, the layout starts to break a little:

When the window gets narrow enough, the layout switches to the stacked view, which looks ok again (except for the spacing):

Currently, there seems to be no way of changing the name of an application (or template).

Either we make it changable inline or we add an edit field on top of the ingredient editor. Or an 'edit' button that shows the edit form for the application/template instead of the ingredient editor.

When I try to edit an ingredient, the screen just goes black. For me, this happens locally and also on staging. See screen cap below:

There is a stack trace in the Javascript console that appears when loading the application view:

[Error] EXCEPTION: Error in ./ApplicationEditorComponent class ApplicationEditorComponent - inline template:75:21
ORIGINAL EXCEPTION: ReferenceError: Can't find variable: Intl
ORIGINAL STACKTRACE:
format@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:21:17284
transform@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:21:14523
[native code]
http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:5:10255
detectChangesInternal
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectContentChildrenChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16536
detectChangesInternal
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectContentChildrenChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16536
detectChangesInternal
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectViewChildrenChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16698
detectChangesInternal@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16365
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectContentChildrenChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16536
detectChangesInternal@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16319
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectViewChildrenChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16698
detectChangesInternal@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16365
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectContentChildrenChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16536
detectChangesInternal@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16319
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectViewChildrenChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16698
detectChangesInternal@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:16365
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:15983
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:7:19030
detectChanges@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:6:30332
http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:2233
forEach@[native code]
tick@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:2184
http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:3:31065
invoke@http://staging.frontend.thestove.io/js/polyfills.1bab6365b66a89d879ef.js:43:16881
onInvoke@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:28547
invoke@http://staging.frontend.thestove.io/js/polyfills.1bab6365b66a89d879ef.js:43:16791
run@http://staging.frontend.thestove.io/js/polyfills.1bab6365b66a89d879ef.js:43:12735
runInner@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:29194
run@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:6151
http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:3:31043
http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:39:17345
__tryOrUnsub@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:18637
next@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:17878
_next@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:16724
next@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:16335
_finalNext@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:10337
_next@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:10177
next@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:9527
emit@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:39:16891
_checkStable@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:5124
onLeave@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:4260
onInvokeTask@http://staging.frontend.thestove.io/js/vendor.1bab6365b66a89d879ef.js:4:28421
invokeTask@http://staging.frontend.thestove.io/js/polyfills.1bab6365b66a89d879ef.js:43:17628
runTask@http://staging.frontend.thestove.io/js/polyfills.1bab6365b66a89d879ef.js:43:13651
invoke@http://staging.frontend.thestove.io/js/polyfills.1bab6365b66a89d879ef.js:43:19186
ERROR CONTEXT:
[object Object]
    __tryOrUnsub (vendor.1bab6365b66a89d879ef.js:4:18699)
    next (vendor.1bab6365b66a89d879ef.js:4:17879)
    _next (vendor.1bab6365b66a89d879ef.js:4:16725)
    next (vendor.1bab6365b66a89d879ef.js:4:16336)
    _finalNext (vendor.1bab6365b66a89d879ef.js:4:10338)
    _next (vendor.1bab6365b66a89d879ef.js:4:10178)
    next (vendor.1bab6365b66a89d879ef.js:4:9528)
    emit (vendor.1bab6365b66a89d879ef.js:39:16892)
    onError (vendor.1bab6365b66a89d879ef.js:4:4502)
    onHandleError (vendor.1bab6365b66a89d879ef.js:4:28996)
    handleError (polyfills.1bab6365b66a89d879ef.js:43:17027)
    runTask (polyfills.1bab6365b66a89d879ef.js:43:13730)
    invoke (polyfills.1bab6365b66a89d879ef.js:43:19187)

Microsoft Azure should be blue
and
Amzon should be yellow

In the following example, they change color:

Are the graph colors intended to match the colors of the provider labels at the bottom?

1. Under GENERATED RECOMMENDATIONS delete any existing recommendation

The deleted recommendation is not updated in the chart
=> Minor but cumbersome in combination with unintentional redirect #67

List technical capabilities as "our expertise"

• Release strategies (Bifrost)
• Cloud benchmarking (Cloud WorkBench)
• Application benchmarking (Christian Davatz)
• Cloud architecture
• Cloud performance engineering/analysis

1. Navigate to pricing overview: http://localhost:1232/pricing
2. Navigate to another page:

• http://localhost:1232/applications

  

• http://localhost:1232/applications/132

  

• http://localhost:1232/templates

  

3. The previous parameters from /pricing are persisted across all pages such as: ?region_area=US&provider_name=Amazon

This issue shouldn't affect any functionality (unless using other parameters?) but is particularly confusing when triggering recommendations because the parameters are ignored there as the payload is relevant for this functionality:

what the title says

Since the _trackPageview command in the analytics snippet is only executed once, we don't see any navigation within the Angular app after the initial pageview.

Cursory Googling found Angulartics which should address this.

Find an appropriate stock photo with a data center or similar to put on the landing page

When trying to instantiate a template, the action silently fails.
=> Instead, the user should be redirected to the login or registration page.