Add StatusText component.

2025-04-24 01:38:56 -04:00 · 2017-01-25 16:16:42 -08:00 · 2017-01-25 16:16:42 -08:00 · 2b12dec3b4
commit 2b12dec3b4
parent 9fc4c96aca
19 changed files with 313 additions and 6 deletions
--- a/ui_framework/components/event/_event.scss
+++ b/ui_framework/components/event/_event.scss
@ -0,0 +1,26 @@
+.kuiEvent {
+  display: flex;
+}
+
+.kuiEventSymbol {
+  flex: 0 1 auto;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  padding-right: 8px;
+}
+
+.kuiEventBody {
+  flex: 1 1 0%;
+}
+
+  .kuiEventBody__message {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+    color: $fontColor;
+  }
+
+  .kuiEventBody__metadata {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+    color: $subduedFontColor;
+  }
--- a/ui_framework/components/event/_index.scss
+++ b/ui_framework/components/event/_index.scss
@ -0,0 +1 @@
+@import "event";
--- a/ui_framework/components/index.scss
+++ b/ui_framework/components/index.scss
@ -30,8 +30,9 @@ $titleFontSize: 18px;
 $buttonBorderRadius: 4px;

 // Colors
+$infoColor: #3fa8c7;
 $successColor: #417505;
-$warningColor: #ffac15;
+$warningColor: #ec9800;
 $errorColor: #D86051;
 $focusColor: #6EADC1;
 $focusDangerColor: #ff523c;
@ -235,6 +236,7 @@ body {

@import "bar/index";
@import "button/index";
+@import "event/index";
@import "form/index";
@import "header_bar/index";
@import "icon/index";
@ -242,11 +244,13 @@ body {
@import "link/index";
@import "loading_items/index";
@import "local_nav/index";
+@import "menu/index";
@import "micro_button/index";
@import "modal/index";
@import "no_items/index";
@import "panel/index";
@import "prompt_for_items/index";
+@import "status_text/index";
@import "table/index";
@import "tabs/index";
@import "tool_bar/index";
--- a/ui_framework/components/menu/_index.scss
+++ b/ui_framework/components/menu/_index.scss
@ -0,0 +1 @@
+@import "menu";
--- a/ui_framework/components/menu/_menu.scss
+++ b/ui_framework/components/menu/_menu.scss
@ -0,0 +1,19 @@
+.kuiMenu {
+}
+
+.kuiMenu--contained {
+  border-top: $tableRowBorder;
+  border-bottom: $tableRowBorder;
+
+  .kuiMenuItem {
+    padding: 6px;
+  }
+}
+
+.kuiMenuItem {
+  padding: 6px 0;
+
+  & + & {
+    border-top: $tableRowBorder;
+  }
+}
--- a/ui_framework/components/status_text/_index.scss
+++ b/ui_framework/components/status_text/_index.scss
@ -0,0 +1 @@
+@import "status_text";
--- a/ui_framework/components/status_text/_status_text.scss
+++ b/ui_framework/components/status_text/_status_text.scss
@ -0,0 +1,24 @@
+.kuiStatusText {
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.kuiStatusText--info {
+  color: $infoColor;
+}
+
+.kuiStatusText--success {
+  color: $successColor;
+}
+
+.kuiStatusText--warning {
+  color: $warningColor;
+}
+
+.kuiStatusText--error {
+  color: $errorColor;
+}
+
+  .kuiStatusText__icon {
+    margin-right: 6px;
+  }
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@ -229,6 +229,37 @@ body {
 .kuiButtonGroup--united .kuiButton + .kuiButton {
  margin-left: 2px; }

+.kuiEvent {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.kuiEventSymbol {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
+  font-size: 14px;
+  line-height: 1.5;
+  padding-right: 8px; }
+
+.kuiEventBody {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 0%;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%; }
+
+.kuiEventBody__message {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #191E23; }
+
+.kuiEventBody__metadata {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #9fa3a7; }
+
 /**
 * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
 *    ugly default appearance which we can't customize, so our best option is to give Firefox
@ -486,7 +517,7 @@ body {
  color: #417505; }

 .kuiIcon--warning {
-  color: #ffac15; }
+  color: #ec9800; }

 .kuiIcon--error {
  color: #D86051; }
@ -903,6 +934,17 @@ body {
  font-size: 14px;
  font-weight: bold; }

+.kuiMenu--contained {
+  border-top: 1px solid #E4E4E4;
+  border-bottom: 1px solid #E4E4E4; }
+  .kuiMenu--contained .kuiMenuItem {
+    padding: 6px; }
+
+.kuiMenuItem {
+  padding: 6px 0; }
+  .kuiMenuItem + .kuiMenuItem {
+    border-top: 1px solid #E4E4E4; }
+
 .kuiMicroButton {
  display: inline-block;
  /* 1 */
@ -1106,6 +1148,31 @@ body {
 .kuiPromptForItems__actions {
  margin-top: 10px; }

+.kuiStatusText {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline; }
+
+.kuiStatusText--info {
+  color: #3fa8c7; }
+
+.kuiStatusText--success {
+  color: #417505; }
+
+.kuiStatusText--warning {
+  color: #ec9800; }
+
+.kuiStatusText--error {
+  color: #D86051; }
+
+.kuiStatusText__icon {
+  margin-right: 6px; }
+
 /**
 * 1. Make seamless transition from ToolBar to Table header.
 * 1. Make seamless transition from Table to ToolBarFooter header.
--- a/ui_framework/doc_site/src/services/routes/routes.js
+++ b/ui_framework/doc_site/src/services/routes/routes.js
@ -7,6 +7,9 @@ import BarExample
 import ButtonExample
  from '../../views/button/button_example.jsx';

+import EventExample
+  from '../../views/event/event_example.jsx';
+
 import FormExample
  from '../../views/form/form_example.jsx';

@ -34,6 +37,9 @@ import MicroButtonExample
 import PanelExample
  from '../../views/panel/panel_example.jsx';

+import StatusTextExample
+  from '../../views/status_text/status_text_example.jsx';
+
 import TableExample
  from '../../views/table/table_example.jsx';

@ -56,6 +62,9 @@ const components = [{
 }, {
  name: 'Button',
  component: ButtonExample,
+}, {
+  name: 'Event',
+  component: EventExample,
 }, {
  name: 'Form',
  component: FormExample,
@ -83,6 +92,9 @@ const components = [{
 }, {
  name: 'Panel',
  component: PanelExample,
+}, {
+  name: 'StatusText',
+  component: StatusTextExample,
 }, {
  name: 'Table',
  component: TableExample,
--- a/ui_framework/doc_site/src/views/event/event.html
+++ b/ui_framework/doc_site/src/views/event/event.html
@ -0,0 +1,15 @@
+<div class="kuiEvent">
+  <div class="kuiEventSymbol">
+    <span class="kuiIcon kuiIcon--error fa-warning"></span>
+  </div>
+
+  <div class="kuiEventBody">
+    <div class="kuiEventBody__message">
+    minimum_master_nodes setting of 1 is less than quorum of 2
+    </div>
+
+    <div class="kuiEventBody__metadata">
+      August 4, 2021
+    </div>
+  </div>
+</div>
--- a/ui_framework/doc_site/src/views/event/event_example.jsx
+++ b/ui_framework/doc_site/src/views/event/event_example.jsx
@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Event',
+  html: require('./event.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Event Menu',
+  html: require('./event_menu.html'),
+  hasDarkTheme: false,
+},]);
--- a/ui_framework/doc_site/src/views/event/event_menu.html
+++ b/ui_framework/doc_site/src/views/event/event_menu.html
@ -0,0 +1,82 @@
+ <div class="kuiHeaderBar">
+  <div class="kuiHeaderBarSection">
+    <h2 class="kuiSubTitle">
+      Cluster Alerts
+    </h2>
+  </div>
+
+  <div class="kuiHeaderBarSection">
+    <a class="kuiLink">View all 21 alerts</a>
+  </div>
+</div>
+
+<div class="kuiMenu kuiVerticalRhythm">
+  <div class="kuiMenuItem">
+    <div class="kuiEvent">
+      <div class="kuiEventSymbol">
+        <span class="kuiIcon kuiIcon--error fa-warning"></span>
+      </div>
+
+      <div class="kuiEventBody">
+        <div class="kuiEventBody__message">
+          minimum_master_nodes setting of 1 is less than quorum of 2
+        </div>
+
+        <div class="kuiEventBody__metadata">
+          August 4, 2021
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiEvent">
+      <div class="kuiEventSymbol">
+        <span class="kuiIcon kuiIcon--error fa-warning"></span>
+      </div>
+
+      <div class="kuiEventBody">
+        <div class="kuiEventBody__message">
+          Cluster state is red because 17 primary shards are unassigned
+        </div>
+
+        <div class="kuiEventBody__metadata">
+          August 3, 2021
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiEvent">
+      <div class="kuiEventSymbol">
+        <span class="kuiIcon kuiIcon--error fa-warning"></span>
+      </div>
+
+      <div class="kuiEventBody">
+        <div class="kuiEventBody__message">
+          Elasticsearch node version mismatches detected: 5.1.0
+        </div>
+
+        <div class="kuiEventBody__metadata">
+          July 27, 2021
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+ <div class="kuiHeaderBar kuiVerticalRhythm">
+  <div class="kuiHeaderBarSection">
+    <h2 class="kuiSubTitle">
+      Elasticsearch
+    </h2>
+  </div>
+
+  <div class="kuiHeaderBarSection">
+    <span class="kuiStatusText kuiStatusText--error">
+      <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
+      Red health
+    </span>
+  </div>
+</div>
--- a/ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.html
+++ b/ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.html
@ -6,8 +6,9 @@
  </div>

  <div class="kuiHeaderBarSection">
-    <a href="#" class="kuiLink">
-      View all 8 alerts
-    </a>
+    <span class="kuiStatusText kuiStatusText--error">
+      <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
+      Red health
+    </span>
  </div>
 </div>
--- a/ui_framework/doc_site/src/views/status_text/status_text_error.html
+++ b/ui_framework/doc_site/src/views/status_text/status_text_error.html
@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--error">
+  <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
+  Something&rsquo;s gone terribly wrong
+</span>
--- a/ui_framework/doc_site/src/views/status_text/status_text_example.jsx
+++ b/ui_framework/doc_site/src/views/status_text/status_text_example.jsx
@ -0,0 +1,23 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Info',
+  html: require('./status_text_info.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Success',
+  html: require('./status_text_success.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Warning',
+  html: require('./status_text_warning.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Error',
+  html: require('./status_text_error.html'),
+  hasDarkTheme: false,
+}]);
--- a/ui_framework/doc_site/src/views/status_text/status_text_info.html
+++ b/ui_framework/doc_site/src/views/status_text/status_text_info.html
@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--info">
+  <span class="kuiStatusText__icon kuiIcon fa-info"></span>
+  Just to let you know
+</span>
--- a/ui_framework/doc_site/src/views/status_text/status_text_success.html
+++ b/ui_framework/doc_site/src/views/status_text/status_text_success.html
@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--success">
+  <span class="kuiStatusText__icon kuiIcon fa-check"></span>
+  Eveything is OK
+</span>
--- a/ui_framework/doc_site/src/views/status_text/status_text_warning.html
+++ b/ui_framework/doc_site/src/views/status_text/status_text_warning.html
@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--warning">
+  <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
+  Careful!
+</span>
--- a/ui_framework/doc_site/src/views/table/controlled_table_no_items.html
+++ b/ui_framework/doc_site/src/views/table/controlled_table_no_items.html
@ -42,7 +42,7 @@
    </div>
  </div>

-  <!-- NoResults -->
+  <!-- NoItems -->
  <div class="kuiPanel kuiPanel--centered">
    <div class="kuiNoItems">
      No Items matched your search.