Knockout Components

To make complex markup and interactions easy to consume cyclops takes advantage of a feature of knockoutJS called components. This allows the use of custom HTML elements that contain there set of templates and view models that are rendered at runtime. This makes consuming types of things much easier. For more information on how components work please see the Knockout Documentation.

account-switcher

The account assumes that the shape of the data passed to it matches closely what the v2 APIs return, for more information you can see the assumed account properties section below.

The currentAccountAlias property is used to notify your app that the user requested an account impersaonation. Listen to changes to this property and refresh the page data approperiately. 

    
<!DOCTYPE html>
<html lang="en" class="cyclops">
  <head>...</head>
  <body>
    <account-switcher params="{accounts: accounts, currentAccountAlias: currentAccountAlias}"></account-switcher>
    <nav class="navbar navbar-inverse navbar-static-top">...</nav>
  </body>
</html>

params

Name Type Default Description
accounts Array | ObservableArray None (Required) The account hierarchy returned from the v2 API
loading boolean | Observable boolean false Used to show a loading state while waiting for account list or current account to return
currentAccountAlias string | Observable string None (Required) Will be set to the selected account. You can use this to set the starting account as well

Assumed Account Properties

Name Type Required Description
accountAlias string | observable string yes The account alias (4 characters)
businessName string | observable string yes The display name for the account
primaryDataCenter string | observable string yes The primary Data Center of the account
subAccounts Array | observableArray yes A list of sub accounts for that account

Examples

group-picker

The group picker assumes that the shape of the data passed to it matches closely what the v2 APIs return, for more information you can see the assumed properties section below.

If validation is required it should be performed on the selectedGroup property that was passed into the component and the error message displayed bellow using the standard validationMsg binding. 

    
<form id="formGroupPicker" class="form-horizontal">
  <fieldset>
    <div class="form-group">
      <label class="col-sm-3 control-label">Select a Group</label>
      <div class="col-sm-9">
        <group-picker params="{ selectedGroup: selectedGroup, isLoading: isLoading, groups: groups}"></group-picker>
      </div>
    </div>
  </fieldset>
</form>

params

Name Type Default Description
Groups Array | ObservableArray empty array The list of groups, see bellow to see the require property names
selectedGroup group | Observable group undefined Will be set to the selected group. You can use this to set the starting selected group as well
isLoading boolean | Observable boolean false Used to decided if the loading message should be shown
loadingHtmlMessage html | Observable html Fetching Groups&hellip; Message displayed when isLoading is true
emptyHtmlMessage html | Observable html No Groups Message displayed when isLoading is false, and groups is empty
shouldShow function only display group type default the default implementation looks at group type and only displays groups that have type 'default' or not type at all.

Assumed Group Properties

Name Type Required Description
name string | Observable string yes name to be displayed
description string | Observable string no if present it is used as the title for the row
type string | Observable string maybe if using the default shouldShow function type is required
groups Array | observableArray no sub groups if not present it is assumed there are none

Examples

server-picker

The server picker assumes that the shape of the data passed to it matches closely what the v2 APIs return, for more information you can see the assumed properties section below. The component has both single and multi select functionality. 

    
<form id="formServerPicker" class="form-horizontal">
  <fieldset>
    <div class="form-group">
      <label class="col-sm-3 control-label">server(s)</label>
      <div class="col-sm-9">
        <server-picker params="{ selectedServers: selectedServers, multiSelect: multiSelect, isLoading: isLoading, groups: groups}"></group-picker>
      </div>
    </div>
  </fieldset>
</form>

params

Name Type Default Description
Groups Array | ObservableArray empty array The list of groups, see bellow to see the require property names
selectedServers Array | ObservableArray Empty Array Will be set to the selected servers. You can use this to set the starting selected servers as well
isLoading boolean | Observable boolean false Used to decided if the loading message should be shown
loadingHtmlMessage html | Observable html Fetching Groups&hellip; Message displayed when isLoading is true
emptyHtmlMessage html | Observable html No Groups Message displayed when isLoading is false, and groups is empty
multiSelect boolean | Observable boolean true Allow more than one server to be selected
getServerIcon function the default implementation looks at server state and shows default icons
shouldShowGroup function the default implementation looks at group type and only displays groups that have type 'default' or not type at all.
getGroupTitle function the default implementation returns group description.
getServerTitle function the default implementation returns server description.
isServerSelectable function the default implementation returns true for all servers.

Assumed Group Properties

Name Type Required Description
name string | Observable string yes name to be displayed
description string | Observable string no if present it is used as the title for the row
type string | Observable string maybe if using the default shouldShowGroup function type is required
groups Array | observableArray no sub groups if not present it is assumed there are none
servers Array | observableArray no servers in that group if not present it is assumed there are none

Assumed Server Properties

Name Type Required Description
name string | Observable string Maybe name to be displayed, required only if displayName is not present
displayName string | Observable string yes friendly name to be displayed
description string | Observable string yes used as the default title arrtibute
state string | Observable string maybe used by the default getServerIcon

Examples

show-password

A control to show a password. After 15 seconds, it will automatically hide itself. 

    
<ul class="list-info">
  <li>
    <div class="info-label">password</div>
    <div class="info-value">
      <show-password params="getPassword: getPassword"></show-password>
    </div>
  </li>
</ul>

The getPassword may return either a string or JSON with a password property on it. Additional it may return a deferred, e.g. the object returned from the jQuery AJAX call. In the case that a deferred is returned the control will show a loading state until the deferred is resolved and if the deferred is rejected a retry state is shown.

Parameters (params)

Name Type Required Default Description
getPassword function Yes None A function to be called when the user wants to display the password. See bellow to see allowed return types

Expected return types for getPassword

  • a string - 'thepassword'
  • a object - { password: 'thepassword' }
  • a jQuery Deffered - $.get('api.ctl.io/getPassword')

In the case that a deferred is returned the control will show a loading state until the deferred is resolved and if the deferred is rejected a retry state is shown.

Examples

slider

Some common sizes of slider, basically CPU, Memory, and Disks. Not that the tick marks do not show (even if forced to true) for anything over 128. This was a design choice.

In general it would be best practice to also pass in `maxBound` and `minBound` set to the platforms maximum allowable values to void issues whens limits have been set. See the above 'complex example' for more details. 

    
<slider params="value: 6, min: 1, max: 16"></slider>    <!-- CPU -->
<slider params="value: 4, min: 1, max: 128"></slider>   <!-- Memory -->
<slider params="value: 50, min: 1, max: 1024"></slider> <!-- Disk -->

params

Name Type Default Description
value number | Observable number min value value selected
disabled Boolean | Observable Boolean false Is the control disabled
min number | Observable number 1 minimum allowed value
minBound number | Observable number min value Used when globally allowable values are less then current allowed values.
max number | Observable number 128 maximun allowed value
maxBound number | Observable number min value Used when globally allowable values are more then current allowed values.
shouldShowTicks Boolean | Observable Boolean true show ticks above the slider, Ignored if there is more than 32 steps

Examples

toggle

    
  <toggle params="value: value, disabled: disabled, affirmativeText: 'yes', negativeText: 'no'"></toggle>

params

Name Type Default Description
value Boolean | Observable Boolean false The value of the control true for affirmative and false for negative
disabled Boolean | Observable Boolean false Is the control disabled
affirmativeText String | Observable String yes Text displayed when the value is true
negativeText String | Observable String no Text displayed when the value is false

Examples

date-time-picker

    
<date-time-picker params="dateTime: myDateTime"></date-time-picker>

params

Name Type Default Description
dateTime moment | Observable moment Curent DateTime + 1 Day The date and time including utc offset

Examples