feat:(kayenta) add ability to disable all canary editing in ui

spinnaker · May 15, 2024 · 67fcc9c · 67fcc9c
1 parent 3cfdc77
commit 67fcc9c
Show file tree

Hide file tree

Showing 16 changed files with 78 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spinnaker/kayenta",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

diff --git a/src/kayenta/edit/changeMetricGroupModal.tsx b/src/kayenta/edit/changeMetricGroupModal.tsx
@@ -1,6 +1,7 @@
 import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
 import { ICanaryMetricConfig } from 'kayenta/domain/ICanaryConfig';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableSelect } from 'kayenta/layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableSelect } from 'kayenta/layout/disableable';
 import Styleguide from 'kayenta/layout/styleguide';
 import { ICanaryState } from 'kayenta/reducers';
 import * as React from 'react';
@@ -43,7 +44,8 @@ function ChangeMetricGroupModal({
             value={toGroup || ''}
             onChange={select}
             className="form-control input-sm"
-            disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+            disabled={CanarySettings.disableConfigEdit}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
           >
             <option value={''}>-- select group --</option>
             {groups.map((g) => (

diff --git a/src/kayenta/edit/configDetailHeader.tsx b/src/kayenta/edit/configDetailHeader.tsx
@@ -12,6 +12,7 @@ import ConfigDetailActionButtons from './configDetailActionButtons';
 interface IConfigDetailStateProps {
   selectedConfig: ICanaryConfig;
   editingDisabled: boolean;
+  disableConfigEdit: boolean;
 }
 
 const getOwnerAppLinks = (owners: string[]) => {
@@ -53,10 +54,21 @@ const EditingDisabledWarning = ({ owners }: { owners: string[] }) => {
   );
 };
 
+const ConfigEditingDisabledWarning = () => {
+  return (
+    <div className="horizontal middle well-compact alert alert-warning config-detail-edit-warning">
+      <i className="fa fa-exclamation-triangle sp-margin-m-right" />
+      <span>
+        <b>UI Editing is disabled</b>
+      </span>
+    </div>
+  );
+};
+
 /*
  * Config detail header layout.
  */
-function ConfigDetailHeader({ selectedConfig, editingDisabled }: IConfigDetailStateProps) {
+function ConfigDetailHeader({ selectedConfig, editingDisabled, disableConfigEdit }: IConfigDetailStateProps) {
   return (
     <div className="vertical">
       <div className="horizontal config-detail-header">
@@ -73,15 +85,19 @@ function ConfigDetailHeader({ selectedConfig, editingDisabled }: IConfigDetailSt
           <ConfigDetailActionButtons />
         </div>
       </div>
-      {selectedConfig && editingDisabled && <EditingDisabledWarning owners={selectedConfig.applications} />}
+      {selectedConfig && editingDisabled && !disableConfigEdit && (
+        <EditingDisabledWarning owners={selectedConfig.applications} />
+      )}
+      {selectedConfig && disableConfigEdit && <ConfigEditingDisabledWarning />}
     </div>
   );
 }
 
 function mapStateToProps(state: ICanaryState): IConfigDetailStateProps {
   return {
     selectedConfig: mapStateToConfig(state),
-    editingDisabled: state.app.disableConfigEdit || CanarySettings.disableConfigEdit,
+    editingDisabled: state.app.disableConfigEdit,
+    disableConfigEdit: CanarySettings.disableConfigEdit,
   };
 }
 

diff --git a/src/kayenta/edit/editMetricEffectSizes.tsx b/src/kayenta/edit/editMetricEffectSizes.tsx
@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 
 import { HelpField, robotToHuman } from '@spinnaker/core';
 
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableInput } from '../layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from '../layout/disableable';
 
 interface IEditMetricEffectSizesProps {
   metricId: string;
@@ -115,7 +115,8 @@ export function EditMetricEffectSizes({
               step={isCles ? 0.01 : 1}
               onChange={(e) => updateSize(field, e.target.value)}
               value={isCles ? value : toPercent(value, field)}
-              disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+              disabled={CanarySettings.disableConfigEdit}
+              disabledStateKeys={[DISABLE_EDIT_CONFIG]}
             />
             {!isCles && <div className="input-group-addon">%</div>}
           </div>

diff --git a/src/kayenta/edit/editMetricModal.tsx b/src/kayenta/edit/editMetricModal.tsx
@@ -2,12 +2,7 @@ import classNames from 'classnames';
 import * as Creators from 'kayenta/actions/creators';
 import { CanarySettings } from 'kayenta/canary.settings';
 import { ICanaryMetricConfig } from 'kayenta/domain';
-import {
-  CANARY_EDIT_DISABLED,
-  DISABLE_EDIT_CONFIG,
-  DisableableInput,
-  DisableableSelect,
-} from 'kayenta/layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableInput, DisableableSelect } from 'kayenta/layout/disableable';
 import FormRow from 'kayenta/layout/formRow';
 import RadioChoice from 'kayenta/layout/radioChoice';
 import Styleguide from 'kayenta/layout/styleguide';
@@ -101,15 +96,17 @@ function EditMetricModal({
                 value={metric.groups}
                 data-id={metric.id}
                 onChange={changeGroup}
-                disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+                disabled={CanarySettings.disableConfigEdit}
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
               />
             )}
             {metric.groups.length < 2 && (
               <DisableableSelect
                 value={metricGroup}
                 onChange={changeGroup}
                 className="form-control input-sm"
-                disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+                disabled={CanarySettings.disableConfigEdit}
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
               >
                 {groups.map((g) => (
                   <option key={g} value={g}>
@@ -125,7 +122,8 @@ function EditMetricModal({
               value={metric.name}
               data-id={metric.id}
               onChange={rename}
-              disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+              disabled={CanarySettings.disableConfigEdit}
+              disabledStateKeys={[DISABLE_EDIT_CONFIG]}
             />
           </FormRow>
           <FormRow label="Fail on">
@@ -151,7 +149,8 @@ function EditMetricModal({
                 type="checkbox"
                 checked={critical}
                 onChange={updateCriticality}
-                disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+                disabled={CanarySettings.disableConfigEdit}
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
               />
               Fail the canary if this metric fails
             </label>

diff --git a/src/kayenta/edit/filterTemplateSelector.tsx b/src/kayenta/edit/filterTemplateSelector.tsx
@@ -1,7 +1,7 @@
 import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
 import { ICanaryFilterTemplateValidationMessages } from 'kayenta/edit/filterTemplatesValidation';
 import {
-  CANARY_EDIT_DISABLED,
   DISABLE_EDIT_CONFIG,
   DisableableInput,
   DisableableReactSelect,
@@ -95,7 +95,8 @@ export class FilterTemplateSelector extends React.Component<IFilterTemplateSelec
           {!isEditing && (
             <DisableableReactSelect
               value={selectedTemplateName}
-              disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+              disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+              disabled={CanarySettings.disableConfigEdit}
               onChange={selectTemplate}
               options={this.getOptions()}
               optionRenderer={this.optionRenderer}
@@ -106,7 +107,8 @@ export class FilterTemplateSelector extends React.Component<IFilterTemplateSelec
           <>
             <FormRow label="Name" error={get(validation, 'errors.templateName.message')} inputOnly={true}>
               <DisableableInput
-                disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+                disabled={CanarySettings.disableConfigEdit}
                 onChange={editTemplateName}
                 value={editedTemplateName}
               />
@@ -119,7 +121,8 @@ export class FilterTemplateSelector extends React.Component<IFilterTemplateSelec
             >
               <DisableableTextarea
                 className="template-editor-textarea"
-                disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+                disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+                disabled={CanarySettings.disableConfigEdit}
                 onChange={editTemplateValue}
                 value={editedTemplateValue}
               />

diff --git a/src/kayenta/edit/groupName.tsx b/src/kayenta/edit/groupName.tsx
@@ -1,5 +1,6 @@
 import * as Creators from 'kayenta/actions/creators';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableInput } from 'kayenta/layout/disableable';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from 'kayenta/layout/disableable';
 import { ICanaryState } from 'kayenta/reducers';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -42,7 +43,8 @@ function GroupName({
           autoFocus={true}
           value={edit}
           onChange={handleUpdate}
-          disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+          disabled={CanarySettings.disableConfigEdit}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
         />
       </form>
     );

diff --git a/src/kayenta/edit/groupTabs.tsx b/src/kayenta/edit/groupTabs.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as Creators from 'kayenta/actions/creators';
 import { CanarySettings } from 'kayenta/canary.settings';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
 import { Tab, Tabs } from 'kayenta/layout/tabs';
 import { ICanaryState } from 'kayenta/reducers';
 import * as React from 'react';
@@ -66,7 +66,8 @@ function GroupTabs({
         <DisableableButton
           className="passive float-right"
           onClick={addGroup}
-          disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+          disabled={CanarySettings.disableConfigEdit}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
         >
           Add Group
         </DisableableButton>

diff --git a/src/kayenta/edit/groupWeight.tsx b/src/kayenta/edit/groupWeight.tsx
@@ -1,6 +1,7 @@
 import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
 import { ICanaryConfig } from 'kayenta/domain/ICanaryConfig';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableInput } from 'kayenta/layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableInput } from 'kayenta/layout/disableable';
 import { ICanaryState } from 'kayenta/reducers';
 import { mapStateToConfig } from 'kayenta/service/canaryConfig.service';
 import { get, isNumber } from 'lodash';
@@ -39,7 +40,8 @@ function GroupWeight({
         onChange={handleInputChange}
         min={0}
         max={100}
-        disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+        disabled={CanarySettings.disableConfigEdit}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
       />
     </FormRow>
   );

diff --git a/src/kayenta/edit/inlineTemplateEditor.tsx b/src/kayenta/edit/inlineTemplateEditor.tsx
@@ -1,5 +1,6 @@
 import * as Creators from 'kayenta/actions/creators';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableTextarea } from 'kayenta/layout/disableable';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableTextarea } from 'kayenta/layout/disableable';
 import FormRow from 'kayenta/layout/formRow';
 import { ICanaryState } from 'kayenta/reducers';
 import {
@@ -35,7 +36,8 @@ export function InlineTemplateEditor({
     >
       <DisableableTextarea
         className="template-editor-textarea"
-        disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
+        disabled={CanarySettings.disableConfigEdit}
         onChange={(e: any) => editTemplateValue(transformValueForSave(e.target.value))}
         value={templateValue}
       />

diff --git a/src/kayenta/edit/judgeSelect.tsx b/src/kayenta/edit/judgeSelect.tsx
@@ -1,10 +1,6 @@
 import * as Creators from 'kayenta/actions/creators';
-import {
-  CANARY_EDIT_DISABLED,
-  DISABLE_EDIT_CONFIG,
-  DisableableInput,
-  DisableableReactSelect,
-} from 'kayenta/layout/disableable';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableInput, DisableableReactSelect } from 'kayenta/layout/disableable';
 import FormRow from 'kayenta/layout/formRow';
 import { ICanaryState } from 'kayenta/reducers';
 import * as React from 'react';
@@ -46,7 +42,8 @@ function JudgeSelect({
             options={judgeOptions}
             clearable={false}
             onChange={handleJudgeSelect}
-            disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+            disabled={CanarySettings.disableConfigEdit}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
           />
         </FormRow>
       );
@@ -57,7 +54,7 @@ function JudgeSelect({
             type="text"
             value={selectedJudge}
             disabled={true}
-            disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+            disabledStateKeys={[DISABLE_EDIT_CONFIG]}
           />
         </FormRow>
       );

diff --git a/src/kayenta/edit/metricList.tsx b/src/kayenta/edit/metricList.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as Creators from 'kayenta/actions/creators';
 import { CanarySettings } from 'kayenta/canary.settings';
 import { ICanaryMetricConfig } from 'kayenta/domain';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
 import { ITableColumn, NativeTable } from 'kayenta/layout/table';
 import { ICanaryState } from 'kayenta/reducers';
 import { cloneDeep } from 'lodash';
@@ -145,7 +145,8 @@ function MetricList({
         data-default={groupList[0]}
         data-metric-store={metricStore}
         onClick={addMetric}
-        disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+        disabled={CanarySettings.disableConfigEdit}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
       >
         Add Metric
       </DisableableButton>

diff --git a/src/kayenta/edit/metricStoreSelector.tsx b/src/kayenta/edit/metricStoreSelector.tsx
@@ -1,6 +1,7 @@
 import * as Creators from 'kayenta/actions/creators';
+import { CanarySettings } from 'kayenta/canary.settings';
 import { KayentaAccountType } from 'kayenta/domain';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableSelect } from 'kayenta/layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableSelect } from 'kayenta/layout/disableable';
 import FormRow from 'kayenta/layout/formRow';
 import { ICanaryState } from 'kayenta/reducers';
 import { chain } from 'lodash';
@@ -31,7 +32,8 @@ const MetricStoreSelector = ({
         value={selectedStore || ''}
         onChange={select}
         className="form-control input-sm"
-        disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+        disabled={CanarySettings.disableConfigEdit}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
       >
         {stores.map((s) => (
           <option key={s} value={s}>

diff --git a/src/kayenta/edit/nameAndDescription.tsx b/src/kayenta/edit/nameAndDescription.tsx
@@ -1,10 +1,6 @@
 import * as Creators from 'kayenta/actions/creators';
-import {
-  CANARY_EDIT_DISABLED,
-  DISABLE_EDIT_CONFIG,
-  DisableableInput,
-  DisableableTextarea,
-} from 'kayenta/layout/disableable';
+import { CanarySettings } from 'kayenta/canary.settings';
+import { DISABLE_EDIT_CONFIG, DisableableInput, DisableableTextarea } from 'kayenta/layout/disableable';
 import FormList from 'kayenta/layout/formList';
 import FormRow from 'kayenta/layout/formRow';
 import { ICanaryState } from 'kayenta/reducers';
@@ -40,7 +36,8 @@ function NameAndDescription({
           type="text"
           value={name}
           onChange={changeName}
-          disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+          disabled={CanarySettings.disableConfigEdit}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
         />
       </FormRow>
       <MetricStoreSelector />
@@ -49,7 +46,8 @@ function NameAndDescription({
           className="form-control input-sm"
           value={description}
           onChange={changeDescription}
-          disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+          disabled={CanarySettings.disableConfigEdit}
+          disabledStateKeys={[DISABLE_EDIT_CONFIG]}
         />
       </FormRow>
     </FormList>

diff --git a/src/kayenta/edit/openDeleteModalButton.tsx b/src/kayenta/edit/openDeleteModalButton.tsx
@@ -1,6 +1,6 @@
 import * as Creators from 'kayenta/actions/creators';
 import { CanarySettings } from 'kayenta/canary.settings';
-import { CANARY_EDIT_DISABLED, DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
+import { DISABLE_EDIT_CONFIG, DisableableButton } from 'kayenta/layout/disableable';
 import { ICanaryState } from 'kayenta/reducers';
 import * as React from 'react';
 import { connect } from 'react-redux';
@@ -25,7 +25,7 @@ function DeleteConfigButton({ openDeleteConfigModal, disabled }: IDeleteButtonDi
         className="passive"
         disabled={disabled || CanarySettings.disableConfigEdit}
         onClick={openDeleteConfigModal}
-        disabledStateKeys={[DISABLE_EDIT_CONFIG, CANARY_EDIT_DISABLED]}
+        disabledStateKeys={[DISABLE_EDIT_CONFIG]}
       >
         <i className="fa fa-trash" />
         <span>Delete</span>

diff --git a/src/kayenta/layout/disableable.tsx b/src/kayenta/layout/disableable.tsx
@@ -8,7 +8,6 @@ import Select, { ReactSelectProps } from 'react-select';
 
 // Well-known keys that flag if a component should be disabled.
 export const DISABLE_EDIT_CONFIG = 'app.disableConfigEdit';
-export const CANARY_EDIT_DISABLED = 'CanarySettings.disableConfigEdit';
 
 interface IDisableable {
   disabled?: boolean;