Skip to content

Commit

Permalink
fix(core): Display template inherited items (mptv2) as read only
Browse files Browse the repository at this point in the history 
spinnaker/spinnaker#4451
  • Loading branch information
@louisjimenez
louisjimenez committed Jun 11, 2019
1 parent be14551 commit bbdfc27
Show file tree
Hide file tree
Showing 12 changed files with 290 additions and 212 deletions.
8 changes: 6 additions & 2 deletions app/scripts/modules/core/src/domain/IPipeline.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ITrigger } from './ITrigger';
import { IExpectedArtifact } from 'core/domain/IExpectedArtifact';
import { IEntityTags } from './IEntityTags';

interface INotification {
interface INotification extends ITemplateInheritable {
type: string;
address: string;
when: string[];
Expand Down Expand Up @@ -37,7 +37,7 @@ export interface IPipeline {
type?: string;
}

export interface IParameter {
export interface IParameter extends ITemplateInheritable {
name: string;
description: string;
default: string;
Expand Down Expand Up @@ -72,3 +72,7 @@ export interface IPipelineRef {
name: String;
id?: String;
}

export interface ITemplateInheritable {
inherited?: boolean;
}
4 changes: 2 additions & 2 deletions app/scripts/modules/core/src/domain/ITrigger.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { IExecution } from 'core/domain';
import { IExecution, ITemplateInheritable } from 'core/domain';

export interface ITrigger {
export interface ITrigger extends ITemplateInheritable {
enabled: boolean;
rebake?: boolean;
user?: string;
Expand Down
18 changes: 13 additions & 5 deletions app/scripts/modules/core/src/notification/notificationList.directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,32 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="notification in notifications">
<tr ng-repeat="notification in notifications" ng-class="{'templated-pipeline-item': notification.inherited}">
<td>
{{notification.type|notificationType}}
{{ notification.type | notificationType }}
</td>
<td>
{{notification|notificationDetails}}
{{ notification | notificationDetails }}
</td>
<td>
<div ng-repeat="when in notification.when">{{when|notificationWhen:level:parent.type}}</div>
<div ng-repeat="when in notification.when">{{ when | notificationWhen: level:parent.type }}</div>
</td>
<td>
<a class="btn btn-xs btn-link" href ng-click="notificationListCtrl.editNotification(notification)">Edit</a>
<a
class="btn btn-xs btn-link"
href
ng-click="notificationListCtrl.editNotification(notification)"
ng-if="!notification.inherited"
>Edit</a
>
<a
class="btn btn-xs btn-link pad-left"
href
ng-click="notificationListCtrl.removeNotification(notification)"
ng-if="!notification.inherited"
>Remove</a
>
<span class="btn btn-xs pad-left" ng-if="notification.inherited">Inherited from template</span>
</td>
</tr>
</tbody>
Expand Down
228 changes: 126 additions & 102 deletions app/scripts/modules/core/src/pipeline/config/parameters/Parameter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import * as classNames from 'classnames';

import { HelpField } from 'core/help';
import { Tooltip } from 'core/presentation';
Expand All @@ -14,6 +15,7 @@ export interface IParameter {
default: string;
hasOptions: boolean;
options: IParameterOption[];
inherited: boolean;
}

export interface IParameterOption {
Expand Down Expand Up @@ -89,7 +91,18 @@ export class Parameter extends React.Component<IParameterProps> {
};

public render(): JSX.Element {
const { name, label, required, pinned, description, hasOptions, options, isMultiple, removeParameter } = this.props;
const {
name,
label,
required,
pinned,
description,
hasOptions,
options,
isMultiple,
removeParameter,
inherited,
} = this.props;

const {
addOption,
Expand All @@ -107,113 +120,124 @@ export class Parameter extends React.Component<IParameterProps> {
<div className="parameter-config">
<div className="row">
<div className="col-md-12">
<div className="form-horizontal panel-pipeline-phase">
<div className="row name-field">
<div className="col-md-1">{isMultiple && <DragHandler />}</div>
<label className="col-md-2 sm-label-right">
<span className="label-text">Name</span>
</label>
<div className="col-md-9">
<div className="row">
<div className="col-md-4">
<input
className="form-control input-sm"
type="text"
required={true}
value={name}
onChange={handleNameChange}
/>
</div>
<div className="col-md-2 sm-label-right">
<span className="label-text">Label </span>
<HelpField id="pipeline.config.parameter.label" />
</div>
<div className="col-md-4">
<input className="form-control input-sm" type="text" value={label} onChange={handleLabelChange} />
</div>
<div className="col-md-1 col-md-offset-1">
<Tooltip value="Remove parameter">
<button className="btn btn-link glyphicon glyphicon-trash" onClick={removeParameter} />
</Tooltip>
</div>
</div>
</div>
</div>

<StageConfigField label="Required">
<div className="checkbox">
<label>
<input type="checkbox" checked={required} onChange={handleRequiredChange} />
<fieldset disabled={inherited} className={classNames({ 'templated-pipeline-item': inherited })}>
<div className="form-horizontal panel-pipeline-phase">
<div className="row name-field">
<div className="col-md-1">{isMultiple && <DragHandler />}</div>
<label className="col-md-2 sm-label-right">
<span className="label-text">Name</span>
</label>
</div>
</StageConfigField>
<StageConfigField label="Pin Parameter" helpKey="pipeline.config.parameter.pinned">
<div className="checkbox">
<label>
<input type="checkbox" checked={pinned} onChange={handlePinnedChange} />
</label>
</div>
</StageConfigField>

<StageConfigField label="Description" helpKey="pipeline.config.parameter.description">
<input
className="form-control input-sm"
type="text"
value={description}
onChange={handleDescriptionChange}
/>
</StageConfigField>

<StageConfigField label="Default Value">
<input
className="form-control input-sm"
type="text"
value={this.props.default}
onChange={handleDefaultChange}
/>
</StageConfigField>

<StageConfigField label="Show Options">
<div className="checkbox">
<label>
<input type="checkbox" checked={hasOptions} onChange={handleHasOptionChange} />
</label>
</div>
</StageConfigField>

{hasOptions && (
<StageConfigField label="Options">
{options.map(function(option: IParameterOption, index: number) {
return (
<div key={index} style={{ marginBottom: '5px' }}>
<div className="col-md-9">
<div className="row">
<div className="col-md-4">
<input
className="col-md-4 form-control input-sm"
style={{ width: '90%' }}
className="form-control input-sm"
type="text"
value={option.value}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
handleOptionChange(index, event.target.value)
}
required={true}
value={name}
onChange={handleNameChange}
/>
</div>
<div className="col-md-2 sm-label-right">
<span className="label-text">Label </span>
<HelpField id="pipeline.config.parameter.label" />
</div>
<div className="col-md-4">
<input
className="form-control input-sm"
type="text"
value={label}
onChange={handleLabelChange}
/>
<Tooltip value="Remove parameter">
<button
className="btn btn-link glyphicon glyphicon-trash"
onClick={() => removeOption(index)}
/>
</Tooltip>
</div>
);
})}
<button
className="btn btn-sm btn-default add-new"
onClick={() => addOption()}
style={{ marginTop: '10px' }}
>
<span className="glyphicon glyphicon-plus-sign" /> Add New Option
</button>
{!inherited && (
<div className="col-md-1 col-md-offset-1">
<Tooltip value="Remove parameter">
<button className="btn btn-link glyphicon glyphicon-trash" onClick={removeParameter} />
</Tooltip>
</div>
)}
</div>
</div>
</div>

<StageConfigField label="Required">
<div className="checkbox">
<label>
<input type="checkbox" checked={required} onChange={handleRequiredChange} />
</label>
</div>
</StageConfigField>
)}
</div>
<StageConfigField label="Pin Parameter" helpKey="pipeline.config.parameter.pinned">
<div className="checkbox">
<label>
<input type="checkbox" checked={pinned} onChange={handlePinnedChange} />
</label>
</div>
</StageConfigField>

<StageConfigField label="Description" helpKey="pipeline.config.parameter.description">
<input
className="form-control input-sm"
type="text"
value={description}
onChange={handleDescriptionChange}
/>
</StageConfigField>

<StageConfigField label="Default Value">
<input
className="form-control input-sm"
type="text"
value={this.props.default}
onChange={handleDefaultChange}
/>
</StageConfigField>

<StageConfigField label="Show Options">
<div className="checkbox">
<label>
<input type="checkbox" checked={hasOptions} onChange={handleHasOptionChange} />
</label>
</div>
</StageConfigField>

{hasOptions && (
<StageConfigField label="Options">
{options.map(function(option: IParameterOption, index: number) {
return (
<div key={index} style={{ marginBottom: '5px' }}>
<input
className="col-md-4 form-control input-sm"
style={{ width: '90%' }}
type="text"
value={option.value}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
handleOptionChange(index, event.target.value)
}
/>
{!inherited && (
<Tooltip value="Remove parameter">
<button
className="btn btn-link glyphicon glyphicon-trash"
onClick={() => removeOption(index)}
/>
</Tooltip>
)}
</div>
);
})}
<button
className="btn btn-sm btn-default add-new"
onClick={() => addOption()}
style={{ marginTop: '10px' }}
>
<span className="glyphicon glyphicon-plus-sign" /> Add New Option
</button>
</StageConfigField>
)}
</div>
</fieldset>
</div>
</div>
</div>
Expand Down
8 changes: 5 additions & 3 deletions app/scripts/modules/core/src/pipeline/config/parameters/Parameters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,11 @@ export class Parameters extends React.Component<IParametersProps, IParametersSta
private togglePins = (): void => {
const parameters = this.props.parameters.slice(0);
const { allParametersPinned } = this.state;
parameters.forEach(param => {
param.pinned = !allParametersPinned;
});
parameters
.filter(param => !param.inherited)
.forEach(param => {
param.pinned = !allParametersPinned;
});
this.props.updateAllParameters(parameters);
this.setPinAllParametersState();
};
Expand Down
9 changes: 7 additions & 2 deletions app/scripts/modules/core/src/pipeline/config/pipelineConfig.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,14 @@ module.exports = angular
this.pipelineConfig.isNew = true;
}

if (!this.pipelineConfig.isNew) {
if (!this.pipelineConfig.isNew || isV2PipelineConfig) {
return PipelineTemplateReader.getPipelinePlan(this.pipelineConfig, $stateParams.executionId)
.then(plan => (this.pipelinePlan = plan))
.then(plan => {
if (isV2PipelineConfig) {
PipelineTemplateV2Service.inheritedKeys.forEach(key => (this.pipelineConfig[key] = plan[key] || []));
}
this.pipelinePlan = plan;
})
.catch(error => {
this.templateError = error;
this.pipelineConfig.isNew = true;
Expand Down
9 changes: 9 additions & 0 deletions app/scripts/modules/core/src/pipeline/config/pipelineConfig.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,3 +310,12 @@ parameter,
}
}
}

.templated-pipeline-item {
pointer-events: none;
opacity: 0.75;
}

.templated-pipeline-item__status {
pointer-events: auto;
}
Loading

0 comments on commit bbdfc27

Please sign in to comment.