irwenblog2

The Budget feature
When you run simulations on Rescale, you may want to control your budgets and spending. For example, an individual user might want to set a budget cap on their jobs, or a company administrator may want to control the total spending for the whole company or a specific project.

Set budgets for yourself
As an individual user, you can set your own budget on your Settings page (click on your email in the top right corner of your Rescale account and select Settings). The currency is based on your account currency setting.

screencapture-platform-rescale-com-user-settings-profile-1447439890222

Set budgets for your company
As a company administrator, you can also specify your company’s budget on the Settings page of your company administration portal (if you are a company admin, you can click on your email in the top right corner of your Rescale account and select {Company} Administration). Once the budget is set, the remaining budget will also be shown at bottom right.

screencapture-platform-stage-rescale-com-company-settings-1447440409813

Set budgets for your a company project
You can also set the budget for certain project on the Project settings page if you’re a company administrator.

screencapture-platform-stage-rescale-com-company-projects-BNTMk-settings-1447442070992

To enable the project selection to appear during the job setup page for a user, you need to:
1. Add that user into a group on the Group settings page

screencapture-platform-stage-rescale-com-company-groups-QGuia-1449622217708

2. Attach the group to the project in Project settings page

screencapture-platform-stage-rescale-com-company-projects-BNTMk-settings-1449622384817

After that, that user will be able to select project in the job setup page. (Note: Company administrator is able to select all company projects by default without any setup.)

screencapture-platform-stage-rescale-com-jobs-new-job-setup-input-files-1449622752479

How budgets work
Once the budget is set, all types of cost(i.e. hardware, software, data transfer, storage, and license proxy) of the budget level (i.e. user, company, or project) are monitored to ensure the budget is not exceeded. And currently there is no timeframe for it, which means the cost from day one till now will all be included in the calculation. When you’re running low on budget, new jobs will be queued and the running jobs will be terminated.

Screen Shot 2015-11-13 at 11.40.43 AM

When a job is queued because of a low budget, you can adjust your own budget or contact your company administrator if the project or company level budget needs to be adjusted. The queued jobs will start once the budget is sufficient.

Screen Shot 2015-11-13 at 11.45.06 AM

It should be noted that running jobs will be terminated if they exceed the budget.

Screen Shot 2015-11-13 at 12.03.02 PM

Budgets were introduced to help control your simulation cost. A budget can be set at the user, company, and/or project level. Running low on budget may result in your new jobs getting queued or running jobs getting terminated, so choose your budget wisely.

For questions about setting budgets or for more information, please contact Rescale at info@rescale.com.

This article was written by Irwen Song.

KennethBlogImage

This article shows our process of creating diagrams using React, SVG, and Facebook’s css-layout library. At Rescale, we provide a web UI for our customers to set up a license proxy server for communication between our compute nodes and their on-premise license servers. A diagram is a great way to show our users how these servers communicate with each other.

Here’s an example of the diagram we created with this technique. The controls are just to show that React can re-render the diagram when state changes.

BbGuHsj

SVG is a good choice for creating diagrams within React because it’s just part of the DOM. However, laying out SVG elements is not as simple as using CSS with HTML because SVG uses its own coordinate system. That’s where Facebook’s css-layout comes in. It allows us to use CSS’s flexbox model to lay out our SVG elements.

With React, SVG, and css-layout, we are able to:

  • Dynamically change the diagram due to changes in a component’s props or state
  • Iterate quickly on requirement changes
  • Localize to other languages using our existing method of localizing the UI

Wireframing

To begin creating the diagram, we wireframe it using HTML with the default styles as written in css-layout’s README:

The wireframe of the diagram in HTML looks like this:

This produces:

JvRDq5B

Borders were added to each div just to show their boundaries. A couple of things to keep in mind:

  • We should only be using css-layout’s supported attributes.
  • Positioning text in SVG will still be a somewhat manual process, especially vertical centering.

Creating the css-layout tree from the wireframe

In css-layout, a node is just an object with { style: { … }, children: [ nodes ] }. The root node is considered the tree. Running computeLayout() on the tree will populate all of its nodes with a layout object that contains width, height, top, left, right, and bottom. This is what we’ll use to position the SVG elements.

Creating the tree from the wireframe is just a simple read off of the HTML and ids are given to each node so that we can access the layout property of each node by id later.

Rendering with React

We have each of our nodes populated with the layout property. Making these layout objects accessible by id is pretty simple:

The l object contains all of the layout information accessible by the id given to each node. With it we can now use a combination of , , and to render the diagram in React:

As you can see, we’re using the layout properties computed by css-layout to position the elements or set their widths and heights. Things to note:

  • The top, right, bottom, and left properties in the layout objects are relative to its parent node. In SVG, we use so that each child of the element is positioned relative to that transformation.
  • Positioning text is somewhat manual as mentioned above. The textAnchor property can handle horizontal centering, but we need to use the dy property with some magic numbers to handle vertical centering.

This technique was inspired by this blog post that uses css-layout to lay out D3 charts.

This article was written by Kenneth Chung.