diff --git a/console/src/components/404/Styles.scss b/console/src/components/404/PageNotFound.scss
similarity index 99%
rename from console/src/components/404/Styles.scss
rename to console/src/components/404/PageNotFound.scss
index 26791f5a0b8..55fd66862b7 100644
--- a/console/src/components/404/Styles.scss
+++ b/console/src/components/404/PageNotFound.scss
@@ -14,13 +14,16 @@
.message {
padding: 50px 20%;
}
+
.message h1 {
font-size: 54px;
font-weight: bold;
}
+
.message p {
margin-left: 15px;
}
+
.message p > a {
font-weight: bold;
}
@@ -29,12 +32,14 @@
.header {
background: #eee;
+
h2 {
margin: 0;
padding: 26px;
float: left;
line-height: 26px;
}
+
.nav {
padding: 20px;
float: left;
diff --git a/console/src/components/ApiExplorer/ApiExplorer.scss b/console/src/components/ApiExplorer/ApiExplorer.scss
index 9d763e61127..a750047496e 100644
--- a/console/src/components/ApiExplorer/ApiExplorer.scss
+++ b/console/src/components/ApiExplorer/ApiExplorer.scss
@@ -1,64 +1,73 @@
@import "../Common/Common.scss";
+
.display_inl {
display: inline-block;
}
+
.width_80 {
width: 80%;
}
-.responseHeader
-{
+
+.responseHeader {
color: #788095;
font-weight: bold;
font-size: 14px;
}
+
.admin_token_align {
vertical-align: middle;
margin-left: 2px;
}
-.marginBottom
-{
+
+.marginBottom {
margin-bottom: 15px;
}
+
.apiExplorerMini {
width: 80%;
}
+
.wrapperOnBoarding {
// width: 80% !important;
}
+
.panelGreyed {
opacity: 0.1;
}
+
.requestGreyed {
opacity: 0.1;
}
+
.panelInFocus {
}
+
.requestInFocus {
}
+
.cursorNotAllowed {
cursor: not-allowed;
}
-.apiExplorerWrapper
-{
+
+.apiExplorerWrapper {
display: flex;
height: $mainContainerHeight;
- .ApiRequestWrapperVH
- {
+
+ .ApiRequestWrapperVH {
height: 100%;
width: 100%;
}
- .apiCollectionWrapper
- {
+
+ .apiCollectionWrapper {
background-color: #fff;
height: 100%;
overflow-y: auto;
// Changed it from overfllow-y: scroll
- .apiCollectionTabWrapper
- {
- .apiCollectionTab
- {
+
+ .apiCollectionTabWrapper {
+ .apiCollectionTab {
-webkit-padding-start: 0px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
@@ -71,8 +80,8 @@
min-width: 240px;
background-color: #fff;
z-index: 10;
- .apiCollectionTabList
- {
+
+ .apiCollectionTabList {
list-style-type: none;
display: inline-block;
width: 50%;
@@ -83,18 +92,18 @@
color: #D8D8D8;
cursor: pointer;
}
- .activeApiCollectionTab
- {
+
+ .activeApiCollectionTab {
border-bottom: 3px solid #ffca27;
color: #6B6B6B;
}
- .apiCollectionTabList:focus
- {
+
+ .apiCollectionTabList:focus {
outline: none;
}
}
- .apiCollectionClearHistory
- {
+
+ .apiCollectionClearHistory {
padding: 0 15px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
@@ -103,8 +112,8 @@
bottom: 0;
transform: translateX(-88%);
*/
- .apiCollectionClearHistoryButton
- {
+
+ .apiCollectionClearHistoryButton {
/*
float: right;
margin: 10px 0;
@@ -121,126 +130,127 @@
border-top: 1px solid #ccc;
background-color: #fff;
z-index: 1;
+
i {
padding-right: 5px;
}
}
}
- .apiPaddTop
- {
+
+ .apiPaddTop {
padding-top: 46px !important;
}
- .apiCollectionTabListDetails
- {
+
+ .apiCollectionTabListDetails {
padding: 0 15px;
margin: 10px 0;
// padding-top: 46px;
- .apiCollectionTabListHead
- {
+
+ .apiCollectionTabListHead {
padding-left: 15px;
padding-bottom: 10px;
font-weight: bold;
font-size: 15px;
+
.serviceBaseDomain {
color: #bbb;
}
}
+
.add_ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
- .apiCollectionGetPost
- {
- .apiCollectionGetWrapper
- {
+
+ .apiCollectionGetPost {
+ .apiCollectionGetWrapper {
padding: 5px 0;
cursor: pointer;
- .apiCollectionGet
- {
+
+ .apiCollectionGet {
text-align: left;
color: #70CD00;
font-size: 12px;
font-weight: bold;
padding-left: 15px;
}
- .apiCollectionGetDetailsWrapper
- {
+
+ .apiCollectionGetDetailsWrapper {
display: flex;
align-items: center;
- .apiCollectionGetDetails
- {
+
+ .apiCollectionGetDetails {
word-wrap: break-word;
padding-right: 10px !important
}
- .apiCollectionPostDetails
- {
+
+ .apiCollectionPostDetails {
word-wrap: break-word;
padding-right: 10px !important
}
- .apiRightArrowWrapper
- {
+
+ .apiRightArrowWrapper {
padding-left: 5px;
}
}
- .activeApiCollectionGetWrapperIcon
- {
+
+ .activeApiCollectionGetWrapperIcon {
display: none;
}
}
- .activeApiCollectionGetWrapper
- {
+
+ .activeApiCollectionGetWrapper {
background-color: #FFF3D5;
border-radius: 4px;
- .activeApiCollectionGetWrapperIcon
- {
+
+ .activeApiCollectionGetWrapperIcon {
display: block;
}
}
- .apiCollectionPostWrapper
- {
+
+ .apiCollectionPostWrapper {
padding: 5px 0;
cursor: pointer;
- .apiCollectionPost
- {
+
+ .apiCollectionPost {
text-align: left;
color: #FD9540;
font-size: 12px;
font-weight: bold;
padding-left: 15px;
}
- .apiCollectionGetDetailsWrapper
- {
+
+ .apiCollectionGetDetailsWrapper {
display: flex;
align-items: center;
- .apiCollectionGetDetails
- {
+
+ .apiCollectionGetDetails {
word-wrap: break-word;
padding-right: 10px !important
}
- .apiCollectionPostDetails
- {
+
+ .apiCollectionPostDetails {
word-wrap: break-word;
padding-right: 10px !important
}
- .apiRightArrowWrapper
- {
+
+ .apiRightArrowWrapper {
padding-left: 5px;
}
}
- .activeApiCollectionGetWrapperIcon
- {
+ .activeApiCollectionGetWrapperIcon {
display: none;
}
}
- .activeApiCollectionGetWrapper
- {
+
+ .activeApiCollectionGetWrapper {
background-color: #FFF3D5;
border-radius: 4px;
- .activeApiCollectionGetWrapperIcon
- {
+
+ .activeApiCollectionGetWrapperIcon {
display: block;
}
}
@@ -248,11 +258,13 @@
}
}
}
+
.apiContentPadd {
padding-top: 20px;
// padding-bottom: 10px;
// margin-bottom: -15px;
}
+
.closeHeader {
cursor: pointer;
padding-top: 8px;
@@ -260,6 +272,7 @@
float: right;
display: inline-block;
}
+
.showAdminSecret {
cursor: pointer;
padding-top: 8px;
@@ -268,8 +281,8 @@
float: left;
display: inline-block;
}
- .apiRequestWrapper
- {
+
+ .apiRequestWrapper {
.file_upload_wrapper {
width: 100%;
text-align: left;
@@ -278,55 +291,55 @@
border: 1px solid #ccc;
background-color: #fff;
margin-bottom: 15px;
+
input[type="file"] {
display: inline-block;
width: 162px;
}
}
- .apiRequestheader
- {
+
+ .apiRequestheader {
font-weight: bold;
font-size: 18px;
padding-bottom: 10px;
color: #000;
}
- .apiRequestContent
- {
+
+ .apiRequestContent {
font-size: 14px;
- a
- {
+
+ a {
color: #FEC53D;
text-decoration: underline;
}
- a:hover
- {
+
+ a:hover {
color: #FEC53D;
text-decoration: underline;
}
- code
- {
+
+ code {
background-color: transparent;
border: 1px solid #767E93;
padding: 1px 4px !important;
color: #767E93;
}
}
- .apiPostRequestWrapper
- {
+
+ .apiPostRequestWrapper {
// padding: 20px 0;
// padding-top: 20px;
padding-top: 5px;
background-color: #f8fafb;
- .inputGroupWrapper
- {
+
+ .inputGroupWrapper {
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
- .inputGroupBtn
- {
- button
- {
+
+ .inputGroupBtn {
+ button {
width: 100px;
border: 0;
padding: 10px 12px;
@@ -335,16 +348,16 @@
font-size: 14px;
font-weight: bold;
text-align: left;
- .caret
- {
+
+ .caret {
position: absolute;
right: 10px;
top: 16px;
}
}
}
- .inputGroupInput
- {
+
+ .inputGroupInput {
border: 0;
box-shadow: none;
padding: 10px 12px;
@@ -352,10 +365,9 @@
background-color: #fff;
}
}
- .sendBtn
- {
- button
- {
+
+ .sendBtn {
+ button {
width: 100%;
text-align: center;
height: 39px;
@@ -372,18 +384,17 @@
background-color: #F2B130;
}
}
+
/*
- button:hover
- {
+ button:hover {
border: 1px solid #F2B130;
background-color: #F2B130;
}
*/
}
- .generateBtn
- {
- button
- {
+
+ .generateBtn {
+ button {
width: 100%;
background-color: transparent;
text-align: center;
@@ -393,97 +404,97 @@
font-weight: bold;
border-radius: 5px;
}
- button:hover
- {
+
+ button:hover {
border: 1px solid #606060;
background-color: #efefef;
}
}
}
- .responseWrapper
- {
+
+ .responseWrapper {
clear: both;
display: flex;
align-items: center;
- .responseHeader
- {
+
+ .responseHeader {
color: #788095;
font-weight: bold;
font-size: 14px;
- .viewDetails
- {
+
+ .viewDetails {
padding-left: 10px;
font-weight: normal;
color: #FFCA27;
}
- .addAdminToken
- {
+
+ .addAdminToken {
text-align: right;
padding-left: 15px;
}
}
- .addAdminToken
- {
+
+ .addAdminToken {
text-align: right;
padding-left: 15px;
}
}
}
- .apiResponseWrapper
- {
- .apiResponseheaderWrapper
- {
+
+ .apiResponseWrapper {
+ .apiResponseheaderWrapper {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
- .apiResponseheader
- {
+
+ .apiResponseheader {
font-weight: bold;
font-size: 14px;
padding-bottom: 10px;
// color: #000;
color: #788095
}
- .statusDetails
- {
+
+ .statusDetails {
display: inline-block;
float: right;
padding-left: 20px;
- .statusView
- {
+
+ .statusView {
padding-left: 5px;
font-weight: normal;
color: #FFCA27;
}
}
}
- .helpTextWrapper
- {
+
+ .helpTextWrapper {
padding: 15px;
border: 1px solid #ccc;
background-color: #fff;
clear: both;
margin-bottom: 20px;
- i
- {
+
+ i {
padding-right: 10px;
}
- pre
- {
+
+ pre {
margin-top: 10px;
border-radius: 0;
}
- .copyBtn
- {
+
+ .copyBtn {
padding: 9px;
}
}
+
.suggestionTextColor {
color: #111;
background-color: #ffd760;
border-color: #ffd760;
}
- .noResponseWrapper
- {
+
+ .noResponseWrapper {
width: 100%;
min-height: 200px;
background-color: #fff;
@@ -495,20 +506,20 @@
align-items: center;
justify-content: center;
margin-bottom: 20px;
- .noResponseContainer
- {
+
+ .noResponseContainer {
width: 325px;
- .noResponseHeader
- {
+
+ .noResponseHeader {
font-size: 18px;
opacity: 0.6;
}
- .barWrapper
- {
+
+ .barWrapper {
padding-top: 15px;
text-align: center;
- .bigBar
- {
+
+ .bigBar {
width: 56%;
margin-right: 7px;
height: 20px;
@@ -516,8 +527,8 @@
display: inline-block;
border-radius: 4px;
}
- .mediumBar
- {
+
+ .mediumBar {
width: 23%;
margin-right: 7px;
height: 20px;
@@ -525,8 +536,8 @@
display: inline-block;
border-radius: 4px;
}
- .smallBar
- {
+
+ .smallBar {
width: 13%;
margin-right: 7px;
height: 20px;
@@ -537,15 +548,15 @@
}
}
}
- .responseHeader
- {
+
+ .responseHeader {
padding-top: 15px;
color: #788095;
font-weight: bold;
font-size: 14px;
clear: both;
- .viewDetails
- {
+
+ .viewDetails {
padding-left: 10px;
font-weight: normal;
color: #FFCA27;
@@ -555,35 +566,30 @@
}
// Common
-.responseTable
-{
+.responseTable {
padding-top: 15px;
- .tableBorder
- {
+
+ .tableBorder {
background-color: #fff;
border: 1px solid #E3E5E5;
- thead
- {
- tr
- {
- th
- {
+
+ thead {
+ tr {
+ th {
border-bottom: 0px;
}
}
}
- tbody
- {
- tr
- {
- td
- {
+
+ tbody {
+ tr {
+ td {
border-top: 0;
// padding: 5px;
padding: 0px 5px;
min-width: 50px;
- .responseTableInput
- {
+
+ .responseTableInput {
background-color: transparent;
border: 0;
box-shadow: none;
@@ -591,49 +597,50 @@
// padding: 0;
}
}
+
.headerPadd {
padding: 15px !important;
}
- .borderTop
- {
+
+ .borderTop {
border-top: 1px solid #ccc;
}
- .tableTdLeft
- {
+
+ .tableTdLeft {
padding-left: 5%;
}
- .tableEnterKey
- {
+
+ .tableEnterKey {
// padding: 10px 0;
padding: 0px 5px;
padding-left: 4.5%;
}
- .tableLastTd
- {
+
+ .tableLastTd {
padding-left: 5px !important;
}
}
}
}
+
.headerHeading {
background-color: #f5f5f5;
font-weight: bold;
padding-left: 15px;
}
}
-.queryBuilderWrapper
-{
+
+.queryBuilderWrapper {
padding-bottom: 20px;
- .queryBuilderTab
- {
- ul
- {
+
+ .queryBuilderTab {
+ ul {
border: 1px solid #E7E7E7;
-webkit-padding-start: 0px;
-moz-padding-start: 0px;
display: inline-block;
- li
- {
+
+ li {
list-style-type: none;
display: inline-block;
padding: 12px 20px;
@@ -644,19 +651,19 @@
background-color: #fff;
font-weight: bold;
}
- li:focus
- {
+
+ li:focus {
outline: none;
}
- .activeQueryBuilderTab
- {
+
+ .activeQueryBuilderTab {
background-color: #FFF050;
}
}
}
}
-.AceEditorWrapper
-{
+
+.AceEditorWrapper {
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
@@ -671,6 +678,7 @@
background-color: #fff;
// padding: 15px;
}
+
.queryBuilderLayoutSub {
padding: 20px;
}
@@ -680,18 +688,18 @@
padding-top: 15px;
padding-left: 20px;
padding-bottom: 15px;
+
i {
padding-left: 5px;
}
}
-.common_checkbox
-{
+.common_checkbox {
opacity: 0;
position: absolute;
- .common_checkbox_label
- {
+
+ .common_checkbox_label {
display: inline-block;
vertical-align: middle;
margin: 0px;
@@ -700,13 +708,13 @@
position: relative;
}
}
-.common_checkbox_label
-{
+
+.common_checkbox_label {
margin-bottom: 0px !important;
padding-top: 5px;
}
-.common_checkbox + .common_checkbox_label:before
-{
+
+.common_checkbox + .common_checkbox_label:before {
content: '';
background: #fff;
border: 1px solid #ddd;
@@ -720,12 +728,12 @@
border-radius:4px;
cursor:pointer;
}
-label
-{
+
+label {
font-weight: normal;
}
-.common_checkbox:checked + .common_checkbox_label:before
-{
+
+.common_checkbox:checked + .common_checkbox_label:before {
content: url('./tick.png');
background: #FFCA27;
color: #fff;
@@ -741,12 +749,14 @@ label
.apiResponseTab {
padding-top: 20px;
+
.apiResponseTabUl {
display: inline-block;
-webkit-padding-start: 0px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+
.apiResponseTabList {
display: inline-block;
padding: 15px 25px;
@@ -756,13 +766,16 @@ label
color: #6B6B6B;
cursor: pointer;
}
+
.apiResponseTabList:focus {
outline: none;
}
+
.activeApiResponseTab {
background-color: #FFF3D5
}
}
+
.apiResponseTabPanel {
.AceEditorWrapper {
margin-top: 15px;
diff --git a/console/src/components/ApiExplorer/ApiResponse.js b/console/src/components/ApiExplorer/ApiResponse.js
index 45d194c75b5..66cf0f528cd 100644
--- a/console/src/components/ApiExplorer/ApiResponse.js
+++ b/console/src/components/ApiExplorer/ApiResponse.js
@@ -5,9 +5,9 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import CopyToClipboard from 'react-copy-to-clipboard';
-import generateSuggestionBox from '../Common/generateSuggestionBox';
+import generateSuggestionBox from './generateSuggestionBox';
-import suggestionFunction from './suggestionFunctions';
+import suggestionFunctions from './suggestionFunctions';
class ApiResponse extends React.Component {
constructor() {
@@ -17,6 +17,7 @@ class ApiResponse extends React.Component {
tabIndex: 0,
};
}
+
render() {
const {
categoryType,
@@ -25,16 +26,20 @@ class ApiResponse extends React.Component {
response,
url,
} = this.props;
- const getSuggestionFunction = suggestionFunction[categoryType];
+ const styles = require('./ApiExplorer.scss');
+
+ const suggestionFunction = suggestionFunctions[categoryType];
const isResponseError =
'statusCode' in response ? response.statusCode !== 200 : false;
+
const responseHtml =
- isResponseError && getSuggestionFunction
- ? generateSuggestionBox(response, getSuggestionFunction)
+ isResponseError && suggestionFunction
+ ? generateSuggestionBox(response, suggestionFunction)
: '';
- const styles = require('./ApiExplorer.scss');
+
const imgHTMLTag = `
`;
+
let formattedResponse = JSON.stringify(response.response, null, 4);
let responseMode = 'json';
let showGutter = true;
@@ -49,6 +54,7 @@ class ApiResponse extends React.Component {
const getHeaders = responseHeader => {
const currHeaders = [];
+
if (responseHeader.responseHeaders) {
responseHeader.responseHeaders.forEach((value, name) => {
currHeaders.push(
@@ -69,6 +75,7 @@ class ApiResponse extends React.Component {
);
});
}
+
return currHeaders.length > 0 ? currHeaders : '';
};
@@ -103,7 +110,9 @@ class ApiResponse extends React.Component {
''
)}
+
{responseHtml}
+
{showHelpBulb ? (
diff --git a/console/src/components/Common/generateSuggestionBox.js b/console/src/components/ApiExplorer/generateSuggestionBox.js
similarity index 90%
rename from console/src/components/Common/generateSuggestionBox.js
rename to console/src/components/ApiExplorer/generateSuggestionBox.js
index 2257a4501d3..a8671b36611 100644
--- a/console/src/components/Common/generateSuggestionBox.js
+++ b/console/src/components/ApiExplorer/generateSuggestionBox.js
@@ -1,6 +1,6 @@
import React from 'react';
-const styles = require('../ApiExplorer/ApiExplorer.scss');
+const styles = require('./ApiExplorer.scss');
const generateSuggestionBox = (response, parseFunc) => {
const suggestionText = parseFunc(response);
diff --git a/console/src/components/App/progress-bar.scss b/console/src/components/App/progress-bar.scss
index 342ce25d5fe..f726db1e9ff 100644
--- a/console/src/components/App/progress-bar.scss
+++ b/console/src/components/App/progress-bar.scss
@@ -1,5 +1,4 @@
-.alertDanger
-{
+.alertDanger {
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
@@ -8,17 +7,20 @@
top: 0;
z-index: 1000;
}
+
.notifModalDialog {
width: 800px;
margin: 30px auto;
right: 100px;
top: -15px;
}
+
:global {
@keyframes react-progress-spinner {
0% {
transform: rotate(0deg);
}
+
100% {
transform: rotate(360deg);
}
@@ -33,9 +35,11 @@
opacity: 1;
transition: all 400ms;
z-index: 9999;
+
&.react-progress-bar-on-top {
height: 100%;
}
+
&.react-progress-bar-hide {
opacity: 0;
visibility: hidden;
diff --git a/console/src/components/Common/BreadCrumb/BreadCrumb.js b/console/src/components/Common/BreadCrumb/BreadCrumb.js
deleted file mode 100644
index ff8e71a753b..00000000000
--- a/console/src/components/Common/BreadCrumb/BreadCrumb.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react';
-
-class BreadCrumb extends Component {
- render() {
- const styles = require('./BreadCrumb.scss');
- return
{this.props.data}
;
- }
-}
-
-BreadCrumb.propTypes = {
- data: React.PropTypes.string.isRequired,
-};
-
-export default BreadCrumb;
diff --git a/console/src/components/Common/BreadCrumb/BreadCrumb.scss b/console/src/components/Common/BreadCrumb/BreadCrumb.scss
deleted file mode 100644
index 8e7793d720c..00000000000
--- a/console/src/components/Common/BreadCrumb/BreadCrumb.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "../Common.scss";
-
-.breadcrumbWrapper {
- padding: 20px 0px;
- padding-bottom: 0px;
- font-size: 16px;
- font-weight: 400;
- color: #767E93;
-}
diff --git a/console/src/components/Common/CSManage.scss b/console/src/components/Common/CSManage.scss
index 54e59890f09..9b7a928b35f 100644
--- a/console/src/components/Common/CSManage.scss
+++ b/console/src/components/Common/CSManage.scss
@@ -1,4 +1,5 @@
@import "./Common.scss";
+
button.control {
width: 100%;
}
@@ -28,10 +29,10 @@ table td.longOne {
}
.endpoint {
- padding-right: 5px;
+ padding-right: 5px;
}
.floatRight {
- float: right;
- margin-right: 20px;
+ float: right;
+ margin-right: 20px;
}
diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index ad1dc05d50d..013fbce9442 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -1,41 +1,46 @@
@import url('https://fonts.googleapis.com/css?family=Gudea:400,700');
-body
-{
+
+body {
background-color: #f8fafb;
}
-h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
-{
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
margin-bottom: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
+
.graphSpinner {
font-size: 40px;
text-align: center;
}
+
input::-moz-focus-inner {
outline: 0;
-moz-outline: none;
border:0;
}
-select:-moz-focusring
-{
+
+select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
+
select::-moz-focus-inner {
outline: 0;
-moz-outline: none;
border: 0;
}
+
option::-moz-focus-inner { border: 0; outline: 0 }
-table thead tr th
-{
+
+table thead tr th {
background-color: #F2F2F2 !important;
color: #4D4D4D;
font-weight: 600 !important;
}
+
.pageSidebar {
height: calc(100vh - 50px);
overflow: auto;
@@ -46,29 +51,34 @@ table thead tr th
border-bottom: 0px;
// background-color: #F8F8F8;
background-color: #fff;
+
/*
a,a:visited {
color: $navbar-inverse-link-color;
}
+
a:hover {
color: $navbar-inverse-link-hover-color;
}
*/
+
hr {
margin: 0;
}
+
ul {
list-style-type: none;
-webkit-padding-start: 0px;
-moz-padding-start: 0px;
+
li {
transition: color 0.5s;
font-size: 16px;
border-bottom: 1px solid #E6E6E6;
padding: 0px 0px;
// border-left: 5px solid transparent;
- a
- {
+
+ a {
color: #767E93;
background-color: #f0f0f0;
width: 100%;
@@ -78,27 +88,33 @@ table thead tr th
display: block;
}
}
+
li:hover {
transition: color 0.5s;
cursor: pointer;
text-decoration: none;
+
a {
text-decoration: none;
padding: 15px 0px;
padding-left: 20px;
}
}
+
.linkBorder {
border-bottom: 1px solid #e6e6e6;
}
+
li:last-child {
border-bottom: 0px;
}
+
.active {
// border-left: 5px solid #FFC627;
font-weight: bold;
color: #333;
text-decoration: none;
+
a {
text-decoration: none;
padding: 15px 0px;
@@ -125,189 +141,192 @@ table thead tr th
padding: 5px !important;
margin-bottom: 0px;
}
+
.commentEdit {
display: inline-block;
padding-left: 10px;
cursor: pointer;
}
+
.comment_action {
text-decoration: underline;
cursor: pointer;
}
+
.commentInput {
width: 30%;
display: inline-block;
}
-.fontAwosomeClose
-{
+.fontAwosomeClose {
margin-left: 10px;
width: 15px;
min-width: 15px;
cursor: pointer;
}
-.display_flex
-{
+
+.display_flex {
display: flex;
align-items: center;
}
-.displayFlexContainer
-{
+
+.displayFlexContainer {
display: flex;
}
-.line_mar
-{
+
+.line_mar {
margin: 15px 20px;
}
-.wd5
-{
+
+.wd5 {
width: 5%;
text-align: center;
vertical-align: middle !important;
}
-.wd45
-{
+
+.wd45 {
width: 45%;
padding: 3px;
}
-.wd4
-{
+
+.wd4 {
width: 4%;
text-align: center;
vertical-align: middle !important;
}
-.wd48
-{
+
+.wd48 {
width: 48%;
padding: 3px;
}
-.wd100
-{
+
+.wd100 {
width: 100%;
float: left;
}
-.wd90
-{
+
+.wd90 {
width: 90%;
}
-.wd35
-{
+
+.wd35 {
width: 31%;
}
-.wd60
-{
+
+.wd60 {
width: 56%;
}
-.wd82
-{
+
+.wd82 {
width: 82%;
float: left;
padding-left: 15px;
}
-.wd68
-{
+
+.wd68 {
width: 68%;
}
-.wd15
-{
+
+.wd15 {
width: 15%;
}
-.wd16
-{
+
+.wd16 {
width: 16%;
}
-.wd80
-{
+
+.wd80 {
width: 80%;
display: inline-block;
}
-.wd63
-{
+
+.wd63 {
width: 62%;
display: inline-block;
}
-.wd20
-{
+
+.wd20 {
width: 20%;
display: inline-block;
}
-.wd18
-{
+
+.wd18 {
width: 18%;
float: left;
padding-left: 15px;
}
-.buttonLess
-{
+
+.buttonLess {
border: 0;
background-color: transparent;
padding: 0 0;
display: flex;
align-items: center;
+
span {
font-weight: bold;
}
- i
- {
+
+ i {
font-size: 12px;
padding-right: 10px;
}
}
-.apiExplorerFlex
-{
+.apiExplorerFlex {
display: flex;
}
-.collectionWrapper
-{
+
+.collectionWrapper {
padding-top: 25px;
background-color: #f8f8f8;
border: 1px solid #e5e5e5;
}
+
button {
outline: none;
}
-.no_border
-{
+
+.no_border {
border: 0 !important;
border-radius: 0 !important;
}
+
input {
border-radius: 4px;
}
-.sidebarCreateTable
-{
- a
- {
+
+.sidebarCreateTable {
+ a {
color: #767E93;
- i
- {
+
+ i {
color: #767E93;
}
}
- a:hover
- {
+
+ a:hover {
color: #767E93;
- i
- {
+
+ i {
color: #767E93;
}
}
}
-.header_key_input
-{
+
+.header_key_input {
background-color: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
}
-.header_key_input:focus
-{
+
+.header_key_input:focus {
box-shadow: none;
}
-.header_path_input
-{
+
+.header_path_input {
background-color: transparent;
border: 0;
box-shadow: none;
@@ -316,425 +335,405 @@ input {
padding: 0;
padding-left: 10px;
}
-.header_path_input:focus
-{
+
+.header_path_input:focus {
box-shadow: none;
}
-.responce_header_height
-{
- width: 100%;
- float: left;
- border-bottom: 1px solid #ccc;
-}
-.responce_header_wrapper
-{
- clear: both;
-}
-.ApiExplorerTable
-{
+
+.ApiExplorerTable {
margin-bottom: 0;
- thead
- {
- tr
- {
- th
- {
+
+ thead {
+ tr {
+ th {
border-bottom: 0;
padding: 8px;
}
- .ApiExplorerTableSuccess
- {
+
+ .ApiExplorerTableSuccess {
background-color: #fff;
}
- .ApiExplorerTableDefault
- {
+
+ .ApiExplorerTableDefault {
background-color: #F3F3F3;
}
- td
- {
+
+ td {
padding: 8px;
width: 50%;
}
}
}
- tbody
- {
- tr
- {
- th
- {
+
+ tbody {
+ tr {
+ th {
border-bottom: 0;
padding: 8px;
}
- td
- {
+
+ td {
padding: 8px;
width: 50%;
}
- .ApiExplorerTableSuccess
- {
+
+ .ApiExplorerTableSuccess {
background-color: #fff;
}
- .ApiExplorerTableDefault
- {
+
+ .ApiExplorerTableDefault {
background-color: #F3F3F3;
}
}
}
}
-.padd_left_remove
-{
+
+.padd_left_remove {
padding-left: 0 !important;
}
-.padd_right_remove
-{
+
+.padd_right_remove {
padding-right: 0 !important;
}
+
.remove_margin_bottom {
margin-bottom: 0 !important;
}
+
.remove_margin {
margin: 0 !important;
}
+
.display_inline {
display: inline-block;
}
-.form_inline_wrapper
-{
+
+.form_inline_wrapper {
border: 1px solid #ccc;
}
-.background_transparent
-{
+
+.background_transparent {
background-color: #f8fafb;
box-shadow: none;
padding: 0 0;
}
-.padd_left
-{
+
+.padd_left {
padding-left: 15px;
}
-.padd_small_left
-{
+
+.padd_small_left {
padding-left: 5px;
}
-.padd_small_right
-{
+
+.padd_small_right {
padding-right: 5px;
}
-.border_bottom
-{
+
+.border_bottom {
border-bottom: 1px solid #e7e7e7;
}
-.border_right
-{
+
+.border_right {
border-right: 1px solid #ccc;
}
-.mar_left
-{
+
+.mar_left {
margin-left: 15px;
}
-.mar_small_left
-{
+
+.mar_small_left {
margin-left: 5px;
}
-.mar_small_neg_left
-{
+
+.mar_small_neg_left {
margin-left: -10px;
}
-.mar_small_neg_left_1
-{
+
+.mar_small_neg_left_1 {
margin-left: -5px;
}
-.padd_remove
-{
+
+.padd_remove {
padding-left: 0 !important;
padding-right: 0 !important;
}
-.padd_remove_full
-{
+
+.padd_remove_full {
padding: 0 0 !important;
}
-.mar_bottom
-{
+
+.mar_bottom {
margin-bottom: 20px;
}
-.remove_pad_bottom
-{
+
+.remove_pad_bottom {
padding-bottom: 0 !important;
}
-.remove_pad_right
-{
+
+.remove_pad_right {
padding-right: 0 !important;
}
-.add_pad_right
-{
+
+.add_pad_right {
padding-right: 15px;
}
-.width_auto
-{
+
+.width_auto {
width: auto;
}
-.add_pad_left
-{
+
+.add_pad_left {
padding-left: 15px;
}
-.add_mar_top_small
-{
+
+.add_mar_top_small {
margin-top: 10px;
}
-.add_mar_top
-{
+
+.add_mar_top {
margin-top: 20px;
}
-.add_mar_bottom
-{
+
+.add_mar_bottom {
margin-bottom: 20px;
}
-.add_mar_bottom_mid
-{
+
+.add_mar_bottom_mid {
margin-bottom: 10px;
}
-.add_mar_right
-{
+
+.add_mar_right {
margin-right: 20px !important;
}
-.add_mar_right_small
-{
+
+.add_mar_right_small {
margin-right: 5px !important;
}
-.add_mar_left
-{
+
+.add_mar_left {
margin-left: 20px;
}
-.add_mar_small
-{
+
+.add_mar_small {
margin-right: 10px !important;
}
-.code_space
-{
+
+.code_space {
padding: 3px 10px;
border: 1px solid #F9EAEF;
}
-code
-{
+
+code {
padding: 2px 12px !important;
+
input {
border: 0;
background: transparent;
box-shadow: none;
+
&:focus {
outline: none;
}
min-width: 200px;
}
- div
- {
+
+ div {
display: inline-block;
}
}
-.padd_bottom_small
-{
+
+.padd_bottom_small {
padding-bottom: 4px;
}
-.padd_top_small
-{
+
+.padd_top_small {
padding-top: 5px;
}
-.padd_top_medium
-{
+
+.padd_top_medium {
padding-top: 10px;
}
-.padd_bottom
-{
+
+.padd_bottom {
padding-bottom: 10px !important;
}
-.ul_padd_left
-{
+
+.ul_padd_left {
-webkit-padding-start: 15px;
}
-.add_pad_bottom
-{
+
+.add_pad_bottom {
padding-bottom: 20px;
}
-.add_padd_bottom
-{
+
+.add_padd_bottom {
padding-bottom: 25px;
}
-.padd_right
-{
+
+.padd_right {
padding-right: 15px;
}
-.clear_fix
-{
+
+.clear_fix {
clear: both;
}
-.remove_ul_left
-{
+
+.remove_ul_left {
-webkit-padding-start: 15px;
}
-.padd_top
-{
+
+.padd_top {
padding-top: 20px !important;
}
-.select_option_height
-{
+
+.select_option_height {
min-height: 33px;
height: 33px !important;
width: 100% !important;
display: flex !important;
align-items: center;
}
-.response_btn_success
-{
- button
- {
+
+.response_btn_success {
+ button {
padding: 2px 4px;
background-color: #59A21C;
border: 1px solid #539719;
color: #fff;
font-size: 12px;
}
- button:focus
- {
+
+ button:focus {
outline: none;
}
}
-.response_btn_error
-{
- button
- {
+
+.response_btn_error {
+ button {
padding: 2px 4px;
background-color: #AC2925;
border: 1px solid #761c19;
color: #fff;
font-size: 12px;
}
- button:focus
- {
+
+ button:focus {
outline: none;
}
}
-.response_btn_default
-{
- button
- {
+
+.response_btn_default {
+ button {
padding: 2px 4px;
background-color: #E6E6E6;
border: 1px solid #D7D7D7;
color: #000;
font-size: 12px;
}
- button:focus
- {
+
+ button:focus {
outline: none;
}
}
-.response_btn_success
-{
- button
- {
+
+.response_btn_success {
+ button {
padding: 2px 4px;
background-color: #59A21C;
border: 1px solid #539719;
color: #fff;
font-size: 12px;
}
- button:focus
- {
+
+ button:focus {
outline: none;
}
}
-.response_btn_error
-{
- button
- {
+
+.response_btn_error {
+ button {
padding: 2px 4px;
background-color: #AC2925;
border: 1px solid #761c19;
color: #fff;
font-size: 12px;
}
- button:focus
- {
+
+ button:focus {
outline: none;
}
}
-.response_btn_default
-{
- button
- {
+
+.response_btn_default {
+ button {
padding: 2px 4px;
background-color: #E6E6E6;
border: 1px solid #D7D7D7;
color: #000;
font-size: 12px;
}
- button:focus
- {
+
+ button:focus {
outline: none;
}
}
-.input_group_input
-{
+
+.input_group_input {
border: none;
background-color: #F0F4F7 !important;
box-shadow: none;
}
-.input_group_width
-{
+
+.input_group_width {
width: 400px;
}
-.remove_all_pad
-{
+
+.remove_all_pad {
padding: 0 !important;
}
-.input_group_addon
-{
+
+.input_group_addon {
background-color: transparent;
color: #000;
border: 0;
padding: 0 0;
}
-.border_radius_left
-{
+
+.border_radius_left {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
-.border_radius_right
-{
+
+.border_radius_right {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
-.align_right
-{
+
+.align_right {
float: right;
}
-.align_left
-{
+
+.align_left {
float: left;
}
-.main_wrapper
-{
- clear: both;
- // padding-left: 15px;
-}
-.block_wrapper
-{
+
+.block_wrapper {
padding: 20px;
background-color: #fff;
width: 80%;
border: 1px solid #F0F4F7;
margin-bottom: 20px;
}
-.header_path_btn
-{
+
+.header_path_btn {
background-color: transparent;
color: #555;
margin-right: 10px;
height: 35px;
}
-.yellow_button
-{
+
+.yellow_button {
background-color: #FEC53D;
border-radius: 3px;
color: #606060;
@@ -742,23 +741,24 @@ code
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
+
&:hover {
background-color: #F2B130;
}
}
-.yellow_button1
-{
+
+.yellow_button1 {
padding: 5px 10px !important;
font-size: 12px !important;
line-height: 1.5;
}
-.yellow_button:focus
-{
+
+.yellow_button:focus {
outline: none;
background-color: #F2B130;
}
-.default_button
-{
+
+.default_button {
background-color: #fff;
border-radius: 5px;
color: #292929;
@@ -766,17 +766,18 @@ code
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
+
&:hover {
background-color: #efefef;
}
}
-.default_button:focus
-{
+
+.default_button:focus {
outline: none;
background-color: #efefef;
}
-.danger_button
-{
+
+.danger_button {
border-radius: 5px;
// color: #292929;
color: #000;
@@ -785,12 +786,12 @@ code
font-size: 12px;
line-height: 1.5;
}
-.danger_button:focus
-{
+
+.danger_button:focus {
outline: none;
}
-.exploreButton
-{
+
+.exploreButton {
background-color: #FEC53D;
border-radius: 5px;
color: #000;
@@ -798,20 +799,22 @@ code
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
+
&:hover {
background-color: #F2B130;
color: #fff;
}
- &:focus
- {
+
+ &:focus {
background-color: #F2B130;
}
}
+
.gray_button {
background: #f2f2f2 !important;
}
-.docsButton
-{
+
+.docsButton {
background-color: #fff;
border-radius: 5px;
color: #292929;
@@ -820,45 +823,46 @@ code
margin-right: 15px;
padding: 5px 10px;
line-height: 1.5;
+
&:hover {
background-color: #efefef;
}
- &:focus
- {
+
+ &:focus {
background-color: #efefef;
}
}
-.small_login_disclaimer
-{
+
+.small_login_disclaimer {
font-size: 12px;
padding: 15px 0;
width: 350px;
text-align: center;
}
-.subheading_text
-{
+
+.subheading_text {
font-size: 15px;
font-weight: bold;
padding-bottom: 20px;
margin-top: 0;
margin-bottom: 0;
- i
- {
+
+ i {
margin-left: 5px;
}
}
-.inline_block
-{
+
+.inline_block {
display: inline-block;
padding-right: 20px;
padding-bottom: 0 !important;
- .header_path_btn
- {
+
+ .header_path_btn {
margin-right: 0 !important;
}
}
-.heading_text
-{
+
+.heading_text {
font-size: 18px;
font-weight: bold;
padding-bottom: 20px
@@ -907,8 +911,8 @@ code
font-weight: normal;
cursor: pointer;
}
-.header_project_name
-{
+
+.header_project_name {
font-family: 'Gudea';
color: #fff;
text-transform: uppercase;
@@ -918,12 +922,12 @@ code
letter-spacing: 1px;
font-weight: 700;
}
-.tableButton
-{
+
+.tableButton {
display: inline-block;
float: right;
- button
- {
+
+ button {
padding: 3px 8px;
background-color: #27AE60;
border: 1px solid #27AE60;
@@ -933,22 +937,25 @@ code
}
}
+
.subHeader {
background: transparent;
font-family: 'Gudea';
+
h2 {
margin: 0;
line-height: 26px;
}
+
.nav {
border-bottom: 1px solid #E6E6E6;
margin-left: -15px !important;
padding-left: 15px !important;
- ul
- {
+
+ ul {
margin-bottom: -2px;
- li
- {
+
+ li {
border: 1px solid transparent;
border-top: 3px solid transparent;
margin-right: 10px;
@@ -958,22 +965,22 @@ code
border-bottom-right-radius: 0;
margin-bottom: 1px;
font-weight: bold;
- a
- {
+
+ a {
color: #666666;
padding: 12px 16px;
}
- a:hover
- {
+
+ a:hover {
background-color: transparent;
}
- a:focus
- {
+
+ a:focus {
background-color: transparent;
}
}
- .active
- {
+
+ .active {
border-radius: 4px;
background-color: #f8fafb;
/* color: #333; */
@@ -983,8 +990,8 @@ code
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top: 3px solid #FFC627;
- a
- {
+
+ a {
color: #333;
margin-bottom: 1px;
}
@@ -992,15 +999,16 @@ code
}
}
}
+
.common_nav {
border-bottom: 1px solid #E6E6E6;
margin-left: -15px !important;
padding-left: 15px !important;
- ul
- {
+
+ ul {
margin-bottom: -2px;
- li
- {
+
+ li {
border: 1px solid transparent;
border-top: 3px solid transparent;
margin-right: 10px;
@@ -1010,22 +1018,22 @@ code
border-bottom-right-radius: 0;
margin-bottom: 1px;
font-weight: bold;
- a
- {
+
+ a {
color: #666666;
padding: 12px 16px;
}
- a:hover
- {
+
+ a:hover {
background-color: transparent;
}
- a:focus
- {
+
+ a:focus {
background-color: transparent;
}
}
- .active
- {
+
+ .active {
border-radius: 4px;
background-color: #f8fafb;
/* color: #333; */
@@ -1035,57 +1043,60 @@ code
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top: 3px solid #FFC627;
- a
- {
+
+ a {
color: #333;
margin-bottom: 1px;
}
}
}
}
+
.header {
background: #fff;
width: 100%;
float: left;
margin-bottom: 20px;
font-family: 'Gudea';
+
h2 {
margin: 0;
padding: 15px;
float: left;
line-height: 26px;
}
+
.nav {
padding-top: 10px;
padding-left: 15px;
float: left;
- ul
- {
- li
- {
- a
- {
+
+ ul {
+ li {
+ a {
color: #6a6a6a;
}
- a:hover
- {
+
+ a:hover {
background-color: transparent;
}
- a:focus
- {
+
+ a:focus {
background-color: transparent;
}
}
- .active
- {
+
+ .active {
border-bottom: 4px solid #000;
font-weight: bold;
}
}
}
}
-.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus
-{
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
border-bottom: 4px solid #000;
}
@@ -1096,13 +1107,13 @@ code
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
+
/* Explore slider starts here*/
-.circle_wrapper
-{
+.circle_wrapper {
margin: 10px auto;
text-align: center;
- .active_circle
- {
+
+ .active_circle {
width: 8px;
height: 8px;
border-radius: 50%;
@@ -1110,8 +1121,8 @@ code
margin: 0 5px;
display: inline-block;
}
- .deactiv_circle
- {
+
+ .deactiv_circle {
width: 8px;
height: 8px;
border-radius: 50%;
@@ -1121,22 +1132,22 @@ code
}
}
-.collectionButtonLess
-{
+.collectionButtonLess {
border: 0;
background-color: transparent;
padding: 0 0;
display: flex;
align-items: center;
width: 100%;
+
span {
font-size: 14px;
width: 90%;
text-align: left;
padding-left: 5px;
}
- i
- {
+
+ i {
font-size: 12px;
width: 10%;
text-align: right;
@@ -1156,6 +1167,7 @@ code
display: block;
top: 0;
z-index: 11;
+
.stickySeparator {
padding-top: 60px;
margin-left: -15px;
@@ -1174,8 +1186,8 @@ code
height: 100vh;
margin-bottom: 50px;
}
-.button_mar_right
-{
+
+.button_mar_right {
margin-right: 20px;
}
diff --git a/console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.scss b/console/src/components/Common/FilterQuery/FilterQuery.scss
similarity index 97%
rename from console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.scss
rename to console/src/components/Common/FilterQuery/FilterQuery.scss
index abc593ac1fe..67a903ae1dd 100644
--- a/console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.scss
+++ b/console/src/components/Common/FilterQuery/FilterQuery.scss
@@ -1,5 +1,7 @@
-@import "../../../Common/Common.scss";
+@import "../Common.scss";
+
$bgColor: #f9f9f9;
+
.container {
margin: 10px 0;
}
@@ -16,29 +18,37 @@ $bgColor: #f9f9f9;
box-sizing: border-box;
position: relative;
min-height: 30px;
+
.inputRow {
margin: 20px 0;
+
div[class^=col-xs-] {
padding-left: 0;
padding-right: 2.5px;
}
+
:global(.form-control) {
height: 35px;
padding: 0 12px;
}
+
:global(.form-control):focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0px rgba(102, 175, 233, 0.6);
}
+
:global(.fa) {
padding-top: 8px;
font-size: 0.8em;
}
+
i:hover {
cursor: pointer;
color: #888;
}
+
.descending {
padding-left: 10px;
+
input {
margin-right: 5px;
}
@@ -54,19 +64,24 @@ $bgColor: #f9f9f9;
.runQuery {
margin-left: 0px;
margin-bottom: 20px;
+
:global(.form-control):focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0px rgba(102, 175, 233, 0.6);
}
+
:global(.input-group) {
margin-top: -24px;
margin-right: 10px;
+
input {
max-width: 60px;
}
}
+
nav {
display: inline-block;
}
+
button {
margin-top: -24px;
margin-right: 15px;
diff --git a/console/src/components/Common/Layout/BreadCrumb/BreadCrumb.js b/console/src/components/Common/Layout/BreadCrumb/BreadCrumb.js
index f2206bf035d..2bcf743d4b9 100644
--- a/console/src/components/Common/Layout/BreadCrumb/BreadCrumb.js
+++ b/console/src/components/Common/Layout/BreadCrumb/BreadCrumb.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router';
class BreadCrumb extends React.Component {
render() {
const { breadCrumbs } = this.props;
- const styles = require('../../../Services/EventTrigger/TableCommon/Table.scss');
+ const styles = require('../../TableCommon/Table.scss');
const bC =
breadCrumbs && breadCrumbs.length > 0
? breadCrumbs.map((b, i) => {
diff --git a/console/src/components/Common/Layout/LayoutWrapper/LayoutWrapper.js b/console/src/components/Common/Layout/LayoutWrapper/LayoutWrapper.js
deleted file mode 100644
index e93902861bd..00000000000
--- a/console/src/components/Common/Layout/LayoutWrapper/LayoutWrapper.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-
-import LeftNavBar from '../LeftNavBar/LeftNavBar';
-import Helmet from 'react-helmet';
-
-import { Link } from 'react-router';
-
-import PropTypes from 'prop-types';
-
-class LayoutWrapper extends React.Component {
- render() {
- const styles = require('../../../Services/Data/TableCommon/Table.scss');
- const { appPrefix, children } = this.props;
-
- const currentLocation = location.pathname;
-
- return (
-
- );
- }
-}
-
-LayoutWrapper.propTypes = {
- appPrefix: PropTypes.string.isRequired,
-};
-
-export default (connect, mapStateToProps, mapDispatchToProps) =>
- connect(
- mapStateToProps,
- mapDispatchToProps
- )(LayoutWrapper);
diff --git a/console/src/components/Common/Layout/LeftContainer/LeftContainer.js b/console/src/components/Common/Layout/LeftContainer/LeftContainer.js
new file mode 100644
index 00000000000..cff158c3d09
--- /dev/null
+++ b/console/src/components/Common/Layout/LeftContainer/LeftContainer.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+class LeftContainer extends React.Component {
+ render() {
+ const styles = require('../../TableCommon/Table.scss');
+
+ const { children } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+export default LeftContainer;
diff --git a/console/src/components/Common/Layout/LeftNavBar/Actions.js b/console/src/components/Common/Layout/LeftNavBar/Actions.js
deleted file mode 100644
index f64a781dc01..00000000000
--- a/console/src/components/Common/Layout/LeftNavBar/Actions.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/* State
-
-{
- ongoingRequest : false, //true if request is going on
- lastError : null OR
- lastSuccess: null OR
-}
-
-*/
-import defaultState from './State';
-
-const SET_USERNAME = 'PageContainer/SET_USERNAME';
-
-// HTML Component defines what state it needs
-// HTML Component should be able to emit actions
-// When an action happens, the state is modified (using the reducer function)
-// When the state is modified, anybody dependent on the state is asked to update
-// HTML Component is listening to state, hence re-renders
-
-const homeReducer = (state = defaultState, action) => {
- switch (action.type) {
- case SET_USERNAME:
- return { username: action.data };
- default:
- return state;
- }
-};
-
-const setUsername = username => ({ type: SET_USERNAME, data: username });
-
-export default homeReducer;
-export { setUsername };
diff --git a/console/src/components/Common/Layout/LeftNavBar/LeftNavBar.js b/console/src/components/Common/Layout/LeftNavBar/LeftNavBar.js
deleted file mode 100644
index 67cc47e0282..00000000000
--- a/console/src/components/Common/Layout/LeftNavBar/LeftNavBar.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable no-unused-vars */
-
-import React from 'react';
-import { Link } from 'react-router';
-import Button from '../../Button/Button';
-
-const LeftNavBar = ({
- appPrefix,
- listItemTemplate,
- dataList,
- filtered,
- searchQuery,
- location,
- filterItem,
- viewResolver,
- migrationMode,
-}) => {
- const styles = require('./LeftNavBar.scss');
- // Now schema might be null or an empty array
-
- function tableSearch(e) {
- const searchTerm = e.target.value;
- filterItem(dataList, searchTerm);
- }
- // TODO: Make it generic so that other components can use it.
-
- return (
-
-
-
-
-
- Remote Schemas ({dataList.length})
-
-
- {migrationMode ? (
-
-
-
-
-
- ) : null}
-
-
- {listItemTemplate(
- searchQuery ? filtered : dataList,
- styles,
- location,
- viewResolver
- )}
-
-
-
+
+
+
+
+ );
+ }
+
+ return addButton;
+ };
+
+ return (
+
+
+
+
+
+ {heading}
+
+ {getAddButton()}
+
+
+
+
+
+
+ {leftContainer}
+
+
{children}
+
@@ -25,7 +26,7 @@ const mapStateToProps = state => {
};
};
-const schemaContainerConnector = connect =>
- connect(mapStateToProps)(SchemaContainer);
+const rightContainerConnector = connect =>
+ connect(mapStateToProps)(RightContainer);
-export default schemaContainerConnector;
+export default rightContainerConnector;
diff --git a/console/src/components/Common/Layout/RightLayoutWrapper/SchemaContainer.scss b/console/src/components/Common/Layout/RightContainer/RightContainer.scss
similarity index 95%
rename from console/src/components/Common/Layout/RightLayoutWrapper/SchemaContainer.scss
rename to console/src/components/Common/Layout/RightContainer/RightContainer.scss
index 4e70070f968..0c82aeb5372 100644
--- a/console/src/components/Common/Layout/RightLayoutWrapper/SchemaContainer.scss
+++ b/console/src/components/Common/Layout/RightContainer/RightContainer.scss
@@ -1,13 +1,17 @@
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "../../Common.scss";
+.container {
+}
+
.flexRow {
display: flex;
}
-.padd_left_remove
-{
+
+.padd_left_remove {
padding-left: 0;
}
+
.add_btn {
margin: 10px 0;
}
@@ -22,25 +26,31 @@
overflow: auto;
background: #444;
color: $navbar-inverse-color;
+
hr {
margin: 0;
border-color: $navbar-inverse-color;
}
+
ul {
list-style-type: none;
padding-top: 10px;
padding-left: 7px;
+
li {
padding: 7px 0;
transition: color 0.5s;
+
a,a:visited {
color: $navbar-inverse-link-color;
}
+
a:hover {
color: $navbar-inverse-link-hover-color;
text-decoration: none;
}
}
+
li:hover {
padding: 7px 0;
color: $navbar-inverse-link-hover-color;
diff --git a/console/src/components/Common/Layout/index.js b/console/src/components/Common/Layout/index.js
index d9618df5ad1..adfa397bf9f 100644
--- a/console/src/components/Common/Layout/index.js
+++ b/console/src/components/Common/Layout/index.js
@@ -1,3 +1 @@
-export layoutConnector from './LayoutWrapper/LayoutWrapper';
-export LeftNavBar from './LeftNavBar/LeftNavBar';
-export rightBar from './RightLayoutWrapper/SchemaContainer';
+export rightContainerConnector from './RightContainer/RightContainer';
diff --git a/console/src/components/QueryBuilderJson/QueryBuilderJson.js b/console/src/components/Common/QueryBuilderJson/QueryBuilderJson.js
similarity index 98%
rename from console/src/components/QueryBuilderJson/QueryBuilderJson.js
rename to console/src/components/Common/QueryBuilderJson/QueryBuilderJson.js
index 170099ce2f4..c9e679b6c00 100644
--- a/console/src/components/QueryBuilderJson/QueryBuilderJson.js
+++ b/console/src/components/Common/QueryBuilderJson/QueryBuilderJson.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-const styles = require('./Styles.scss');
+const styles = require('./QueryBuilderJson.scss');
class QueryBuilderJson extends React.Component {
static propTypes = {
diff --git a/console/src/components/QueryBuilderJson/Styles.scss b/console/src/components/Common/QueryBuilderJson/QueryBuilderJson.scss
similarity index 92%
rename from console/src/components/QueryBuilderJson/Styles.scss
rename to console/src/components/Common/QueryBuilderJson/QueryBuilderJson.scss
index 1426326391c..a2913f69420 100644
--- a/console/src/components/QueryBuilderJson/Styles.scss
+++ b/console/src/components/Common/QueryBuilderJson/QueryBuilderJson.scss
@@ -1,4 +1,4 @@
-@import "../Common/Common.scss";
+@import "../Common.scss";
.qb_nested {
margin-top: 5px;
diff --git a/console/src/components/Services/Data/Migrations/ReactToggle.css b/console/src/components/Common/ReactToggle/ReactToggleOverrides.css
similarity index 100%
rename from console/src/components/Services/Data/Migrations/ReactToggle.css
rename to console/src/components/Common/ReactToggle/ReactToggleOverrides.css
diff --git a/console/src/components/Common/Spinner/Spinner.scss b/console/src/components/Common/Spinner/Spinner.scss
index 8a7cee43eb7..8764530ccf9 100644
--- a/console/src/components/Common/Spinner/Spinner.scss
+++ b/console/src/components/Common/Spinner/Spinner.scss
@@ -4,6 +4,7 @@
height: 40px;
position: relative;
}
+
.sk_circle .sk_child {
width: 100%;
height: 100%;
@@ -11,6 +12,7 @@
left: 0;
top: 0;
}
+
.sk_circle .sk_child:before {
content: '';
display: block;
@@ -22,83 +24,125 @@
-webkit-animation: sk_circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk_circleBounceDelay 1.2s infinite ease-in-out both;
}
+
.sk_circle .sk_circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
- transform: rotate(30deg); }
+ transform: rotate(30deg);
+}
+
.sk_circle .sk_circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
- transform: rotate(60deg); }
+ transform: rotate(60deg);
+}
+
.sk_circle .sk_circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
- transform: rotate(90deg); }
+ transform: rotate(90deg);
+}
+
.sk_circle .sk_circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
- transform: rotate(120deg); }
+ transform: rotate(120deg);
+}
+
.sk_circle .sk_circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
- transform: rotate(150deg); }
+ transform: rotate(150deg);
+}
+
.sk_circle .sk_circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
- transform: rotate(180deg); }
+ transform: rotate(180deg);
+}
+
.sk_circle .sk_circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
- transform: rotate(210deg); }
+ transform: rotate(210deg);
+}
+
.sk_circle .sk_circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
- transform: rotate(240deg); }
+ transform: rotate(240deg);
+}
+
.sk_circle .sk_circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
+
.sk_circle .sk_circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
- transform: rotate(300deg); }
+ transform: rotate(300deg);
+}
+
.sk_circle .sk_circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }
+
.sk_circle .sk_circle2:before {
-webkit-animation-delay: -1.1s;
- animation-delay: -1.1s; }
+ animation-delay: -1.1s;
+}
+
.sk_circle .sk_circle3:before {
-webkit-animation-delay: -1s;
- animation-delay: -1s; }
+ animation-delay: -1s;
+}
+
.sk_circle .sk_circle4:before {
-webkit-animation-delay: -0.9s;
- animation-delay: -0.9s; }
+ animation-delay: -0.9s;
+}
+
.sk_circle .sk_circle5:before {
-webkit-animation-delay: -0.8s;
- animation-delay: -0.8s; }
+ animation-delay: -0.8s;
+}
+
.sk_circle .sk_circle6:before {
-webkit-animation-delay: -0.7s;
- animation-delay: -0.7s; }
+ animation-delay: -0.7s;
+}
+
.sk_circle .sk_circle7:before {
-webkit-animation-delay: -0.6s;
- animation-delay: -0.6s; }
+ animation-delay: -0.6s;
+}
+
.sk_circle .sk_circle8:before {
-webkit-animation-delay: -0.5s;
- animation-delay: -0.5s; }
+ animation-delay: -0.5s;
+}
+
.sk_circle .sk_circle9:before {
-webkit-animation-delay: -0.4s;
- animation-delay: -0.4s; }
+ animation-delay: -0.4s;
+}
+
.sk_circle .sk_circle10:before {
-webkit-animation-delay: -0.3s;
- animation-delay: -0.3s; }
+ animation-delay: -0.3s;
+}
+
.sk_circle .sk_circle11:before {
-webkit-animation-delay: -0.2s;
- animation-delay: -0.2s; }
+ animation-delay: -0.2s;
+}
+
.sk_circle .sk_circle12:before {
-webkit-animation-delay: -0.1s;
- animation-delay: -0.1s; }
+ animation-delay: -0.1s;
+}
@-webkit-keyframes sk_circleBounceDelay {
0%, 80%, 100% {
diff --git a/console/src/components/Services/Data/TableBrowseRows/DragFoldTable.js b/console/src/components/Common/TableCommon/DragFoldTable.js
similarity index 90%
rename from console/src/components/Services/Data/TableBrowseRows/DragFoldTable.js
rename to console/src/components/Common/TableCommon/DragFoldTable.js
index 045379f0f52..21233cf5ee7 100644
--- a/console/src/components/Services/Data/TableBrowseRows/DragFoldTable.js
+++ b/console/src/components/Common/TableCommon/DragFoldTable.js
@@ -1,3 +1,5 @@
+/* eslint-disable */
+
import React, { Component } from 'react';
import ReactTable, { ReactTableDefaults } from 'react-table';
import 'react-table/react-table.css';
@@ -5,7 +7,7 @@ import FoldableHoc from './foldableTable';
Object.assign(ReactTableDefaults, {
defaultPageSize: 10,
- minRows: 3
+ minRows: 3,
});
class DragFoldTable extends Component {
@@ -15,7 +17,7 @@ class DragFoldTable extends Component {
this.reorder = [];
this.state = {
trigger: 0,
- folded: {}
+ folded: {},
};
}
mountEvents() {
@@ -65,7 +67,7 @@ class DragFoldTable extends Component {
const cols = columns.map(col => ({
...col,
- Header:
{col.Header}
+ Header:
{col.Header}
,
}));
//run all reorder events
@@ -80,7 +82,11 @@ class DragFoldTable extends Component {
{...this.props}
data={data}
columns={cols}
- onFoldChange={newFolded => this.setState(p => { return { folded: newFolded }; })}
+ onFoldChange={newFolded =>
+ this.setState(p => {
+ return { folded: newFolded };
+ })
+ }
folded={this.state.folded}
/>
diff --git a/console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css b/console/src/components/Common/TableCommon/ReactTableOverrides.css
similarity index 98%
rename from console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css
rename to console/src/components/Common/TableCommon/ReactTableOverrides.css
index 084b5a60229..4c9cca15059 100644
--- a/console/src/components/Services/Data/TableBrowseRows/ReactTableFix.css
+++ b/console/src/components/Common/TableCommon/ReactTableOverrides.css
@@ -18,6 +18,7 @@
display: inline-block;
font-weight: bold;
}
+
.ReactTable .rt-thead {
font-size: 16px;
color: #333;
@@ -25,26 +26,36 @@
cursor: pointer;
text-align: left;
}
+
.ReactTable .rt-thead .rt-resizable-header-content {
font-weight: bold;
}
+
.ReactTable .rt-thead .rt-resizable-header .rt-resizer {
width: 10px;
right: -5px;
}
+
+.ReactTable .rt-expander {
+ width: 10px;
+}
+
.ReactTable .rt-thead.-header {
box-shadow: none;
}
+
.ReactTable .-pagination {
box-shadow: none;
border: none;
}
+
.ReactTable .rt-table .rt-thead .rt-th,
.ReactTable .rt-table .rt-thead .rt-td {
padding-left: 20px !important;
padding-right: 20px !important;
border-right: 1px solid rgba(0,0,0,0.1);
}
+
.ReactTable .rt-table .rt-thead .rt-th.collapsed,
.ReactTable .rt-table .rt-thead .rt-td.collapsed {
padding-left: 10px !important;
diff --git a/console/src/components/Services/Data/TableCommon/Table.scss b/console/src/components/Common/TableCommon/Table.scss
similarity index 86%
rename from console/src/components/Services/Data/TableCommon/Table.scss
rename to console/src/components/Common/TableCommon/Table.scss
index 68dbde6c573..c85a472fd4a 100644
--- a/console/src/components/Services/Data/TableCommon/Table.scss
+++ b/console/src/components/Common/TableCommon/Table.scss
@@ -1,14 +1,9 @@
-@import "../../../Common/Common.scss";
+@import "../Common.scss";
+
.container {
padding: 0;
}
-.migration_disclaimer {
- font-size: 12px;
- margin-left: 10px;
- margin-top: 10px;
- color: rgb(236, 61, 61);
-}
.tableContainer {
overflow: auto;
//margin-top: 25px;
@@ -16,24 +11,25 @@
.schemaWrapper {
width: 100%;
+
.schemaSidebarSection {
display: inline-block;
width: 100%;
- padding-left: 15px;
- a
- {
+
+ a {
display: inline-block !important;
font-weight: bold;
}
+
+ .changeSchema {
+ width: 50%;
+ margin-left: 10px;
+ display: inline-block;
+ font-weight: bold;
+ }
}
}
-.changeSchema
-{
- width: 50%;
- margin-left: 10px;
- display: inline-block;
- font-weight: bold;
-}
+
.aceBlock {
max-height: 300px;
position: relative;
@@ -63,12 +59,15 @@
button {
margin: 0 10px;
}
+
label.radioLabel {
padding-top: 0;
+
input[type="radio"] {
margin-top: 10px;
}
}
+
span.radioSpan {
line-height: 34px;
}
@@ -76,14 +75,17 @@
.table {
width: auto;
+
thead {
background: #333;
color: #ddd;
}
+
th {
min-width: 100px;
font-weight: 300;
}
+
td {
max-width: 300px;
white-space: pre;
@@ -110,11 +112,13 @@ a.expanded {
.tableNameInput {
width: 300px;
}
+
.addCol {
.input {
width: 300px;
display: inline-block;
}
+
.inputCheckbox {
width: auto;
display: inline-block;
@@ -122,28 +126,32 @@ a.expanded {
margin: 0px 20px;
box-shadow: none;
}
- .inputDefault
- {
+
+ .inputDefault {
width: 150px;
margin: 0px 20px;
display: inline-block;
}
- .remove_ul_left
- {
+
+ .remove_ul_left {
}
+
.select {
display: inline-block;
width: 300px;
height: 34px;
}
- .selectWidth {
+
+ .select200 {
width: 200px;
}
+
.defaultWidth {
width: 200px;
margin-right: 0px;
}
+
i:hover {
cursor: pointer;
color: #B85C27;
diff --git a/console/src/components/Services/Data/TableCommon/TableStyles.scss b/console/src/components/Common/TableCommon/TableStyles.scss
similarity index 97%
rename from console/src/components/Services/Data/TableCommon/TableStyles.scss
rename to console/src/components/Common/TableCommon/TableStyles.scss
index c8b79ab6bab..1bc9d6877e2 100644
--- a/console/src/components/Services/Data/TableCommon/TableStyles.scss
+++ b/console/src/components/Common/TableCommon/TableStyles.scss
@@ -1,14 +1,17 @@
.container {
padding: 0;
}
+
.header {
background: #eee;
+
h2 {
margin: 0;
padding: 26px;
float: left;
line-height: 26px;
}
+
.nav {
padding: 20px;
float: left;
@@ -28,12 +31,15 @@
button {
margin: 0 10px;
}
+
label.radioLabel {
padding-top: 0;
+
input[type="radio"] {
margin-top: 10px;
}
}
+
span.radioSpan {
line-height: 34px;
}
@@ -42,14 +48,21 @@
.table {
width: -webkit-fill-available;
// width: auto;
+
thead {
background: #333;
color: #ddd;
}
+
th {
min-width: 100px;
font-weight: 300;
}
+
+ tr {
+ cursor: pointer;
+ }
+
td {
width: 300px;
max-width: 300px;
@@ -77,16 +90,19 @@ a.expanded {
.tableNameInput {
width: 300px;
}
+
.addCol {
.input {
width: 250px;
display: inline-block;
}
+
.select {
margin: 0 20px;
display: inline-block;
width: 120px;
}
+
i:hover {
cursor: pointer;
color: #B85C27;
@@ -108,10 +124,12 @@ a.expanded {
.relationshipTable {
width: auto;
+
thead {
background: #333;
color: #ddd;
}
+
th {
min-width: 100px;
font-weight: 300;
@@ -125,4 +143,4 @@ a.expanded {
.relEditButtons {
display: flex;
flex-direction:row;
-}
\ No newline at end of file
+}
diff --git a/console/src/components/Services/Data/TableBrowseRows/foldableTable/index.jsx b/console/src/components/Common/TableCommon/foldableTable/index.jsx
similarity index 100%
rename from console/src/components/Services/Data/TableBrowseRows/foldableTable/index.jsx
rename to console/src/components/Common/TableCommon/foldableTable/index.jsx
diff --git a/console/src/components/Common/Layout/ReusableTextAreaWithCopy/ReusableTextAreaWithCopy.js b/console/src/components/Common/TextAreaWithCopy/TextAreaWithCopy.js
similarity index 93%
rename from console/src/components/Common/Layout/ReusableTextAreaWithCopy/ReusableTextAreaWithCopy.js
rename to console/src/components/Common/TextAreaWithCopy/TextAreaWithCopy.js
index d507d67b4ce..d5e6ec88f52 100644
--- a/console/src/components/Common/Layout/ReusableTextAreaWithCopy/ReusableTextAreaWithCopy.js
+++ b/console/src/components/Common/TextAreaWithCopy/TextAreaWithCopy.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
-class ReusableTextAreaWithCopy extends React.Component {
+class TextAreaWithCopy extends React.Component {
copyToClip(type, id) {
let text = '';
if (this.props.copyText.length > 0) {
@@ -12,6 +12,7 @@ class ReusableTextAreaWithCopy extends React.Component {
})
: this.props.copyText;
}
+
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
@@ -31,13 +32,17 @@ class ReusableTextAreaWithCopy extends React.Component {
}
document.body.removeChild(textArea);
}
+
resetCopy(id) {
const tooltip = document.getElementById(id);
tooltip.innerHTML = 'Copy';
}
+
render() {
- const style = require('./style.scss');
+ const style = require('./TextAreaWithCopy.scss');
+
const { copyText } = this.props;
+
return (
@@ -85,9 +90,9 @@ class ReusableTextAreaWithCopy extends React.Component {
}
}
-ReusableTextAreaWithCopy.propTypes = {
+TextAreaWithCopy.propTypes = {
copyText: PropTypes.string.isRequired,
textLanguage: PropTypes.string,
};
-export default ReusableTextAreaWithCopy;
+export default TextAreaWithCopy;
diff --git a/console/src/components/Common/Layout/ReusableTextAreaWithCopy/style.scss b/console/src/components/Common/TextAreaWithCopy/TextAreaWithCopy.scss
similarity index 89%
rename from console/src/components/Common/Layout/ReusableTextAreaWithCopy/style.scss
rename to console/src/components/Common/TextAreaWithCopy/TextAreaWithCopy.scss
index a176440ca1c..038c5e8abab 100644
--- a/console/src/components/Common/Layout/ReusableTextAreaWithCopy/style.scss
+++ b/console/src/components/Common/TextAreaWithCopy/TextAreaWithCopy.scss
@@ -2,8 +2,8 @@
position: relative;
width: 80%;
}
-.codeBlockCustom
-{
+
+.codeBlockCustom {
/* position: relative;
padding: 10px 20px; */
background-color: white;
@@ -42,24 +42,23 @@
padding: 0px 0px !important;
}
-.copyGenerated
-{
+.copyGenerated {
position: absolute;
bottom: 15px;
right: 30px;
cursor: pointer;
}
-.copyGenerated img, .copyExecution img
-{
+
+.copyGenerated img, .copyExecution img {
width: 20px;
opacity: .6;
}
-.copyGenerated img:hover, .copyExecution img:hover
-{
+
+.copyGenerated img:hover, .copyExecution img:hover {
opacity: 1;
}
-.copyGenerated:focus, .copyExecution:focus
-{
+
+.copyGenerated:focus, .copyExecution:focus {
outline: none;
}
diff --git a/console/src/components/Login/Login.js b/console/src/components/Login/Login.js
index fe72ae599e8..530d439b5bf 100644
--- a/console/src/components/Login/Login.js
+++ b/console/src/components/Login/Login.js
@@ -12,13 +12,18 @@ class Login extends Component {
data: e.target.value,
});
};
+
loginClicked = () => {
this.props.dispatch(loginClicked());
};
+
render() {
- const { loginInProgress, loginError } = this.props;
+ const { loginInProgress, loginError, dispatch } = this.props;
+
+ const styles = require('./Login.scss');
+ const hasuraLogo = require('./blue-logo.svg');
+
let loginText = 'Enter';
- const styles = require('./Styles.scss');
if (loginInProgress) {
loginText = (
@@ -30,8 +35,6 @@ class Login extends Component {
loginText = 'Error. Try again?';
}
- const hasuraLogo = require('./blue-logo.svg');
- const { dispatch } = this.props;
return (
@@ -55,7 +58,6 @@ class Login extends Component {
{
+ let mainContent = null;
- let mainContent = null;
- if (migrationModeProgress) {
- mainContent = (
-
- {' '}
- {' '}
-
- );
- } else {
- mainContent = children && React.cloneElement(children);
- }
- let adminSecretHtml = null;
- if (
- !globals.isAdminSecretSet &&
- (globals.adminSecret === '' || globals.adminSecret === null)
- ) {
- adminSecretHtml = (
-
+ );
+ }
+
+ return mainContent;
+ };
+
+ const getMetadataSelectedMarker = () => {
+ let metadataSelectedMarker = null;
+
+ if (currentActiveBlock === 'metadata') {
+ metadataSelectedMarker =
;
+ }
+
+ return metadataSelectedMarker;
+ };
+
+ const getAdminSecretSection = () => {
+ let adminSecretHtml = null;
+
+ if (
+ !globals.isAdminSecretSet &&
+ (globals.adminSecret === '' || globals.adminSecret === null)
+ ) {
+ adminSecretHtml = (
+
+ );
+ }
+
+ return adminSecretHtml;
+ };
+
+ const getBannerNotification = () => {
+ let bannerNotificationHtml = null;
+
+ if (this.state.showBannerNotification) {
+ bannerNotificationHtml = (
+
+
{' '}
+ {/* phantom div to prevent overlapping of banner with content. */}
+
+
+ );
+ }
+
+ return bannerNotificationHtml;
+ };
+
+ const getLoveSection = () => {
+ let loveSectionHtml = null;
+
+ if (!this.state.loveConsentState.isDismissed) {
+ loveSectionHtml = [
+
+
+ {/*
*/}
+
,
+
,
+ ];
+ }
+
+ return loveSectionHtml;
+ };
+
+ const getHelpDropdownPosStyle = () => {
+ let helpDropdownPosStyle = '';
+
+ if (this.state.loveConsentState.isDismissed) {
+ helpDropdownPosStyle = styles.help_dropdown_menu_heart_dismissed;
+ }
+
+ return helpDropdownPosStyle;
+ };
+
+ const getRemoteSchemaLink = () => {
+ let remoteSchemaLink = null;
+
+ if (this.state.showSchemaStitch) {
+ remoteSchemaLink = (
+
+
+
- Secure your endpoint
-
+ to={appPrefix + '/remote-schemas/manage/schemas'}
+ >
+
+
+
+ Remote Schemas
+
+
-
- );
- }
+ );
+ }
+
+ return remoteSchemaLink;
+ };
+
+ const getEventsLink = () => {
+ let eventsLink = null;
+
+ if (this.state.showEvents) {
+ eventsLink = (
+
+
+
+
+
+
+ Events
+
+
+
+ );
+ }
+
+ return eventsLink;
+ };
return (
-
+
@@ -232,65 +498,19 @@ class Main extends React.Component {
- {this.state.showSchemaStitch ? (
-
-
-
-
-
-
- Remote Schemas
-
-
-
- ) : null}
- {this.state.showEvents ? (
-
-
-
-
-
-
- Events
-
-
-
- ) : null}
+
+ {getRemoteSchemaLink()}
+
+ {getEventsLink()}
- {adminSecretHtml}
+ {getAdminSecretSection()}
+
- {currentActiveBlock === 'metadata' ? (
-
- ) : null}
+ {getMetadataSelectedMarker()}
@@ -308,9 +528,7 @@ class Main extends React.Component {
'dropdown-menu ' +
styles.help_dropdown_menu +
' ' +
- (this.state.loveConsentState.isDismissed
- ? styles.help_dropdown_menu_heart_consented
- : '')
+ getHelpDropdownPosStyle()
}
aria-labelledby="help"
>
@@ -370,165 +588,16 @@ class Main extends React.Component {
- {!this.state.loveConsentState.isDismissed
- ? [
-
-
- {/*
*/}
-
,
-
,
- ]
- : null}
+
+ {getLoveSection()}
-
{mainContent}
- {this.state.showBannerNotification ? (
-
-
{' '}
- {/* phantom div to prevent overlapping of banner with content. */}
-
-
- ) : null}
+
+
+ {getMainContent()}
+
+
+ {getBannerNotification()}
);
diff --git a/console/src/components/Main/Main.scss b/console/src/components/Main/Main.scss
index a3ce45cb7e5..e2c25eb0a23 100644
--- a/console/src/components/Main/Main.scss
+++ b/console/src/components/Main/Main.scss
@@ -1,10 +1,12 @@
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
@import "../Common/Common.scss";
+
@font-face {
font-family: arcadeClassic;
src: url(https://storage.googleapis.com/hasura-graphql-engine/console/assets/ARCADECLASSIC.ttf);
}
+
.container {
position: relative;
}
@@ -30,28 +32,34 @@
background-color: #FFC627;
color: #43495a;
padding: 14.5px 10px;
+
.updateBanner {
display: flex;
align-items: center;
justify-content: center;
+
a {
color: #43495a;
text-decoration: underline;
font-weight: bold;
}
}
+
.updateBannerClose {
cursor: pointer;
position: absolute;
right: 10px;
}
+
.versionUpdateText {
font-weight: bold;
padding: 0px 5px;
}
+
.updateLink {
font-weight: bold;
}
+
.middot {
line-height: 0;
font-size: 20px;
@@ -74,11 +82,12 @@
font-weight: bold;
font-size: 20px;
}
+
.header_items {
width: 50%;
}
-.header_logo_wrapper
-{
+
+.header_logo_wrapper {
padding: 10px 20px;
position: relative;
display: flex;
@@ -86,31 +95,33 @@
border-right: 1px solid #788095;
display: inline-block;
width: 20%;
- .logoParent
- {
+
+ .logoParent {
display: flex;
align-items: center;
+
a {
display: flex;
align-items: center;
}
- .logo
- {
+
+ .logo {
display: inline-block;
// margin-right: 6px;
- a
- {
- img
- {
+
+ a {
+ img {
width: 100px;
}
}
}
+
&.collapsed {
padding: 10px 10px !important;
}
}
}
+
.project_version {
font-family: Gudea;
color: #fff;
@@ -122,6 +133,7 @@
font-weight: 300;
padding-top: 6px;
}
+
.toggleSidebar {
position: absolute;
color: #fff;
@@ -132,16 +144,19 @@
border: 1px solid #43495a;
z-index: 1;
}
+
.clusterInfoWrapper {
width: 30%;
display: flex;
justify-content: flex-end;
position: relative;
+
.clusterBtn {
background-color: transparent;
color: #DEDEDE;
font-weight: 700;
pointer-events: none;
+
.caret {
margin-left: 15px;
border-top: 6px dashed;
@@ -150,11 +165,13 @@
border-left: 6px solid transparent;
}
}
+
.clusterInfoMenu {
min-width: 250px;
right: 0;
left: unset;
top: 38px;
+
li {
text-transform: none;
padding: 6px 15px;
@@ -163,35 +180,34 @@
}
}
}
+
.setting_wrapper {
position: fixed;
right: 20px;
cursor: pointer;
z-index: 101;
}
-.setting_wrapper, .clusterInfoWrapper
-{
- .setting_dropdown
- {
- .dropdown_menu
- {
+
+.setting_wrapper, .clusterInfoWrapper {
+ .setting_dropdown {
+ .dropdown_menu {
left: inherit;
right: 0;
- li
- {
- a
- {
+
+ li {
+ a {
padding: 6px 15px;
}
}
- hr
- {
+
+ hr {
margin-top: 6px;
margin-bottom: 6px;
}
}
}
}
+
.bubble {
display: inline-block;
font-size: 16px;
@@ -208,18 +224,19 @@
-o-animation: pulse 1s ease infinite;
animation: pulse 1s ease infinite;
}
-.onBoardingHighlight
-{
+
+.onBoardingHighlight {
position: absolute;
z-index: 1001;
+
.focusDiv {
display: flex;
justify-content: flex-end;
padding-top: 10px;
font-weight: bold;
}
- .onBoardingHighlightCallOut
- {
+
+ .onBoardingHighlightCallOut {
position: absolute;
width: 21px;
height: 21px;
@@ -229,59 +246,59 @@
transform: rotate(45deg);
background-color: #4D4D4D;
}
- .onBoardingDataFocus
- {
+
+ .onBoardingDataFocus {
top: -5%;
left: 15%;
}
- .onBoardingAuthFocus
- {
+
+ .onBoardingAuthFocus {
top: -5%;
left: 15%;
}
- .onBoardingAuthUserFocus
- {
+
+ .onBoardingAuthUserFocus {
bottom: -5%;
left: 15%;
}
- .onBoardingTableFocus
- {
+
+ .onBoardingTableFocus {
top: 10%;
left: -5px;
}
- .onBoardingPanelFocus
- {
+
+ .onBoardingPanelFocus {
top: 15%;
left: -3%;
}
- .onBoardingBuilderFocus
- {
+
+ .onBoardingBuilderFocus {
top: 93%;
left: 15%;
}
- .onBoardingSendFocus
- {
+
+ .onBoardingSendFocus {
top: -5%;
left: 19%;
}
- .onBoardingCodeFocus
- {
+
+ .onBoardingCodeFocus {
bottom: -7%;
left: 15%;
}
- .onBoardingNoFocus
- {
+
+ .onBoardingNoFocus {
top: 10px;
left: 10px;
}
- .onBoardingDocsLink
- {
+
+ .onBoardingDocsLink {
a {
color: #fff;
}
}
- .onBoardingHighlightInterior
- {
+
+ .onBoardingHighlightInterior {
background-color: #4D4D4D;
position: relative;
width: 300px;
@@ -290,30 +307,32 @@
color: #fff;
}
}
-.onBoardingPanelPosition
-{
+
+.onBoardingPanelPosition {
left: 20%;
top: 126px;
}
+
.onBoardingBuilderPosition{
left: 45%;
top: 320px;
}
-.onBoardingSendPosition
-{
+
+.onBoardingSendPosition {
left: 26%;
top: 450px;
}
-.onBoardingCodePosition
-{
+
+.onBoardingCodePosition {
left: 63%;
top: 230px;
}
-.onBoardingNoFocusPosition
-{
+
+.onBoardingNoFocusPosition {
left: 80%;
top: 80%;
}
+
.mainBox {
position: absolute;
text-align: center;
@@ -329,25 +348,26 @@
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
- .yellow_button
- {
+
+ .yellow_button {
padding: 15px 60px;
font-size: 15px;
font-weight: 600;
}
- .subheading_text
- {
+
+ .subheading_text {
font-size: 45px;
font-family: 'Gudea';
font-weight: 400;
}
- .description
- {
+
+ .description {
font-size: 16px;
font-family: 'Gudea';
font-weight: 400;
padding-bottom: 10px;
}
+
.welcomeText {
font-size: 25px;
font-family: 'Gudea';
@@ -356,38 +376,43 @@
padding-top: 20px;
padding-bottom: 20px;
}
+
.welcomeSubText {
padding-bottom: 10px;
text-align: left;
}
- .smallDescription
- {
+
+ .smallDescription {
font-size: 12px;
font-family: 'Gudea';
font-weight: 400;
padding-bottom: 20px;
+
a {
cursor: pointer;
}
}
- .mainBoxListWrapper
- {
+
+ .mainBoxListWrapper {
-webkit-padding-start: 0;
padding-left: 150px;
- li
- {
+
+ li {
list-style-type: none;
text-align: left;
+
i {
padding-right: 10px;
}
}
}
}
+
.headerOnBoarding {
opacity: 0.1;
pointer-events: none;
}
+
.sidebar {
color: #DEDEDE;
background-color: #43495a;
@@ -400,29 +425,35 @@
width: 100%;
min-width: $minContainerWidth;
z-index: 100;
+
hr {
margin: 0 auto;
width: 80%;
border-top-color: #aaa;
opacity: 0.8;
}
+
.sidebarItems {
list-style-type: none;
padding: 0;
display: inline-block;
margin-bottom: 0;
margin-top: 16px;
+
a,a:visited {
color: #DEDEDE;
}
+
a:hover {
color: #DEDEDE;
}
+
li {
transition: color 0.5s;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
+
p {
padding-left: 5px;
display: inline-block;
@@ -430,6 +461,7 @@
letter-spacing: 1px;
margin: 0 0 0px;
}
+
a {
margin: 0px 0px;
display: block;
@@ -437,36 +469,42 @@
border-bottom: 4px solid transparent;
padding: 0 10px;
padding-bottom: 10px;
+
.iconCenter {
display: inline-block;
width: 20px;
text-align: center;
+
i {
width: 20px;
display: inline-block;
}
}
}
+
.serviceLink {
display: inline-block;
width: 80%;
margin: 10px 0px;
}
+
.expandArrow {
text-align: center;
width: 20%;
display: inline-block;
float: right;
+
i {
font-size: 14px;
}
+
a {
margin: 0 0;
padding: 10px;
cursor: pointer;
}
- .sidebar_dropdown
- {
+
+ .sidebar_dropdown {
left: -1px;
right: inherit;
top: inherit;
@@ -474,15 +512,14 @@
box-shadow: none;
border-radius: 0;
background-color: #515766;
- li
- {
- a
- {
+
+ li {
+ a {
padding: 6px 15px;
}
}
- hr
- {
+
+ hr {
margin-top: 6px;
margin-bottom: 6px;
}
@@ -493,22 +530,24 @@
background-color: grey;
}
}
+
.serviceList {
display: flex;
align-items: center;
}
- .navSideBarActive
- {
+
+ .navSideBarActive {
border-bottom: 4px solid #FFC627;
- i
- {
+
+ i {
color: #FFC627;
}
- p
- {
+
+ p {
color: #FFC627;
}
}
+
li:hover {
// color: $navbar-inverse-link-hover-color;
// background: #444;
@@ -521,11 +560,13 @@
.sidebarCollapsed {
max-width: 50px !important;
min-width: 50px !important;
+
ul {
li {
p {
display: none !important;
}
+
a {
.iconCenter {
i {
@@ -545,10 +586,12 @@
text-align: right;
padding: 0;
padding-right: 15px;
+
img {
height: 50px;
float: left;
}
+
.headerItem {
display: inline-block;
color: $navbar-inverse-color;
@@ -557,15 +600,18 @@
padding: 17.5px 15px;
cursor: pointer;
}
+
.headerItem:hover {
display: inline-block;
color: $navbar-inverse-link-hover-color;
transition: color 0.5s;
}
+
.headerItem:hover * {
color: $navbar-inverse-link-hover-color;
transition: color 0.5s;
}
+
.headerItem * {
color: $navbar-inverse-color;
}
@@ -616,16 +662,17 @@
display: inline-block;
cursor: pointer;
}
+
.statusHeading {
padding-right: 5px;
display: inline-block;
}
-.detailButton
-{
+
+.detailButton {
display: inline-block;
padding-left: 5px;
- button
- {
+
+ button {
background-color: transparent;
border-radius: 5px;
color: #DEDEDE;
@@ -633,6 +680,7 @@
padding: 4px 10px;
}
}
+
.statusOk {
color: green;
}
@@ -711,6 +759,7 @@
right: 0px;
z-index: 12;
font-family: 'Gudea';
+
p {
font-size: 16px;
padding-top: 5px;
@@ -736,20 +785,20 @@
color: #272B36;
height: calc(100vh - 260px);
overflow-y: auto;
+
ol li {
padding-bottom: 20px;
}
- a
- {
- button
- {
+
+ a {
+ button {
width: 105px;
text-align: center;
padding: 7px 0;
}
}
- button
- {
+
+ button {
width: 105px;
text-align: center;
padding: 7px 0;
@@ -763,8 +812,8 @@
.progressBtn {
float: right;
padding-top: 10px;
- button
- {
+
+ button {
width: 105px;
text-align: center;
padding: 7px 0;
@@ -780,8 +829,8 @@
float: right;
padding: 5px;
cursor: pointer;
- i
- {
+
+ i {
color: #AAAAAA;
}
}
@@ -817,9 +866,11 @@
.spreadWord {
display: flex;
align-items: center;
+
.yellow_button {
border-radius: 20px;
margin-right: 20px;
+
i {
padding-top: 0px;
}
@@ -836,18 +887,21 @@
.heart {
display: inline-block;
+
i {
font-size: 20px;
// color: #fb5f5f;
color: #fff;
}
}
-.borderBottom
-{
+
+.borderBottom {
border-bottom: 1px solid #788095;
}
+
.supportSection {
cursor: pointer;
+
.helpSection {
&:hover {
opacity: 0.7;
@@ -855,12 +909,14 @@
}
}
}
+
.helpSection {
display: flex;
align-items: center;
// background-color: #22283b;
padding: 15px;
position: relative;
+
.selected {
bottom: 0;
background: #FFC627;
@@ -874,6 +930,7 @@
.settingsIcon {
// background: #5668a4;
+
a {
text-decoration: none;
}
@@ -886,11 +943,12 @@
padding: 15px;
color: white;
cursor: pointer;
+
&:hover {
opacity: 0.7;
}
- img
- {
+
+ img {
width: 23px;
}
}
@@ -899,48 +957,47 @@
// background-color: #545a6c;
padding: 15px;
+
a {
color: white;
text-decoration: none;
}
}
-@keyframes heartbeat
-{
- 0%
- {
+@keyframes heartbeat {
+ 0% {
transform: scale( .75 );
}
- 20%
- {
+
+ 20% {
transform: scale( 1 );
}
- 40%
- {
+
+ 40% {
transform: scale( .75 );
}
- 60%
- {
+
+ 60% {
transform: scale( 1 );
}
- 80%
- {
+
+ 80% {
transform: scale( .75 );
}
- 100%
- {
+
+ 100% {
transform: scale( .75 );
}
}
-.graphqlHeartText
-{
+
+.graphqlHeartText {
font-size: 14px;
font-weight: 300;
text-transform: none;
text-align: center;
}
-.pixelText
-{
+
+.pixelText {
font-family: arcadeClassic;
font-size: 20px;
text-transform: uppercase;
@@ -953,8 +1010,7 @@
font-size: 15px;
}
-.pixelText1
-{
+.pixelText1 {
font-family: arcadeClassic;
font-size: 14px;
padding-left: 0px !important;
@@ -964,64 +1020,65 @@
line-height: 1.8;
letter-spacing: 1px;
}
-.help_dropdown_menu
-{
+
+.help_dropdown_menu {
top: 43px;
right: 53px;
background-color: transparent;
box-shadow: none;
border: 0;
- .help_dropdown_menu_container
- {
+
+ .help_dropdown_menu_container {
width: 300px;
float: right;
background-color: #43495a;
padding: 15px;
position: relative;
}
- li
- {
+
+ li {
display: block;
font-weight: 300;
text-transform: none;
font-size: 14px;
color: #fff;
padding: 5px 0;
- .displayBlock
- {
+
+ .displayBlock {
display: inline-block !important;
}
- a
- {
+
+ a {
color: #fff;
display: flex;
align-items: center;
- img
- {
+
+ img {
width: 20px;
display: inline-block;
margin-right: 10px;
}
}
- a:hover
- {
+
+ a:hover {
text-decoration: none;
opacity: 0.7;
}
}
}
-.help_dropdown_menu_heart_consented {
- right: 0px;
+
+.help_dropdown_menu_heart_dismissed {
+ right: 0;
}
-.dropdown_menu
-{
+
+.dropdown_menu {
top: 43px;
right: 0px;
background-color: transparent;
box-shadow: none;
border: 0;
- .dropdown_menu_container
- {
+
+ .dropdown_menu_container {
width: 490px;
float: right;
@@ -1034,21 +1091,21 @@
padding: 25px;
position: relative;
- .closeDropDown
- {
+
+ .closeDropDown {
color: #43495a;
cursor: pointer;
position: absolute;
top: 10px;
left: 20px;
- img
- {
+
+ img {
width: 10px;
}
}
}
- .arrow_up_dropdown
- {
+
+ .arrow_up_dropdown {
width: 0;
height: 0;
border-left: 10px solid transparent;
@@ -1058,15 +1115,15 @@
top: -5px;
right: 10px;
}
- .displayFlex
- {
+
+ .displayFlex {
display: flex;
// align-items: center;
justify-content: center;
margin-top: 10px;
}
- li
- {
+
+ li {
display: block;
color: #f24444;
text-transform: none;
@@ -1074,16 +1131,16 @@
display: inline-block;
padding-bottom: 0;
font-weight: 300;
- a
- {
+
+ a {
color: #fff;
}
- a:hover
- {
+
+ a:hover {
color: #fff;
}
- .socialIcon
- {
+
+ .socialIcon {
width: 90px;
height: 90px;
border: 2px solid #fff;
@@ -1092,12 +1149,13 @@
align-items: center;
justify-content: center;
}
- .gitHubBtn
- {
+
+ .gitHubBtn {
height: 20px;
}
}
}
+
.twitterShare {
position: relative;
height: 20px;
@@ -1108,14 +1166,15 @@
border-radius: 3px;
font-weight: 500;
cursor: pointer;
- button
- {
+
+ button {
background-color: #1b95e0;
padding: 5px;
letter-spacing: 0.4px;
border: 0;
}
}
+
.telemetryNotification {
background-color: red;
padding: 10px;
diff --git a/console/src/components/Common/localStorageManager.js b/console/src/components/Main/loveConsentLocalStorage.js
similarity index 100%
rename from console/src/components/Common/localStorageManager.js
rename to console/src/components/Main/loveConsentLocalStorage.js
diff --git a/console/src/components/Services/CustomResolver/Add/Add.js b/console/src/components/Services/CustomResolver/Add/Add.js
index 244e0dfa510..1638b8ac39f 100644
--- a/console/src/components/Services/CustomResolver/Add/Add.js
+++ b/console/src/components/Services/CustomResolver/Add/Add.js
@@ -11,9 +11,12 @@ class Add extends React.Component {
componentWillUnmount() {
this.props.dispatch({ type: RESET });
}
+
render() {
- const styles = require('../Styles.scss');
+ const styles = require('../CustomResolver.scss');
+
const { isRequesting, dispatch } = this.props;
+
return (
diff --git a/console/src/components/Services/CustomResolver/Common/Common.js b/console/src/components/Services/CustomResolver/Common/Common.js
index c0883bdd687..6e0054e29e1 100644
--- a/console/src/components/Services/CustomResolver/Common/Common.js
+++ b/console/src/components/Services/CustomResolver/Common/Common.js
@@ -11,28 +11,6 @@ import {
import CommonHeader from '../../../Common/Layout/ReusableHeader/Header';
-const graphqlurl = (
-
- Remote GraphQL server’s URL. E.g. https://my-domain/v1alpha1/graphql
-
-);
-const clientHeaderForward = (
-
- Toggle forwarding headers sent by the client app in the request to your
- remote GraphQL server
-
-);
-const additionalHeaders = (
-
- Custom headers to be sent to the remote GraphQL server
-
-);
-const schema = (
-
- Give this GraphQL schema a friendly name.
-
-);
-
class Common extends React.Component {
getPlaceHolderText(valType) {
if (valType === 'static') {
@@ -40,23 +18,55 @@ class Common extends React.Component {
}
return 'env var name';
}
+
handleInputChange(e) {
const fieldName = e.target.getAttribute('data-key');
this.props.dispatch(inputChange(fieldName, e.target.value));
}
+
toggleUrlParam(e) {
const field = e.target.getAttribute('value');
this.props.dispatch(inputChange(field, ''));
}
+
toggleForwardHeaders() {
this.props.dispatch({ type: UPDATE_FORWARD_CLIENT_HEADERS });
}
+
render() {
- const styles = require('../Styles.scss');
+ const styles = require('../CustomResolver.scss');
+
const { name, manualUrl, envName, forwardClientHeaders } = this.props;
const { isModify, id } = this.props.editState;
+
const isDisabled = id >= 0 && !isModify;
const urlRequired = !manualUrl && !envName;
+
+ const graphqlurl = (
+
+ Remote GraphQL server’s URL. E.g. https://my-domain/v1alpha1/graphql
+
+ );
+
+ const clientHeaderForward = (
+
+ Toggle forwarding headers sent by the client app in the request to your
+ remote GraphQL server
+
+ );
+
+ const additionalHeaders = (
+
+ Custom headers to be sent to the remote GraphQL server
+
+ );
+
+ const schema = (
+
+ Give this GraphQL schema a friendly name.
+
+ );
+
return (
diff --git a/console/src/components/Services/CustomResolver/Styles.scss b/console/src/components/Services/CustomResolver/CustomResolver.scss
similarity index 80%
rename from console/src/components/Services/CustomResolver/Styles.scss
rename to console/src/components/Services/CustomResolver/CustomResolver.scss
index 74c01c09ff1..d65bff6000d 100644
--- a/console/src/components/Services/CustomResolver/Styles.scss
+++ b/console/src/components/Services/CustomResolver/CustomResolver.scss
@@ -1,143 +1,152 @@
@import "../../Common/Common.scss";
-.addPaddCommom
-{
+.addPaddCommom {
padding: 10px 0;
}
+
.wd_300 {
width: 300px;
}
-.addPaddTop
-{
+
+.addPaddTop {
padding-top: 20px;
}
+
.dropdown_button {
width: 300px;
}
+
.detailsSection {
width: 80%;
margin-top: 20px;
}
+
.detailsRefreshButton {
padding-top: 10px !important;
}
-.resolverWrapper
-{
+
+.resolverWrapper {
// padding: 10px 0;
- .resolverContent
- {
+
+ .resolverContent {
text-align: center;
padding-bottom: 10px;
font-weight: 600;
}
- .resolverImg
- {
+
+ .resolverImg {
width: 100%;
padding: 20px;
text-align: center;
// height: 200px;
// border: 1px solid #000;
+
img {
}
}
- .commonBtn
- {
+
+ .commonBtn {
text-align: center;
padding: 20px 0;
padding-bottom: 10px
}
- .readMore
- {
+
+ .readMore {
padding-bottom: 10px;
text-align: center;
}
}
-.CommonWrapper
-{
+
+.CommonWrapper {
.check_box {
margin-bottom: 20px;
+
label {
cursor: pointer;
margin-right: 10px;
}
+
input {
margin: 0;
cursor: pointer;
}
+
i {
cursor: pointer;
}
}
+
.font_normal {
font-weight: normal;
}
- .subheading_text
- {
- i
- {
+
+ .subheading_text {
+ i {
cursor: pointer;
}
}
- .defaultWidth
- {
+ .defaultWidth {
width: 300px;
}
- .radioLabel
- {
+
+ .radioLabel {
padding-right: 20px;
text-align: left;
padding-top: 5px;
- .radioInput
- {
+
+ .radioInput {
cursor: pointer;
}
}
- .inputLabel
- {
+
+ .inputLabel {
margin-left: 0;
- input
- {
+
+ input {
width: 300px;
}
}
}
-.addWrapper
-{
- .commonBtn
- {
+
+.addWrapper {
+ .commonBtn {
padding: 20px 0;
padding-top: 40px;
+
.delete_confirmation_error {
margin-left: 15px;
color: #d9534f;
}
- .yellow_button
- {
+
+ .yellow_button {
margin-right: 20px;
}
+
.red_button {
color: #FFF;
}
- a
- {
+
+ a {
margin-left: 20px;
}
+
.refresh_schema_btn {
margin-left: 20px;
}
- span
- {
- i
- {
+
+ span {
+ i {
cursor: pointer;
margin-left: 10px;
}
}
}
+
.remove_padding_bottom {
padding-bottom: 0px;
}
+
.set_line_height {
line-height: 26px;
}
diff --git a/console/src/components/Services/CustomResolver/CustomResolverPageContainer.js b/console/src/components/Services/CustomResolver/CustomResolverPageContainer.js
new file mode 100644
index 00000000000..066405668a9
--- /dev/null
+++ b/console/src/components/Services/CustomResolver/CustomResolverPageContainer.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router';
+import PropTypes from 'prop-types';
+
+import LeftContainer from '../../Common/Layout/LeftContainer/LeftContainer';
+import PageContainer from '../../Common/Layout/PageContainer/PageContainer';
+import CustomResolverSubSidebar from './CustomResolverSubSidebar';
+
+class CustomResolverPageContainer extends React.Component {
+ render() {
+ const styles = require('../../Common/TableCommon/Table.scss');
+ const { appPrefix, children } = this.props;
+
+ const currentLocation = location.pathname;
+
+ const sidebarContent = (
+
+ );
+
+ const helmet = 'Remote Schemas | Hasura';
+
+ const leftContainer =
{sidebarContent};
+
+ return (
+
+ {children}
+
+ );
+ }
+}
+
+CustomResolverPageContainer.propTypes = {
+ appPrefix: PropTypes.string.isRequired,
+};
+
+export default (connect, mapStateToProps, mapDispatchToProps) =>
+ connect(
+ mapStateToProps,
+ mapDispatchToProps
+ )(CustomResolverPageContainer);
diff --git a/console/src/components/Services/CustomResolver/CustomResolverRouter.js b/console/src/components/Services/CustomResolver/CustomResolverRouter.js
index 9b27703f53e..a9edd103725 100644
--- a/console/src/components/Services/CustomResolver/CustomResolverRouter.js
+++ b/console/src/components/Services/CustomResolver/CustomResolverRouter.js
@@ -1,10 +1,11 @@
import React from 'react';
-import { Route, IndexRedirect, Link } from 'react-router';
-import { layoutConnector, rightBar } from '../../Common/Layout';
+import { Route, IndexRedirect } from 'react-router';
+import { rightContainerConnector } from '../../Common/Layout';
import globals from '../../../Globals';
import {
- landingCustomResolverGen,
+ customResolverPageConnector,
+ landingConnector,
addConnector,
editConnector,
viewConnector,
@@ -18,43 +19,6 @@ import { fetchResolvers, FILTER_RESOLVER } from './customActions';
import { appPrefix } from './constants';
-const listItem = (dataList, styles, currentLocation, currentResolver) => {
- if (dataList.length === 0) {
- return (
-
- No remote schemas available
-
- );
- }
- return dataList.map((d, i) => {
- let activeTableClass = '';
- if (
- d.name === currentResolver &&
- currentLocation.pathname.indexOf(currentResolver) !== -1
- ) {
- activeTableClass = styles.activeTable;
- }
- return (
-
-
-
- {d.name}
-
-
- );
- });
-};
-
const filterItem = dispatch => {
return (dataList, searchVal) => {
// form new schema
@@ -85,7 +49,6 @@ const leftNavMapStateToProps = state => {
searchQuery: state.customResolverData.listData.searchQuery,
viewResolver: state.customResolverData.listData.viewResolver,
migrationMode: state.main.migrationMode ? state.main.migrationMode : false,
- listItemTemplate: listItem,
appPrefix,
};
};
@@ -129,10 +92,11 @@ const getCustomResolverRouter = (connect, store, composeOnEnterHooks) => {
}
cb();
};
+
return (
{
onChange={fetchInitialData(store)}
>
-
+
-
+
{
+ const styles = require('../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');
+
+ function tableSearch(e) {
+ const searchTerm = e.target.value;
+ filterItem(dataList, searchTerm);
+ }
+
+ const getSearchInput = () => {
+ return (
+
+ );
+ };
+
+ const getChildList = () => {
+ const _dataList = searchQuery ? filtered : dataList;
+
+ let childList;
+ if (_dataList.length === 0) {
+ childList = (
+
+ No remote schemas available
+
+ );
+ } else {
+ childList = _dataList.map((d, i) => {
+ let activeTableClass = '';
+ if (
+ d.name === viewResolver &&
+ location.pathname.includes(viewResolver)
+ ) {
+ activeTableClass = styles.activeTable;
+ }
+
+ return (
+
+
+
+ {d.name}
+
+
+ );
+ });
+ }
+
+ return childList;
+ };
+
+ return (
+
+ {getChildList()}
+
+ );
+};
+
+export default CustomResolverSubSidebar;
diff --git a/console/src/components/Services/CustomResolver/Edit/Edit.js b/console/src/components/Services/CustomResolver/Edit/Edit.js
index 818dca445e3..3a637f1eb30 100644
--- a/console/src/components/Services/CustomResolver/Edit/Edit.js
+++ b/console/src/components/Services/CustomResolver/Edit/Edit.js
@@ -32,16 +32,19 @@ class Edit extends React.Component {
this.state = {};
this.state.deleteConfirmationError = null;
}
+
componentDidMount() {
const { resolverName } = this.props.params;
if (!resolverName) {
this.props.dispatch(push(prefixUrl));
}
+
Promise.all([
this.props.dispatch(fetchResolver(resolverName)),
this.props.dispatch({ type: VIEW_RESOLVER, data: resolverName }),
]);
}
+
componentWillReceiveProps(nextProps) {
if (nextProps.params.resolverName !== this.props.params.resolverName) {
Promise.all([
@@ -53,6 +56,7 @@ class Edit extends React.Component {
]);
}
}
+
componentWillUnmount() {
Promise.all([
this.props.dispatch({ type: RESET }),
@@ -62,9 +66,11 @@ class Edit extends React.Component {
handleDeleteResolver(e) {
e.preventDefault();
+
const a = prompt(
'Are you absolutely sure?\nThis action cannot be undone. This will permanently delete stitched GraphQL schema. Please type "DELETE" (in caps, without quotes) to confirm.\n'
);
+
try {
if (a && typeof a === 'string' && a.trim() === 'DELETE') {
this.updateDeleteConfirmationError(null);
@@ -78,20 +84,26 @@ class Edit extends React.Component {
console.error(err);
}
}
+
updateDeleteConfirmationError(data) {
this.setState({ deleteConfirmationError: data });
}
+
modifyClick() {
this.props.dispatch({ type: TOGGLE_MODIFY });
}
+
handleCancelModify() {
this.props.dispatch({ type: TOGGLE_MODIFY });
}
+
editClicked() {
this.props.dispatch(modifyResolver());
}
+
render() {
- const styles = require('../Styles.scss');
+ const styles = require('../CustomResolver.scss');
+
const { isFetching, isRequesting, editState, migrationMode } = this.props;
const { resolverName } = this.props.params;
diff --git a/console/src/components/Services/CustomResolver/Edit/View.js b/console/src/components/Services/CustomResolver/Edit/View.js
index c364f60ec7e..5248e938532 100644
--- a/console/src/components/Services/CustomResolver/Edit/View.js
+++ b/console/src/components/Services/CustomResolver/Edit/View.js
@@ -17,13 +17,6 @@ import globals from '../../../../Globals';
const prefixUrl = globals.urlPrefix + appPrefix;
-const refresh = (
-
- If your remote schema has changed, you need to refresh the GraphQL Engine
- metadata to query the modified schema
-
-);
-
class ViewStitchedSchema extends React.Component {
componentDidMount() {
const { resolverName } = this.props.params;
@@ -35,6 +28,7 @@ class ViewStitchedSchema extends React.Component {
this.props.dispatch({ type: VIEW_RESOLVER, data: resolverName }),
]);
}
+
componentWillReceiveProps(nextProps) {
if (nextProps.params.resolverName !== this.props.params.resolverName) {
Promise.all([
@@ -46,17 +40,22 @@ class ViewStitchedSchema extends React.Component {
]);
}
}
+
componentWillUnmount() {
Promise.all([
this.props.dispatch({ type: RESET }),
this.props.dispatch({ type: VIEW_RESOLVER, data: '' }),
]);
}
+
render() {
- const styles = require('../Styles.scss');
+ const styles = require('../CustomResolver.scss');
+
const { resolverName } = this.props.params;
const { manualUrl, envName, headers } = this.props;
+
const filterHeaders = headers.filter(h => !!h.name);
+
const breadCrumbs = [
{
title: 'Remote schemas',
@@ -85,6 +84,14 @@ class ViewStitchedSchema extends React.Component {
url: '',
});
}
+
+ const refresh = (
+
+ If your remote schema has changed, you need to refresh the GraphQL
+ Engine metadata to query the modified schema
+
+ );
+
return (
Headers
{filterHeaders &&
- filterHeaders.filter(k => !!k.name).map((h, i) => [
- |
- |
- {h.name} :{' '}
- {h.type === 'static'
- ? h.value
- : '<' + h.value + '>'}
- |
-
,
- i !== filterHeaders.length - 1 ?
: null,
- ])}
+ filterHeaders
+ .filter(k => !!k.name)
+ .map((h, i) => [
+
+ |
+ {h.name} :{' '}
+ {h.type === 'static'
+ ? h.value
+ : '<' + h.value + '>'}
+ |
+
,
+ i !== filterHeaders.length - 1 ?
: null,
+ ])}
) : null}
diff --git a/console/src/components/Services/CustomResolver/Landing/CustomResolver.js b/console/src/components/Services/CustomResolver/Landing/CustomResolver.js
index 49bcf17689c..5cbb1dd35d2 100644
--- a/console/src/components/Services/CustomResolver/Landing/CustomResolver.js
+++ b/console/src/components/Services/CustomResolver/Landing/CustomResolver.js
@@ -8,11 +8,12 @@ import Button from '../../../Common/Button/Button';
class CustomResolver extends React.Component {
render() {
- const styles = require('../Styles.scss');
+ const styles = require('../CustomResolver.scss');
// const landingImage = require('./schema-stitching-color.png');
// const landingImage = 'https://storage.googleapis.com/hasura-graphql-engine/console/assets/schema-stitching-diagram.png';
const { dispatch, migrationMode } = this.props;
+
return (
{
};
};
-const landingCustomResolverGen = connect =>
+const customResolverConnector = connect =>
connect(mapStateToProps)(CustomResolver);
-export default landingCustomResolverGen;
+export default customResolverConnector;
diff --git a/console/src/components/Services/CustomResolver/index.js b/console/src/components/Services/CustomResolver/index.js
index 7d2a220d790..1b6ee03b891 100644
--- a/console/src/components/Services/CustomResolver/index.js
+++ b/console/src/components/Services/CustomResolver/index.js
@@ -1,8 +1,9 @@
-export landingCustomResolverGen from './Landing/CustomResolver';
-
-export getCustomResolverRouter from './CustomResolverRouter';
+export customResolverPageConnector from './CustomResolverPageContainer';
+export landingConnector from './Landing/CustomResolver';
export addConnector from './Add/Add';
-export customResolverReducer from './customResolverReducer';
-
export editConnector from './Edit/Edit';
export viewConnector from './Edit/View';
+
+export getCustomResolverRouter from './CustomResolverRouter';
+
+export customResolverReducer from './customResolverReducer';
diff --git a/console/src/components/Services/Data/Add/AddExistingTableView.js b/console/src/components/Services/Data/Add/AddExistingTableView.js
index f5c28dea74f..3b25e82f899 100644
--- a/console/src/components/Services/Data/Add/AddExistingTableView.js
+++ b/console/src/components/Services/Data/Add/AddExistingTableView.js
@@ -15,7 +15,7 @@ class AddExistingTableView extends Component {
render() {
const { dispatch, ongoingRequest, lastError, lastSuccess } = this.props;
- const styles = require('../TableCommon/Table.scss');
+ const styles = require('../../../Common/TableCommon/Table.scss');
let alert = null;
if (ongoingRequest) {
@@ -47,7 +47,7 @@ class AddExistingTableView extends Component {
return (
diff --git a/console/src/components/Services/Data/Add/AddTable.js b/console/src/components/Services/Data/Add/AddTable.js
index fafa91dff34..ffa607ca8ae 100644
--- a/console/src/components/Services/Data/Add/AddTable.js
+++ b/console/src/components/Services/Data/Add/AddTable.js
@@ -239,7 +239,7 @@ class AddTable extends Component {
lastSuccess,
internalError,
} = this.props;
- const styles = require('../TableCommon/Table.scss');
+ const styles = require('../../../Common/TableCommon/Table.scss');
const cols = columns.map((column, i) => {
let removeIcon;
if (i + 1 === columns.length) {
@@ -282,7 +282,7 @@ class AddTable extends Component {
/>