removed inputs files
Davide Di Modica committed
Oct 12, 2023 at 18:28 UTC
9640b34efb96c6a3c3b1cd79144ea93b0a186cde
8 files changed
-1126
src/components/inputs/Details.vue
deleted
-116
@@ -1,116 +0,0 @@
1
-<template>
2
- <div class="input-details-box" v-loading="loading" :class="{ active: currentInput }">
3
- <div class="box-header">
4
- <div class="title">
5
- <span v-if="currentInput">Below the details for input</span>
6
- <span v-else>Select an input to see the details</span>
7
- </div>
8
- <div class="select-box" v-if="inputs && inputs.length">
9
- <el-select v-model="currentInput" placeholder="Inputs list" clearable value-key="input" filterable>
10
- <el-option v-for="input in inputs" :key="input.id" :label="input.title" :value="input"></el-option>
11
- </el-select>
12
- </div>
13
- </div>
14
- <div class="details-box" v-if="currentInput">
15
- <div class="info">
16
- <InputCard :input="currentInput" showActions @delete="clearCurrentInput()" />
17
- </div>
18
- </div>
19
- </div>
20
-</template>
21
-
22
-<script setup lang="ts">
23
-import { computed, onBeforeMount, ref, toRefs } from "vue"
24
-import { type Inputs } from "@/types/graylog.d"
25
-import InputCard from "@/components/inputs/InputCard.vue"
26
-
27
-type InputModel = Inputs | null | ""
28
-
29
-const emit = defineEmits<{
30
- (e: "update:modelValue", value: InputModel): void
31
-}>()
32
-
33
-const props = defineProps<{
34
- inputs: Inputs[] | null
35
- modelValue: InputModel
36
-}>()
37
-const { inputs, modelValue } = toRefs(props)
38
-
39
-const loading = computed(() => !inputs?.value || inputs.value === null)
40
-
41
-const currentInput = computed<InputModel>({
42
- get() {
43
- return modelValue.value
44
- },
45
- set(value) {
46
- emit("update:modelValue", value)
47
- }
48
-})
49
-
50
-function clearCurrentInput() {
51
- currentInput.value = null
52
-}
53
-
54
-onBeforeMount(() => {
55
- // getShards()
56
-})
57
-</script>
58
-
59
-<style lang="scss" scoped>
60
-.input-details-box {
61
- padding: var(--size-5) var(--size-6);
62
- border: 2px solid transparent;
63
-
64
- &.active {
65
- border-color: var(--primary-color);
66
- }
67
-
68
- .box-header {
69
- display: flex;
70
- align-items: center;
71
-
72
- .title {
73
- margin-right: var(--size-4);
74
- }
75
-
76
- .select-box {
77
- .el-select {
78
- min-width: var(--size-fluid-9);
79
- max-width: 100%;
80
- }
81
- }
82
- }
83
-
84
- .details-box {
85
- margin-top: var(--size-6);
86
-
87
- .shards {
88
- margin-top: var(--size-4);
89
-
90
- .shard-state {
91
- font-weight: bold;
92
- &.STARTED {
93
- color: var(--success-color);
94
- }
95
- &.UNASSIGNED {
96
- color: var(--warning-color);
97
- }
98
- }
99
- }
100
- }
101
-
102
- @media (max-width: 1000px) {
103
- .box-header {
104
- flex-direction: column;
105
- align-items: flex-start;
106
- gap: var(--size-2);
107
- .select-box {
108
- width: 100%;
109
- .el-select {
110
- min-width: 100%;
111
- }
112
- }
113
- }
114
- }
115
-}
116
-</style>
src/components/inputs/InputCard.vue
deleted
-272
@@ -1,272 +0,0 @@
1
-<template>
2
- <div class="input-card" :class="[`health-green`]" v-loading="loading">
3
- <div class="group">
4
- <div class="box">
5
- <div class="value">{{ input.title }}</div>
6
- <div class="label">name</div>
7
- </div>
8
- <div class="box">
9
- <div class="value">{{ input.id }}</div>
10
- <div class="label">id</div>
11
- </div>
12
- <!-- <div class="box">
13
- <div class="value text-uppercase">
14
- <InputIcon :health="input.health" color />
15
- {{ input.health }}
16
- </div>
17
- <div class="label">health</div>
18
- </div> -->
19
- </div>
20
- <div class="group">
21
- <div class="box">
22
- <div class="value">{{ input.port }}</div>
23
- <div class="label">port</div>
24
- </div>
25
- <div class="box">
26
- <div class="value">{{ input.inputstate }}</div>
27
- <div class="label">state</div>
28
- </div>
29
- </div>
30
- <div class="group actions" v-if="showActions">
31
- <div class="box">
32
- <!--
33
- <el-tooltip content="Rotate" placement="top" :show-arrow="false">
34
- <el-button type="primary" :icon="RefreshIcon" circle />
35
- </el-tooltip>
36
- -->
37
- <el-tooltip content="Start Input" placement="top" :show-arrow="false">
38
- <el-button type="primary" :icon="DeleteIcon" circle @click="handleStart" />
39
- </el-tooltip>
40
- <el-tooltip content="Stop Input" placement="top" :show-arrow="false">
41
- <el-button type="danger" :icon="DeleteIcon" circle @click="handleStop" />
42
- </el-tooltip>
43
- </div>
44
- </div>
45
- </div>
46
-</template>
47
-
48
-<!-- arrow-down-drop-circle
49
-"mdi mdi-arrow-down-drop-circle" -->
50
-
51
-<script setup lang="ts">
52
-import { ref, toRefs } from "vue"
53
-import { type Inputs } from "@/types/graylog.d"
54
-import Api from "@/api"
55
-import { ElMessage, ElMessageBox } from "element-plus"
56
-import { Refresh as RefreshIcon, Delete as DeleteIcon } from "@element-plus/icons-vue"
57
-
58
-const emit = defineEmits<{
59
- (e: "delete"): void
60
-}>()
61
-
62
-const props = defineProps<{
63
- input: Inputs
64
- showActions?: boolean
65
-}>()
66
-const { input, showActions } = toRefs(props)
67
-
68
-const loading = ref(false)
69
-
70
-const handleStop = () => {
71
- ElMessageBox.confirm(
72
- `Are you sure you want to stop the Input:<br/><strong>${input.value.title}</strong> ?`,
73
- "Warning",
74
- {
75
- confirmButtonText: "Yes I'm sure",
76
- confirmButtonClass: "el-button--warning",
77
- cancelButtonText: "Cancel",
78
- type: "warning",
79
- dangerouslyUseHTMLString: true,
80
- customStyle: {
81
- width: "90%",
82
- maxWidth: "400px"
83
- }
84
- }
85
- )
86
- .then(() => {
87
- stopInput()
88
- })
89
- .catch(() => {
90
- ElMessage({
91
- type: "info",
92
- message: "Stop canceled"
93
- })
94
- })
95
-}
96
-
97
-function stopInput() {
98
- loading.value = true
99
-
100
- Api.graylog
101
- .stopInput(input.value.id)
102
- .then(res => {
103
- if (res.data.success) {
104
- ElMessage({
105
- message: "Input was successfully stopped.",
106
- type: "success"
107
- })
108
-
109
- emit("delete")
110
- } else {
111
- ElMessage({
112
- message: res.data?.message || "An error occurred. Please try again later.",
113
- type: "error"
114
- })
115
- }
116
- })
117
- .catch(err => {
118
- if (err.response?.status === 401) {
119
- ElMessage({
120
- message:
121
- err.response?.data?.message ||
122
- "Graylog returned Unauthorized. Please check your connector credentials.",
123
- type: "error"
124
- })
125
- } else if (err.response?.status === 404) {
126
- ElMessage({
127
- message: err.response?.data?.message || "An error occurred. Please try again later.",
128
- type: "error"
129
- })
130
- } else {
131
- ElMessage({
132
- message: err.response?.data?.message || "An error occurred. Please try again later.",
133
- type: "error"
134
- })
135
- }
136
- })
137
- .finally(() => {
138
- loading.value = false
139
- })
140
-}
141
-
142
-const handleStart = () => {
143
- ElMessageBox.confirm(
144
- `Are you sure you want to start the Input:<br/><strong>${input.value.title}</strong> ?`,
145
- "Warning",
146
- {
147
- confirmButtonText: "Yes I'm sure",
148
- confirmButtonClass: "el-button--warning",
149
- cancelButtonText: "Cancel",
150
- type: "warning",
151
- dangerouslyUseHTMLString: true,
152
- customStyle: {
153
- width: "90%",
154
- maxWidth: "400px"
155
- }
156
- }
157
- )
158
- .then(() => {
159
- startInput()
160
- })
161
- .catch(() => {
162
- ElMessage({
163
- type: "info",
164
- message: "Stop canceled"
165
- })
166
- })
167
-}
168
-
169
-function startInput() {
170
- loading.value = true
171
-
172
- Api.graylog
173
- .startInput(input.value.id)
174
- .then(res => {
175
- if (res.data.success) {
176
- ElMessage({
177
- message: "Input was successfully started.",
178
- type: "success"
179
- })
180
-
181
- emit("delete")
182
- } else {
183
- ElMessage({
184
- message: res.data?.message || "An error occurred. Please try again later.",
185
- type: "error"
186
- })
187
- }
188
- })
189
- .catch(err => {
190
- if (err.response?.status === 401) {
191
- ElMessage({
192
- message:
193
- err.response?.data?.message ||
194
- "Graylog returned Unauthorized. Please check your connector credentials.",
195
- type: "error"
196
- })
197
- } else if (err.response?.status === 404) {
198
- ElMessage({
199
- message: err.response?.data?.message || "An error occurred. Please try again later.",
200
- type: "error"
201
- })
202
- } else {
203
- ElMessage({
204
- message: err.response?.data?.message || "An error occurred. Please try again later.",
205
- type: "error"
206
- })
207
- }
208
- })
209
- .finally(() => {
210
- loading.value = false
211
- })
212
-}
213
-</script>
214
-
215
-<style lang="scss" scoped>
216
-.input-card {
217
- padding: var(--size-3) var(--size-4);
218
-
219
- border: 2px solid transparent;
220
-
221
- display: flex;
222
- justify-content: space-between;
223
- gap: var(--size-6);
224
- flex-wrap: wrap;
225
-
226
- .group {
227
- display: flex;
228
- justify-content: space-between;
229
- gap: var(--size-6);
230
- flex-grow: 1;
231
- flex-wrap: wrap;
232
-
233
- .box {
234
- flex-grow: 1;
235
-
236
- .value {
237
- font-weight: bold;
238
- margin-bottom: 2px;
239
- white-space: nowrap;
240
- }
241
- .label {
242
- white-space: nowrap;
243
- @apply text-xs;
244
- font-family: var(--font-family-mono);
245
- opacity: 0.8;
246
- }
247
- }
248
- &.actions {
249
- flex-grow: 0;
250
- .box {
251
- padding: var(--size-2) var(--size-2);
252
- background-color: rgba(0, 0, 0, 0.07);
253
- display: flex;
254
- align-items: center;
255
- border-radius: var(--radius-6);
256
- }
257
- }
258
- }
259
-
260
- &.health-green {
261
- border-color: var(--success-color);
262
- }
263
-
264
- &.health-yellow {
265
- border-color: var(--warning-color);
266
- }
267
-
268
- &.health-red {
269
- border-color: var(--error-color);
270
- }
271
-}
272
-</style>
src/components/inputs/InputIcon.vue
deleted
-29
@@ -1,29 +0,0 @@
1
-<template>
2
- <span class="input-icon" :class="[`state-${state}`, { color }]">
3
- <i v-if="state === InputState.RUNNING" class="mdi mdi-shield-check"></i>
4
- </span>
5
-</template>
6
-
7
-<script setup lang="ts">
8
-import { toRefs } from "vue"
9
-import { type RunningInput, InputState } from "@/types/graylog.d"
10
-
11
-const props = defineProps<{
12
- state: RunningInput["state"]
13
- color?: boolean
14
-}>()
15
-const { state, color } = toRefs(props)
16
-</script>
17
-
18
-<style lang="scss" scoped>
19
-@import "@/assets/scss/_variables";
20
-@import "@/assets/scss/card-shadow";
21
-
22
-.input-icon {
23
- &.color {
24
- &.state-RUNNING {
25
- color: var(--success-color);
26
- }
27
- }
28
-}
29
-</style>
src/components/inputs/Marquee.vue
deleted
-103
@@ -1,103 +0,0 @@
1
-<template>
2
- <div class="inputs-marquee" v-loading="loading">
3
- <Vue3Marquee
4
- class="marquee-wrap"
5
- :duration="200"
6
- :pauseOnHover="true"
7
- :clone="true"
8
- :gradient="true"
9
- :gradient-color="[255, 255, 255]"
10
- gradient-length="10%"
11
- >
12
- <span
13
- v-for="item in parsedItems"
14
- :key="item.id"
15
- class="item"
16
- :class="item.state"
17
- @click="emit('click', item)"
18
- title="Click to select"
19
- >
20
- <InputIcon :state="item.state" color />
21
- {{ item.title }}
22
- </span>
23
- </Vue3Marquee>
24
- <div class="info">
25
- <i class="mdi mdi-information-outline"></i>
26
- Click on an input to select
27
- </div>
28
- </div>
29
-</template>
30
-
31
-<script setup lang="ts">
32
-import { computed, toRefs } from "vue"
33
-import { type RunningInput } from "@/types/graylog.d"
34
-import { Vue3Marquee } from "vue3-marquee"
35
-import InputIcon from "@/components/inputs/InputIcon.vue"
36
-
37
-const MIN_ITEMS = 8
38
-
39
-const emit = defineEmits<{
40
- (e: "click", value: RunningInput): void
41
-}>()
42
-
43
-const props = defineProps<{
44
- inputs: RunningInput[] | null
45
-}>()
46
-
47
-const { inputs } = toRefs(props)
48
-
49
-const parsedItems = computed(() => {
50
- if (!inputs.value) {
51
- return []
52
- }
53
-
54
- if (inputs.value.length >= MIN_ITEMS) {
55
- return inputs.value
56
- }
57
-
58
- const list = []
59
- while (list.length < MIN_ITEMS) {
60
- list.push(...inputs.value)
61
- }
62
-
63
- return list
64
-})
65
-
66
-const loading = computed(() => !inputs?.value || inputs.value === null)
67
-</script>
68
-
69
-<style lang="scss" scoped>
70
-.inputs-marquee {
71
- .info {
72
- opacity: 0.5;
73
- font-size: 12px;
74
- margin-top: 5px;
75
- }
76
- .marquee-wrap {
77
- height: 45px;
78
- transform: translate3d(0, 0, 0);
79
-
80
- :deep() {
81
- .marquee {
82
- transform: translate3d(0, 0, 0);
83
- }
84
- .overlay {
85
- &:after {
86
- right: -1px;
87
- }
88
- }
89
- }
90
-
91
- .item {
92
- padding: 10px 20px;
93
- cursor: pointer;
94
-
95
- &.RUNNING {
96
- i {
97
- color: var(--success-color);
98
- }
99
- }
100
- }
101
- }
102
-}
103
-</style>
src/components/inputs/StreamCard.vue
deleted
-277
@@ -1,277 +0,0 @@
1
-<template>
2
- <div class="stream-card" :class="[`health-green`]" v-loading="loading">
3
- <div class="group">
4
- <div class="box">
5
- <div class="value">{{ stream.title }}</div>
6
- <div class="label">name</div>
7
- </div>
8
- <div class="box">
9
- <div class="value">{{ stream.description }}</div>
10
- <div class="label">description</div>
11
- </div>
12
- <div class="box">
13
- <div class="value">{{ stream.id }}</div>
14
- <div class="label">id</div>
15
- </div>
16
- <!-- <div class="box">
17
- <div class="value text-uppercase">
18
- <InputIcon :health="input.health" color />
19
- {{ input.health }}
20
- </div>
21
- <div class="label">health</div>
22
- </div> -->
23
- </div>
24
- <div class="group">
25
- <div class="box">
26
- <div class="value">{{ stream.disabled }}</div>
27
- <div class="label">disabled</div>
28
- </div>
29
- <div class="box">
30
- <div class="value">{{ stream.rules.length }}</div>
31
- <div class="label">number of assigned rules</div>
32
- </div>
33
- </div>
34
- <div class="group actions" v-if="showActions">
35
- <div class="box">
36
- <!--
37
- <el-tooltip content="Rotate" placement="top" :show-arrow="false">
38
- <el-button type="primary" :icon="RefreshIcon" circle />
39
- </el-tooltip>
40
- -->
41
- <el-tooltip content="Start Stream" placement="top" :show-arrow="false">
42
- <el-button type="primary" :icon="DeleteIcon" circle @click="handleStart" />
43
- </el-tooltip>
44
- <el-tooltip content="Stop Stream" placement="top" :show-arrow="false">
45
- <el-button type="danger" :icon="DeleteIcon" circle @click="handleStop" />
46
- </el-tooltip>
47
- </div>
48
- </div>
49
- </div>
50
-</template>
51
-
52
-<!-- arrow-down-drop-circle
53
-"mdi mdi-arrow-down-drop-circle" -->
54
-
55
-<script setup lang="ts">
56
-import { ref, toRefs } from "vue"
57
-import StreamIcon from "@/components/inputs/InputIcon.vue"
58
-import { type Streams } from "@/types/graylog.d"
59
-import Api from "@/api"
60
-import { ElMessage, ElMessageBox } from "element-plus"
61
-import { Refresh as RefreshIcon, Delete as DeleteIcon } from "@element-plus/icons-vue"
62
-
63
-const emit = defineEmits<{
64
- (e: "delete"): void
65
-}>()
66
-
67
-const props = defineProps<{
68
- stream: Streams
69
- showActions?: boolean
70
-}>()
71
-const { stream, showActions } = toRefs(props)
72
-
73
-const loading = ref(false)
74
-
75
-const handleStop = () => {
76
- ElMessageBox.confirm(
77
- `Are you sure you want to stop the Stream:<br/><strong>${stream.value.title}</strong> ?`,
78
- "Warning",
79
- {
80
- confirmButtonText: "Yes I'm sure",
81
- confirmButtonClass: "el-button--warning",
82
- cancelButtonText: "Cancel",
83
- type: "warning",
84
- dangerouslyUseHTMLString: true,
85
- customStyle: {
86
- width: "90%",
87
- maxWidth: "400px"
88
- }
89
- }
90
- )
91
- .then(() => {
92
- stopStream()
93
- })
94
- .catch(() => {
95
- ElMessage({
96
- type: "info",
97
- message: "Stop canceled"
98
- })
99
- })
100
-}
101
-
102
-function stopStream() {
103
- loading.value = true
104
-
105
- Api.graylog
106
- .stopStream(stream.value.id)
107
- .then(res => {
108
- if (res.data.success) {
109
- ElMessage({
110
- message: "Stream was successfully stopped.",
111
- type: "success"
112
- })
113
-
114
- emit("delete")
115
- } else {
116
- ElMessage({
117
- message: res.data?.message || "An error occurred. Please try again later.",
118
- type: "error"
119
- })
120
- }
121
- })
122
- .catch(err => {
123
- if (err.response?.status === 401) {
124
- ElMessage({
125
- message:
126
- err.response?.data?.message ||
127
- "Graylog returned Unauthorized. Please check your connector credentials.",
128
- type: "error"
129
- })
130
- } else if (err.response?.status === 404) {
131
- ElMessage({
132
- message: err.response?.data?.message || "An error occurred. Please try again later.",
133
- type: "error"
134
- })
135
- } else {
136
- ElMessage({
137
- message: err.response?.data?.message || "An error occurred. Please try again later.",
138
- type: "error"
139
- })
140
- }
141
- })
142
- .finally(() => {
143
- loading.value = false
144
- })
145
-}
146
-
147
-const handleStart = () => {
148
- ElMessageBox.confirm(
149
- `Are you sure you want to start the Stream:<br/><strong>${stream.value.title}</strong> ?`,
150
- "Warning",
151
- {
152
- confirmButtonText: "Yes I'm sure",
153
- confirmButtonClass: "el-button--warning",
154
- cancelButtonText: "Cancel",
155
- type: "warning",
156
- dangerouslyUseHTMLString: true,
157
- customStyle: {
158
- width: "90%",
159
- maxWidth: "400px"
160
- }
161
- }
162
- )
163
- .then(() => {
164
- startStream()
165
- })
166
- .catch(() => {
167
- ElMessage({
168
- type: "info",
169
- message: "Stop canceled"
170
- })
171
- })
172
-}
173
-
174
-function startStream() {
175
- loading.value = true
176
-
177
- Api.graylog
178
- .startStream(stream.value.id)
179
- .then(res => {
180
- if (res.data.success) {
181
- ElMessage({
182
- message: "Stream was successfully started.",
183
- type: "success"
184
- })
185
-
186
- emit("delete")
187
- } else {
188
- ElMessage({
189
- message: res.data?.message || "An error occurred. Please try again later.",
190
- type: "error"
191
- })
192
- }
193
- })
194
- .catch(err => {
195
- if (err.response?.status === 401) {
196
- ElMessage({
197
- message:
198
- err.response?.data?.message ||
199
- "Graylog returned Unauthorized. Please check your connector credentials.",
200
- type: "error"
201
- })
202
- } else if (err.response?.status === 404) {
203
- ElMessage({
204
- message: err.response?.data?.message || "An error occurred. Please try again later.",
205
- type: "error"
206
- })
207
- } else {
208
- ElMessage({
209
- message: err.response?.data?.message || "An error occurred. Please try again later.",
210
- type: "error"
211
- })
212
- }
213
- })
214
- .finally(() => {
215
- loading.value = false
216
- })
217
-}
218
-</script>
219
-
220
-<style lang="scss" scoped>
221
-.stream-card {
222
- padding: var(--size-3) var(--size-4);
223
-
224
- border: 2px solid transparent;
225
-
226
- display: flex;
227
- justify-content: space-between;
228
- gap: var(--size-6);
229
- flex-wrap: wrap;
230
-
231
- .group {
232
- display: flex;
233
- justify-content: space-between;
234
- gap: var(--size-6);
235
- flex-grow: 1;
236
- flex-wrap: wrap;
237
-
238
- .box {
239
- flex-grow: 1;
240
-
241
- .value {
242
- font-weight: bold;
243
- margin-bottom: 2px;
244
- white-space: nowrap;
245
- }
246
- .label {
247
- white-space: nowrap;
248
- @apply text-xs;
249
- font-family: var(--font-family-mono);
250
- opacity: 0.8;
251
- }
252
- }
253
- &.actions {
254
- flex-grow: 0;
255
- .box {
256
- padding: var(--size-2) var(--size-2);
257
- background-color: rgba(0, 0, 0, 0.07);
258
- display: flex;
259
- align-items: center;
260
- border-radius: var(--radius-6);
261
- }
262
- }
263
- }
264
-
265
- &.health-green {
266
- border-color: var(--success-color);
267
- }
268
-
269
- &.health-yellow {
270
- border-color: var(--warning-color);
271
- }
272
-
273
- &.health-red {
274
- border-color: var(--error-color);
275
- }
276
-}
277
-</style>
src/components/inputs/StreamDetails.vue
deleted
-125
@@ -1,125 +0,0 @@
1
-<template>
2
- <div class="stream-details-box" v-loading="loading" :class="{ active: currentStream }">
3
- <div class="box-header">
4
- <div class="title">
5
- <span v-if="currentStream">Below the details for stream</span>
6
- <span v-else>Select a stream to see the details</span>
7
- </div>
8
- <div class="select-box" v-if="streams && streams.length">
9
- <el-select v-model="currentStream" placeholder="Streams list" clearable value-key="stream" filterable>
10
- <el-option
11
- v-for="stream in streams"
12
- :key="stream.id"
13
- :label="stream.title"
14
- :value="stream"
15
- ></el-option>
16
- </el-select>
17
- </div>
18
- </div>
19
- <div class="details-box" v-if="currentStream">
20
- <div class="info">
21
- <StreamCard :stream="currentStream" showActions @delete="clearcurrentStream()" />
22
- </div>
23
- </div>
24
- </div>
25
-</template>
26
-
27
-<script setup lang="ts">
28
-import { computed, onBeforeMount, ref, toRefs } from "vue"
29
-import { type Streams } from "@/types/graylog.d"
30
-import { ElMessage } from "element-plus"
31
-import StreamCard from "@/components/inputs/StreamCard.vue"
32
-import Api from "@/api"
33
-import { nanoid } from "nanoid"
34
-
35
-type StreamModel = Streams | null | ""
36
-
37
-const emit = defineEmits<{
38
- (e: "update:modelValue", value: StreamModel): void
39
-}>()
40
-
41
-const props = defineProps<{
42
- streams: Streams[] | null
43
- modelValue: StreamModel
44
-}>()
45
-const { streams, modelValue } = toRefs(props)
46
-
47
-const loading = computed(() => !streams?.value || streams.value === null)
48
-
49
-const currentStream = computed<StreamModel>({
50
- get() {
51
- return modelValue.value
52
- },
53
- set(value) {
54
- console.log("Setting currentStream:", value) // Debug log
55
- emit("update:modelValue", value)
56
- }
57
-})
58
-
59
-function clearcurrentStream() {
60
- currentStream.value = null
61
-}
62
-
63
-onBeforeMount(() => {
64
- // getShards()
65
-})
66
-</script>
67
-
68
-<style lang="scss" scoped>
69
-.stream-details-box {
70
- padding: var(--size-5) var(--size-6);
71
- border: 2px solid transparent;
72
-
73
- &.active {
74
- border-color: var(--primary-color);
75
- }
76
-
77
- .box-header {
78
- display: flex;
79
- align-items: center;
80
-
81
- .title {
82
- margin-right: var(--size-4);
83
- }
84
-
85
- .select-box {
86
- .el-select {
87
- min-width: var(--size-fluid-9);
88
- max-width: 100%;
89
- }
90
- }
91
- }
92
-
93
- .details-box {
94
- margin-top: var(--size-6);
95
-
96
- .shards {
97
- margin-top: var(--size-4);
98
-
99
- .shard-state {
100
- font-weight: bold;
101
- &.STARTED {
102
- color: var(--success-color);
103
- }
104
- &.UNASSIGNED {
105
- color: var(--warning-color);
106
- }
107
- }
108
- }
109
- }
110
-
111
- @media (max-width: 1000px) {
112
- .box-header {
113
- flex-direction: column;
114
- align-items: flex-start;
115
- gap: var(--size-2);
116
- .select-box {
117
- width: 100%;
118
- .el-select {
119
- min-width: 100%;
120
- }
121
- }
122
- }
123
- }
124
-}
125
-</style>
src/components/inputs/StreamIcon.vue
deleted
-29
@@ -1,29 +0,0 @@
1
-<template>
2
- <span class="input-icon" :class="[`state-${disabled}`, { color }]">
3
- <i v-if="disabled === Streams.disabled" class="mdi mdi-shield-check"></i>
4
- </span>
5
-</template>
6
-
7
-<script setup lang="ts">
8
-import { toRefs } from "vue"
9
-import { type Streams } from "@/types/graylog.d"
10
-
11
-const props = defineProps<{
12
- disabled: Streams["disabled"]
13
- color?: boolean
14
-}>()
15
-const { disabled, color } = toRefs(props)
16
-</script>
17
-
18
-<style lang="scss" scoped>
19
-@import "@/assets/scss/_variables";
20
-@import "@/assets/scss/card-shadow";
21
-
22
-.input-icon {
23
- &.color {
24
- &.state-true {
25
- color: var(--success-color);
26
- }
27
- }
28
-}
29
-</style>
src/views/socfortress/Inputs.vue
deleted
-175
@@ -1,175 +0,0 @@
1
-<template>
2
- <el-scrollbar class="page page-inputs">
3
- <div class="section">
4
- <InputsMarquee :inputs="runningInputs" @click="setInput" />
5
- </div>
6
-
7
- <div class="section">
8
- <Details :inputs="configuredInputs" v-model="currentInput" />
9
- </div>
10
-
11
- <div class="section">
12
- <div class="columns">
13
- <div class="col basis-50">
14
- <StreamDetails class="stretchy" :streams="streams" v-model="currentStream" />
15
- </div>
16
- <!-- <div class="col basis-50">
17
- <UnhealthyIndices :indices="indices" @click="setIndex" class="stretchy" />
18
- </div> -->
19
- </div>
20
- </div>
21
- </el-scrollbar>
22
-</template>
23
-
24
-<script lang="ts" setup>
25
-import type { RunningInput, ConfiguredInput, Streams } from "@/types/graylog.d"
26
-import Api from "@/api"
27
-import { ElMessage } from "element-plus"
28
-import { onBeforeMount, ref } from "vue"
29
-import InputsMarquee from "@/components/inputs/Marquee.vue"
30
-import StreamDetails from "@/components/inputs/StreamDetails.vue"
31
-import Details from "@/components/inputs/Details.vue"
32
-
33
-const runningInputs = ref<RunningInput[] | null>(null)
34
-const configuredInputs = ref<ConfiguredInput[] | null>(null)
35
-const loadingInput = ref(false)
36
-const currentInput = ref<RunningInput | null>(null)
37
-const streams = ref<Streams | null>(null)
38
-const currentStream = ref<Streams | null>(null)
39
-
40
-function setInput(input: RunningInput) {
41
- currentInput.value = input
42
-}
43
-
44
-function setStream(stream: Streams) {
45
- currentStream.value = stream
46
-}
47
-
48
-function getInputsRunning() {
49
- loadingInput.value = true
50
-
51
- Api.graylog
52
- .getInputsRunning()
53
- .then(res => {
54
- if (res.data.running_inputs.success) {
55
- runningInputs.value = res.data.running_inputs.inputs
56
- } else {
57
- ElMessage({
58
- message: res.data.running_inputs?.message || "An error occurred. Please try again later.",
59
- type: "error"
60
- })
61
- }
62
- })
63
- .catch(err => {
64
- // Handle errors
65
- })
66
- .finally(() => {
67
- loadingInput.value = false
68
- })
69
-}
70
-
71
-function getInputsConfigured() {
72
- loadingInput.value = true
73
-
74
- Api.graylog
75
- .getInputsConfigured()
76
- .then(res => {
77
- if (res.data.configured_inputs.success) {
78
- configuredInputs.value = res.data.configured_inputs.configured_inputs
79
- } else {
80
- ElMessage({
81
- message: res.data.configured_inputs?.message || "An error occurred. Please try again later.",
82
- type: "error"
83
- })
84
- }
85
- })
86
- .catch(err => {
87
- // Handle errors
88
- })
89
- .finally(() => {
90
- loadingInput.value = false
91
- })
92
-}
93
-
94
-function getStreams() {
95
- loadingInput.value = true
96
-
97
- Api.graylog
98
- .getStreams()
99
- .then(res => {
100
- if (res.data.success) {
101
- streams.value = res.data.streams.streams
102
- } else {
103
- ElMessage({
104
- message: res.data?.message || "An error occurred. Please try again later.",
105
- type: "error"
106
- })
107
- }
108
- })
109
- .catch(err => {
110
- // Handle errors
111
- })
112
- .finally(() => {
113
- loadingInput.value = false
114
- })
115
-}
116
-
117
-onBeforeMount(() => {
118
- getInputsRunning(), getInputsConfigured(), getStreams()
119
-})
120
-</script>
121
-
122
-<style lang="scss" scoped>
123
-@import "@/assets/scss/_variables";
124
-@import "@/assets/scss/card-shadow";
125
-
126
-.page-inputs {
127
- .section {
128
- margin-bottom: var(--size-6);
129
- .columns {
130
- display: flex;
131
- gap: var(--size-6);
132
-
133
- .col {
134
- flex-grow: 1;
135
- overflow: hidden;
136
- &.basis-20 {
137
- flex-basis: 20%;
138
- }
139
- &.basis-40 {
140
- flex-basis: 40%;
141
- }
142
- &.basis-50 {
143
- flex-basis: 50%;
144
- }
145
- &.basis-60 {
146
- flex-basis: 60%;
147
- }
148
- &.basis-80 {
149
- flex-basis: 80%;
150
- }
151
- }
152
-
153
- .stretchy {
154
- height: 100%;
155
- box-sizing: border-box;
156
- }
157
- }
158
- }
159
-
160
- @media (max-width: 1000px) {
161
- .section {
162
- .columns {
163
- flex-direction: column;
164
- }
165
- }
166
- }
167
- @media (max-width: 1200px) {
168
- .section {
169
- .columns.column-1200 {
170
- flex-direction: column;
171
- }
172
- }
173
- }
174
-}
175
-</style>