{this.props.children}
11 |
11 |
20 |
21 |
22 | }
23 |
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/Step/Step.css:
--------------------------------------------------------------------------------
1 | .step-div {
2 | margin-top: 8px;
3 | width: 100%;
4 | }
5 |
6 | .narrow .step-div {
7 | margin-top: 2px;
8 | }
9 |
10 | .step-div.has-gab.show-gab {
11 | margin-top: 0;
12 | }
13 |
14 | .step-div .gap-time {
15 | text-align: center;
16 | }
17 |
18 | .step-div .gap-time > div {
19 | display: inline-block;
20 | padding: 5px 10px;
21 | background-color: #DDD;
22 | border-radius: 5px;
23 | margin: 10px 0;
24 | }
25 |
26 | .narrow .step-div .gap-time > div {
27 | padding: 0 10px;
28 | margin: 3px 0;
29 | line-height: 50%;
30 | font-weight: bold;
31 | }
32 |
33 | .step-div .gap-time .arrow {
34 | font-size: 12px;
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/OldVersion/OldVersion.css:
--------------------------------------------------------------------------------
1 | article.old-version {
2 | display: table;
3 | width: 100%;
4 | height: 100%;
5 | color: white;
6 | }
7 |
8 | article.old-version > div {
9 | display: table-cell;
10 | width: 100%;
11 | height: 100%;
12 | text-align: center;
13 | vertical-align: middle;
14 | position: relative;
15 | }
16 |
17 | article.old-version .msg > span {
18 | display: inline-block;
19 | padding: 8px 16px;
20 | _background-color: rgba(0, 0, 0, 0.4);
21 | color: #FF030D;
22 | border-radius: 2px;
23 | }
24 |
25 | article.old-version .logo-wrapper .logo-div {
26 | margin-bottom: 10px;
27 | }
28 |
29 | article.old-version .logo-wrapper .logo-div img {
30 | width: 60px;
31 | }
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/TxNavLink/TxNavLink.css:
--------------------------------------------------------------------------------
1 | .tx-nav-link-wrapper {
2 | padding: 10px 5px 0;
3 | }
4 |
5 | .narrow .tx-nav-link-wrapper {
6 | padding: 3px 5px 0;
7 | }
8 |
9 | .tx-nav-link-wrapper span {
10 | padding: 2px 4px;
11 | display: inline-block;
12 | }
13 |
14 |
15 | .tx-nav-link-wrapper > div {
16 | margin-right: 5px;
17 | display: inline-block;
18 | border: 1px solid rgba(0,0,0,0.3);
19 | border-radius: 3px;
20 | }
21 |
22 | .tx-nav-link-wrapper .type {
23 | border-right: 1px solid rgba(0,0,0,0.3);
24 | display: inline-block;
25 | text-transform: uppercase;
26 | }
27 |
28 | .tx-nav-link-wrapper .txid {
29 | text-decoration: underline;
30 | cursor: pointer
31 | }
--------------------------------------------------------------------------------
/src/components/Box/Tooltip/Tooltip.css:
--------------------------------------------------------------------------------
1 | .tooltip {
2 | position: absolute;
3 | font-size: 12px;
4 | white-space: nowrap;
5 | background-color: white;
6 | border: 1px solid black;
7 | padding: 5px;
8 | border-radius: 3px;
9 | text-align: left;
10 | font-family: Righteous, sans-serif;
11 | }
12 |
13 | .tooltip.no-data {
14 | opacity: 0;
15 | }
16 |
17 | .tooltip.false {
18 | display: none;
19 | }
20 |
21 | .tooltip .time {
22 | padding: 2px 4px;
23 | }
24 |
25 | .tooltip ul {
26 | margin: 0;
27 | padding: 0;
28 | list-style: none;
29 | display: table;
30 | }
31 |
32 | .tooltip ul li {
33 | display: table-row;
34 | }
35 |
36 | .tooltip ul li > div {
37 | display: table-cell;
38 | padding: 2px 4px;
39 | }
--------------------------------------------------------------------------------
/src/components/ContentWrapper/ContentWrapper.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ContentWrapper.css';
3 | import {connect} from 'react-redux';
4 | import {withRouter} from 'react-router-dom';
5 |
6 | class ContentWrapper extends Component {
7 | render() {
8 | return (
9 |
12 | {prefix}
13 | {
14 | sqlFormatter.format(sql,{
15 | indent: " "
16 | })
17 | }
18 |
19 |
14 |
)
19 | }
20 | }
21 |
22 | export default HashedMessageStep;
23 |
--------------------------------------------------------------------------------
/src/fonts/glyphter/css/Glyphter.css:
--------------------------------------------------------------------------------
1 | /* Generated by Glyphter (http://www.glyphter.com) on Sat Dec 01 2018*/
2 | @font-face {
3 | font-family: 'Glyphter';
4 | src: url('../fonts/Glyphter.eot');
5 | src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
6 | url('../fonts/Glyphter.woff') format('woff'),
7 | url('../fonts/Glyphter.ttf') format('truetype'),
8 | url('../fonts/Glyphter.svg#Glyphter') format('svg');
9 | font-weight: normal;
10 | font-style: normal;
11 | }
12 | [class*='gcon-']:before{
13 | display: inline-block;
14 | font-family: 'Glyphter';
15 | font-style: normal;
16 | font-weight: normal;
17 | line-height: 1;
18 | -webkit-font-smoothing: antialiased;
19 | -moz-osx-font-smoothing: grayscale
20 | }
21 | .gcon-rabbitmq:before{content:'\0049';}
22 | .gcon-apache_kafka:before{content:'\004a';}
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/MessageStep/MessageStep.css:
--------------------------------------------------------------------------------
1 | .message-step .message-content {
2 | color: #28AE7B;
3 | }
4 |
5 | .xlog-steps .message-step .message-content > div {
6 | display: table-cell;
7 | vertical-align: middle;
8 | }
9 |
10 | .xlog-steps .message-step .message-content > div.tag {
11 | width: 50px;
12 | text-align: center;
13 | }
14 |
15 | .xlog-steps .message-step .message-content span {
16 | padding: 9px 5px;
17 | display: inline-block;
18 | }
19 |
20 | .narrow .xlog-steps .message-step .message-content span {
21 | padding: 2px 5px;
22 | }
23 |
24 | .xlog-steps .message-step .message-content .type-tag {
25 | background-color: #28AE7B;
26 | color: white;
27 | border-radius: 5px;
28 | padding: 2px 5px;
29 | font-size: 10px;
30 | width: 40px;
31 | box-sizing: border-box;
32 | }
33 |
34 |
--------------------------------------------------------------------------------
/src/fonts/Nanum_Square/README.md:
--------------------------------------------------------------------------------
1 | # NanumSquare
2 | > 반듯한 직선으로 제목에 잘 어울리며 모바일에서도 잘 보이는 글꼴입니다. 꼭 필요한 2,350자만을 추려 용량을 가볍게 줄였고 웹 환경에서 보다 편리하게 사용 가능합니다. http://hangeul.naver.com/2016/nanum
3 |
4 | 나눔스퀘어 웹폰트 입니다.
5 | [Demo](https://htmlpreview.github.io/?https://github.com/moonspam/NanumSquare/blob/master/index.html)
6 |
7 | ## 옵션
8 | Regular(400), Bold(700), Extra Bold(800), Light(300) 지원됩니다.
9 |
10 | ## 사용방법
11 |
12 | ### link 방식 (권장)
13 |
14 |
15 | ### import 방식
16 | @import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
17 |
18 | ## 적용
19 | ### css (예)
20 | body { font-family: 'NanumSquare', sans-serif; }
21 | .normal { font-weight: 400 }
22 | .bold { font-weight: 700 }
23 | .bolder { font-weight: 800 }
24 | .light { font-weight: 300 }
25 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/ControlStep/ControlStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ControlStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | //scouter.lang.step.StepControl
6 | /*
7 | public String message;
8 | public int code;
9 | */
10 | class ControlStep extends Component {
11 | render() {
12 |
13 | return (
14 |
15 |
18 | MSG
16 | {this.props.row.mainValue} {this.props.row.step.time >= 0 && '#' + this.props.row.step.value + ' ' + this.props.row.step.time + 'ms'}
17 |
15 |
)
19 | }
20 | }
21 |
22 | export default ControlStep;
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/MessageSumStep/MessageSumStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './MessageSumStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 |
6 | //scouter.lang.step.MessageSum
7 | /*
8 | public String message;
9 | public int count;
10 | */
11 | class MessageSumStep extends Component {
12 | render() {
13 | return (
14 | {this.props.row.step.code} {this.props.row.step.message}
18 |
15 |
)
19 | }
20 | }
21 |
22 | export default MessageSumStep;
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/SqlStep/SqlStep.css:
--------------------------------------------------------------------------------
1 | .sql-step .sql-statement {
2 | padding: 10px;
3 | line-height: 140%;
4 | color: #0000C3;
5 | }
6 |
7 | .narrow .sql-step .sql-statement {
8 | padding: 3px 10px;
9 | line-height: 100%;
10 | }
11 |
12 | .sql-step .sql-statement .prefix {
13 | color: darkgreen;
14 | }
15 |
16 | .sql-step .sql-statement .param {
17 | color: #207ce5;
18 | }
19 |
20 | .sql-step .sql-statement {
21 | white-space: nowrap;
22 | }
23 |
24 | .sql-step .sql-statement.formatter {
25 | white-space: pre;
26 | }
27 |
28 | .xlog-steps.wrap .sql-step .sql-statement {
29 | white-space: normal;
30 | word-break: break-all;
31 | }
32 |
33 | .xlog-steps.wrap .sql-step .sql-statement.formatter {
34 | white-space: pre-wrap;
35 | word-break: break-all;
36 | }
37 |
38 | .sql-step .sql-param {
39 | padding: 0 10px 10px;
40 | }
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/Sql2Step/Sql2Step.css:
--------------------------------------------------------------------------------
1 | .sql2-step .sql-statement {
2 | padding: 10px;
3 | line-height: 140%;
4 | color: #0000C3;
5 | }
6 |
7 | .narrow .sql2-step .sql-statement {
8 | padding: 3px 10px;
9 | line-height: 100%;
10 | }
11 |
12 | .sql2-step .sql-statement .prefix {
13 | color: darkgreen;
14 | }
15 |
16 | .sql2-step .sql-statement .param {
17 | color: #207ce5;
18 | }
19 |
20 | .sql2-step .sql-statement {
21 | white-space: nowrap;
22 | }
23 |
24 | .sql2-step .sql-statement.formatter {
25 | white-space: pre;
26 | }
27 |
28 | .xlog-steps.wrap .sql2-step .sql-statement {
29 | white-space: normal;
30 | word-break: break-all;
31 | }
32 |
33 | .xlog-steps.wrap .sql2-step .sql-statement.formatter {
34 | white-space: pre-wrap;
35 | word-break: break-all;
36 | }
37 |
38 | .sql2-step .sql-param {
39 | padding: 0 10px 10px;
40 | }
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | if (typeof Promise === 'undefined') {
4 | // Rejection tracking prevents a common issue where React gets into an
5 | // inconsistent state due to an error, but it gets swallowed by a Promise,
6 | // and the user has no idea what causes React's erratic future behavior.
7 | require('promise/lib/rejection-tracking').enable();
8 | window.Promise = require('promise/lib/es6-extensions.js');
9 | }
10 |
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 |
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 |
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 | require('raf').polyfill(global);
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/FrameProfile/XlogFlow/XlogFlowChart/XlogFlowChart.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import connect from "react-redux/es/connect/connect";
3 | import {withRouter} from "react-router-dom";
4 |
5 | class XlogFlowChart extends React.Component {
6 |
7 | render() {
8 | const {width, height, children} = this.props;
9 | return (
10 |
15 | )
16 | }
17 | }
18 |
19 | // XlogFlowChart.propTypes = {
20 | // // width: PropTypes.number.isRequired,
21 | // // height: PropTypes.number.isRequired,
22 | // // children: PropTypes.node,
23 | // };
24 |
25 | const mapStateToProps = (state) => {
26 | return {
27 | config: state.config
28 | };
29 | };
30 |
31 | XlogFlowChart = connect(mapStateToProps, undefined)(XlogFlowChart);
32 | export default withRouter(XlogFlowChart);
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/MethodSumStep/MethodSumStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './MethodSumStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 |
6 | //scouter.lang.step.MethodSum
7 | /*
8 | public int hash;
9 | public int count;
10 | public long elapsed;
11 | public long cputime;
12 | */
13 | class MethodSumStep extends Component {
14 | render() {
15 | return (
16 | {this.props.row.step.message} {this.props.row.step.count}
18 |
17 |
)
21 | }
22 | }
23 |
24 | export default MethodSumStep;
--------------------------------------------------------------------------------
/src/fonts/Nanum_Square/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {this.props.row.mainValue} {this.props.row.step.count} {this.props.row.step.cputime}ms
20 |
23 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/HashedMessageStep/HashedMessageStep.css:
--------------------------------------------------------------------------------
1 | /* HASHED MESSAGE */
2 | .xlog-steps .hashed-message {
3 |
4 | }
5 |
6 | .xlog-steps .hashed-message .message-content {
7 | color: #28AE7B;
8 | display: table;
9 | width: 100%;
10 | table-layout: fixed;
11 | }
12 |
13 | .xlog-steps .hashed-message .message-content > div {
14 | display: table-cell;
15 | vertical-align: middle;
16 | }
17 |
18 | .xlog-steps .hashed-message .message-content > div.tag {
19 | width: 50px;
20 | text-align: center;
21 | }
22 |
23 | .xlog-steps .hashed-message .message-content span {
24 | padding: 9px 5px;
25 | display: inline-block;
26 | }
27 |
28 | .narrow .xlog-steps .hashed-message .message-content span {
29 | padding: 2px 5px;
30 | }
31 |
32 | .xlog-steps .hashed-message .message-content .type-tag {
33 | background-color: #28AE7B;
34 | color: white;
35 | border-radius: 5px;
36 | padding: 2px 5px;
37 | font-size: 10px;
38 | width: 40px;
39 | box-sizing: border-box;
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/Sql3Step/Sql3Step.css:
--------------------------------------------------------------------------------
1 | .sql3-step .sql-statement {
2 | padding: 10px;
3 | line-height: 140%;
4 | color: #0000C3;
5 | }
6 |
7 | .narrow .sql3-step .sql-statement {
8 | padding: 3px 10px;
9 | line-height: 100%;
10 | }
11 |
12 | .sql3-step .sql-statement .prefix {
13 | color: darkgreen;
14 | }
15 |
16 | .sql3-step .sql-statement .param {
17 | color: #207ce5;
18 | }
19 |
20 | .sql3-step .sql-statement {
21 | white-space: nowrap;
22 | }
23 |
24 | .sql3-step .sql-statement.formatter {
25 | white-space: pre;
26 | }
27 |
28 | .xlog-steps.wrap .sql3-step .sql-statement {
29 | white-space: normal;
30 | word-break: break-all;
31 | }
32 |
33 | .xlog-steps.wrap .sql3-step .sql-statement.formatter {
34 | white-space: pre-wrap;
35 | word-break: break-all;
36 | }
37 |
38 | .sql3-step .sql-param {
39 | /*padding: 0 10px 10px;*/
40 | padding: 0 10px 2px;
41 | }
42 |
43 | .sql3-step .sql-param .narrow {
44 | padding: 0 10px 10px;
45 | }
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/SpanCallStep/SpanCallStep.css:
--------------------------------------------------------------------------------
1 | .spancall-step .main-value {
2 | color: #1a237e;
3 | padding: 9px 5px 0;
4 | font-weight: bold;
5 | }
6 |
7 | .narrow .spancall-step .main-value {
8 | padding: 2px 10px;
9 | }
10 |
11 | .spancall-step .main-value .gray {
12 | color: #AAAAAA;
13 | }
14 |
15 | .spancall-step .main-value.tag {
16 | font-weight: normal;
17 | color: #AAAAAA;
18 | }
19 |
20 | .spancall-step .span-content pre {
21 | font-family: inherit !important;
22 | margin: 0;
23 | }
24 |
25 | .spancall-step .span-content {
26 | margin-top: 10px;
27 | }
28 |
29 | .spancall-step .span-content:last-child {
30 | margin-bottom: 10px;
31 | }
32 |
33 | .spancall-step .span-content .span-title {
34 | padding: 0 5px 0;
35 | background-color: #EEE;
36 | display: inline-block;
37 | margin-left: 5px;
38 | }
39 |
40 | .spancall-step .span-content .span-value {
41 | padding: 2px 5px 0;
42 | }
43 |
44 | .spancall-step .main-value.url:before {
45 | content: "[CALL] ";
46 | }
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/TxNavLink/TxNavLink.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './TxNavLink.css';
3 |
4 | class TxNavLink extends Component {
5 |
6 | click = (txid) => {
7 | this.props.txLinkClick(txid);
8 | };
9 |
10 | render() {
11 | if (this.props.row.step && this.props.row.step.txid) {
12 | return (
13 |
24 |
29 | 기회는 일어나는 것이 아니라 만들어내는 것이다.
25 |기회는 일어나는 것이 아니라 만들어내는 것이다.
26 |기회는 일어나는 것이 아니라 만들어내는 것이다.
27 |기회는 일어나는 것이 아니라 만들어내는 것이다.
28 |
14 | {this.props.row.step && this.props.row.step.txid &&
15 |
21 | );
22 | } else {
23 | return (
24 |
25 | );
26 |
27 | }
28 | }
29 | }
30 |
31 | export default TxNavLink;
32 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/Step/Step.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Step.css';
3 | const indentVal = 10;
4 | class Step extends Component {
5 | render() {
6 | let indent = 0;
7 | if (this.props.applyIndent) {
8 | indent = this.props.indent * indentVal;
9 | }
10 |
11 | return (
12 |
16 | TX
17 | {this.props.row.step.txidAbbr} ({this.props.row.step.txid})
18 |
19 | }
20 | = 5 ? ' has-gab ' : '') + (this.props.showGap ? ' show-gab ' : '')} style={{marginLeft : indent + "px"}} >
13 | {(this.props.showGap && this.props.gap >= 5) &&
)
22 | }
23 | }
24 |
25 | export default Step;
26 |
--------------------------------------------------------------------------------
/src/components/Paper/RangeControl/RealTimeControl/RealTimeControl.styl:
--------------------------------------------------------------------------------
1 | .realtime-controller
2 | display: flex
3 | width: 100%
4 | .time-range
5 | border: 1px
6 | .time-control
7 | display: inline-flex
8 | box-sizing: border-box;
9 | .time-last
10 | .time-value
11 | .time-unit
12 | >select
13 | width: 80px
14 | height: 26px
15 | .time-apply
16 | position: relative
17 | right: 2px
18 | >button
19 | height: 26px
20 | .refresh-every
21 | position: relative
22 | display: inline-flex
23 | background-color : #AAA
24 | .refresh-icon
25 | position: relative
26 | font-size: 14px
27 | margin-top: 6px
28 | padding-left: 3px
29 | .refresh-select
30 | position: relative
31 | left: 4px
32 | >select
33 | width: 50px
34 | height: 26px
35 | input
36 | width: 45px
37 | height: 20px
38 | text-align : center
39 |
40 |
41 | //.meta-info
42 | //.time-range
43 | //.refresh-every
44 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/FrameProfile/XlogFlow/XlogFlow.styl:
--------------------------------------------------------------------------------
1 | .xlog-flow
2 | position: relative
3 | .title
4 | padding: 8px
5 | background-color: #333
6 | color: white
7 | height: 36px
8 | box-sizing: border-box
9 | & span
10 | display: inline-block
11 | padding: 4px
12 | .close-btn
13 | position: absolute
14 | top : 7px
15 | right : 5px
16 | display: inline-block !important
17 | .contents
18 | width: 100%
19 | height: calc(100% - 36px)
20 | overflow-y : hidden
21 | .frame-xlog-flow-content
22 | position: absolute
23 | top: 0
24 | left: 0
25 | right: 0
26 | bottom: 0
27 | background-color: rgba(0, 0, 0, 0.6)
28 | display: table
29 | width: 100%
30 | height: 100%
31 | z-index: 3
32 | & > div
33 | display: table-cell
34 | width: 100%
35 | height: 100%
36 | vertical-align: middle
37 | padding: 0 10px
38 | position: relative
39 | box-sizing: border-box
40 | & > div
41 | background-color: white
42 | height: calc(100% - 60px)
43 | width: 100%
--------------------------------------------------------------------------------
/src/fonts/Nanum_Square/nanumsquare.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'NanumSquare';
3 | font-weight: 400;
4 | src: url(NanumSquareR.eot);
5 | src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
6 | url(NanumSquareR.woff) format('woff'),
7 | url(NanumSquareR.ttf) format('truetype');
8 | }
9 | @font-face {
10 | font-family: 'NanumSquare';
11 | font-weight: 700;
12 | src: url(NanumSquareB.eot);
13 | src: url(NanumSquareB.eot?#iefix) format('embedded-opentype'),
14 | url(NanumSquareB.woff) format('woff'),
15 | url(NanumSquareB.ttf) format('truetype');
16 | }
17 | @font-face {
18 | font-family: 'NanumSquare';
19 | font-weight: 800;
20 | src: url(NanumSquareEB.eot);
21 | src: url(NanumSquareEB.eot?#iefix) format('embedded-opentype'),
22 | url(NanumSquareEB.woff) format('woff'),
23 | url(NanumSquareEB.ttf) format('truetype');
24 | }
25 | @font-face {
26 | font-family: 'NanumSquare';
27 | font-weight: 300;
28 | src: url(NanumSquareL.eot);
29 | src: url(NanumSquareL.eot?#iefix) format('embedded-opentype'),
30 | url(NanumSquareL.woff) format('woff'),
31 | url(NanumSquareL.ttf) format('truetype');
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/ThreadSubmitStep/ThreadSubmitStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ThreadSubmitStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 | //scouter.lang.step.ThreadSubmitStep
7 | /*
8 | public long txid;
9 | public int hash;
10 | public int elapsed;
11 | public int cputime;
12 | public int error;
13 | */
14 | class ThreadSubmitStep extends Component {
15 | render() {
16 | return (
17 |
14 |
}
20 | {this.props.children}
21 |
15 |
19 |
16 |
{this.props.gap} ms
17 |
18 |
18 |
)
23 | }
24 | }
25 |
26 | export default ThreadSubmitStep;
--------------------------------------------------------------------------------
/src/common/idAbbr.js:
--------------------------------------------------------------------------------
1 | import bigInt from 'big-integer';
2 |
3 | const PLUS = 'x';
4 | const MINUS = 'z';
5 |
6 | export const IdAbbr = {
7 | abbr: abbr,
8 | toString32: toString32,
9 | toLong32: toLong32
10 | };
11 |
12 | function abbr(numString) {
13 | if (!numString) {
14 | return "";
15 | }
16 | const number = bigInt(numString);
17 | //Number(numString.substring(Math.max(0, numString.length - 8)));
18 | return toString32(number);
19 | }
20 |
21 | function toString32(num) {
22 | const minus = num < 0;
23 | if (minus) {
24 | let rad32 = MINUS + num.toString(32).replace("-","");
25 | return rad32;
26 |
27 | } else {
28 | let rad32 = PLUS + num.toString(32);
29 | return rad32;
30 | }
31 | }
32 |
33 | function toLong32(str) {
34 | if (!str)
35 | return '0';
36 |
37 | switch (str.charAt(0)) {
38 | case MINUS:
39 | return bigInt("-"+str.substring(1), 32).toString();
40 | case PLUS:
41 | return bigInt(str.substring(1), 32).toString();
42 | default:
43 | return bigInt(str).toString();
44 | }
45 | }
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/src/components/InnerLoading/InnerLoading.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './InnerLoading.css';
3 |
4 | class InnerLoading extends Component {
5 |
6 | shouldComponentUpdate(nextProps, nextState) {
7 | return this.props.visible !== nextProps.visible;
8 | }
9 | componentDidUpdate(prevProps, prevState) {
10 |
11 | if (this.props.visible) {
12 | this.refs.innerLoading.style.display = "table";
13 | this.refs.innerLoading.style.opacity = "1";
14 | } else {
15 | this.refs.innerLoading.style.opacity = "0";
16 | setTimeout(() => {
17 | this.refs.innerLoading.style.display = "none";
18 | }, 500);
19 | }
20 | }
21 |
22 | render() {
23 | return (
24 | {this.props.row.mainValue}
22 |
25 |
32 | );
33 | }
34 | }
35 |
36 | export default InnerLoading;
--------------------------------------------------------------------------------
/docker/default.conf:
--------------------------------------------------------------------------------
1 | server {
2 | listen 80;
3 | server_name localhost;
4 | charset utf-8;
5 |
6 | #charset koi8-r;
7 | #access_log /var/log/nginx/host.access.log main;
8 |
9 | location / {
10 | root /var/www;
11 | index index.html index.htm;
12 | }
13 |
14 | #error_page 404 /404.html;
15 |
16 | # redirect server error pages to the static page /50x.html
17 | #
18 | error_page 500 502 503 504 /50x.html;
19 | location = /50x.html {
20 | root /usr/share/nginx/html;
21 | }
22 |
23 |
24 | location ~* /\.(?!well-known\/)
25 | {
26 | deny all;
27 | }
28 |
29 | # Prevent clients from accessing to backup/config/source files
30 | location ~* (?:\.(?:bak|conf|dist|fla|in[ci]|log|psd|sh|sql|sw[op])|~)$
31 | {
32 | deny all;
33 | }
34 |
35 | #Prevent to log favicon.ico
36 | location = /favicon.ico
37 | {
38 | access_log off;
39 | log_not_found off;
40 | }
41 |
42 | #Prevent to log robots.txt
43 | location = /robots.txt
44 | {
45 | access_log off;
46 | log_not_found off;
47 | }
48 |
49 | }
50 |
51 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/SocketStep/SocketStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './SocketStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 |
7 | //scouter.lang.step.SocketStep
8 | /*
9 | public byte[] ipaddr;
10 | public int port;
11 | public int elapsed;
12 | public int error;
13 | */
14 | class SocketStep extends Component {
15 | render() {
16 |
17 | return (
18 |
26 |
31 |
27 |
28 |
29 |
30 |
19 |
)
26 | }
27 | }
28 |
29 | export default SocketStep;
30 |
--------------------------------------------------------------------------------
/src/components/OldVersion/OldVersion.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './OldVersion.css';
3 | import logo from '../../img/scouter.png';
4 | import logoBlack from '../../img/scouter_black.png';
5 | import {connect} from "react-redux";
6 | import {withRouter} from 'react-router-dom';
7 |
8 | class OldVersion extends Component {
9 |
10 | render() {
11 | return (
12 |
23 | [Connect] {this.props.row.mainValue}:{this.props.row.step.port}
24 |
25 |
14 |
21 |
15 |
19 |
16 | 
17 |
18 | PAPER 2.0 is available only on scout server 2.0 and later.
20 |
22 |
)
27 | }
28 | }
29 |
30 | export default DispatchStep;
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/ApiCallSumStep/ApiCallSumStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ApiCallSumStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 | // scouter.lang.step.ApiCallSum
7 | /*
8 | public int hash;
9 | public int count;
10 | public long elapsed;
11 | public long cputime;
12 | public int error;
13 | public byte opt;
14 | */
15 | class ApiCallSumStep extends Component {
16 | render() {
17 | return (
18 | {this.props.row.step.address} {this.props.row.step.opt}
26 |
19 |
)
24 | }
25 | }
26 |
27 | export default ApiCallSumStep;
--------------------------------------------------------------------------------
/src/components/Topology/Analysis.md:
--------------------------------------------------------------------------------
1 | # 1. component topology data flow
2 | - 데이터 처리 방법을 분석 한다.
3 | ```plantuml
4 | @startuml
5 | actor EndUser
6 |
7 | autonumber
8 | Topology <- React.Component: render
9 | Topology <- React.Component: componentDidMount init Request
10 | note left of Topology
11 | http polling checking
12 | InteractionCounter
13 | MehtodName: getTopology
14 | getTopology = (config, filterMap, user, grouping)
15 | end note
16 | Topology <- React.Component: componentWillReceiveProps render change Request
17 |
18 | Topology <- Topology : update
19 | note left of Topology
20 | 1. objectTypeTopologyMap builder is interactionCounter info
21 | 2. objectTypeTopologyMap builder is outsiede info
22 | 3. topology builder is objectTypeTopologyMap info
23 | 4. topology builder is outsiede info
24 | 5. links builder is topology param
25 | 9. linked ?
26 | 6. nodes builder is topology param
27 | 7. nodes merge
28 | 8. links merge
29 |
30 | // 렌더링 조건
31 | this.setState({
32 | lastUpdateTime: (new Date()).getTime()
33 | });
34 |
35 | // nodes & links 카운트 업데이트 조건 포함
36 | this.props.setTopologyOption({
37 | nodeCount: this.nodes.length,
38 | linkCount: this.links.length
39 | });
40 | end note
41 | @enduml
42 | ```
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/SocketSumStep/SocketSumStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './SocketSumStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 |
7 | //scouter.lang.step.SocketSum
8 | /*
9 | public byte[] ipaddr;
10 | public int port;
11 | public int count;
12 | public long elapsed;
13 | public int error;
14 | */
15 | class SocketSumStep extends Component {
16 | render() {
17 |
18 | return (
19 | {this.props.row.mainValue} {this.props.row.step.count} {this.props.row.step.opt ? this.props.row.step.opt : ''}
23 |
20 |
)
27 | }
28 | }
29 |
30 | export default SocketSumStep;
--------------------------------------------------------------------------------
/src/common/ElementType.js:
--------------------------------------------------------------------------------
1 | export default class ElementType {
2 |
3 | static defaultProps = {
4 | USER : "0",
5 | SERVICE : "1",
6 | API_CALL : "2",
7 | SQL : "3",
8 | DISPATCH : "4",
9 | THREAD : "5",
10 |
11 | toString(value) {
12 | switch(value){
13 | case this.USER : return "USER";
14 | case this.SERVICE : return "SERVICE";
15 | case this.API_CALL : return "API_CALL";
16 | case this.SQL : return "SQL";
17 | case this.DISPATCH : return "DISPATCH";
18 | case this.THREAD : return "THREAD";
19 | default:
20 | return "UNKNOWN";
21 | }
22 | }
23 | ,
24 | toColor(value){
25 | switch(value){
26 | case this.USER : return "#aeaeae";
27 | case this.SERVICE : return "#6e40aa";
28 | case this.API_CALL : return "#417de0";
29 | case this.SQL : return "#1ac7c2";
30 | case this.DISPATCH : return "#c9510c";
31 | case this.THREAD : return "#76b852";
32 | default:
33 | return "#003666";
34 | }
35 | }
36 | };
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/DumpStep/DumpStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './DumpStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 |
6 | //scouter.lang.step.DumpStep
7 | /*
8 | public int[] stacks;
9 | public long threadId;
10 | public String threadName;
11 | public String threadState;
12 | public long lockOwnerId;
13 | public String lockName;
14 | public String lockOwnerName;
15 | */
16 | class DumpStep extends Component {
17 | render() {
18 |
19 | return (
20 |
24 | {this.props.row.step.ipaddr}:{this.props.row.step.port} {this.props.row.step.count}
25 |
26 |
21 |
)
26 | }
27 | }
28 |
29 | export default DumpStep;
30 |
--------------------------------------------------------------------------------
/http/serviceMap.json:
--------------------------------------------------------------------------------
1 | {
2 | "-2608246922300427269" : {
3 | "name" : "/traceability/cross-service/complex{this.props.row.step.threadState} ID:{this.props.row.step.threadId} {this.props.row.step.threadName}
24 | {this.props.row.additionalValueList.length > 0 ? this.props.row.additionalValueList.join('\n') : ''}
25 |
25 |
34 | );
35 | }
36 | }
37 |
38 | export default Loading;
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/ApiCallStep/ApiCallStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ApiCallStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 |
7 | //scouter.lang.step.ApiCallStep
8 | /*
9 | public long txid;
10 | public int hash;
11 | public int elapsed;
12 | public int cputime;
13 | public int error;
14 | //optional
15 | transient public byte opt;
16 | public String address;
17 | */
18 | class ApiCallStep extends Component {
19 | render() {
20 | return (
21 |
26 |
33 |
27 |
28 |
29 |
30 |
32 | Loading...
31 |
22 |
)
27 | }
28 | }
29 |
30 | export default ApiCallStep;
31 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/FrameProfile/XlogFlow/XlogFlow.css:
--------------------------------------------------------------------------------
1 | .xlog-flow {
2 | position: relative;
3 | }
4 | .xlog-flow .title {
5 | padding: 8px;
6 | background-color: #333;
7 | color: #fff;
8 | height: 36px;
9 | box-sizing: border-box;
10 | }
11 | .xlog-flow .title span {
12 | display: inline-block;
13 | padding: 4px;
14 | }
15 | .xlog-flow .close-btn {
16 | position: absolute;
17 | top: 7px;
18 | right: 5px;
19 | display: inline-block !important;
20 | }
21 | .xlog-flow .contents {
22 | width: 100%;
23 | height: calc(100% - 36px);
24 | overflow-y: hidden;
25 | }
26 | .xlog-flow .frame-xlog-flow-content {
27 | position: absolute;
28 | top: 0;
29 | left: 0;
30 | right: 0;
31 | bottom: 0;
32 | background-color: rgba(0,0,0,0.6);
33 | display: table;
34 | width: 100%;
35 | height: 100%;
36 | z-index: 3;
37 | }
38 | .xlog-flow .frame-xlog-flow-content > div {
39 | display: table-cell;
40 | width: 100%;
41 | height: 100%;
42 | vertical-align: middle;
43 | padding: 0;
44 | position: relative;
45 | box-sizing: border-box;
46 | }
47 | .xlog-flow .frame-xlog-flow-content > div > div {
48 | background-color: #fff;
49 | height: 80%;
50 | margin: 0 40px;
51 | }
52 |
53 | @media screen and (max-width: 800px) {
54 | .xlog-flow .frame-xlog-flow-content > div > div {
55 | height: 80%;
56 | margin: 0;
57 | }
58 | }
--------------------------------------------------------------------------------
/public/css/react-grid-layout-styles.css:
--------------------------------------------------------------------------------
1 | .react-grid-layout {
2 | position: relative;
3 | transition: height 200ms ease;
4 | }
5 |
6 | .react-grid-item {
7 | transition: all 200ms ease;
8 | transition-property: left, top;
9 | }
10 |
11 | .react-grid-item.cssTransforms {
12 | transition-property: transform;
13 | }
14 |
15 | .react-grid-item.resizing {
16 | z-index: 1;
17 | will-change: width, height;
18 | }
19 |
20 | .react-grid-item.react-draggable-dragging {
21 | transition: none;
22 | z-index: 3;
23 | will-change: transform;
24 | }
25 |
26 | .react-grid-item.react-grid-placeholder {
27 | background: red;
28 | opacity: 0.2;
29 | transition-duration: 100ms;
30 | z-index: 2;
31 | -webkit-user-select: none;
32 | -moz-user-select: none;
33 | -ms-user-select: none;
34 | -o-user-select: none;
35 | user-select: none;
36 | }
37 |
38 | .react-grid-item > .react-resizable-handle {
39 | position: absolute;
40 | width: 20px;
41 | height: 20px;
42 | bottom: 0;
43 | right: 0;
44 | cursor: se-resize;
45 | background: none;
46 | }
47 |
48 | .react-grid-item > .react-resizable-handle::after {
49 | content: "";
50 | position: absolute;
51 | right: 3px;
52 | bottom: 3px;
53 | width: 5px;
54 | height: 5px;
55 | border-right: 1px dotted rgba(0, 0, 0, 0.6);
56 | border-bottom: 1px dotted rgba(0, 0, 0, 0.6);
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/SqlSumStep/SqlSumStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './SqlSumStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 |
7 | //scouter.lang.step.SqlSum
8 | /*
9 | public int hash;
10 | public int count;
11 | public long elapsed;
12 | public long cputime;
13 | public int error;
14 |
15 | public String param;
16 | public String param_error;
17 | */
18 | class SqlSumStep extends Component {
19 | render() {
20 | return (
21 | {String(this.props.row.step.async) === "1" ? '[async]' : ''}{this.props.row.mainValue} {String(this.props.row.step.opt) === '1' ? '[addr] ' + this.props.row.step.address : ''}
26 |
22 |
)
30 | }
31 | }
32 |
33 | export default SqlSumStep;
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/ApiCall2Step/ApiCall2Step.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ApiCall2Step.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 | //scouter.lang.step.ApiCallStep
7 | /*
8 | public long txid;
9 | public int hash;
10 | public int elapsed;
11 | public int cputime;
12 | public int error;
13 | //optional
14 | transient public byte opt;
15 | public String address;
16 | */
17 |
18 | //scouter.lang.step.ApiCallStep2
19 | /*
20 | public byte async;
21 | */
22 | class ApiCall2Step extends Component {
23 | render() {
24 | return (
25 | {this.props.row.mainValue} {this.props.row.step.count} {this.props.row.step.cputime}ms
26 | [{this.props.row.step.param}]
27 | [{this.props.row.step.param_error}]
28 |
29 |
26 |
)
31 | }
32 | }
33 |
34 | export default ApiCall2Step;
35 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/MethodStep/MethodStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './MethodStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 |
6 | // scouter.lang.step.MethodStep
7 | /*
8 | public int hash;
9 | public int elapsed;
10 | public int cputime;
11 | */
12 | class MethodStep extends Component {
13 | render() {
14 | const fullMethod = this.props.row.mainValue;
15 | const parts = fullMethod.split('.');
16 | let methodNameSimple = fullMethod;
17 | if(parts.length >= 2) {
18 | const methodName = parts[parts.length - 1];
19 | const bracePos = methodName.indexOf('(');
20 | if(bracePos > 0) {
21 | methodNameSimple = parts[parts.length - 2] + "#" + methodName.substring(0, bracePos) + "()";
22 | }
23 | }
24 |
25 | return (
26 | {String(this.props.row.step.async) === "1" ? '[async]' : ''}{this.props.row.mainValue} {String(this.props.row.step.opt) === '1' ? '[addr] ' + this.props.row.step.address : ''}
30 |
27 |
31 | )
32 | }
33 | }
34 |
35 | export default MethodStep;
36 |
--------------------------------------------------------------------------------
/src/components/ContentWrapper/ContentWrapper.css:
--------------------------------------------------------------------------------
1 | div#root {
2 | height: 100%;
3 | padding: 0;
4 | margin: 0;
5 | }
6 |
7 | div#root > div {
8 | height: 100%;
9 | }
10 |
11 | article.content-wrapper {
12 | height: 100%;
13 | width: calc(100% - 40px);
14 | margin-left: 40px;
15 | transition: all 0.3s;
16 | }
17 |
18 | article.content-wrapper.max.pinned {
19 | margin-left: 400px;
20 | width: calc(100% - 400px);
21 | transition: all 0.3s;
22 | }
23 |
24 | .content-wrapper > div {
25 | height: 100%;
26 | }
27 |
28 | .content-wrapper-enter {
29 | opacity: 0.01;
30 | transition: opacity 0.1s ease-in;
31 | }
32 |
33 | .content-wrapper-enter.content-wrapper-enter-active {
34 | opacity: 1;
35 | }
36 |
37 | .content-wrapper-leave {
38 | opacity: 1;
39 | transition: opacity 0.1s ease-in;
40 | }
41 |
42 | .content-wrapper-leave.content-wrapper-leave-active {
43 | opacity: 0.01;
44 | }
45 |
46 | @media screen and (max-width: 800px) {
47 | article.content-wrapper.min {
48 | height: 100%;
49 | width: 100%;
50 | margin-left: 0;
51 | transition: all 0.3s;
52 | }
53 |
54 | article.content-wrapper.max {
55 | height: 100%;
56 | width: 100%;
57 | margin-left: 0;
58 | transition: all 0.3s;
59 | }
60 |
61 | article.content-wrapper.max.pinned {
62 | height: 100%;
63 | width: 100%;
64 | margin-left: 0;
65 | transition: all 0.3s;
66 | }
67 | }
--------------------------------------------------------------------------------
/src/components/Paper/RangeControl/RealTimeControl/RealTimeControl.css:
--------------------------------------------------------------------------------
1 | .realtime-controller {
2 | display: flex;
3 | width: 100%;
4 | }
5 | .realtime-controller .time-range {
6 | border: 1px;
7 | }
8 | .realtime-controller .time-range .time-control {
9 | display: inline-flex;
10 | box-sizing: border-box;
11 | }
12 | .realtime-controller .time-range .time-control .time-last >select,
13 | .realtime-controller .time-range .time-control .time-value >select,
14 | .realtime-controller .time-range .time-control .time-unit >select {
15 | width: 80px;
16 | height: 26px;
17 | }
18 | .realtime-controller .time-range .time-control .time-apply {
19 | position: relative;
20 | right: 2px;
21 | }
22 | .realtime-controller .time-range .time-control .time-apply >button {
23 | height: 26px;
24 | }
25 | .realtime-controller .time-range .time-control .refresh-every {
26 | position: relative;
27 | display: inline-flex;
28 | background-color: #aaa;
29 | }
30 | .realtime-controller .time-range .time-control .refresh-every .refresh-icon {
31 | position: relative;
32 | font-size: 14px;
33 | margin-top: 6px;
34 | padding-left: 3px;
35 | }
36 | .realtime-controller .time-range .time-control .refresh-every .refresh-select {
37 | position: relative;
38 | left: 4px;
39 | }
40 | .realtime-controller .time-range .time-control .refresh-every .refresh-select >select {
41 | width: 50px;
42 | height: 26px;
43 | }
44 | .realtime-controller input {
45 | width: 45px;
46 | height: 20px;
47 | text-align: center;
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/ParameterizedMessageStep/ParameterizedMessageStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ParameterizedMessageStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 |
5 | //scouter.lang.step.ParameterizedMessageStep
6 | /*
7 | private static char delimETX = 3;
8 |
9 | private int hash;
10 | private int elapsed = -1;
11 | private byte level = 0; //0:debug, 1:info, 2:warn, 3:error
12 | private String paramString;
13 | */
14 | class ParameterizedMessageStep extends Component {
15 | render() {
16 | let level = "";
17 | if (Number(this.props.row.step.level) === 0) {
18 | level = "DEBUG";
19 | }
20 |
21 | if (Number(this.props.row.step.level) === 1) {
22 | level = "INFO";
23 | }
24 |
25 | if (Number(this.props.row.step.level) === 2) {
26 | level = "WARN";
27 | }
28 |
29 | if (Number(this.props.row.step.level) === 3) {
30 | level = "ERROR";
31 | }
32 | return (
33 | {methodNameSimple} [{fullMethod}]
30 |
34 |
)
37 | }
38 | }
39 |
40 | export default ParameterizedMessageStep;
41 |
--------------------------------------------------------------------------------
/src/components/Confirm/Confirm.css:
--------------------------------------------------------------------------------
1 | .confirm-message {
2 | background-color: #fff;
3 | text-align: center;
4 | }
5 | .message-content-layout {
6 | max-width: 500px;
7 | margin: 0 auto;
8 | text-align: center;
9 | }
10 | .message-content-layout .message-indexer {
11 | padding: 0 0 10px 0;
12 | font-size: 16px;
13 | }
14 | .message-content-layout .message-indexer-holder {
15 | height: 20px;
16 | width: 100%;
17 | }
18 | .message-content-layout > .message-content {
19 | display: table;
20 | width: 100%;
21 | table-layout: fixed;
22 | min-height: 100px;
23 | padding: 0px;
24 | }
25 | .message-content-layout > .message-content > div {
26 | display: table-cell;
27 | vertical-align: middle;
28 | }
29 | .message-content-layout > .message-content > .center-message {
30 | padding: 0px 50px;
31 | color: #333;
32 | }
33 | .message-content-layout > .message-content > .center-message .message-title {
34 | padding: 0px 5px;
35 | font-weight: bold;
36 | }
37 | .message-content-layout > .message-content > .center-message .message-title > span {
38 | padding: 10px 15px;
39 | display: inline-block;
40 | color: #333;
41 | }
42 | .message-content-layout > .message-content > .center-message .message-title > i {
43 | color: #333;
44 | padding: 3px 5px;
45 | font-size: 17px;
46 | }
47 | .message-content-layout > .message-content > .center-message .center-message-content {
48 | padding: 5px;
49 | }
50 | .message-btns {
51 | padding: 15px;
52 | }
53 | .message-btns button {
54 | cursor: pointer;
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/ThreadCallPossibleStep/ThreadCallPossibleStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ThreadCallPossibleStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 |
6 | //scouter.lang.step.ThreadCallPossibleStep
7 | /*
8 | public long txid;
9 | public int hash;
10 | public int elapsed;
11 | //0 - none thread dispatching, 1 - thread dispatching
12 | public byte threaded;
13 | public String nameTemp;
14 | */
15 | class ThreadCallPossibleStep extends Component {
16 | render() {
17 |
18 | let status = "";
19 | if (Number(this.props.row.step.threaded) === 0) {
20 | status = null;
21 | }
22 |
23 | if (Number(this.props.row.step.threaded) === 1) {
24 | status = "[THREAD DISPATCHING]";
25 | }
26 |
27 | if(status) {
28 | return (
29 | {level && level + "]"}{this.props.row.mainValue}
36 |
30 |
)
34 | } else {
35 | return (
36 |
37 | )
38 | }
39 | }
40 | }
41 |
42 | export default ThreadCallPossibleStep;
43 |
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import ContentWrapper from './ContentWrapper/ContentWrapper';
2 | import Message from './Message/Message';
3 | import Overlay from './Overlay/Overlay';
4 | import Loading from './Loading/Loading';
5 | import RequestBar from './RequestBar/RequestBar';
6 | import Menu from './Menu/Menu';
7 | import Login from './Login/Login';
8 | import Box from './Box/Box';
9 | import Paper from './Paper/Paper';
10 | import BoxConfig from './Paper/BoxConfig/BoxConfig';
11 | import ClockBox from './Paper/ClockBox/ClockBox';
12 | import DiskUsage from './Paper/DiskUsage/DiskUsage';
13 | import XLogBar from './Paper/XLogBar/XLogBar';
14 | import EmptyBox from './Paper/EmptyBox/EmptyBox';
15 | import PaperControl from './Paper/PaperControl/PaperControl';
16 | import Settings from './Settings/Settings';
17 | import InstanceSelector from './Menu/InstanceSelector/InstanceSelector';
18 | import XLogFilter from './Paper/XLogFilter/XLogFilter';
19 | import Logo from './Logo/Logo';
20 | import ObjectSelector from './ObjectSelector/ObjectSelector';
21 | import SimpleSelector from './SimpleSelector/SimpleSelector';
22 |
23 | export {
24 | ContentWrapper,
25 | Message,
26 | Overlay,
27 | Loading,
28 | RequestBar,
29 | Menu,
30 | Login,
31 | Box,
32 | Paper,
33 | BoxConfig,
34 | ClockBox,
35 | DiskUsage,
36 | XLogBar,
37 | EmptyBox,
38 | PaperControl,
39 | Settings,
40 | InstanceSelector,
41 | XLogFilter,
42 | Logo,
43 | ObjectSelector,
44 | SimpleSelector
45 | };
--------------------------------------------------------------------------------
/src/components/Paper/ClockBox/ClockBox.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './ClockBox.css';
3 | import Clock from 'react-live-clock';
4 |
5 | class ClockBox extends Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | fontSize: 30
11 | };
12 | }
13 |
14 | resize = () => {
15 | let fontSize = 30;
16 | if (this.refs.clockBox) {
17 | let width = this.refs.clockBox.offsetWidth;
18 | if (width < 200) {
19 | fontSize = 16;
20 | } else if (width < 300) {
21 | fontSize = 20;
22 | } else if (width < 500) {
23 | fontSize = 24;
24 | }
25 |
26 | if (this.state.fontSize !== fontSize) {
27 | this.setState({
28 | fontSize: fontSize
29 | });
30 | }
31 | }
32 | };
33 |
34 | componentDidUpdate() {
35 | this.resize();
36 | }
37 |
38 | componentDidMount() {
39 | this.resize();
40 | }
41 |
42 | render() {
43 | return (
44 | {status} {this.props.row.mainValue}
33 |
45 |
50 | );
51 | }
52 | }
53 |
54 | export default ClockBox;
55 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/Method2Step/Method2Step.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Method2Step.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import Error from "../Error/Error";
6 |
7 | // scouter.lang.step.Method2Step
8 | /*
9 | //MethodStep
10 | public int hash;
11 | public int elapsed;
12 | public int cputime;
13 |
14 | //Method2Step
15 | public int error;
16 | */
17 | class Method2Step extends Component {
18 | render() {
19 | const fullMethod = this.props.row.mainValue;
20 | const parts = fullMethod.split('.');
21 | let methodNameSimple = fullMethod;
22 | if(parts.length >= 2) {
23 | const methodName = parts[parts.length - 1];
24 | const bracePos = methodName.indexOf('(');
25 | if(bracePos > 0) {
26 | methodNameSimple = parts[parts.length - 2] + "#" + methodName.substring(0, bracePos) + "()";
27 | }
28 | }
29 |
30 | return (
31 |
46 |
47 |
48 | {this.props.box.values.timezone}
49 |
32 |
37 | )
38 | }
39 | }
40 |
41 | export default Method2Step;
42 |
--------------------------------------------------------------------------------
/src/components/Paper/XLogBar/XLogBar.css:
--------------------------------------------------------------------------------
1 | .xlog-bar {
2 | padding: 10px;
3 | box-sizing: border-box;
4 | height: 100%;
5 | position: relative;
6 | overflow: hidden;
7 | border-radius: 0 0 4px 4px;
8 | }
9 |
10 | .xlog-bar > div {
11 | display: inline-block;
12 | width: 100px;
13 | height: 100%;
14 | position: absolute;
15 | right : -100px;
16 | top : 0;
17 | background-color: #499DF5;
18 | opacity: 0.6;
19 | z-index: 1
20 | }
21 |
22 | .xlog-bar > div.has-error {
23 | background-color: #CC1100;
24 | }
25 |
26 | .xlog-bar .request-count {
27 | position: absolute;
28 | width: 100%;
29 | height: 100%;
30 | top : 0;
31 | left : 0;
32 | display: table;
33 | background-color: transparent;
34 | opacity: 1;
35 | z-index: 4;
36 | }
37 |
38 | .xlog-bar .request-count > div {
39 | display: table-cell;
40 | width: 100%;
41 | height: 100%;
42 | vertical-align: middle;
43 | text-align: center;
44 | font-size: 30px;
45 | position: relative;
46 | }
47 |
48 | .xlog-bar .request-count .request-history-count {
49 | display: inline-block;
50 | margin: 0 5px;
51 | }
52 |
53 | .xlog-bar .request-history-count-list {
54 | font-size: 30px;
55 | }
56 |
57 | .xlog-bar .request-count .request-history-count.step-1 {
58 |
59 | }
60 |
61 | .xlog-bar .request-count .request-history-count.step-2 {
62 | opacity: 0.8;
63 | }
64 |
65 | .xlog-bar .request-count .request-history-count.step-3 {
66 | opacity: 0.6;
67 | }
68 |
69 | .xlog-bar .request-count .request-history-count.step-4 {
70 | opacity: 0.4;
71 | }
72 |
73 | .xlog-bar .request-count .request-history-count.step-5 {
74 | opacity: 0.2;
75 | }
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------
/src/components/Paper/Visitor/Visitor.css:
--------------------------------------------------------------------------------
1 | .visitor {
2 | position: relative;
3 | text-align: center;
4 | }
5 |
6 | .visitor .axix-y {
7 | position: absolute;
8 | top: 0;
9 | font-size: 10px;
10 | }
11 |
12 | .visitor .axix-y.left {
13 | left: 0;
14 | }
15 |
16 | .visitor .axix-y.right {
17 | right: 0;
18 | }
19 |
20 | .visitor .axix-y > div {
21 | width: 100%;
22 | height: 12px;
23 | }
24 |
25 | .visitor .axix-y .top {
26 | position: absolute;
27 | top: 0;
28 | }
29 |
30 | .visitor .axix-y .middle {
31 | position: absolute;
32 | top: calc(50% - 6px);
33 | }
34 |
35 | .visitor .axix-y .bottom {
36 | position: absolute;
37 | bottom: 0;
38 | }
39 |
40 | .visitor-line {
41 | fill: none;
42 | stroke: steelblue;
43 | stroke-width: 2px;
44 | }
45 |
46 | .visitor .visitor-numbers {
47 | position: absolute;
48 | top: 0;
49 | left: 0;
50 | bottom: 0;
51 | width: 100%;
52 | height: 100%;
53 | font-size: 30px;
54 | }
55 |
56 | .visitor .visitor-numbers.small {
57 | font-size: 20px;
58 | }
59 |
60 | .visitor .visitor-numbers > div {
61 | display: table;
62 | width: 100%;
63 | height: 100%;
64 | }
65 |
66 | .visitor .visitor-numbers > div > div {
67 | display: table-cell;
68 | width: 100%;
69 | height: 100%;
70 | vertical-align: middle;
71 | }
72 |
73 | .visitor .no-realtime-metric {
74 | text-align: center;
75 | height: 100%;
76 | position: absolute;
77 | width: 100%;
78 |
79 | }
80 |
81 | .visitor .no-realtime-metric > div {
82 | display: table;
83 | width: 100%;
84 | height: 100%;
85 | }
86 |
87 | .visitor .no-realtime-metric > div > div {
88 | display: table-cell;
89 | vertical-align: middle;
90 | width: 100%;
91 | height: 100%;
92 | }
--------------------------------------------------------------------------------
/src/components/Paper/DiskUsage/DiskUsage.css:
--------------------------------------------------------------------------------
1 | .disk-usage-list {
2 | text-align: left;
3 | overflow-y: auto;
4 | height: 100%;
5 | }
6 |
7 | .disk-usage-list > div.row {
8 | display: table;
9 | text-align: left;
10 | font-size: 9px;
11 | width: 100%;
12 | }
13 |
14 | .disk-usage-list > div.row.table-title {
15 | display: table;
16 | background-color: #26466d;
17 | background-color: #F2F2F2;
18 | text-align: left;
19 | font-size: 10px;
20 | position: sticky;
21 | top: 0;
22 | }
23 |
24 | .disk-usage-list > div > span {
25 | display: table-cell;
26 | text-align: left;
27 | line-height: 100%;
28 | vertical-align: middle;
29 | white-space: pre-wrap;
30 | padding: 10px;
31 | border-bottom: 1px solid #CCC;
32 | }
33 | .disk-usage-list > div.disk-retrieve{
34 | padding: 4px 4px 4px 10px;
35 | background-color: #26466d;
36 | background-color: #F2F2F2;
37 | border-bottom: 1px solid #CCC;
38 | font-size: 10px;
39 | }
40 | .disk-usage-list > div > span.objName {
41 | width: 30%;
42 | }
43 | .disk-usage-list > div > span.diskDevice {
44 | width: 15%;
45 | }
46 |
47 | .disk-usage-list > div > span.diskMount {
48 | width: 15%;
49 | }
50 |
51 | .disk-usage-list > div > span.diskUsed {
52 | width: 15%;
53 | }
54 |
55 | .disk-usage-list > div > span.diskTotal {
56 | width: 15%;
57 | }
58 |
59 | .disk-usage-list > div > span.diskUsage {
60 | width: 10%;
61 | }
62 |
63 | .disk-usage-list > div.header > span {
64 | border-bottom: none;
65 | }
66 |
67 | .disk-usage-list .no-data {
68 | text-align: center;
69 | height: 100%;
70 | display: table;
71 | width: 100%;
72 | font-size: 10px;
73 | }
74 |
75 | .disk-usage-list .no-data > div {
76 | display: table-cell;
77 | width: 100%;
78 | height: 100%;
79 | vertical-align: middle;
80 | }
--------------------------------------------------------------------------------
/src/components/SimpleSelector/SimpleSelector.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './SimpleSelector.css';
3 |
4 | class SimpleSelector extends Component {
5 |
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | open : false
10 | };
11 | }
12 |
13 | toggleOpen = () => {
14 | this.setState({
15 | open : !this.state.open
16 | })
17 | };
18 |
19 | onChange = (inx) => {
20 | this.props.onChange(inx);
21 | this.setState({
22 | open : false
23 | });
24 | };
25 |
26 | render() {
27 | let selectedItem = this.props.list[this.props.selected];
28 | return (
29 | {methodNameSimple} [{fullMethod}]
36 |
30 | {this.state.open && }
31 |
46 | );
47 | }
48 | }
49 |
50 | export default SimpleSelector;
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/ProfileList/ProfileList.css:
--------------------------------------------------------------------------------
1 | .xlog-profile-list {
2 | width: 100%;
3 | display: table;
4 | text-align: left;
5 | }
6 |
7 | .xlog-profile-list > div.row {
8 | display: table-row;
9 | cursor: pointer;
10 | }
11 |
12 | .xlog-profile-list > div.row.async {
13 | color: #AAAAAA;
14 | }
15 |
16 | .xlog-profile-list > div.row.error {
17 | color: #FF030D;
18 | }
19 |
20 | .xlog-profile-list > div.row.error.async {
21 | color: #FF8787;
22 | }
23 |
24 | .xlog-profile-list > div.row.active {
25 | background-color: #26466d;
26 | color: white;
27 | }
28 |
29 | .xlog-profile-list > div.row.error.active {
30 | color: #FF82AB;
31 | }
32 |
33 | .xlog-profile-list > div:hover {
34 | background-color: rgba(0, 0, 0, 0.1);
35 | }
36 |
37 | .xlog-profile-list > div.header.row {
38 | background-color: #F2F2F2;
39 | }
40 |
41 | .xlog-profile-list > div:first-child > span {
42 | border-top: 1px solid #CCC;
43 | }
44 |
45 | .xlog-profile-list > div.header:first-child > span {
46 | border-top: none;
47 | }
48 |
49 | .xlog-profile-list > div.header.row.fixed > span {
50 | position: sticky;
51 | top: 0;
52 | background-color: #F2F2F2;
53 | }
54 |
55 | .xlog-profile-list > div > span {
56 | display: table-cell;
57 | line-height: 100%;
58 | vertical-align: middle;
59 | white-space: nowrap;
60 | padding: 10px;
61 | border-bottom: 1px solid #CCC;
62 | }
63 |
64 | .xlog-profile-list > div.header > span {
65 | border-bottom: none;
66 | }
67 |
68 | .xlog-profile-list > div > span.apicallCount,
69 | .xlog-profile-list > div > span.apicallTime,
70 | .xlog-profile-list > div > span.elapsed,
71 | .xlog-profile-list > div > span.cpu,
72 | .xlog-profile-list > div > span.queuingTime,
73 | .xlog-profile-list > div > span.sqlCount,
74 | .xlog-profile-list > div > span.sqlTime,
75 | .xlog-profile-list > div > span.allocatedMemory,
76 | .xlog-profile-list > div > span.hasDump {
77 | text-align: right;
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/SqlStep/SqlStep.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './SqlStep.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import sqlFormatter from "sql-formatter";
6 | import Error from "../Error/Error";
7 | //scouter.lang.step.SqlStep
8 | /*
9 | //scouter.lang.step.SqlStep
10 | public int hash;
11 | public int elapsed;
12 | public int cputime;
13 | public String param;
14 | public int error;
15 | */
16 | class SqlStep extends Component {
17 | render() {
18 |
19 | let sql = "";
20 |
21 | if (this.props.bind) {
22 | let params = this.props.row.step.param.split(",");
23 | for (let i = 0; i < params.length; i++) {
24 | params[i] = "" + params[i] + "";
25 | }
26 | sql = sqlFormatter.format(this.props.row.mainValue, {
27 | params: params,
28 | indent: " "
29 | });
30 | } else {
31 | sql = sqlFormatter.format(this.props.row.mainValue, {
32 | indent: " "
33 | });
34 | }
35 |
36 | sql = 'SQL' + sql;
37 |
38 | return (
39 |
32 |
35 | {this.state.open &&
36 | {selectedItem ? selectedItem.name : this.props.emptyMessage}
33 |
34 |
37 |
}
45 | -
38 | {this.props.list.map((item, inx) => {
39 | return (
40 |
- {item.name} 41 | ) 42 | })} 43 |
40 |
)
46 | }
47 | }
48 |
49 | export default SqlStep;
--------------------------------------------------------------------------------
/src/components/Paper/Resizable.css:
--------------------------------------------------------------------------------
1 | .react-grid-item {
2 | background-color: white;
3 | color: #333;
4 | border-radius: 4px;
5 | border: 1px solid rgba(0, 0, 0, 0.5);
6 | }
7 |
8 | .react-resizable {
9 | position: relative;
10 | }
11 |
12 | .react-resizable-handle {
13 | position: absolute;
14 | width: 12px !important;
15 | height: 12px !important;
16 | bottom: 0;
17 | right: 0;
18 | background-origin: content-box;
19 | box-sizing: border-box;
20 | cursor: se-resize;
21 | background-color: transparent;
22 | border-radius: 0 0 4px 0;
23 | }
24 |
25 | .react-grid-layout {
26 | position: relative;
27 | transition: height 200ms ease;
28 | }
29 |
30 | .react-grid-item {
31 | transition: all 200ms ease;
32 | transition-property: left, top;
33 | }
34 |
35 | .react-grid-item.cssTransforms {
36 | transition-property: transform;
37 | }
38 |
39 | .react-grid-item.resizing {
40 | z-index: 1;
41 | will-change: width, height;
42 | }
43 |
44 | .react-grid-item.react-draggable-dragging {
45 | transition: none;
46 | z-index: 3;
47 | will-change: transform;
48 | }
49 |
50 | .react-grid-item.react-grid-placeholder {
51 | background: red;
52 | opacity: 0.2;
53 | transition-duration: 100ms;
54 | z-index: 2;
55 | -webkit-user-select: none;
56 | -moz-user-select: none;
57 | -ms-user-select: none;
58 | -o-user-select: none;
59 | user-select: none;
60 | }
61 |
62 | .react-grid-item > .react-resizable-handle {
63 | position: absolute;
64 | width: 20px;
65 | height: 20px;
66 | bottom: 0;
67 | right: 0;
68 | cursor: se-resize;
69 | z-index: 100;
70 | }
71 |
72 | _.react-grid-item > .react-resizable-handle::after {
73 | content: '';
74 | border: none !important;
75 | width: 3px;
76 | height: 3px;
77 | box-sizing: border-box;
78 | position: absolute;
79 | bottom: 3px;
80 | right: 3px;
81 | background-color: white;
82 | padding: 0;
83 | border-radius: 50%;
84 | }
--------------------------------------------------------------------------------
/src/components/IconImage/IconImage.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './IconImage.css';
3 |
4 | import java from '../../img/icons/java.png';
5 | import kafka from '../../img/icons/kafka.png';
6 | import mysql from '../../img/icons/mysql.png';
7 | import nginx from '../../img/icons/nginx.png';
8 | import redis from '../../img/icons/redis.png';
9 | import tomcat from '../../img/icons/tomcat.png';
10 | import linux from '../../img/icons/linux.png';
11 | import jetty from '../../img/icons/jetty.png';
12 | import object from '../../img/icons/cube.png';
13 |
14 | class IconImage extends Component {
15 |
16 | render() {
17 | let icon = object;
18 | switch (this.props.icon) {
19 | case "tomcat" : {
20 | icon = tomcat;
21 | break;
22 | }
23 | case "java" : {
24 | icon = java;
25 | break;
26 | }
27 |
28 | case "kafka" : {
29 | icon = kafka;
30 | break;
31 | }
32 |
33 | case "mysql" : {
34 | icon = mysql;
35 | break;
36 | }
37 |
38 | case "nginx" : {
39 | icon = nginx;
40 | break;
41 | }
42 |
43 | case "redis" : {
44 | icon = redis;
45 | break;
46 | }
47 |
48 | case "linux" : {
49 | icon = linux;
50 | break;
51 | }
52 |
53 | case "jetty" : {
54 | icon = jetty;
55 | break;
56 | }
57 |
58 | default : {
59 | icon = object;
60 | break;
61 | }
62 | }
63 |
64 | return (
65 | [{this.props.row.step.param}]
45 |
66 |
70 |
71 | );
72 | }
73 | }
74 |
75 | export default IconImage;
--------------------------------------------------------------------------------
/src/components/Paper/XLog/Profiler/SingleProfile/Sql2Step/Sql2Step.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Sql2Step.css';
3 | import StepGeneral from "../StepGeneral/StepGeneral";
4 | import TxNavLink from "../TxNavLink/TxNavLink";
5 | import sqlFormatter from "sql-formatter";
6 | import Error from "../Error/Error";
7 | //scouter.lang.step.SqlStep3
8 | /*
9 | //scouter.lang.step.SqlStep
10 | public int hash;
11 | public int elapsed;
12 | public int cputime;
13 | public String param;
14 | public int error;
15 |
16 | //scouter.lang.step.SqlStep2
17 | public byte xtype;
18 | getXtypePrefix
19 |
20 | */
21 | class Sql2Step extends Component {
22 | render() {
23 |
24 | let sql = "";
25 |
26 | if (this.props.bind) {
27 | let params = this.props.row.step.param.split(",");
28 | for (let i = 0; i < params.length; i++) {
29 | params[i] = "" + params[i] + "";
30 | }
31 | sql = sqlFormatter.format(this.props.row.mainValue, {
32 | params: params,
33 | indent: " "
34 | });
35 | } else {
36 | sql = sqlFormatter.format(this.props.row.mainValue, {
37 | indent: " "
38 | });
39 | }
40 |
41 | sql = '' + this.props.row.step.xtypePrefix + '' + sql;
42 |
43 | return (
44 |
67 | 
68 |
69 |
45 |
)
51 | }
52 | }
53 |
54 | export default Sql2Step;
--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const url = require('url');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebookincubator/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 |
14 | function ensureSlash(path, needsSlash) {
15 | const hasSlash = path.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return path.substr(path, path.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${path}/`;
20 | } else {
21 | return path;
22 | }
23 | }
24 |
25 | const getPublicUrl = appPackageJson =>
26 | envPublicUrl || require(appPackageJson).homepage;
27 |
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right
19 |
28 | [{this.props.row.step.param}]
50 |