Skip to content

Commit

Permalink
Merge pull request rackn#359 from rackn/welcomei
Browse files Browse the repository at this point in the history 
Create landing page for new users w/ Video Tour!
  • Loading branch information
@galthaus
galthaus authored Feb 21, 2017
2 parents 1cb8a0a + aaec907 commit 366f1f9
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 104 deletions.
5 changes: 3 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
<script src="js/graphs.js"></script>
<script src="js/bios_settings.js"></script>
<script src="js/bios_updates.js"></script>
<script src="js/welcome.js"></script>

<!-- Side Nav -->
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" ng-show="isAuth()">
Expand Down Expand Up @@ -138,7 +139,7 @@
</div>

<!-- Logout list item -->
<md-list-item ng-click="logout()">
<md-list-item ng-show=false ng-click="logout()">
<md-icon>exit_to_app</md-icon>
<p>Logout</p>
</md-list-item>
Expand Down Expand Up @@ -186,7 +187,7 @@ <h2 ng-click="$mdOpenMenu($event)">
</md-tooltip>
<md-icon>track_changes</md-icon>
</md-button>
<md-button target="_new" class="md-icon-button" ng-href="http://digital-rebar.readthedocs.io/en/latest/">
<md-button class="md-icon-button" ng-href="#/welcome">
<md-tooltip>
Documentation
</md-tooltip>
Expand Down
13 changes: 7 additions & 6 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,12 @@ var version = '0.1.5';

$routeProvider.
when('/', {
redirectTo: '/deployments'
redirectTo: '/welcome'
}).
when('/welcome', {
controller: 'WelcomeCtrl',
controllerAs: 'welcome',
templateUrl: 'views/welcome.html'
}).
when('/deployments', {
controller: 'DeploymentsCtrl',
Expand Down Expand Up @@ -291,7 +296,7 @@ var version = '0.1.5';
}).

otherwise({
redirectTo: '/login'
redirectTo: '/welcome'
});
});

Expand Down Expand Up @@ -491,10 +496,6 @@ var version = '0.1.5';
icon: 'traffic',
path: '/capabilities'
}]
}, {
title: 'Settings',
icon: 'settings',
path: '/settings'
}, {
title: 'Alerts',
icon: 'error',
Expand Down
11 changes: 11 additions & 0 deletions js/welcome.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*
welcome controller
*/
(function () {
angular.module('app')
.controller('WelcomeCtrl', function ($scope, api, $location, localStorageService, $http, $cookies, debounce, $mdMedia, $mdDialog, $mdToast) {
$scope.$emit('title', 'Welcome to RackN Digital Rebar!'); // shows up on the top toolbar


});
})();
151 changes: 55 additions & 96 deletions views/deployments.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,6 @@ <h2>
</div>
<span flex></span>

<!-- Sparkline for the nodes -->
<span spark class="inset" type="pie" ng-model="deployments.deploymentPie[deployment.id]" opts="{{deployments.opts}}">
</span>

<!-- Expand button -->
<span class="inset">
<md-button class="md-icon-button">
Expand All @@ -51,98 +47,61 @@ <h2>
<!-- Tabs that appear after the expand button is pressed -->
<section ng-slide-down="expand[id]" duration="0.5">

<md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">

<!-- Nodes tab -->
<md-tab label="Nodes">
<!-- Add all the nodes as list items -->
<span ng-repeat="node_id in getNodeIds(id)">
<!-- Node button -->
<md-button class="md-fab md-primary md-mini" md-theme="status_{{ api.getNodeStatus(_nodes[node_id]) }}" ng-href="#/nodes/{{node_id}}">
<md-tooltip md-direction="bottom">
{{_nodes[node_id].name}}
</md-tooltip>
<md-icon aria-label="{{ api.getNodeStatus(_nodes[node_id]) }}">{{ api.getNodeIcon(_nodes[node_id]) }}</md-icon>
</md-button>
</span>

</md-tab>

<!-- Roles tab -->
<md-tab label="Roles">

<!-- Add all the Deployment Roles-->
<span ng-repeat="role_id in getDeploymentRoleIds(id)">
<md-button class="md-fab md-primary md-mini" ng-href="#/deployment_roles/{{role_id}}">
<md-tooltip md-direction="bottom">
{{_roles[_deployment_roles[role_id].role_id].name}}
</md-tooltip>
<md-icon aria-label="{{_roles[_deployment_roles[role_id].role_id].icon}}">{{_roles[_deployment_roles[role_id].role_id].icon}}</md-icon>
</md-button>
</span>
</md-tab>

<!-- Node/Roles Matrix tab -->
<md-tab label="Matrix" layout-padding layout="row">
<div style="text-align: right; width: 100%;">
<h3 style="margin-right: 1em">Services</h3>
<span ng-repeat="role_id in getNodeRoleIds(id)">
<md-button class="md-primary md-raised square-button" md-theme="status_{{_node_roles[role_id].status}}" ng-href="#/node_roles/{{role_id}}">
<md-tooltip md-direction="bottom">
{{_roles[_node_roles[role_id].role_id].name}}
</md-tooltip>
<md-icon aria-label="role icon">{{_roles[_node_roles[role_id].role_id].icon}}</md-icon>
</md-button>
</span>
</div>
<div style="overflow-x: auto">
<table>
<thead>
<th></th>
<th valign="bottom">Nodes</th>
<th ng-repeat="id in matrix_order[deployment.id]" class="angled">
<div>
<a ng-href="#/deployment_roles/{{id}}">
<md-icon style="transform: rotateZ(45deg)">{{_roles[_deployment_roles[id].role_id].icon}}</md-icon>
{{_roles[_deployment_roles[id].role_id].name}}
</a>
</div>
</th>
</thead>
<tbody>
<tr ng-repeat="node_id in getNodeIds(deployment.id)">
<td>
<span>
<md-icon class="status" swap-md-paint-bg="status_{{ api.getNodeStatus(_nodes[node_id]) }} primary" swap-md-paint-fg="status_{{ api.getNodeStatus(_nodes[node_id]) }} foreground">
{{ api.getNodeIcon(_nodes[node_id]) }}
</md-icon>
<md-tooltip>
{{!_nodes[node_id].alive ? 'off' : _nodes[node_id].status}}
</md-tooltip>
</span>
</td>
<td class="label">
<a ng-href="#/nodes/{{node_id}}" title="{{_nodes[node_id].name}}">{{api.truncName(_nodes[node_id].name)}}</a>
</td>
<td ng-repeat="id in matrix_order[deployment.id]">
<span ng-if="matrix[deployment.id][id][node_id]">
<md-icon class="status" swap-md-paint-bg="status_{{_node_roles[matrix[deployment.id][id][node_id]].status}} primary" swap-md-paint-fg="status_{{_node_roles[matrix[deployment.id][id][node_id]].status}} foreground" ng-click="setPath('/node_roles/'+matrix[deployment.id][id][node_id])">
{{icons[_node_roles[matrix[deployment.id][id][node_id]].status]}}
</md-icon>
<md-tooltip>
{{_node_roles[matrix[deployment.id][id][node_id]].status}}
</md-tooltip>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</md-tab>

</md-tabs>

<md-divider></md-divider>
<!-- Node/Roles Matrix tab -->
<div style="text-align: right; width: 100%; padding-right: 1em">
<strong style="font-size: 120%">Services:</strong>
<span ng-repeat="role_id in getNodeRoleIds(id)">
<md-button class="md-primary md-raised square-button" md-theme="status_{{_node_roles[role_id].status}}" ng-href="#/node_roles/{{role_id}}">
<md-tooltip md-direction="bottom">
{{_roles[_node_roles[role_id].role_id].name}}
</md-tooltip>
<md-icon aria-label="role icon">{{_roles[_node_roles[role_id].role_id].icon}}</md-icon>
</md-button>
</span>
</div>
<div flex style="overflow-x: auto; padding-left: 1em">
<table>
<thead>
<th></th>
<th valign="bottom">Nodes</th>
<th ng-repeat="id in matrix_order[deployment.id]" class="angled">
<div>
<a ng-href="#/deployment_roles/{{id}}">
<md-icon style="transform: rotateZ(45deg)">{{_roles[_deployment_roles[id].role_id].icon}}</md-icon>
{{_roles[_deployment_roles[id].role_id].name}}
</a>
</div>
</th>
</thead>
<tbody>
<tr ng-repeat="node_id in getNodeIds(deployment.id)">
<td>
<span>
<md-icon class="status" swap-md-paint-bg="status_{{ api.getNodeStatus(_nodes[node_id]) }} primary" swap-md-paint-fg="status_{{ api.getNodeStatus(_nodes[node_id]) }} foreground">
{{ api.getNodeIcon(_nodes[node_id]) }}
</md-icon>
<md-tooltip>
{{!_nodes[node_id].alive ? 'off' : _nodes[node_id].status}}
</md-tooltip>
</span>
</td>
<td class="label">
<a ng-href="#/nodes/{{node_id}}" title="{{_nodes[node_id].name}}">{{api.truncName(_nodes[node_id].name)}}</a>
</td>
<td ng-repeat="id in matrix_order[deployment.id]">
<span ng-if="matrix[deployment.id][id][node_id]">
<md-icon class="status" swap-md-paint-bg="status_{{_node_roles[matrix[deployment.id][id][node_id]].status}} primary" swap-md-paint-fg="status_{{_node_roles[matrix[deployment.id][id][node_id]].status}} foreground" ng-click="setPath('/node_roles/'+matrix[deployment.id][id][node_id])">
{{icons[_node_roles[matrix[deployment.id][id][node_id]].status]}}
</md-icon>
<md-tooltip>
{{_node_roles[matrix[deployment.id][id][node_id]].status}}
</md-tooltip>
</span>
</td>
</tr>
</tbody>
</table>
</div>

<!-- Bind Section -->
<md-card ng-slide-down="binding[id]" lazy-render layout="column">
Expand Down
83 changes: 83 additions & 0 deletions views/welcome.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!--
welcome view
-->
<div style="padding: 1em">

<md-card layout="column">
<md-card-title>
<md-card-title-text>
<span class="md-headline"><md-icon title="welcome">face</md-icon> Welcome</span>
</md-card-title-text>
<span>
<a href="http://rebar.digital">Digital Rebar Project</a> by <a href="http://rackn.com">RackN</a>
</span>
</md-card-title>
<md-card-content flex>
We believe that great applications start with a solid automation foundation. We've created Digital Rebar to unify management of heterogeneous physical and cloud infrastructure in an open, scalable way.
<md-card-actions layout="row" layout-align="left">
<md-button href="http://rebar.digital" target="_new1"><md-icon>home</md-icon> Home</md-button>
<md-button href="http://digital-rebar.readthedocs.io/en/latest/BOOK.html" target="_new2"><md-icon>help</md-icon> Documenation</md-button>
<md-button href="https://gitter.im/digitalrebar/core" target="_new3"><md-icon>chat</md-icon> Chat</md-button>
<md-button href="https://github.com/digitalrebar/digitalrebar/issues" target="_new4"><md-icon>bug_report</md-icon> Issues</md-button>
<md-button href="https://github.com/digitalrebar/digitalrebar" target="_new5"><md-icon>code</md-icon> Source Code</md-button>
<md-button href="https://twitter.com/digitalrebar" target="_new6"><md-icon>sentiment_satisfied</md-icon> Social</md-button>
<md-button href="https://github.com/rackn/digitalrebar-ux/blob/master/LICENSE.rst" target="_new7"><md-icon>account_balance</md-icon> License</md-button>
</md-card-actions>
</md-card-content>

</md-card>


<md-card flex>
<md-card-content layout="column" style="column-count: 2;">

<md-card layout="row">
<iframe width="400" height="240" src="https://www.youtube.com/embed/V6v-qEjVgX4" frameborder="0" allowfullscreen></iframe>
<div>
<md-card-title>
<md-card-title-text>
<span class="md-headline">
<a href="https://youtu.be/V6v-qEjVgX4" target="_new8">
<md-icon>video_library</md-icon> Digital Rebar Five Minute Tour</span>
</a>
<span class="md-subhead">Basic Navigation and Layout</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
This short tutorial shows you the basics of the Digital Rebar using both the RackN UX and some command line tasks.
After this video, you will understand the various options available in the system and be ready to perform basic deployment and troubleshooting tasks.
</md-card-content>
<md-card-actions layout="row" layout-align="left center">
<md-button href="https://www.youtube.com/playlist?list=PLXPBeIrpXjfgurJuwVjZkcfmatCoXYM_v" target="_new8">Training</md-button>
<md-button href="https://www.youtube.com/playlist?list=PLXPBeIrpXjfh2lXdXkNnzAuc7_SUtYJR-" target="_new8">Hybrid DevOps</md-button>
<md-button href="https://www.youtube.com/playlist?list=PLXPBeIrpXjfjabMbwYyDULOX3kZmlxEXK" target="_new8">Kubernetes</md-button>
<md-button href="https://www.youtube.com/channel/UCr3bBtP-pMsDQ5c0IDjt_LQ/playlists" target="_new8">All Content</md-button>
</md-card-actions>
</div>
</md-card>
</md-card-content>
</md-card>

<md-card flex>
<md-card-title>
<md-card-title-text>
<span class="md-headline"><md-icon title="Getting Started">child_friendly</md-icon> Getting Started</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
The simplest way to start using Digital Rebar is to use the Workloads (<md-icon>work</md-icon>) wizards to deploy pre-built applications or operating systems; however, before you can take those actions you must either have discovered Nodes (<md-icon>dns</md-icon>) via the Provisioner (<md-icon>local_shipping</md-icon>) or created a Provider (<md-icon>filter_drama</md-icon>) using cloud credentials. Generally, it's easier to start by adding a Provider.
</md-card-content>
<md-card-content>
Adding a Provider (<md-icon>filter_drama</md-icon>) requires that you have an account and access key for one of the supported clouds. When adding a Provider, you will want to test creating a Node (<md-icon>dns</md-icon>) using that provider and checking that it got created on the target cloud. You can monitor the process using "docker logs -f compose_cloudwrap_1" from the Digital Rebar host system.
</md-card-content>
<md-card-content>
Workloads (<md-icon>work</md-icon>) wizard will create Nodes (<md-icon>dns</md-icon>) and put them in a Deployment (<md-icon>dashboard</md-icon>). Each deployment is shown as a matrix with rows of nodes and columns of Roles (<md-icon>label_outline</md-icon>). Roles determine the functions that have been assigned to each node. Each assignment, known as a node-role, has a state. The node-role states are updated dynamically while Digital Rebar completes the deployment. You can use top-right corner buttons to Refresh (<md-icon>refresh</md-icon>) for latest state or review the queue (<md-icon>track_changes</md-icon>) of all pending work.
</md-card-content>
<md-card-content>
Node and Node-Role status indicators are common throughout the Digital Rebar UX. Completed actions are considered Ready (<md-icon>check_circle</md-icon>) or Error (<md-icon>warning</md-icon>) if something went wrong. Actions that are in Process (<md-icon>autorenew</md-icon>) have live log updates while pending action is shown as Todo (<md-icon>play_circle_outline</md-icon>) or Queued (<md-icon>update</md-icon>). Digital Rebar cannot act if a node-role is waiting for user input as Proposed (<md-icon>add_circle_outline</md-icon>) or Reserved
(<md-icon>pause_circle_outline</md-icon>). It also cannot act on nodes that are off (<md-icon>power_settings_new</md-icon>).
</md-card-content>
</md-card>

</div>

0 comments on commit 366f1f9

Please sign in to comment.