diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 00000000..51ac6404
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/index.html b/public/index.html
index ace7544a..bad1e2ed 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,7 +18,7 @@ limitations under the License. -->
-
+
<%= htmlWebpackPlugin.options.title %>
diff --git a/src/assets/icons/logo-sw.svg b/src/assets/icons/logo-sw.svg
index 72aee3ff..4a0cb5c5 100644
--- a/src/assets/icons/logo-sw.svg
+++ b/src/assets/icons/logo-sw.svg
@@ -1,32 +1,22 @@
-
-
-
diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg
index 65f0531d..8870e00d 100644
--- a/src/assets/icons/logo.svg
+++ b/src/assets/icons/logo.svg
@@ -1,29 +1,15 @@
-
-
-
diff --git a/src/graphql/fetch.ts b/src/graphql/fetch.ts
index 4521b43d..917599f5 100644
--- a/src/graphql/fetch.ts
+++ b/src/graphql/fetch.ts
@@ -24,7 +24,14 @@ async function query(param: {
const res: AxiosResponse = await axios.post(
"/graphql",
{ query: param.queryStr, variables: { ...param.conditions } },
- { cancelToken: cancelToken() }
+ {
+ cancelToken: cancelToken(),
+ headers: {
+ "spp-skywalking-reroute": "true",
+ Authorization:
+ "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJkZXZlbG9wZXJfaWQiOiJzeXN0ZW0iLCJjcmVhdGVkX2F0IjoxNjIyNDIxMzY0ODY4LCJleHBpcmVzX2F0IjoxNjUzOTU3MzY0ODY4LCJpYXQiOjE2MjI0MjEzNjR9.ZVHtxQkfCF7KM_dyDOgawbwpEAsmnCWB4c8I52svPvVc-SlzkEe0SYrNufNPniYZeM3IF0Gbojl_DSk2KleAz9CLRO3zfegciXKeEEvGjsNOqfQjgU5yZtBWmTimVXq5QoZMEGuAojACaf-m4J0H7o4LQNGwrDVA-noXVE0Eu84A5HxkjrRuFlQWv3fzqSRC_-lI0zRKuFGD-JkIfJ9b_wP_OjBWT6nmqkZn_JmK7UwniTUJjocszSA2Ma3XLx2xVPzBcz00QWyjhIyiftxNQzgqLl1XDVkRtzXUIrHnFCR8BcgR_PsqTBn5nH7aCp16zgmkkbOpmJXlNpDSVz9zUY4NOrB1jTzDB190COrfCXddb7JO6fmpet9_Zd3kInJx4XsT3x7JfBSWr9FBqFoUmNkgIWjkbN1TpwMyizXASp1nOmwJ64FDIbSpfpgUAqfSWXKZYhSisfnBLEyHCjMSPzVmDh949w-W1wU9q5nGFtrx6PTOxK_WKOiWU8_oeTjL0pD8pKXqJMaLW-OIzfrl3kzQNuF80YT-nxmNtp5PrcxehprlPmqSB_dyTHccsO3l63d8y9hiIzfRUgUjTJbktFn5t41ADARMs_0WMpIGZJyxcVssstt4J1Gj8WUFOdqPsIKigJZMn3yshC5S-KY-7S0dVd0VXgvpPqmpb9Q9Uho",
+ },
+ }
);
if (res.data.errors) {
res.data.errors = res.data.errors
diff --git a/src/graphql/index.ts b/src/graphql/index.ts
index ab6fd319..c28f3d5c 100644
--- a/src/graphql/index.ts
+++ b/src/graphql/index.ts
@@ -51,7 +51,14 @@ class Graphql {
query: query[this.queryData],
variables: variablesData,
},
- { cancelToken: cancelToken() }
+ {
+ cancelToken: cancelToken(),
+ headers: {
+ "spp-skywalking-reroute": "true",
+ Authorization:
+ "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJkZXZlbG9wZXJfaWQiOiJzeXN0ZW0iLCJjcmVhdGVkX2F0IjoxNjIyNDIxMzY0ODY4LCJleHBpcmVzX2F0IjoxNjUzOTU3MzY0ODY4LCJpYXQiOjE2MjI0MjEzNjR9.ZVHtxQkfCF7KM_dyDOgawbwpEAsmnCWB4c8I52svPvVc-SlzkEe0SYrNufNPniYZeM3IF0Gbojl_DSk2KleAz9CLRO3zfegciXKeEEvGjsNOqfQjgU5yZtBWmTimVXq5QoZMEGuAojACaf-m4J0H7o4LQNGwrDVA-noXVE0Eu84A5HxkjrRuFlQWv3fzqSRC_-lI0zRKuFGD-JkIfJ9b_wP_OjBWT6nmqkZn_JmK7UwniTUJjocszSA2Ma3XLx2xVPzBcz00QWyjhIyiftxNQzgqLl1XDVkRtzXUIrHnFCR8BcgR_PsqTBn5nH7aCp16zgmkkbOpmJXlNpDSVz9zUY4NOrB1jTzDB190COrfCXddb7JO6fmpet9_Zd3kInJx4XsT3x7JfBSWr9FBqFoUmNkgIWjkbN1TpwMyizXASp1nOmwJ64FDIbSpfpgUAqfSWXKZYhSisfnBLEyHCjMSPzVmDh949w-W1wU9q5nGFtrx6PTOxK_WKOiWU8_oeTjL0pD8pKXqJMaLW-OIzfrl3kzQNuF80YT-nxmNtp5PrcxehprlPmqSB_dyTHccsO3l63d8y9hiIzfRUgUjTJbktFn5t41ADARMs_0WMpIGZJyxcVssstt4J1Gj8WUFOdqPsIKigJZMn3yshC5S-KY-7S0dVd0VXgvpPqmpb9Q9Uho",
+ },
+ }
)
.then((res: AxiosResponse) => {
if (res.data.errors) {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ce0421bb..7ef3ab9d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -17,3 +17,5 @@
@import "./grid.scss";
@import "./lib.scss";
@import "./reset.scss";
+@import "./spp-light.scss";
+//@import "./spp-dark.scss";
diff --git a/src/styles/spp-dark.scss b/src/styles/spp-dark.scss
new file mode 100644
index 00000000..f5db25d5
--- /dev/null
+++ b/src/styles/spp-dark.scss
@@ -0,0 +1,387 @@
+:root {
+ --spp-white: #e9ebfc;
+ --spp-light-grey: #cacaca;
+ --spp-grey: #a7aebb;
+ --spp-light-blue: #747990;
+ --spp-blue: #3d444f;
+ --spp-red: #e1483b;
+ --spp-green: #182d34;
+ --spp-dark-green: #172127;
+ --spp-darkest-green: #0d1216;
+ --spp-other-green: #24343d;
+ --nice-black: #1a1a1a;
+}
+
+.el-table {
+ --el-table-tr-bg-color: var(--nice-black);
+ --el-table-header-bg-color: var(--spp-dark-green);
+ --el-table-row-hover-bg-color: var(--spp-other-green);
+ --el-table-border-color: var(--spp-darkest-green);
+ --el-table-bg-color: var(--nice-black);
+}
+
+:root {
+ --el-disabled-bg-color: var(--nice-black);
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+ background: var(--spp-other-green);
+}
+
+.el-input__inner {
+ --el-input-bg-color: var(--spp-other-green);
+ //--el-input-border: red !important;
+}
+
+.el-select {
+ --el-select-border-color-hover: var(--spp-light-blue);
+ --el-select-input-focus-border-color: var(--spp-red);
+ --el-input-placeholder-color: red;
+ --el-text-color-placeholder: var(--spp-light-grey);
+ --el-input-border: red;
+ --el-border-color-base: red;
+ --el-input-bg-color: red;
+}
+
+.el-scrollbar {
+ --el-scrollbar-bg-color: var(--spp-light-grey);
+}
+
+.el-select__popper.el-popper[role="tooltip"] {
+ background: var(--spp-other-green);
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+ background: var(--spp-other-green);
+}
+
+.el-select__popper.el-popper[role="tooltip"] {
+ border: 1px solid var(--spp-blue);
+}
+
+.el-popper.is-light {
+ background: var(--nice-black);
+}
+
+.micro-topo-chart .operations-list {
+ background: var(--spp-other-green) !important;
+ color: white !important;
+}
+
+.el-input {
+ --el-input-border: 1px solid var(--spp-blue);
+ --el-input-text-color: var(--spp-white);
+}
+
+.el-select-dropdown__item.selected {
+ color: var(--spp-white);
+}
+
+.el-select__popper.el-popper[role="tooltip"] .el-popper__arrow::before {
+ border: 1px solid var(--spp-blue);
+}
+
+.el-popper.is-light .el-popper__arrow::before {
+ background: var(--spp-other-green);
+}
+
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+ background: var(--spp-dark-green);
+}
+
+.settings .label {
+ color: var(--spp-white);
+}
+
+.settings i, span {
+ color: var(--spp-light-grey);
+}
+
+.utc-input {
+ color: var(--spp-white) !important;
+}
+
+.settings input {
+ background: var(--spp-dark-green) !important;
+ border: 1px solid var(--spp-blue) !important;
+ color: var(--spp-white);
+}
+
+.auto-time {
+ color: var(--spp-white);
+}
+
+.el-switch__core {
+ --el-switch-off-color: var(--spp-dark-green);
+ --el-switch-on-color: var(--spp-red);
+}
+
+.alarm-tool {
+ background-color: var(--nice-black) !important;
+ border-bottom: 1px solid var(--spp-blue) !important;
+}
+
+.el-dialog {
+ background-color: var(--nice-black);
+}
+
+.el-dialog__title {
+ color: var(--spp-white);
+}
+
+.el-pagination button:disabled {
+ background-color: var(--spp-dark-green);
+}
+
+.timeline-table-i {
+ border-left: 4px solid var(--spp-other-green) !important;
+}
+
+.timeline-table-i::before {
+ background-color: var(--spp-other-green) !important;
+}
+.timeline-table-i::after {
+ background-color: var(--spp-grey) !important;
+}
+
+.settings .label {
+ color: var(--spp-white) !important;
+}
+
+.event-tool {
+ background-color: var(--nice-black) !important;
+}
+
+.el-button {
+ background-color: var(--spp-green);
+ border-color: var(--spp-other-green);
+}
+
+.el-button--danger {
+ background-color: var(--spp-red);
+}
+
+.el-button:focus, .el-button:hover {
+ background-color: var(--spp-darkest-green);
+ border-color: black
+}
+
+.table {
+ background-color: var(--nice-black) !important;
+}
+
+.trace-td.selected {
+ background-color: var(--spp-other-green) !important;
+}
+
+.trace-td.trace-error.selected {
+ background-color: var(--nice-black) !important;
+}
+
+.el-pager li.active {
+ background-color: var(--spp-other-green);
+}
+
+.el-pager li {
+ background-color: var(--spp-green);
+}
+
+.el-pager li.active {
+ color: var(--spp-white);
+}
+
+.el-pager + button.btn-next[type="button"] {
+ background-color: var(--spp-grey);
+}
+
+.toggle-selection {
+ background-color: var(--nice-black) !important;
+}
+
+.side-bar {
+ background-color: var(--spp-other-green) !important;
+}
+
+.bar-select {
+ background: black !important;
+
+ .selected {
+ color: var(--spp-red) !important;
+ }
+}
+
+.nav-bar {
+ background-color: var(--spp-darkest-green) !important;
+ border-bottom: 1px solid var(--spp-darkest-green) !important;
+ color: var(--spp-white) !important;
+}
+
+.nav-bar.dark {
+ background-color: var(--spp-darkest-green) !important;
+ border-bottom: 1px solid var(--spp-green) !important;
+}
+
+.tools {
+ &:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.chart-card {
+ color: var(--spp-white) !important;
+}
+
+.profile-item.level0 {
+ &:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.name {
+ color: var(--spp-red) !important;
+}
+
+//span.active {
+// background-color: var(--spp-red) !important;
+//}
+
+.topology {
+ background-color: var(--spp-darkest-green) !important;
+}
+
+.widget {
+ background: #010409 !important;
+}
+
+.header {
+ border-bottom: 1px solid #1c3139 !important;
+}
+
+.body {
+ color: var(--spp-blue) !important;
+ background: var(--spp-darkest-green) !important;
+}
+
+.tabs {
+ input {
+ background: inherit !important;
+ }
+
+ input.tab-name {
+ color: var(--spp-white) !important;;
+ }
+
+ span.active {
+ border-bottom: 1px solid var(--spp-red) !important;
+ color: var(--spp-red) !important;
+ }
+}
+
+.tab-header {
+ border-bottom: 1px solid #1c3139 !important;
+}
+
+.vue-grid-layout {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item.active {
+ border: 1px solid var(--spp-red) !important;
+}
+
+.vue-grid-layout {
+ background: var(--spp-darkest-green) !important;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+ background: var(--spp-dark-green) !important;
+}
+
+.vue-grid-item.active {
+ border: 1px solid var(--spp-red) !important;
+}
+
+.dashboard-tool {
+ background: #1a262d !important;
+ border-bottom: 1px solid #1c3139 !important;
+}
+
+.micro-topo-chart {
+ .operations-list {
+ span:hover {
+ color: var(--spp-red) !important;
+ }
+ }
+ .switch-icon {
+ background-color: #182d3499 !important;
+ }
+}
+
+.d3-tip {
+ background: var(--spp-green) !important;
+}
+
+.d3-tip:after {
+ color: var(--spp-green) !important;
+}
+
+.sankey {
+ background-color: var(--spp-darkest-green) !important;
+}
+
+.switch-icon {
+ background-color: #182d3499 !important;
+}
+
+.operations-list {
+ span:hover {
+ color: var(--spp-red) !important;
+ }
+}
+
+.link {
+ color: var(--spp-red) !important;
+}
+
+.dark-dialog {
+ background-color: var(--spp-darkest-green) !important;
+ color: #ddd !important;
+
+ .el-loading-mask {
+ background-color: red !important;
+ color: red !important;
+ }
+}
+
+.el-loading-mask {
+ background-color: unset !important;
+ color: unset !important;
+}
+
+.app-main {
+ background: var(--spp-darkest-green) !important;
+}
+
+.opt {
+ &.select-disabled {
+ color: var(--spp-red) !important;
+ }
+}
+
+blockquote {
+ border-left: 4px solid var(--spp-light-grey) !important;
+}
+
+a {
+ color: var(--spp-white) !important;
+}
+
+.timeline-table-i {
+ &::before {
+ background-color: #448dfe !important;
+ }
+}
diff --git a/src/styles/spp-light.scss b/src/styles/spp-light.scss
new file mode 100644
index 00000000..4e31cbe3
--- /dev/null
+++ b/src/styles/spp-light.scss
@@ -0,0 +1,29 @@
+:root {
+ --spp-white: #e9ebfc;
+ --spp-light-grey: #cacaca;
+ --spp-grey: #a7aebb;
+ --spp-light-blue: #747990;
+ --spp-blue: #3d444f;
+ --spp-red: #e1483b;
+ --spp-green: #182d34;
+ --spp-dark-green: #172127;
+ --spp-darkest-green: #0d1216;
+ --spp-other-green: #24343d;
+ --nice-black: #1a1a1a;
+}
+
+.side-bar {
+ background: var(--spp-other-green) !important;
+}
+
+.el-menu {
+ background-color: var(--spp-other-green) !important;
+}
+
+.el-sub-menu__title {
+ background-color: var(--spp-other-green) !important;
+}
+
+.el-menu-item.is-active {
+ color: var(--spp-red) !important;
+}
diff --git a/vue.config.js b/vue.config.js
index dd9d016c..769a933d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -25,7 +25,7 @@ module.exports = {
devServer: {
proxy: {
"/graphql": {
- target: `${process.env.SW_PROXY_TARGET || "http://127.0.0.1:12800"}`,
+ target: `${process.env.SW_PROXY_TARGET || "https://127.0.0.1:12800"}`,
changeOrigin: true,
},
},
@@ -35,7 +35,7 @@ module.exports = {
},
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
- args[0].title = "Apache SkyWalking";
+ args[0].title = "Live Dashboard - Source++";
return args;
});
const svgRule = config.module.rule("svg");