updated indices page
Davide Di Modica committed
Aug 16, 2023 at 22:11 UTC
2d10a51ea74cce490061107f773e4f6e65462bca
1 file changed
+19
-492
src/views/apps/Dashboards/Indices.vue
+19
-492
@@ -1,16 +1,7 @@
1
<template>
2
- <el-scrollbar class="page-crypto-dashboard">
3
- <div id="crypto-banner" class="card-base">
4
- <div class="marqueeInfiniteSlider">
5
- <ul>
6
- <li v-for="index in indices" data-balloon-pos="down">
7
- <i v-if="index.health === 'green'" class="mdi mdi-check-bold bg-green"></i>
8
- <i v-else-if="index.health === 'yellow'" class="mdi mdi-alert-box bg-orange"></i>
9
- <i v-else-if="index.health === 'red'" class="mdi mdi-alert-box bg-red"></i>
10
- {{ index.index }}
11
- </li>
12
- </ul>
13
- </div>
2
+ <el-scrollbar class="page page-indices">
3
+ <div class="card-base mb-30">
4
+ <IndicesMarquee :indices="indices" @click="setIndex" />
5
</div>
6
7
<!--BEGIN TEST-->
@@ -228,15 +219,12 @@
219
</template>
220
221
<script>
231
-import axios from "axios"
222
import MarqueeInfinite from "marquee-infinite"
223
import * as echarts from "echarts"
234
-import "cryptocoins-icons/webfont/cryptocoins.css"
235
-import "cryptocoins-icons/webfont/cryptocoins-colors.css"
236
-import ResizeObserver from "../../../components/vue-resize/ResizeObserver.vue"
224
import _throttle from "lodash/throttle"
238
-import { defineComponent } from "@vue/runtime-core"
239
-import Peity from "../../../components/vue-peity/Peity.vue"
225
+import Api from "@/api"
226
+import { defineComponent } from "vue"
227
+import IndicesMarquee from "@/components/indices/Marquee.vue"
228
229
export default defineComponent({
230
data() {
@@ -277,46 +265,8 @@ export default defineComponent({
265
}
266
},
267
methods: {
280
- __resizeHanlder: _throttle(function (e) {
281
- if (this.resized) {
282
- this.asyncComponent = null
283
- this.removePeity()
284
- setTimeout(() => {
285
- this.asyncComponent = "peity"
286
- }, 1000)
287
-
288
- if (this.chartWallet) {
289
- this.chartWallet.resize()
290
- }
291
- if (this.chartPrice) {
292
- this.chartPrice.resize()
293
- }
294
- if (this.chartCandle) {
295
- this.chartCandle.resize()
296
- }
297
- if (this.pie) {
298
- this.pie.resize()
299
- }
300
- if (this.chart) {
301
- this.chart.resize()
302
- }
303
- }
304
- this.resized = true
305
- }, 700),
306
- removePeity() {
307
- const peityEl = document.querySelectorAll(".peity")
308
- //ie fix
309
- for (let i = 0; i < peityEl.length; i++) {
310
- peityEl[i].parentNode.removeChild(peityEl[i])
311
- }
312
- },
313
- initMarquee() {
314
- this.marquee = new MarqueeInfinite(".marqueeInfinite", {
315
- maxItems: 100000,
316
- duration: 500000000,
317
- direction: "horizontal",
318
- loop: true
319
- })
268
+ setIndex(index) {
269
+ console.log("setIndex", index)
270
},
271
updateSelectedHealth() {
272
const selectedIdx = this.indices.find(index => index.index === this.selectedValue)
@@ -639,10 +589,9 @@ export default defineComponent({
589
})
590
},
591
deleteIndex(index) {
642
- const path = "http://localhost:5000/graylog/indices/" + index + "/delete"
592
this.loading = true
644
- axios
645
- .delete(path)
593
+ Api.indices
594
+ .deleteIndex(index)
595
.then(res => {
596
this.successMessage = "Index was successfully deleted."
597
this.$message({
@@ -670,10 +619,9 @@ export default defineComponent({
619
})
620
},
621
getIndicesAllocation() {
673
- const path = "http://localhost:5000/wazuh_indexer/allocation"
622
this.loading = true
675
- axios
676
- .get(path)
623
+ Api.indices
624
+ .getAllocation()
625
.then(res => {
626
this.indicesAllocation = res.data.node_allocation
627
this.successMessage = "Indices allocation was successfully retrieved."
@@ -694,10 +642,9 @@ export default defineComponent({
642
})
643
},
644
getIndices() {
697
- const path = "http://localhost:5000/wazuh_indexer/indices"
645
this.loading = true
699
- axios
700
- .get(path)
646
+ Api.indices
647
+ .getIndices()
648
.then(res => {
649
this.indices = res.data.indices
650
this.successMessage = "Indices were successfully retrieved."
@@ -717,10 +664,9 @@ export default defineComponent({
664
})
665
},
666
getShards() {
720
- const path = "http://localhost:5000/wazuh_indexer/shards"
667
this.loading = true
722
- axios
723
- .get(path)
668
+ Api.indices
669
+ .getShards()
670
.then(res => {
671
this.shards = res.data.shards
672
this.successMessage = "Shards were successfully retrieved."
@@ -749,10 +695,9 @@ export default defineComponent({
695
return ""
696
},
697
getClusterHealth() {
752
- const path = "http://localhost:5000/wazuh_indexer/health"
698
this.loading = true
754
- axios
755
- .get(path)
699
+ Api.indices
700
+ .getClusterHealth()
701
.then(res => {
702
this.clusterHealth = res.data
703
this.successMessage = "Cluster health was successfully retrieved."
@@ -824,428 +769,10 @@ export default defineComponent({
769
this.pie.dispose()
770
this.chart.dispose()
771
},
827
- components: { ResizeObserver, Peity }
772
+ components: { IndicesMarquee }
773
})
774
</script>
775
776
<style lang="scss" scoped>
777
@import "../../../assets/scss/_variables";
833
-
834
-.chart-row {
835
- display: flex;
836
- flex-wrap: wrap;
837
- justify-content: space-between;
838
-}
839
-
840
-.chart-col {
841
- display: flex;
842
- justify-content: center;
843
- align-items: center;
844
- padding: 20px;
845
-}
846
-
847
-.chart-container {
848
- width: 100%;
849
-}
850
-
851
-.chart {
852
- width: 100%;
853
-}
854
-
855
-.pie-chart {
856
- flex-grow: 1;
857
-}
858
-.marqueeInfiniteSlider {
859
- display: flex;
860
- animation: marquee 20s infinite linear;
861
- white-space: nowrap;
862
-}
863
-
864
-@keyframes marquee {
865
- 0% {
866
- transform: translateX(0);
867
- }
868
- 100% {
869
- transform: translateX(-100%);
870
- }
871
-}
872
-
873
-.chart-wallet-box > div {
874
- margin-left: 1%;
875
-}
876
-
877
-.wallet-box {
878
- border-right: 2px solid $text-color-primary;
879
- height: 500px;
880
-
881
- .select-wallet {
882
- background: $text-color-primary;
883
- color: $background-color;
884
- height: 70px;
885
- overflow: hidden;
886
- position: relative;
887
- z-index: 1;
888
-
889
- .wallet-item {
890
- background: $text-color-primary;
891
- color: $background-color;
892
- height: 70px;
893
-
894
- .icon {
895
- width: 70px;
896
- line-height: 70px;
897
- font-size: 35px;
898
- }
899
-
900
- .coin {
901
- .title {
902
- font-weight: bold;
903
- }
904
- }
905
-
906
- .arrow {
907
- background: transparentize($background-color, 0.9);
908
- color: transparentize($background-color, 0.8);
909
- width: 70px;
910
- line-height: 70px;
911
- font-size: 40px;
912
- cursor: pointer;
913
-
914
- &:hover {
915
- background: transparentize($background-color, 0.8);
916
- color: transparentize($text-color-primary, 0.1);
917
- }
918
- }
919
- }
920
-
921
- .wallet-list {
922
- display: none;
923
- background: $text-color-primary;
924
- position: absolute;
925
- top: 70px;
926
- left: 0;
927
- right: 0;
928
-
929
- .wallet-item {
930
- background: transparentize($background-color, 0.9);
931
- }
932
- }
933
-
934
- &.open {
935
- overflow: inherit;
936
-
937
- .wallet-list {
938
- display: block;
939
- }
940
- }
941
- }
942
-
943
- .content {
944
- .portfolio {
945
- padding: 20px;
946
-
947
- .price-chart-box {
948
- width: 60%;
949
- display: none;
950
- }
951
-
952
- .price-chart {
953
- background: transparentize($text-color-primary, 0.9);
954
- position: relative;
955
- border-radius: 4px;
956
- }
957
- }
958
- .chart-box {
959
- position: relative;
960
- min-height: 50px;
961
-
962
- .data-range-picker {
963
- position: absolute;
964
- top: 0;
965
- left: 20px;
966
- background: transparentize($text-color-primary, 0.9);
967
- padding: 5px 10px;
968
- cursor: pointer;
969
- border-radius: 4px;
970
-
971
- &:hover {
972
- background: transparentize($text-color-primary, 0.8);
973
- }
974
- }
975
- .peity {
976
- display: inherit;
977
- }
978
- .labels {
979
- position: absolute;
980
- bottom: 0;
981
- z-index: 1;
982
- left: 0;
983
- right: 0;
984
- font-size: 12px;
985
- padding-bottom: 5px;
986
- opacity: 0.6;
987
- }
988
- }
989
- }
990
-}
991
-
992
-.widget {
993
- height: 200px;
994
- position: relative;
995
-
996
- .widget-header {
997
- .widget-icon-box {
998
- background: rgba(0, 0, 0, 0.02);
999
- border: 1px solid rgba(0, 0, 0, 0.02);
1000
- text-align: center;
1001
- width: 60px;
1002
- padding: 5px;
1003
- }
1004
-
1005
- .widget-title {
1006
- font-weight: bold;
1007
- }
1008
- }
1009
-
1010
- .badge-box {
1011
- .badge {
1012
- //background: rgba(0, 0, 0, .02);
1013
- display: inline-block;
1014
- //padding: 2px 5px;
1015
- //border: 1px solid rgba(0, 0, 0, .02);
1016
- border-radius: 4px;
1017
- font-size: 80%;
1018
- }
1019
- }
1020
-}
1021
-
1022
-.conversion-widget {
1023
- .conversion-title {
1024
- background: $text-color-primary;
1025
- color: $background-color;
1026
- padding: 10px 15px;
1027
- margin: 0;
1028
- border-top-left-radius: 5px;
1029
- border-top-right-radius: 5px;
1030
- }
1031
-
1032
- .conversion-table {
1033
- width: 100%;
1034
-
1035
- thead {
1036
- th {
1037
- opacity: 0.6;
1038
- }
1039
- }
1040
-
1041
- tbody {
1042
- tr {
1043
- td {
1044
- &.tokens {
1045
- i {
1046
- font-size: 20px;
1047
- opacity: 0.4;
1048
- }
1049
- }
1050
- }
1051
- }
1052
- }
1053
- }
1054
-}
1055
-
1056
-.candle-chart-box {
1057
- .zoom-box {
1058
- margin-top: 5px;
1059
- margin-bottom: 5px;
1060
-
1061
- .label {
1062
- background: transparentize($background-color, 0.8);
1063
- padding: 1px 5px;
1064
- font-size: 14px;
1065
- margin: 0 5px;
1066
-
1067
- &.selected {
1068
- background: transparentize($text-color-accent, 0.5);
1069
- }
1070
- }
1071
- }
1072
-}
1073
-
1074
-/*@media (max-width: 768px) {
1075
-.el-row {
1076
- //margin-left: 0 !important;
1077
- //margin-right: 0 !important;
1078
-
1079
- .el-col-24 {
1080
- //padding-left: 0 !important;
1081
- //padding-right: 0 !important;
1082
- }
1083
-}
1084
-}*/
1085
-
1086
-@media (min-width: 1300px) {
1087
- .wallet-box {
1088
- .content {
1089
- .portfolio {
1090
- .price-chart-box {
1091
- display: block;
1092
- }
1093
- }
1094
- }
1095
- }
1096
-}
1097
-
1098
-@media (max-width: 991px) {
1099
- .wallet-box {
1100
- border: none;
1101
- }
1102
- .candle-chart-box {
1103
- .price-box {
1104
- display: none;
1105
- }
1106
- }
1107
-}
1108
-
1109
-@media (max-width: 400px) {
1110
- .wallet-box {
1111
- .select-wallet {
1112
- height: 50px;
1113
-
1114
- .wallet-item {
1115
- height: 50px;
1116
-
1117
- .icon {
1118
- width: 50px;
1119
- line-height: 50px;
1120
- font-size: 30px;
1121
- }
1122
-
1123
- .coin {
1124
- .title {
1125
- font-size: 16px;
1126
-
1127
- .cod {
1128
- display: none;
1129
- }
1130
- }
1131
- .balance {
1132
- display: none;
1133
- }
1134
- }
1135
-
1136
- .arrow {
1137
- width: 50px;
1138
- line-height: 50px;
1139
- font-size: 40px;
1140
- }
1141
- }
1142
-
1143
- .wallet-list {
1144
- top: 50px;
1145
- }
1146
- }
1147
- }
1148
-
1149
- .conversion-widget {
1150
- .conversion-table {
1151
- font-size: 13px;
1152
-
1153
- tbody {
1154
- tr {
1155
- td {
1156
- &.tokens {
1157
- i {
1158
- font-size: 14px;
1159
- }
1160
- }
1161
- }
1162
- }
1163
- }
1164
- }
1165
- }
1166
-}
1167
-</style>
1168
-
1169
-<style lang="scss">
1170
-@import "../../../assets/scss/_variables";
1171
-
1172
-.page-crypto-dashboard {
1173
- #crypto-banner {
1174
- margin-bottom: 0px;
1175
- padding-top: 10px;
1176
- padding-bottom: 40px;
1177
- box-shadow: 0px -30px 0px 0px $background-color inset;
1178
- //background: transparentize($text-color-primary, 0.9);
1179
- box-sizing: border-box;
1180
-
1181
- &.marqueeInfinite {
1182
- display: -webkit-box;
1183
- display: -ms-flexbox;
1184
- display: flex;
1185
- overflow: hidden;
1186
- white-space: nowrap;
1187
- }
1188
-
1189
- &.marqueeInfinite > * {
1190
- -ms-flex-negative: 0;
1191
- flex-shrink: 0;
1192
- width: -moz-max-content;
1193
- -webkit-backface-visibility: hidden;
1194
- backface-visibility: hidden;
1195
- will-change: transform;
1196
- }
1197
-
1198
- &.marqueeInfinite > * > * {
1199
- -ms-flex-negative: 0;
1200
- flex-shrink: 0;
1201
- display: inline-block;
1202
- }
1203
-
1204
- ul,
1205
- li {
1206
- list-style: none;
1207
- padding: 0;
1208
- margin: 0;
1209
- }
1210
- li {
1211
- display: inline-block;
1212
- margin-right: 30px;
1213
- //border-bottom: 2px solid $text-color-primary;
1214
-
1215
- i {
1216
- margin-right: 7px;
1217
- }
1218
- }
1219
- }
1220
-
1221
- .wallet-box {
1222
- .content {
1223
- .chart-box {
1224
- .peity {
1225
- display: inherit;
1226
- }
1227
- }
1228
- }
1229
- }
1230
-
1231
- .vb-content {
1232
- padding: 0 20px;
1233
- box-sizing: border-box !important;
1234
- margin-top: -5px;
1235
- margin-left: -20px;
1236
- margin-right: -20px;
1237
- height: calc(100% + 15px) !important;
1238
- width: calc(100% + 40px) !important;
1239
- }
1240
-}
1241
-
1242
-@media (max-width: 768px) {
1243
- .page-crypto-dashboard {
1244
- .vb-content {
1245
- padding: 0 5px !important;
1246
- margin: -5px;
1247
- width: calc(100% + 10px) !important;
1248
- }
1249
- }
1250
-}
778
</style>