- 
+
+
-
+
- + +
-
-
-
- Parsers +
- Parsers
- Parser Configuration + {{getTitle()}}
-| ID | +{{element.clusterMeta.clusterId}} | +Name | +{{element.clusterMeta.name}} | +Status | +Branches | +{{this.getBranches(element.jobs)}} | +Version | +{{element.clusterMeta.version}} | +
|---|
|
+ |
+
+ |
+ Name | +{{element.jobFullName}} | +Type | +{{element.jobType}} | +Branch | +{{element.jobBranch}} | +Pipeline | +{{element.jobPipeline}} | +Status | +Created date | +{{element.startTime}} | +
|---|
+
+ cloud_upload
+
+Drag and drop file here
+or
+ +
+
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/file-upload.component.scss b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/file-upload.component.scss
new file mode 100644
index 000000000..0bd46866b
--- /dev/null
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/file-upload.component.scss
@@ -0,0 +1,131 @@
+@use 'styles' as styles;
+
+.container {
+ min-width: 450px;
+ max-width: 700px;
+ min-height: 300px;
+ max-height: 600px;
+ width: 50vw;
+ padding: 2rem;
+ text-align: center;
+ border: dashed 1px #979797;
+ position: relative;
+ margin: 0 auto;
+
+ mat-icon {
+ @include styles.md-icon-size(100px);
+ }
+
+ input {
+ opacity: 0;
+ position: absolute;
+ z-index: 2;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ label {
+ color: white;
+ width: 183px;
+ height: 44px;
+ border-radius: 25px;
+ background-color: red;
+ padding: 8px 16px;
+ }
+
+ h3 {
+ font-size: 20px;
+ font-weight: 600;
+ color: #38424c;
+ }
+}
+
+.file-over {
+ animation: shake 1s;
+ animation-iteration-count: infinite;
+}
+
+.files-list {
+ margin-top: 1.5rem;
+
+ .single-file {
+ display: flex;
+ padding: 0.5rem;
+ justify-content: space-between;
+ align-items: center;
+ border: dashed 1px #979797;
+ margin-bottom: 1rem;
+ flex-grow: 1;
+ .delete {
+ display: flex;
+ margin-left: 0.5rem;
+ cursor: pointer;
+ align-self: flex-end;
+ }
+ .name {
+ font-size: 14px;
+ font-weight: 500;
+ color: #353f4a;
+ margin: 0;
+ }
+ .size {
+ font-size: 12px;
+ font-weight: 500;
+ color: #a4a4a4;
+ margin: 0;
+ margin-bottom: 0.25rem;
+ }
+ .info {
+ width: 100%
+ }
+ }
+}
+
+/* Shake animation */
+@keyframes shake {
+ 0% {
+ transform: translate(1px, 1px) rotate(0deg);
+ }
+
+ 10% {
+ transform: translate(-1px, -2px) rotate(-1deg);
+ }
+
+ 20% {
+ transform: translate(-3px, 0px) rotate(1deg);
+ }
+
+ 30% {
+ transform: translate(3px, 2px) rotate(0deg);
+ }
+
+ 40% {
+ transform: translate(1px, -1px) rotate(1deg);
+ }
+
+ 50% {
+ transform: translate(-1px, 2px) rotate(-1deg);
+ }
+
+ 60% {
+ transform: translate(-3px, 1px) rotate(0deg);
+ }
+
+ 70% {
+ transform: translate(3px, 1px) rotate(-1deg);
+ }
+
+ 80% {
+ transform: translate(-1px, -1px) rotate(1deg);
+ }
+
+ 90% {
+ transform: translate(1px, 2px) rotate(0deg);
+ }
+
+ 100% {
+ transform: translate(1px, -2px) rotate(-1deg);
+ }
+}
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/file-upload.component.ts b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/file-upload.component.ts
new file mode 100644
index 000000000..eef1bb2e2
--- /dev/null
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/file-upload.component.ts
@@ -0,0 +1,172 @@
+import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import {trigger, state, style, animate, transition} from '@angular/animations';
+import {
+ HttpClient, HttpRequest,
+ HttpEventType, HttpErrorResponse
+} from '@angular/common/http';
+import {Subscription, of} from 'rxjs';
+import {catchError, last, map, tap, timeout} from 'rxjs/operators';
+
+@Component({
+ selector: 'app-file-upload',
+ templateUrl: './file-upload.component.html',
+ styleUrls: ['./file-upload.component.scss'],
+ animations: [
+ trigger('fadeInOut', [
+ state('in', style({opacity: 100})),
+ transition('* => void', [
+ animate(300, style({opacity: 0}))
+ ])
+ ])
+ ]
+})
+export class FileUploadComponent implements OnInit {
+ /** Name used in form which will be sent in HTTP request. */
+ @Input() param: string = 'config';
+ /** Target URL for file uploading. */
+ @Input() target: string;
+ /** File extension that accepted, same as 'accept' of .
+ By the default, it's set to tar gz archive file */
+ @Input() accept: string = "application/gzip, .gz";
+ /** Allow you to add handler after its completion. Bubble up response text from remote. */
+ @Output() preparedFiles = new EventEmitter
+
+ refresh
+
+
+
+ cancel
+
+
+
+
+
+
+ + {{ file?.data?.name }} +
++ {{ formatBytes(file?.data?.size) }} +
+
+
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/progress/progress.component.scss b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/progress/progress.component.scss
new file mode 100644
index 000000000..a9cb2dfa7
--- /dev/null
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/progress/progress.component.scss
@@ -0,0 +1,19 @@
+.progress-cont {
+ height: 7px;
+ width: 100%;
+ border-radius: 4px;
+ background-color: #d0d0d0;
+ position: relative;
+
+ .progress {
+ width: 0;
+ height: 100%;
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ border-radius: 4px;
+ background-color: #4c97cb;
+ transition: 0.5s all;
+ }
+}
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/progress/progress.component.ts b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/progress/progress.component.ts
new file mode 100644
index 000000000..b527806da
--- /dev/null
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/file-upload/progress/progress.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-progress',
+ templateUrl: './progress.component.html',
+ styleUrls: ['./progress.component.scss']
+})
+export class ProgressComponent implements OnInit {
+ @Input() progress = 0;
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/status-icon/status-icon.component.html b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/status-icon/status-icon.component.html
new file mode 100644
index 000000000..d41ba3884
--- /dev/null
+++ b/flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/cluster/component/status-icon/status-icon.component.html
@@ -0,0 +1,5 @@
+
+
+
+
+
+