Add: Environment module support YAML format #319

web/src/components/EnvironmentForm.vue

@@ -14,46 +14,103 @@
  <v-text-field
  v-model="item.name"
  :label="$t('environmentName')"
- :rules="[v => !!v || $t('name_required')]"
+ :rules="[(v) => !!v || $t('name_required')]"
  required
  :disabled="formSaving"
  class="mb-4"
  ></v-text-field>
 
- <v-subheader>
- {{ $t('extraVariables') }}
- </v-subheader>
+ <v-header>
+ {{ $t("extraVariables") }}
+ </v-header>
+
+ <v-select
+ v-model="extraVarsFormat"
+ label="format"
+ :items="formats"
+ required
+ :disabled="formSaving || formatSelectExtraVarsDisabled"
+ @change="setExtraVarsWindow"
+ ></v-select>
 
  <codemirror
- :style="{ border: '1px solid lightgray' }"
- v-model="item.json"
- :options="cmOptions"
- :placeholder="$t('enterExtraVariablesJson')"
+ v-if="extraVarsFormat === 'yaml'"
+ :style="{ border: '1px solid lightgray' }"
+ :value="codeWindows.json"
+ :options="cmOptions.json"
+ @input="updateYamlInputExtraVars"
+ :placeholder="$t('enterExtraVariablesYaml')"
  />
 
- <v-subheader>
- {{ $t('environmentVariables') }}
- </v-subheader>
+ <codemirror
+ v-if="extraVarsFormat === 'json'"
+ :style="{ border: '1px solid lightgray' }"
+ :value="codeWindows.json"
+ :options="cmOptions.json"
+ @input="updateJsonInputExtraVars"
+ :placeholder="$t('enterExtraVariablesJson')"
+ />
+
+ <v-spacer></v-spacer>
+
+ <v-header>
+ {{ $t("environmentVariables") }}
+ </v-header>
+
+ <v-select
+ v-model="envFormat"
+ label="format"
+ :items="formats"
+ required
+ :disabled="formSaving || formatSelectEnvDisabled"
+ @change="setEnvironmentWindow"
+ ></v-select>
+
+ <codemirror
+ v-if="envFormat === 'yaml'"
+ :style="{ border: '1px solid lightgray' }"
+ :value="codeWindows.env"
+ :options="cmOptions.env"
+ @input="updateYamlInputEnv"
+ :placeholder="$t('enterEnvYaml')"
+ />
 
  <codemirror
- :style="{ border: '1px solid lightgray' }"
- v-model="item.env"
- :options="cmOptions"
- :placeholder="$t('enterEnvJson')"
+ v-if="envFormat === 'json'"
+ :style="{ border: '1px solid lightgray' }"
+ :value="codeWindows.env"
+ :options="cmOptions.env"
+ @input="updateJsonInputEnv"
+ :placeholder="$t('enterEnvJson')"
  />
 
  <v-alert
+ v-if="envFormat == 'json' || extraVarsFormat == 'json'"
  dense
  text
  type="info"
  class="mt-4"
  >
- {{ $t('environmentAndExtraVariablesMustBeValidJsonExample') }}
- <pre style="font-size: 14px;">{
+ {{ $t("environmentAndExtraVariablesMustBeValidJsonExample") }}
+ <pre style="font-size: 14px">{
  "var_available_in_playbook_1": 1245,
  "var_available_in_playbook_2": "test"
 }</pre>
  </v-alert>
+
+ <v-alert
+ v-if="envFormat == 'yaml' || extraVarsFormat == 'yaml'"
+ dense
+ text
+ type="info"
+ class="mt-4"
+ >
+ {{ $t("environmentAndExtraVariablesMustBeValidYamlExample") }}
+ <pre style="font-size: 14px">
+var_available_in_playbook_1: 1245
+var_available_in_playbook_2: "test"
+</pre >
+ </v-alert>
  </v-form>
 </template>
 <script>
@@ -62,8 +119,10 @@
 import ItemFormBase from '@/components/ItemFormBase';
 
 import { codemirror } from 'vue-codemirror';
+import { safeLoad, safeDump } from 'js-yaml';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/vue/vue.js';
+import 'codemirror/mode/yaml/yaml.js';
 import 'codemirror/addon/display/placeholder.js';
 
 export default {
@@ -73,19 +132,176 @@
  },
 
  data() {
+ const jsonFormat = 'json';
+ const yamlFormat = 'yaml';
+ const formats = [jsonFormat, yamlFormat];
+ const modes = {
+ json: 'application/json',
+ yaml: 'text/x-yaml',
+ };
  return {
+ codeWindows: {
+ env: '',
+ json: '',
+ },
+ extraVarsFormat: jsonFormat,
+ envFormat: jsonFormat,
+ formats,
+ modes,
+ formatSelectEnvDisabled: false,
+ formatSelectExtraVarsDisabled: false,
  cmOptions: {
- tabSize: 2,
- mode: 'application/json',
- lineNumbers: true,
- line: true,
- lint: true,
- indentWithTabs: false,
+ json: {
+ tabSize: 2,
+ mode: modes.json,
+ lineNumbers: true,
+ line: true,
+ lint: true,
+ indentWithTabs: false,
+ },
+ env: {
+ tabSize: 2,
+ mode: modes.json,
+ lineNumbers: true,
+ line: true,
+ lint: true,
+ indentWithTabs: false,
+ },
  },
  };
  },
 
+ watch: {
+ formSaving(formSaving) {
+ if (formSaving) {
+ this.yamlToJson('env');
+ this.yamlToJson('json');
+ this.item.json = this.codeWindows.json;
+ this.item.env = this.codeWindows.env;
+ } else if (this.formError != null) {
+ this.formError = this.parseErrorString(this.formError);
+ if (this.envFormat === 'yaml') {
+ this.jsonToYaml('env');
+ }
+ if (this.extraVarsFormat === 'yaml') {
+ this.jsonToYaml('json');
+ }
+ }
+ },
+ },
+
  methods: {
+ setFormat(format, windowName) {
+ switch (format) {
+ case 'json':
+ this.cmOptions[windowName].mode = this.modes.json;
+ this.yamlToJson(windowName);
+ break;
+ case 'yaml':
+ this.cmOptions[windowName].mode = this.modes.yaml;
+ this.jsonToYaml(windowName);
+ break;
+ default:
+ this.cmOptions[windowName].mode = this.modes.json;
+ this.yamlToJson(windowName);
+ break;
+ }
+ },
+
+ setEnvironmentWindow() {
+ this.setFormat(this.envFormat, 'env');
+ },
+
+ setExtraVarsWindow() {
+ this.setFormat(this.extraVarsFormat, 'json');
+ },
+
+ updateJsonInputExtraVars(updatedString) {
+ this.formatSelectExtraVarsDisabled = !this.isJson(updatedString);
+ this.codeWindows.json = updatedString;
+ },
+
+ updateYamlInputExtraVars(updatedString) {
+ this.formatSelectExtraVarsDisabled = !this.isYaml(updatedString);
+ this.codeWindows.json = updatedString;
+ },
+
+ updateJsonInputEnv(updatedString) {
+ this.formatSelectEnvDisabled = !this.isJson(updatedString);
+ this.codeWindows.env = updatedString;
+ },
+
+ updateYamlInputEnv(updatedString) {
+ this.formatSelectEnvDisabled = !this.isYaml(updatedString);
+ this.codeWindows.env = updatedString;
+ },
+
+ yamlToJson(windowName) {
+ const yamlValue = this.codeWindows[windowName];
+ console.log(yamlValue);
+ if (this.isYaml(yamlValue)) {
+ // yamlValue = yamlValue === '\n' ? '{}' : yamlValue;
+ let jsonObject = safeLoad(yamlValue);
+ console.log(jsonObject);
+ jsonObject = !jsonObject ? {} : jsonObject;
+ const jsonString = JSON.stringify(jsonObject, null, 2);
+ this.codeWindows[windowName] = jsonString;
+ }
+ },
+
+ jsonToYaml(windowName) {
+ const jsonString = this.codeWindows[windowName];
+ console.log(jsonString);
+ if (this.isJson(jsonString)) {
+ const jsonObject = JSON.parse(jsonString);
+ let yamlValue = safeDump(jsonObject);
+ console.log(yamlValue);
+ yamlValue = yamlValue === '{}\n' ? '' : yamlValue;
+ console.log(yamlValue);
+ this.codeWindows[windowName] = yamlValue;
+ }
+ },
+
+ isJson(str) {
+ try {
+ JSON.parse(str);
+ } catch (e) {
+ return false;
+ }
+ return true;
+ },
+
+ isYaml(str) {
+ try {
+ safeLoad(str);
+ } catch (e) {
+ return false;
+ }
+ return true;
+ },
+
+ parseErrorString(errorString) {
+ if (errorString == null) {
+ return errorString;
+ }
+ if (errorString.includes('Environment')) {
+ if (this.envFormat === 'yaml') {
+ return errorString.replace('JSON', 'YAML');
+ }
+ }
+ if (this.extraVarsFormat === 'yaml') {
+ return errorString.replace('JSON', 'YAML');
+ }
+ return errorString;
+ },
+
+ async afterLoadData() {
+ this.codeWindows.json = this.item.json === undefined ? '{}' : this.item.json;
+ this.codeWindows.env = this.item.env === undefined ? '{}' : this.item.env;
+ this.setEnvironmentWindow();
+ this.setExtraVarsWindow();
+ },
+
  getItemsUrl() {
  return `/api/project/${this.projectId}/environment`;
  },

web/src/lang/de.js

@@ -65,9 +65,12 @@ export default {
  environmentName: 'Name der Umgebung',
  extraVariables: 'Zusätzliche Variablen',
  enterExtraVariablesJson: 'Geben Sie zusätzliche Variablen im JSON-Format ein...',
+ enterExtraVariablesYaml: 'Geben Sie zusätzliche Variablen im YAML-Format ein...',
  environmentVariables: 'Umgebungsvariablen',
  enterEnvJson: 'Geben Sie Umgebungsvariablen im JSON-Format ein...',
+ enterEnvYaml: 'Geben Sie Umgebungsvariablen im YAML-Format ein...',
  environmentAndExtraVariablesMustBeValidJsonExample: 'Zusätzliche Variablen und Umgebungsvariablen müssen gültiges JSON sein. Beispiel:',
+ environmentAndExtraVariablesMustBeValidYamlExample: 'Zusätzliche Variablen und Umgebungsvariablen müssen gültiges YAML sein. Beispiel:',
  dashboard2: 'Obefläche',
  ansibleSemaphore: 'Ansible Semaphore',
  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %> funktioniert nicht richtig ohne JavaScript. Bitte aktivieren Sie es, um fortzufahren.',

web/src/lang/en.js

@@ -65,9 +65,12 @@ export default {
  environmentName: 'Environment Name',
  extraVariables: 'Extra variables',
  enterExtraVariablesJson: 'Enter extra variables JSON...',
+ enterExtraVariablesYaml: 'Enter extra variables YAML...',
  environmentVariables: 'Environment variables',
  enterEnvJson: 'Enter env JSON...',
+ enterEnvYaml: 'Enter env YAML...',
  environmentAndExtraVariablesMustBeValidJsonExample: 'Environment and extra variables must be valid JSON. Example:',
+ environmentAndExtraVariablesMustBeValidYamlExample: 'Environment and extra variables must be valid YAML. Example:',
  dashboard2: 'Dashboard',
  ansibleSemaphore: 'Ansible Semaphore',
  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'We\'re sorry but <%= htmlWebpackPlugin.options.title %> doesn\'t work properly without JavaScript enabled. Please enable it to continue.',

web/src/lang/fr.js

@@ -65,9 +65,12 @@ export default {
  environmentName: 'Nom de l\'environnement',
  extraVariables: 'Variables supplémentaires',
  enterExtraVariablesJson: 'Saisissez JSON pour les variables supplémentaires...',
+ enterExtraVariablesYaml: 'Saisissez YAML pour les variables supplémentaires...',
  environmentVariables: 'Variables d\'environnement',
  enterEnvJson: 'Saisissez JSON pour l\'environnement...',
+ enterEnvYaml: 'Saisissez YAML pour l\'environnement...',
  environmentAndExtraVariablesMustBeValidJsonExample: 'L\'environnement et les variables supplémentaires doivent être un JSON valide. Exemple :',
+ environmentAndExtraVariablesMustBeValidYamlExample: 'L\'environnement et les variables supplémentaires doivent être un YAML valide. Exemple :',
  dashboard2: 'Tableau de bord',
  ansibleSemaphore: 'Semaphore Ansible',
  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Nous sommes désolés, mais <%= htmlWebpackPlugin.options.title %> ne fonctionne pas correctement sans JavaScript. Veuillez l\'activer pour continuer.',

web/src/lang/pt.js

@@ -65,9 +65,12 @@ export default {
  environmentName: 'Nome do Ambiente',
  extraVariables: 'Variáveis Extra',
  enterExtraVariablesJson: 'Introduza JSON de variáveis extra...',
+ enterExtraVariablesYaml: 'Introduza YAML de variáveis extra...',
  environmentVariables: 'Variáveis de Ambiente',
  enterEnvJson: 'Introduza JSON de ambiente...',
+ enterEnvYaml: 'Introduza YAML de ambiente...',
  environmentAndExtraVariablesMustBeValidJsonExample: 'O ambiente e as variáveis extra devem ser JSON válidos. Exemplo:',
+ environmentAndExtraVariablesMustBeValidYamlExample: 'O ambiente e as variáveis extra devem ser YAML válidos. Exemplo:',
  dashboard2: 'Painel de Controlo',
  ansibleSemaphore: 'Semaphore Ansible',
  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Lamentamos, mas <%= htmlWebpackPlugin.options.title %> não funciona corretamente sem JavaScript ativado. Por favor, ative-o para continuar.',

web/src/lang/pt_br.js

@@ -65,9 +65,12 @@ export default {
  environmentName: 'Nome do Ambiente',
  extraVariables: 'Variáveis Extras',
  enterExtraVariablesJson: 'Insira JSON de variáveis extras...',
+ enterExtraVariablesYaml: 'Insira YAML de variáveis extras...',
  environmentVariables: 'Variáveis de Ambiente',
  enterEnvJson: 'Insira JSON de ambiente...',
+ enterEnvYaml: 'Insira YAML de ambiente...',
  environmentAndExtraVariablesMustBeValidJsonExample: 'O ambiente e as variáveis extras devem ser JSON válidos. Exemplo:',
+ environmentAndExtraVariablesMustBeValidYamlExample: 'O ambiente e as variáveis extras devem ser YAML válidos. Exemplo:',
  dashboard2: 'Painel',
  ansibleSemaphore: 'Ansible Semaphore',
  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Pedimos desculpas, mas <%= htmlWebpackPlugin.options.title %> não funciona corretamente sem JavaScript habilitado. Por favor, habilite-o para continuar.',

web/src/lang/ru.js

@@ -65,9 +65,12 @@ export default {
  environmentName: 'Имя окружения',
  extraVariables: 'Дополнительные переменные',
  enterExtraVariablesJson: 'Ввести дополнительные переменные в формате JSON...',
+ enterExtraVariablesYaml: 'Ввести дополнительные переменные в формате YAML...',
  environmentVariables: 'Переменные окружения',
  enterEnvJson: 'Введите переменную окружения в формате JSON...',
+ enterEnvYaml: 'Введите переменную окружения в формате YAML...',
  environmentAndExtraVariablesMustBeValidJsonExample: 'Окружениеи дополнительные переменные должны быть корректным JSON. Например:',
+ environmentAndExtraVariablesMustBeValidYamlExample: 'Окружениеи дополнительные переменные должны быть корректным YAML. Например:',
  dashboard2: 'Панель',
  ansibleSemaphore: 'Ансибл Семафор',
  wereSorryButHtmlwebpackpluginoptionstitleDoesntWor: 'Извините, но <%= htmlWebpackPlugin.options.title %> не работает без включенного JavaScript. Пожалуйста включите, чтобы продолжить',