Stack config.yml

app/components/new-edit-cluster/template.hbs

@@ -10,31 +10,33 @@
   {{textarea value=primaryResource.description classNames="form-control no-resize" rows="5" placeholder=(t 'editCluster.description.placeholder')}}
 </section>
 
-<hr/>
+{{#unless editing}}
+  <hr/>
 
-<section class="header clearfix">
+  <section class="header clearfix">
-  <h1 class="pull-left">System Catalog Items</h1>
+    <h1 class="pull-left">System Catalog Items</h1>
-  <div class="right-buttons">
+    <div class="right-buttons">
-    <button class="btn bg-primary" disabled=true>Add</button>
+      <button class="btn bg-primary" disabled=true>Add</button>
+    </div>
+  </section>
+    <p class="text-info mb-0">These stacks will be automatically deployed into the System environment for the cluster</p>
+
+  <div class="section container-fluid container-catalog clearfix">
+    {{#each primaryResource.systemStacks as |stack|}}
+      {{#catalog-box model=stack.catalogTemplate showSource=true as |section|}}
+        {{#if (eq section 'body')}}
+          <h3>{{stack.catalogTemplate.name}}</h3>
+          <div class="mt-10 description">{{stack.catalogTemplate.description}}</div>
+        {{else if (eq section 'footer')}}
+          <button type="button" class="btn bg-primary" disabled=true {{action "editStack" stack}}>{{t 'action.edit'}}</button>
+          <button type="button" class="btn bg-error" disabled=true {{action "removeStack" stack}}>{{t 'generic.remove'}}</button>
+        {{/if}}
+      {{/catalog-box}}
+    {{else}}
+      No system services
+    {{/each}}
   </div>
-</section>
+{{/unless}}
-  <p class="text-info mb-0">These stacks will be automatically deployed into the System environment for the cluster</p>
-
-<div class="section container-fluid container-catalog clearfix">
-  {{#each primaryResource.systemStacks as |stack|}}
-    {{#catalog-box model=stack.catalogTemplate showSource=true as |section|}}
-      {{#if (eq section 'body')}}
-        <h3>{{stack.catalogTemplate.name}}</h3>
-        <div class="mt-10 description">{{stack.catalogTemplate.description}}</div>
-      {{else if (eq section 'footer')}}
-        <button type="button" class="btn bg-primary" disabled=true {{action "editStack" stack}}>{{t 'action.edit'}}</button>
-        <button type="button" class="btn bg-error" disabled=true {{action "removeStack" stack}}>{{t 'generic.remove'}}</button>
-      {{/if}}
-    {{/catalog-box}}
-  {{else}}
-    No system services
-  {{/each}}
-</div>
 
 {{top-errors errors=errors}}
 {{save-cancel editing=editing save="save" cancel="cancel"}}

app/hosts/index/template.hbs

@@ -63,6 +63,10 @@
       {{/columns-section}}
     {{/if}}
   {{else}}
-    {{empty-table resource="container" newRoute="authenticated.clusters.cluster.host-templates" newTranslationKey="nav.hosts.addHost" ctx="clusterId"}}
+    {{empty-table
+      resource="container"
+      showNew=projects.current.canAddHost
+      newRoute="authenticated.clusters.cluster.host-templates"
+      newTranslationKey="nav.hosts.addHost" ctx="clusterId"}}
   {{/if}}
 {{/if}}

app/stack/code/route.js

@@ -6,14 +6,19 @@ export default Ember.Route.extend({
     var stack = par.get('stack');
     return stack.doAction('exportconfig').then((config) => {
       // Windows needs CRLFs
-      var dockerCompose = config.dockerComposeConfig.split(/\r?\n/).join('\r\n');
+      let templates = [];
-      var rancherCompose = config.rancherComposeConfig.split(/\r?\n/).join('\r\n');
+      for ( let file in config.templates ) {
+        templates.push({
+          file,
+          isYaml: !!(file.match(/\.ya?ml$/i)),
+          contents: config.templates[file].split(/\r?\n/).join('\r\n')
+        });
+      }
 
       return Ember.Object.create({
         stack: stack,
         all: par.get('all'),
-        dockerCompose: dockerCompose,
+        templates: templates,
-        rancherCompose: rancherCompose,
       });
     });
   },

app/stack/code/template.hbs

@@ -1,12 +1,12 @@
 {{stack-header model=model.stack all=model.all.stacks}}
 
 <section>
-  <div class="col span-6">
+  {{#each model.templates as |tpl|}}
-    docker-compose.yml {{copy-to-clipboard clipboardText=model.dockerCompose size='small'}}
+    <div>
-    {{code-block language="yaml" code=model.dockerCompose classNames="docker-compose"}}
+      <h2>
-  </div>
+        {{tpl.file}} {{copy-to-clipboard clipboardText=tpl.contents size='small'}}
-  <div class="col span-6">
+      </h2>
-    rancher-compose.yml {{copy-to-clipboard clipboardText=model.rancherCompose size='small'}}
+      {{code-block language=(if tpl.isYaml 'yaml' 'bash') code=tpl.contents}}
-    {{code-block language="yaml" code=model.rancherCompose classNames="rancher-compose"}}
+    </div>
-  </div>
+  {{/each}}
 </section>

app/styles/_rancher.scss

@@ -1,18 +1,11 @@
+@import "app/styles/abstracts/decimal";
 @import "app/styles/abstracts/functions";
 @import "app/styles/abstracts/mixins";
-// @import "app/styles/totrash/helpers/functions";
 @import "vendor/icons/variables";
-@import "app/styles/vendor/normalize";//was lacsso
+@import "app/styles/vendor/normalize";
-
-
-// Theme
-// This is the only line that actually changes per theme in this whole file,
-// but we have multiple copies of it all anyway...
-
 
 // Base
 // Includes boilerplate for the project. Inlcude things like typography, Normalize, etc.
-// @import "app/styles/totrash/base/rancher";
 @import "app/styles/fonts/prompt";
 @import "app/styles/fonts/icons";
 @import "app/styles/base/base";
@@ -21,68 +14,51 @@
 @import "app/styles/base/helpers";
 @import "app/styles/base/icons";
 
-// 1. Configuration and helpers
-
-@import "app/styles/abstracts/decimal";
-
 // Layout
 // Layout specific files. Headers, footers, grids...
-
 @import "app/styles/layout/layout";
 @import "app/styles/layout/loading";
 @import "app/styles/layout/header";
 @import "app/styles/layout/footer";
 @import "app/styles/layout/grid";
 
-
 // Components
 // Component-specific files.
 @import "app/styles/components/slider";
-
+@import "app/styles/components/badges";
-@import "app/styles/components/badges";//lacsso
 @import "app/styles/components/badge-state";
-
+@import "app/styles/components/tables";
-@import "app/styles/components/tables";//lacsso
+@import "app/styles/components/growl";
-
+@import "app/styles/components/login";
-@import "app/styles/components/growl"; //from rancher
+@import "app/styles/components/pod";
-@import "app/styles/components/login"; //from rancher
+@import "app/styles/components/github-avatar";
-@import "app/styles/components/pod"; //used on host screen maybe move to pages from rancher
+@import "app/styles/components/spark-line";
-@import "app/styles/components/github-avatar"; //need for user avatar from rancher
+@import "app/styles/components/tooltip";
-@import "app/styles/components/spark-line"; //need from rancher
+@import "app/styles/components/container-shell";
-
+@import "app/styles/components/modals";
-@import "app/styles/components/tooltip"; //need from rancher
+@import "app/styles/components/catalog-box";
-
+@import "app/styles/components/code";
-@import "app/styles/components/container-shell"; //from rancher
+@import "app/styles/components/alerts";
-
+@import "app/styles/components/button";
-@import "app/styles/components/modals";//lacsso
+@import "app/styles/components/banners";
-
+@import "app/styles/components/tabs";
-@import "app/styles/components/catalog-box"; //need for   from rancher
+@import "app/styles/components/forms";
-
-@import "app/styles/components/code"; //rancher
-
-@import "app/styles/components/alerts";//lacsso
-
-@import "app/styles/components/button";//lacsso
-@import "app/styles/components/banners";//lacsso
-
-@import "app/styles/components/tabs";//lacsso
-@import "app/styles/components/forms";//lacsso
 @import "app/styles/components/dropdown";
-@import "app/styles/components/pagination";//lacsso
+@import "app/styles/components/pagination";
 @import "app/styles/components/billing-info";
 @import "app/styles/components/theme-toggle";
 @import "app/styles/components/progress";
 @import "app/styles/components/stack-app";
-
 @import "app/styles/components/page-header";
 @import "app/styles/components/nav";
 @import "app/styles/components/over-hr";
 @import "app/styles/components/accordion";
 @import "app/styles/components/jsondiffpatch";
 
-// Vendors
+// Vendor
 // Pretty much what it says. Vendor specific changes/overrides or includes.
-@import "app/styles/vendors/copy-to-clipboard";
+@import "app/styles/vendor/copy-to-clipboard";
+@import "app/styles/vendor/prism-theme";
 
 // Pages
 // Pages that have their own styles.
@@ -98,7 +74,7 @@
 @import "app/styles/pages/k8s";
 @import "app/styles/pages/cluster-welcome";
 
-//sizes
+// Sizes
 @import "app/styles/layout/large";
 @import "app/styles/layout/medium";
 @import "app/styles/layout/small";

app/styles/pages/_cluster-welcome.scss

@@ -9,7 +9,7 @@
 
   .box {
     padding: 75px 40px 40px 40px;
-    min-height: 500px;
+    min-height: 400px;
     position: relative;
   }
 

app/styles/vendor/_prism-theme.scss

@@ -6,13 +6,16 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-  color: $greenTwo;
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
   font-family: Consolas, Monaco, 'Andale Mono', monospace;
   direction: ltr;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
+  word-wrap: normal;
   line-height: 1.5;
 
   -moz-tab-size: 4;
@@ -35,24 +38,25 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: $secondary;
+  background: #272822;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: .1em;
   border-radius: .3em;
+  white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: $mid-grey;
+  color: slategray;
 }
 
 .token.punctuation {
-  color: $light-greyTwo;
+  color: #f8f8f2;
 }
 
 .namespace {
@@ -64,12 +68,12 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: $errorTwo;
+  color: #f92672;
 }
 
 .token.boolean,
 .token.number {
-  color: $warningTwo;
+  color: #ae81ff;
 }
 
 .token.selector,
@@ -93,21 +97,21 @@ pre[class*="language-"] {
 .token.atrule,
 .token.attr-value,
 .token.function {
-  color: #adbce9;
+  color: #e6db74;
 }
 
 .token.keyword {
-  color: $info;
+  color: #66d9ef;
 }
 
 .token.regex,
 .token.important {
-  color: mix($warning, $error, 20%);
+  color: #fd971f;
 }
 
 .token.important,
 .token.bold {
-  font-weight: 900;
+  font-weight: bold;
 }
 .token.italic {
   font-style: italic;