Merge pull request #225 from scouter-contrib/development

Development
scouter-contrib · Jun 23, 2019 · 8e10cfe · 8e10cfe
2 parents 6387716 + 090ea93
commit 8e10cfe
Show file tree

Hide file tree

Showing 33 changed files with 1,692 additions and 250 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,9 @@ You can download the latest version from the page below.
 ## Guides
 - [Home Page](https://scouter-contrib.github.io/scouter-paper/)
 - [User Guide](https://translate.google.co.kr/translate?sl=ko&tl=en&js=y&prev=_t&hl=ko&ie=UTF-8&u=https%3A%2F%2Fscouter-contrib.github.io%2Fscouter-paper%2Fmanual.html&edit-text=&act=url)
+
+## DockerHub
+- [scouter-paper](https://hub.docker.com/r/scouterapm/scouter-paper)
 
 ## Screenshots
 - HOME

diff --git a/README_kr.md b/README_kr.md
@@ -30,7 +30,10 @@ build를 위해서 먼저 npm이 설치되어 있어야합니다.
 ## 가이드
 - [소개 페이지](https://scouter-contrib.github.io/scouter-paper/)
 - [사용자 가이드](./build/help/manual.html)
-
+
+## 도커허브 
+- [scouter-paper](https://hub.docker.com/r/scouterapm/scouter-paper) 
+
 ## 주요 화면
 - HOME
 

diff --git a/src/App.js b/src/App.js
@@ -331,7 +331,9 @@ class App extends Component {
             let found = false;
             for (let i=0; i<config.servers.length; i++) {
                 let server = config.servers[i];
-                if (server.protocol === paramProtocol && server.address === paramAddress && String(server.port) === String(paramPort) && server.authentification === paramAuthentification) {
+                if (server.protocol === paramProtocol && server.address === paramAddress
+                    && String(server.port) === String(paramPort))
+                {
                     found = true;
                     server.default = true;
                 } else {

diff --git a/src/Theme.css b/src/Theme.css
@@ -146,6 +146,16 @@ html.theme-gray, .theme-gray body {
     color: white;
 }
 
+.theme-gray .scrollbar::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.theme-gray .scrollbar::-webkit-scrollbar-thumb {
+    background-color: #FCDC3B;
+}
+
 /* THEME, Menu.css */
 .theme-gray .menu-div {
     background-color: #222;
@@ -285,6 +295,9 @@ html.theme-gray, .theme-gray body {
 .theme-gray .frame-profile div.xlog-data span.label {
     background-color: #111;
 }
+.theme-gray .frame-profile div.time-ratio{
+    background-color: #111;
+}
 
 .theme-gray .frame-xlog-steps .step {
     background-color: #111;
@@ -318,4 +331,18 @@ html.theme-gray, .theme-gray body {
 .theme-gray .frame-profile-step-detail .sub-detail-title .sql-btns > div {
     background-color: rgba(255,255,255,0.4);
     color: white;
-}
+}
+
+/* ProfileList.css */
+.xlog-profile-list > div.header.row.fixed > span {
+    position: sticky;
+    top: 0;
+    background-color: #F2F2F2;
+}
+
+.theme-gray .xlog-profile-list > div.header.row.fixed > span {
+    position: sticky;
+    top: 0;
+    background-color: #111;
+}
+
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -43,6 +43,9 @@ export const SET_TEMPLATE_NAME = 'SET_TEMPLATE_NAME';
 export const SET_PRESET_NAME = 'SET_PRESET_NAME';
 export const SET_LAYOUT_NAME = 'SET_LAYOUT_NAME';
 
+
+export const SET_TIME_FOCUS = 'SET_TIME_FOCUS';
+
 export function setTemplateName(preset, layout) {
     return {
         type: SET_TEMPLATE_NAME,
@@ -269,13 +272,14 @@ export function setRangeDateHoursMinutes(date, hours, minutes) {
     };
 }
 
-export function setRangeDateHoursMinutesValue(date, hours, minutes, value) {
+export function setRangeDateHoursMinutesValue(date, hours, minutes, value, fromPast) {
     return {
         type: SET_RANGE_DATE_HOURS_MINUTES_VALUE,
         date : date,
         hours : hours,
         minutes : minutes,
-        value : value
+        value : value,
+        fromPast : fromPast
     };
 }
 
@@ -364,3 +368,13 @@ export function setActiveServiceList(object){
         object : object
     }
 }
+export function setTimeFocus(active,time,boxKey,keep=false){
+    return {
+        type : SET_TIME_FOCUS,
+        id: boxKey,
+        active :active,
+        time : time,
+        keep : keep
+    }
+
+}
diff --git a/src/common/common.js b/src/common/common.js
@@ -1,7 +1,7 @@
 // local storage access
 import moment from "moment";
 import {Dictionary, DictType} from "./dictionary";
-export const version = "2.4.0";
+export const version = "2.5.0";
 
 export function getData(key) {
     let ls = null;
@@ -67,6 +67,19 @@ export function getHttpProtocol(config) {
     }
 }
 
+export function getServerInfo(config) {
+    if (config.servers && config.servers.length > 0) {
+        let server = config.servers.filter((server) => server.default);
+        if (server && server.length > 0) {
+            return { address: server[0].address, port: server[0].port };
+        } else {
+            return null;
+        }
+    } else {
+        return null;
+    }
+}
+
 export function buildHttpProtocol(config) {
     if (config.servers && config.servers.length > 0) {
         let idx = 0;
@@ -332,6 +345,25 @@ export function getParam(props, key) {
     }
 }
 
+export function setXlogfilterToUrl (props, filter) {
+
+    let search = new URLSearchParams(props.location.search);
+
+    if(filter === null) {
+        search.delete("xlogfilter");
+    }else{
+        search.set("xlogfilter", JSON.stringify(filter));
+    }
+
+    if (props.location.search !== ("?" + search.toString())) {
+        props.history.replace({
+          pathname: props.location.pathname,
+          search: "?" + search.toString()
+        });
+    }
+
+}
+
 export function setRangePropsToUrl (props, pathname, objects) {
     let search = new URLSearchParams(props.location.search);
 
@@ -363,6 +395,7 @@ export function setRangePropsToUrl (props, pathname, objects) {
 
     search.set("from", from.format("YYYYMMDDHHmmss"));
     search.set("to", to.format("YYYYMMDDHHmmss"));
+    search.set("fromPast", props.range.fromPast);
 
     if (props.location.search !== ("?" + search.toString())) {
         if (pathname) {
@@ -398,6 +431,94 @@ export function setTxidPropsToUrl (props, txiddate, txid) {
     }
 }
 
+export function setTargetServerToUrl (props, config, anotherParam) {
+    const server = getServerInfo(config);
+    if (server && server.address) {
+        setTargetServerToUrl0(props, server.address, server.port, server.protocol, anotherParam);
+    }
+}
+
+const ALL_OPTIONS_OF_SERVER_KEY = "allOptionsOfServer";
+
+export function clearAllUrlParamOfPaper (props, config) {
+    props.history.push({
+        pathname: props.location.pathname
+    });
+}
+
+export function replaceAllLocalSettingsForServerChange (currentServer, props, config) {
+    if (currentServer && currentServer.address) {
+        saveCurrentAllLocalSettings(currentServer, config);
+        reloadAllLocalSettingsOfServer(props, config);
+    }
+}
+
+export function saveCurrentAllLocalSettings (currentServer, config) {
+    const serverKey = currentServer.address + ":" + currentServer.port;
+
+    const option = {
+        server: serverKey,
+        options: {
+            selectedObjects : getData("selectedObjects"),
+            templateName : getData("templateName"),
+            layouts : getData("layouts"),
+            boxes : getData("boxes"),
+            preset : getData("preset"),
+            profileOptions : getData("profileOptions"),
+            topologyPosition : getData("topologyPosition"),
+            topologyOptions : getData("topologyOptions"),
+            alert : getData("alert")
+        }
+    };
+
+    const allOptionsOfServer = getData(ALL_OPTIONS_OF_SERVER_KEY) || [];
+    let allOptions = allOptionsOfServer.filter(option => option.server !== serverKey);
+    allOptions.push(option);
+
+    setData(ALL_OPTIONS_OF_SERVER_KEY, allOptions);
+}
+
+export function reloadAllLocalSettingsOfServer (props, config) {
+    const server = getServerInfo(config);
+    if (server && server.address) {
+        const serverKey = server.address + ":" + server.port;
+        const allOptionsOfServer = getData(ALL_OPTIONS_OF_SERVER_KEY) || [];
+        const option = allOptionsOfServer.filter(option => option["server"] === serverKey);
+
+        if (option && option[0] && option[0].options) {
+            setData("selectedObjects", option[0].options["selectedObjects"]);
+            setData("templateName", option[0].options["templateName"]);
+            setData("layouts", option[0].options["layouts"]);
+            setData("boxes", option[0].options["boxes"]);
+            setData("preset", option[0].options["preset"]);
+            setData("profileOptions", option[0].options["profileOptions"]);
+            setData("topologyPosition", option[0].options["topologyPosition"]);
+            setData("topologyOptions", option[0].options["topologyOptions"]);
+            setData("alert", option[0].options["alert"]);
+        }
+    }
+}
+
+export function setTargetServerToUrl0 (props, serverAddr, serverPort, protocol, anotherParam) {
+    let search = new URLSearchParams(props.location.search);
+
+    search.set("address", serverAddr);
+    search.set("port", serverPort);
+    search.set("protocol", protocol || "http");
+    for (let key in anotherParam) {
+        if (anotherParam[key]) {
+            search.set(key, anotherParam[key]);
+        }
+    }
+
+    if (props.location.search !== ("?" + search.toString())) {
+        props.history.replace({
+            pathname: props.location.pathname,
+            search: "?" + search.toString()
+        });
+    }
+}
+
 const table = [
         0x00000000, 0x77073096, 0xee0e612c, 0x990951ba, 0x076dc419, 0x706af48f, 0xe963a535, 0x9e6495a3,
         0x0edb8832, 0x79dcb8a4, 0xe0d5e91e, 0x97d2d988, 0x09b64c2b, 0x7eb17cbd, 0xe7b82d07, 0x90bf1d91,

diff --git a/src/components/Box/Tooltip/Tooltip.js b/src/components/Box/Tooltip/Tooltip.js
@@ -72,7 +72,7 @@ class Tooltip extends Component {
             <div ref="tooltipRoot" className={"tooltip " + (hasData ? '' : 'no-data')} style={{left: x, top: y}}>
                 {show && this.props.tooltip.data &&
                 <div>
-                    <div className="time">{this.props.tooltip.data.time}</div>
+                    <div className="time">{this.props.tooltip.data.time} {`${this.props.tooltip.data.chartType === "STACK AREA" ? "Sum :"+this.props.tooltip.data.counterSum : "" }`}</div>
                     <ul>
                         {this.props.tooltip.data.lines.map((d, i) => {
                             return (

diff --git a/src/components/Controller/Controller.css b/src/components/Controller/Controller.css
@@ -121,6 +121,14 @@
 }
 
 .controller-wrapper .control-item.first {
+    z-index: 3;
+}
+
+.controller-wrapper .control-item.control-item-search {
+    z-index: 2;
+}
+
+.controller-wrapper .control-item.control-item-calendar {
     z-index: 1;
 }
 
@@ -159,20 +167,27 @@
     display: inline-block;
     margin-left: 10px;
     position: absolute;
-    top : 2px;
+    top : 3px;
+    right : 10px;
+    font-size: 10px;
 }
 
 .controller-wrapper .control-item .row > div.row-message .breakpoints .breakpoint {
     display: inline-block;
-    padding: 2px 4px;
+    padding-top: 1px;
+    text-align: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    box-sizing: border-box;
 }
 
 .controller-wrapper .control-item .row > div.row-message .breakpoints .breakpoint:first-child {
-    border-radius: 2px 0 0 2px;
+    _border-radius: 5px 0 0 5px;
 }
 
 .controller-wrapper .control-item .row > div.row-message .breakpoints .breakpoint:last-child {
-    border-radius: 0 2px 2px 0;
+    _border-radius: 0 5px 5px 0;
 }
 
 .controller-wrapper .control-item .row > div.row-message .breakpoints .breakpoint.selected {