mattisbusycom/jsbin.rixavaxe.css

## jsbin.rixavaxe.css
.so-cl-production {
  padding-top: 10px;
}

.icon {
  width: 32px;
  height: 32px;
}

.icon-account-login {
  fill: #f00;
}

#identity { padding-top:10px; }
a.navbar-brand h1 {
  margin:0;
  padding:0;

  font-size: 28px;
  font-weight:bold;
  font-family: arial;
  color: #777;

  padding-left: 10px;
  float:left;
}

a.navbar-brand {

  padding:0;
  padding-top:5px;
}

#trail {
  margin-top: -27px;
  padding-bottom: 15px;
}

.row-trail {
  margin-top: 4px;
}

ol.breadcrumb {
    background:#fff;
  border: 1px solid #c0c0c0;
  font-size: 14px;
}

ol.breadcrumb-trail li a {
  color: #000;
  font-size: 14px;

  font-family: arial;
  text-decoration: underline;
  padding-top: 5px;
}

## jsbin.rixavaxe.html
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//fb.me/react-0.11.0.js"></script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <script src="//code.jquery.com/jquery.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>

  <title>cl-production</title>
</head>
<body>


  <!-- copy in -->


  <!-- header -->
  <nav class="navbar navbar-toolbar navbar-default navbar-static-top">
    <div id="identity" class="container">
      <a href="http://jobs.spclops.com" class="navbar-brand">
        <img src="http://jobs.spclops.com/img/so-icon.png" alt="Jobs" style="width: 30px; height: 30px; float:left;">
        <h1>ClJobs</h1>
      </a>
    </div>
  </nav>

  <div id="trail" class="container">
    <div class="row row-trail">

        <ol class="breadcrumb breadcrumb-trail">
          <li><a href="#">Home</a></li>
          <li><a href="#">Craigslist</a></li>
          <li><a href="#">Jobs</a></li>
          <li class="active">New Crawl Configuration</li>
        </ol>
    </div>
  </div>

  <div class="container">

    <div class="row">

      <h2>Welcome to cl-production</h2>
      <hr>

      <div class='well'>
        <h3>How to Contact Us</h3>
        <hr>
        <p>
          <address>
            <strong>SpclOps Consulting</strong><br>
            <abbr title="Phone">P:</abbr> (717) 456-7890
          </address>

          <address>
            <strong>E-Mail</strong><br>
            <a href="mailto:#">spc@spclops.com</a>
          </address>
        </p>
      </div>
</div>
</body>
</html>

## jsbin.rixavaxe.js
// App module
//
// The app module will contain all of the components the app needs (directives,
// controllers, services, etc.). Since it will be using the components within
// the elasticsearch module, define it a dependency.
var ClProductionApp = angular.module('ClProductionApp', ['elasticsearch']);

// Service
//
// esFactory() creates a configured client instance. Turn that instance
// into a service so that it can be required by other parts of the application
ClProductionApp.service('client', function (esFactory) {
  return esFactory({
    host: 'localhost:9200',
    apiVersion: '1.2',
    log: 'trace'
  });
});

// Controller
//
// It requires the "client" service, and fetches information about the server,
// it adds either an error or info about the server to $scope.
//
// It also requires the esFactory to that it can check for a specific type of
// error which might come back from the client
ClProductionApp.controller('ClController', function ($scope, client, esFactory) {

  client.cluster.state({
    metric: [
      'cluster_name',
      'nodes',
      'master_node',
      'version'
    ]
  })
  .then(function (resp) {
    $scope.clusterState = resp;
    $scope.error = null;
  })
  .catch(function (err) {
    $scope.clusterState = null;
    $scope.error = err;

    // if the err is a NoConnections error, then the client was not able to
    // connect to elasticsearch. In that case, create a more detailed error
    // message
    if (err instanceof esFactory.errors.NoConnections) {
      $scope.error = new Error('Unable to connect to elasticsearch. ' +
                               'Make sure that it is running and listening at http://localhost:9200');
    }
  });

});
	.so-cl-production {
	padding-top: 10px;
	}

	.icon {
	width: 32px;
	height: 32px;
	}

	.icon-account-login {
	fill: #f00;
	}

	#identity { padding-top:10px; }
	a.navbar-brand h1 {
	margin:0;
	padding:0;

	font-size: 28px;
	font-weight:bold;
	font-family: arial;
	color: #777;

	padding-left: 10px;
	float:left;
	}

	a.navbar-brand {

	padding:0;
	padding-top:5px;
	}

	#trail {
	margin-top: -27px;
	padding-bottom: 15px;
	}

	.row-trail {
	margin-top: 4px;
	}

	ol.breadcrumb {
	background:#fff;
	border: 1px solid #c0c0c0;
	font-size: 14px;
	}

	ol.breadcrumb-trail li a {
	color: #000;
	font-size: 14px;

	font-family: arial;
	text-decoration: underline;
	padding-top: 5px;
	}
	<!DOCTYPE html>
	<html ng-app>
	<head>
	<script src="//fb.me/react-0.11.0.js"></script>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<script src="//code.jquery.com/jquery.min.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>

	<title>cl-production</title>
	</head>
	<body>



	<!-- copy in -->


	<!-- header -->
	<nav class="navbar navbar-toolbar navbar-default navbar-static-top">
	<div id="identity" class="container">
	<a href="http://jobs.spclops.com" class="navbar-brand">
	<img src="http://jobs.spclops.com/img/so-icon.png" alt="Jobs" style="width: 30px; height: 30px; float:left;">
	<h1>ClJobs</h1>
	</a>
	</div>
	</nav>

	<div id="trail" class="container">
	<div class="row row-trail">

	<ol class="breadcrumb breadcrumb-trail">
	<li><a href="#">Home</a></li>
	<li><a href="#">Craigslist</a></li>
	<li><a href="#">Jobs</a></li>
	<li class="active">New Crawl Configuration</li>
	</ol>
	</div>
	</div>

	<div class="container">

	<div class="row">

	<h2>Welcome to cl-production</h2>
	<hr>

	<div class='well'>
	<h3>How to Contact Us</h3>
	<hr>
	<p>
	<address>
	<strong>SpclOps Consulting</strong><br>
	<abbr title="Phone">P:</abbr> (717) 456-7890
	</address>

	<address>
	<strong>E-Mail</strong><br>
	<a href="mailto:#">spc@spclops.com</a>
	</address>
	</p>
	</div>
	</div>
	</body>
	</html>
	// App module
	//
	// The app module will contain all of the components the app needs (directives,
	// controllers, services, etc.). Since it will be using the components within
	// the elasticsearch module, define it a dependency.
	var ClProductionApp = angular.module('ClProductionApp', ['elasticsearch']);

	// Service
	//
	// esFactory() creates a configured client instance. Turn that instance
	// into a service so that it can be required by other parts of the application
	ClProductionApp.service('client', function (esFactory) {
	return esFactory({
	host: 'localhost:9200',
	apiVersion: '1.2',
	log: 'trace'
	});
	});

	// Controller
	//
	// It requires the "client" service, and fetches information about the server,
	// it adds either an error or info about the server to $scope.
	//
	// It also requires the esFactory to that it can check for a specific type of
	// error which might come back from the client
	ClProductionApp.controller('ClController', function ($scope, client, esFactory) {

	client.cluster.state({
	metric: [
	'cluster_name',
	'nodes',
	'master_node',
	'version'
	]
	})
	.then(function (resp) {
	$scope.clusterState = resp;
	$scope.error = null;
	})
	.catch(function (err) {
	$scope.clusterState = null;
	$scope.error = err;

	// if the err is a NoConnections error, then the client was not able to
	// connect to elasticsearch. In that case, create a more detailed error
	// message
	if (err instanceof esFactory.errors.NoConnections) {
	$scope.error = new Error('Unable to connect to elasticsearch. ' +
	'Make sure that it is running and listening at http://localhost:9200');
	}
	});

	});