diff --git a/ui/src/kapacitor/components/TICKscriptOverlay.js b/ui/src/kapacitor/components/TICKscriptOverlay.js index ca2609729..87762ae8d 100644 --- a/ui/src/kapacitor/components/TICKscriptOverlay.js +++ b/ui/src/kapacitor/components/TICKscriptOverlay.js @@ -1,46 +1,24 @@ import React, {PropTypes} from 'react' import OverlayTechnologies from 'shared/components/OverlayTechnologies' -const style = { - padding: '8px', - borderRadius: '4px', - backgroundColor: '#202028', - margin: '0 15%', - top: '16px', - position: 'relative', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - height: 'calc(100% - 76px)', -} - -const TICKscriptOverlay = ({tickscript, onClose}) => ( +const TICKscriptOverlay = ({tickscript, onClose}) => -
-
- +
+
+
+

Generated TICKscript

+
+
+ +
+
+
+
+          {tickscript}
+        
-

Generated TICKscript

-
-        {tickscript}
-      
-) const {string, func} = PropTypes diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index bba610cb2..6e6c9c9d2 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -217,3 +217,30 @@ br { color: $g11-sidewalk; font-size: 13px; } + + + +/* + View TICKscript Overlay + ----------------------------------------------------------------------------- +*/ +$tick-script-overlay-margin: 30px; +.tick-script-overlay { + max-width: 960px; + margin: 0 auto $tick-script-overlay-margin auto; + height: calc(100% - #{$tick-script-overlay-margin}); + position: relative; + + .write-data-form--body { + height: calc(100% - 60px); + display: flex; + flex-direction: column; + } +} +.tick-script-overlay--sample { + margin: 0; + white-space: pre-wrap; + font-size: 14px; + padding: 20px; + border: 2px solid $g4-onyx; +}