catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

@media only all and (prefers-color-scheme: dark) {
.highlight .hll { background-color: #49483e }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: #f92672 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #75715e } /* Generic.Subheading */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
}
@media (prefers-color-scheme: light) {
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
}
{
  "simulatorRequest": {
    "method": "DELETE",
    "path": "/mso/serviceInstances/v6/c187e9fe-40c3-4862-b73e-84ff056205f6/configurations/9533-config-LB1113",
    "body": {
      "requestDetails": {
        "cloudConfiguration": {
          "lcpCloudRegionId": "mdt1"
        },
        "modelInfo": {
          "modelCustomizationId": "08a181aa-72eb-435f-9593-e88a3ad0a86b",
          "modelInvariantId": "model-invariant-id-9533",
          "modelVersionId": "model-version-id-9533",
          "modelType": "configuration"
        },
        "requestInfo": {
          "source": "VID",
          "requestorId": "us16807000"
        },
        "requestParameters": {
          "userParams": []
        }
      }
    }
  }
  ,
  "simulatorResponse": {
    "responseCode": 202,
    "body": {
      "requestReferences": {
        "instanceId": "c187e9fe-40c3-4862-b73e-84ff056205f6",
        "requestId": "314cc766-b673-4a50-b9c5-471f68914585"
      }
    }
  }
}
import * as _ from "lodash";
import {Component, ViewChild} from '@angular/core';

import {Subscription} from "rxjs/Subscription";

import {TranslateService} from "app/ng2/shared/translator/translate.service";
import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
import {
    InterfaceModel,
    OperationModel,
    OperationParameter,
    InputBEModel,
    WORKFLOW_ASSOCIATION_OPTIONS,
    Capability
} from 'app/models';

import { Tabs } from "app/ng2/components/ui/tabs/tabs.component";
import { DropdownValue } from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
import { IDropDownOption } from 'onap-ui-angular';
import { DropDownComponent } from "onap-ui-angular/dist/components";
import { DROPDOWN_OPTION_TYPE } from "app/utils/constants";

export class DropDownOption implements IDropDownOption {
    value: string;
    label: string;

    constructor(value: string, label?: string) {
        this.value = value;
        this.label = label || value;
    }
}

class TypedDropDownOption extends DropDownOption {
    type: string;

    constructor(value: string, label?: string, type?: string) {
        super(value, label);
        this.type = type;
    }
}

export interface OperationCreatorInput {
    allWorkflows: Array<any>,
    inputOperation: OperationModel,
    interfaces: Array<InterfaceModel>,
    inputProperties: Array<InputBEModel>,
    enableWorkflowAssociation: boolean,
    readonly: boolean,
    interfaceTypes: { [interfaceType: string]: Array<string> },
    validityChangedCallback: Function,
    workflowIsOnline: boolean,
    capabilities: Array<Capability>
}

@Component({
    selector: 'operation-creator',
    templateUrl: './operation-creator.component.html',
    styleUrls: ['./operation-creator.component.less'],
    providers: [TranslateService]
})

export class OperationCreatorComponent implements OperationCreatorInput {

    input: OperationCreatorInput;
    inputOperation: OperationModel;
    interfaces: Array<InterfaceModel>;
    operation: OperationModel;
    interfaceNames: Array<TypedDropDownOption> = [];
    interfaceTypes: { [interfaceType: string]: Array<string> };
    operationNames: Array<TypedDropDownOption> = [];
    validityChangedCallback: Function;
    capabilities: Array<Capability>;

    allWorkflows: Array<any>;
    workflows: Array<DropdownValue> = [];
    workflowVersions: Array<DropdownValue> = [];
    inputProperties: Array<InputBEModel> = [];
    archivedWorkflowId: string = '&';

    inputParameters: Array<OperationParameter> = [];
    noAssignInputParameters: Array<OperationParameter> = [];
    assignInputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};

    outputParameters: Array<OperationParameter> = [];
    noAssignOutputParameters: Array<OperationParameter> = [];
    assignOutputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
    componentCapabilities: Array<Capability> = [];

    tableParameters: Array<OperationParameter> = [];
    operationOutputs: Array<OperationModel> = [];

    associationOptions: Array<DropdownValue> = [];
    workflowAssociationType: string;

    enableWorkflowAssociation: boolean;
    workflowIsOnline: boolean;
    isEditMode: boolean = false;
    isLoading: boolean = false;
    readonly: boolean;

    propertyTooltipText: String;

    TYPE_INPUT = 'Inputs';
    TYPE_OUTPUT = 'Outputs';

    INTERFACE_OTHER_HEADER = 'Local Interfaces';
    INTERFACE_OTHER = 'Local';

    @ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
    @ViewChild('operationNamesDropdown') operationNamesDropdown: DropDownComponent;
    @ViewChild('workflowAssignmentDropdown') workflowAssignmentDropdown: DropDownComponent;
    currentTab: String;

    constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) {
        this.translateService.languageChangedObservable.subscribe(lang => {
            this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT");

            this.associationOptions = [
                new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL, this.translateService.translate("EXTERNAL_WORKFLOW_ASSOCIATION")),
                new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")),
            ];

            this.workflowAssociationType = this.operation.workflowAssociationType;
        });

        this.currentTab = this.TYPE_INPUT;
    }

    createInterfaceDropdown(type: string) {
        let label = type;
        const lastDot = label.lastIndexOf('.');
        if (lastDot > -1) {
            label = label.substr(lastDot + 1);
        }
        return new TypedDropDownOption(type, label);
    }

    ngOnInit() {
        this.interfaceNames = _.map(
            _.keys(this.interfaceTypes),
            type => this.createInterfaceDropdown(type)
        );
        this.interfaceNames.unshift(new TypedDropDownOption('Existing Interfaces', 'Existing Interfaces', DROPDOWN_OPTION_TYPE.HEADER));
        this.interfaceNames = this.interfaceNames.concat([
            new TypedDropDownOption(' ', ' ', DROPDOWN_OPTION_TYPE.HORIZONTAL_LINE),
            new TypedDropDownOption(this.INTERFACE_OTHER_HEADER, this.INTERFACE_OTHER_HEADER, DROPDOWN_OPTION_TYPE.HEADER),
            new TypedDropDownOption(this.INTERFACE_OTHER)
        ]);
        const inputOperation = this.inputOperation;
        this.operation = new OperationModel(inputOperation || {});

        this.operationOutputs = _.reduce(
            this.interfaces,
            (acc: Array<OperationModel>, interf) => [
                ...acc,
                ..._.filter(
                    interf.operations,
                    op => op.uniqueId !== this.operation.uniqueId
                ),
            ],
        []);

        if (this.enableWorkflowAssociation) {
            if (this.workflowIsOnline) {
                this.workflows = _.map(
                    _.filter(
                        this.allWorkflows,
                        (workflow: any) => {
                            if (workflow.archiving === this.workflowServiceNg2.WF_STATE_ACTIVE) {
                                return true;
                            }
                            if (workflow.archiving === this.workflowServiceNg2.WF_STATE_ARCHIVED &&
                                workflow.id === this.operation.workflowId) {
                                this.archivedWorkflowId = workflow.id;
                                return true;
                            }
                            return false;
                        }
                    ),
                    (workflow: any) => new DropdownValue(workflow.id, workflow.name)
                );
            } else {
                this.workflows = [];
            }
        }
        this.reconstructOperation();
        this.filterCapabilities();
        this.validityChanged();
        this.updateTable();
    }

    ngAfterViewInit() {
        if(this.workflowAssignmentDropdown){
            this.workflowAssignmentDropdown.allOptions = this.associationOptions && this.associationOptions.length ?
                this.associationOptions :
                [
                    new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL, this.translateService.translate("EXTERNAL_WORKFLOW_ASSOCIATION")),
                    new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")),
                ];
        }
    }

    reconstructOperation = () => {

        const buildAndUpdate = () => {
            this.buildParams();
            this.updateTable();
        };

        const inputOperation = this.inputOperation;
        if (inputOperation) {
            this.onSelectInterface(new DropDownOption(this.operation.interfaceType));

            this.operation.artifactFileName = this.operation.artifactFileName || this.operation.implementation.artifactName;

            if (this.enableWorkflowAssociation && inputOperation.workflowVersionId && this.isUsingExistingWF(inputOperation)) {
                this.assignInputParameters[this.operation.workflowId] = {[inputOperation.workflowVersionId]: []};
                this.assignOutputParameters[this.operation.workflowId] = {[inputOperation.workflowVersionId]: []};
                this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
                this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId];

                const sub = this.onSelectWorkflow(new DropDownOption(inputOperation.workflowId), inputOperation.workflowVersionId);
                if (sub) {
                    sub.add(() => {
                        buildAndUpdate();
                        this.operation.workflowVersionId = '-1';
                        setTimeout(() => this.operation.workflowVersionId = this.inputOperation.workflowVersionId);
                    });
                } else {
                    buildAndUpdate();
                }
            } else {
                this.inputParameters = this.noAssignInputParameters;
                this.outputParameters = this.noAssignOutputParameters;
                buildAndUpdate();
            }

            if (inputOperation.uniqueId) {
                this.isEditMode = true;
            }
        }

    }

    filterCapabilities() {
        this.componentCapabilities = _.filter(this.capabilities, (cap: Capability) => cap.properties);
    }

    buildParams = () => {

        if (this.inputOperation.outputs) {
            this.currentTab = this.TYPE_OUTPUT;
            this.updateTable();
            _.forEach(
                [...this.inputOperation.outputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
                (output: OperationParameter) => {
                    this.addParam({...output, required: Boolean(output.required)});
                }
            );
        }

        this.currentTab = this.TYPE_INPUT;
        this.updateTable();
        if (this.inputOperation.inputs) {
            _.forEach(
                [...this.inputOperation.inputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
                (input: OperationParameter) => {
                    this.addParam({...input, required: Boolean(input.required)});
                }
            );
        }

    }

    isInterfaceOther(): boolean {
        return this.operation.interfaceType === this.INTERFACE_OTHER;
    }

    onSelectInterface(interf: IDropDownOption) {
        if (interf && this.operation.interfaceType !== interf.value) {
            this.operation.name = null;
        }
        this.operation.interfaceType = interf && interf.value;
        this.operationNames = !this.operation.interfaceType ? [] : (
            _.map(
                this.interfaceTypes[this.operation.interfaceType],
                name => {
                    const curInterf = _.find(
                        this.interfaces,
                        interf => interf.type === this.operation.interfaceType
                    );
                    const existingOp = _.find(
                        curInterf && curInterf.operations || [],
                        op => op.name === name
                    );
                    const ddType = (existingOp && existingOp.uniqueId !== this.operation.uniqueId) ? DROPDOWN_OPTION_TYPE.HORIZONTAL_LINE : DROPDOWN_OPTION_TYPE.SIMPLE;
                    return new TypedDropDownOption(name, name, ddType);
                }
            )
        );
        if(this.operationNamesDropdown) {
            this.operationNamesDropdown.allOptions = <IDropDownOption[]>this.operationNames;
        }
        this.validityChanged();
    }

    onSelectOperationName(name: IDropDownOption) {
        if (name) {
            this.operation.name = name.value;
        }
        this.validityChanged();
    }

    onChangeName() {
        this.validityChanged();
    }

    get descriptionValue() {
        return this.operation.description;
    }

    set descriptionValue(v) {
        this.operation.description = v || null;
        this.validityChanged();
    }

    onSelectWorkflow(workflowId: DropDownOption, selectedVersionId?: string): Subscription {

        if (_.isUndefined(workflowId) || !this.workflowIsOnline) {
            return;
        }

        if (this.operation.workflowId === workflowId.value && !selectedVersionId) {
            return;
        }

        this.operation.workflowId = workflowId.value;
        if (!this.assignInputParameters[this.operation.workflowId]) {
            this.assignInputParameters[this.operation.workflowId] = {};
            this.assignOutputParameters[this.operation.workflowId] = {};
        }

        this.isLoading = true;
        this.validityChanged();
        return this.workflowServiceNg2.getWorkflowVersions(this.operation.workflowId).subscribe((versions: Array<any>) => {
            this.isLoading = false;

            this.workflowVersions = _.map(
                _.filter(
                    versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED
                ).sort((a, b) => a.name.localeCompare(b.name)),
                (version: any) => {
                    if (!this.assignInputParameters[this.operation.workflowId][version.id] && version.id !== selectedVersionId) {
                        this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: any) => {
                            return new OperationParameter({...input, type: input.type.toLowerCase(), required: Boolean(input.mandatory)});
                        })
                        .sort((a, b) => a.name.localeCompare(b.name));

                        this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: any) => {
                            return new OperationParameter({...output, type: output.type.toLowerCase(), required: Boolean(output.mandatory)});
                        })
                        .sort((a, b) => a.name.localeCompare(b.name));
                    }
                    return new DropdownValue(version.id, `V ${version.name}`);
                }
            );
            if (!selectedVersionId && this.workflowVersions.length) {
                this.operation.workflowVersionId = _.last(this.workflowVersions).value;
            }

            this.changeWorkflowVersion(new DropDownOption(this.operation.workflowVersionId));
            this.validityChanged();
        });

    }

    changeWorkflowVersion(versionId: DropDownOption) {

        if (_.isUndefined(versionId) || !this.workflowIsOnline) {
            return;
        }

        this.operation.workflowVersionId = versionId.value;
        this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
        this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId];
        this.updateTable();
        this.validityChanged();

    }

    toggleAssociateWorkflow(type: DropDownOption) {

        if (_.isUndefined(type)) {
            return;
        }

        this.operation.workflowAssociationType = type.value;
        this.workflowAssociationType = this.operation.workflowAssociationType;

        if (!this.isUsingExistingWF()) {
            this.inputParameters = this.noAssignInputParameters;
            this.outputParameters = this.noAssignOutputParameters;
        } else {
            if (!this.operation.workflowId || !this.operation.workflowVersionId) {
                this.inputParameters = [];
                this.outputParameters = [];
            } else {
                this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId];
                this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId];
            }
        }

        this.updateTable();
        this.validityChanged();

    }

    onChangeArtifactFile(e: any) {
        const file = e.target.files && e.target.files[0];
        this.operation.artifactFileName = file && file.name;

        if (!this.operation.artifactFileName) {
            this.operation.artifactData = null;
            this.validityChanged();
            return;
        }

        const reader = new FileReader();
        reader.onloadend = () => {
            this.isLoading = false;
            const result = <String>reader.result;
            this.operation.artifactData = result.substring(result.indexOf(',') + 1);
            this.validityChanged();
        }

        this.isLoading = true;
        reader.readAsDataURL(file);
    }

    tabChanged = (event) => {

        this.currentTab = event.title;
        this.updateTable();

    }

    updateTable() {

        switch (this.currentTab) {
            case this.TYPE_INPUT:
                this.tableParameters = this.inputParameters;
                break;
            case this.TYPE_OUTPUT:
                this.tableParameters = this.outputParameters;
                break;
        }

    }

    addParam(param?: OperationParameter): void {
        this.tableParameters.push(new OperationParameter(param || {required: false}));
        this.validityChanged();
    }

    canAdd = (): boolean => {

        let valid = true;
        if (this.currentTab === this.TYPE_INPUT) {
            _.forEach(this.inputParameters, param => {
                if (!param.name || !param.inputId) {
                    valid = false;
                }
            });
        } else {
            _.forEach(this.outputParameters, param => {
                if (!param.name || !param.type) {
                    valid = false;
                }
            });
        }

        return valid;

    }

    isParamsValid = (): boolean => {

        let valid = true;
        _.forEach(this.inputParameters, param => {
            if (!param.name || !param.inputId) {
                valid = false;
            }
        });
        _.forEach(this.outputParameters, param => {
            if (!param.name || !param.type) {
                valid = false;
            }
        });

        return valid;

    }

    onRemoveParam = (param: OperationParameter): void => {
        let index = _.indexOf(this.tableParameters, param);
        this.tableParameters.splice(index, 1);
        this.validityChanged();
    }

    createParamLists = () => {
        this.operation.createInputsList(this.inputParameters);
        this.operation.createOutputsList(this.outputParameters);
    }

    isUsingExistingWF = (operation?: OperationModel): boolean => {
        operation = operation || this.operation;
        return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING;
    }

    isUsingExternalWF = (operation?: OperationModel): boolean => {
        operation = operation || this.operation;
        return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL;
    }

    shouldCreateWF = (operation?: OperationModel): boolean => {
        operation = operation || this.operation;
        return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW;
    }

    checkFormValidForSubmit = (): boolean => {
        return this.operation.name &&
            (!this.isUsingExistingWF() || this.operation.workflowVersionId) &&
            this.isParamsValid();
    }

    validityChanged = () => {
        let validState = this.checkFormValidForSubmit();
        this.validityChangedCallback(validState);
    }

    getSelectedDropdown(options: DropdownValue[], selectedValue: string): DropdownValue {
        const selectedDropdown = _.find(options, (option) => option.value === selectedValue);
        return selectedDropdown || this.toDropDownOption(null);
    }

    toDropDownOption(val: string) {
        return { value : val, label: val };
    }
}