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

pane

The pane has simple built-in tree view functionality, but can be overwritten by passing template names. This allows developers the option to customize the look and behavior of the pane.

Note, the selectedItemId property is a one-way binding, meaning it is never updated by the component itself. All "leaves" in a pane tree view are assumed to support deep linking and “right click > open in new tab”. Essentially, this means that each leaf have an anchor tag — the app tells the pane what should be shown as “selected”. 
    
<pane params="{items: items, selectedItemId: selectedItemId}"></pane>
<main><!--body content of the page--></main>

params

Name Type Default Description
items Array | ObservableArray None (Required) The items to show in the pane
itemTemplateName string 'cyclops.paneItem' Template id for displaying one item. The original item is wrapped by the PaneItemViewModel who then exposes the original item as a property called rawItem. This can be used to access additional information in your custom template.
itemFilteredTemplateName string 'cyclops.paneItemFiltered' Template id for displaying one item when filtering is applied. The original item is wrapped by the PaneItemViewModel who then exposes the original item as a property called rawItem. This can be used to access additional information in your custom template.
headerTemplateName string 'cyclops.paneHeader' Header template to use
searchComparer function(item, query) compares on case-insensative name property Called for each item to determine if it meets the filter/search criteria

Assumed Item Properties

Name Type Required Description
id string yes ID for the item used when compared to selectedItemId
name string | observable string yes The display name for the item
href string | observable string yes The value of the anchor tag
icons Array | observableArray no An Array of icon IDs to display for the item
statusClass string | observable string no class applied to status bar on left of pane item
items Array | observableArray no Subitems of that item

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