apostrophe 3.17.0 → 3.18.0

package/modules/@apostrophecms/task/index.js

@@ -15,62 +15,78 @@
 
 const _ = require('lodash');
 const { stripIndent } = require('common-tags');
+const { SemanticAttributes } = require('@opentelemetry/semantic-conventions');
 
 module.exports = {
   options: { alias: 'task' },
   handlers(self) {
     return {
       'apostrophe:run': {
-        async runTask(isTask) {
+        async runTask(isTask, after) {
 
           if (!isTask) {
             return;
           }
 
-          let task;
           const cmd = self.apos.argv._[0];
-          if (!cmd) {
-            throw new Error('There is no command line argument to serve as a task name, should never happen');
-          }
-
-          if (cmd === 'help') {
+          const telemetry = self.apos.telemetry;
+          const spanName = `task:${cmd}`;
+          await telemetry.startActiveSpan(spanName, async (span) => {
+            span.setAttribute(SemanticAttributes.CODE_FUNCTION, 'runTask');
+            span.setAttribute(SemanticAttributes.CODE_NAMESPACE, '@apostrophecms/task');
+            span.setAttribute(telemetry.Attributes.ARGV, telemetry.stringify(self.apos.argv));
 
-            // list all tasks
-            if (self.apos.argv._.length === 1) {
-              self.usage();
+            let task;
+            if (!cmd) {
+              const err = 'There is no command line argument to serve as a task name, should never happen';
+              console.error(err);
+              return self.exit(after, 1, span, err);
             }
 
-            // help with specific task
-            if (self.apos.argv._.length === 2) {
-              task = self.find(self.apos.argv._[1]);
-              if (!task) {
-                console.error('There is no such task.');
-                self.usage();
+            if (cmd === 'help') {
+              span.setAttribute(telemetry.Attributes.TARGET_FUNCTION, 'help');
+              // list all tasks
+              if (self.apos.argv._.length === 1) {
+                return self.usage(after, span);
               }
-              if (task.usage) {
-                console.log(`\nTips for the ${task.fullName} task:\n`);
-                console.log(task.usage);
-              } else {
-                console.log('That is a valid task, but it does not have a help message.');
+
+              // help with specific task
+              if (self.apos.argv._.length === 2) {
+                span.setAttribute(telemetry.Attributes.TARGET_NAMESPACE, self.apos.argv._[1]);
+                task = self.find(self.apos.argv._[1]);
+                if (!task) {
+                  console.error('There is no such task.');
+                  return self.usage(after, span, 'There is no such task.');
+                }
+                if (task.usage) {
+                  console.log(`\nTips for the ${task.fullName} task:\n`);
+                  console.log(task.usage);
+                } else {
+                  console.log('That is a valid task, but it does not have a help message.');
+                }
+                return self.exit(after, 0, span);
               }
-              process.exit(0);
             }
-          }
 
-          task = self.find(cmd);
+            task = self.find(cmd);
 
-          if (!task) {
-            console.error('\nThere is no such task.');
-            self.usage();
-          }
+            if (!task) {
+              console.error('\nThere is no such task.');
+              return self.usage(after, span, `There is no such task ${cmd}`);
+            }
 
-          try {
-            await task.task(self.apos.argv);
-          } catch (e) {
-            console.error(e);
-            process.exit(1);
-          }
-          process.exit(0);
+            const [ moduleName, taskName ] = task.fullName.split(':');
+            span.setAttribute(telemetry.Attributes.TARGET_NAMESPACE, moduleName);
+            span.setAttribute(telemetry.Attributes.TARGET_FUNCTION, taskName);
+
+            try {
+              await task.task(self.apos.argv);
+              return self.exit(after, 0, span);
+            } catch (e) {
+              console.error(e);
+              return self.exit(after, 1, span, e);
+            }
+          });
         }
       }
     };
@@ -116,21 +132,39 @@ module.exports = {
       // task developer might assume they can exit the process directly.
 
       async invoke(name, args, options) {
-        const aposArgv = self.apos.argv;
-        if (Array.isArray(args)) {
-          args.splice(0, 0, name);
-        } else {
-          options = args;
-          args = [ name ];
-        }
-        const task = self.find(name);
-        const argv = {
-          _: args,
-          ...options || {}
-        };
-        self.apos.argv = argv;
-        await task.task(argv);
-        self.apos.argv = aposArgv;
+        const telemetry = self.apos.telemetry;
+        const spanName = `task:${self.__meta.name}:${name}`;
+        await telemetry.startActiveSpan(spanName, async (span) => {
+          span.setAttribute(SemanticAttributes.CODE_FUNCTION, 'invoke');
+          span.setAttribute(SemanticAttributes.CODE_NAMESPACE, '@apostrophecms/task');
+          try {
+            const aposArgv = self.apos.argv;
+            if (Array.isArray(args)) {
+              args.splice(0, 0, name);
+            } else {
+              options = args;
+              args = [ name ];
+            }
+            const task = self.find(name);
+            const [ moduleName, taskName ] = task.fullName.split(':');
+            span.setAttribute(telemetry.Attributes.TARGET_NAMESPACE, moduleName);
+            span.setAttribute(telemetry.Attributes.TARGET_FUNCTION, taskName);
+            const argv = {
+              _: args,
+              ...options || {}
+            };
+            span.setAttribute(telemetry.Attributes.ARGV, telemetry.stringify(argv));
+            self.apos.argv = argv;
+            await task.task(argv);
+            self.apos.argv = aposArgv;
+            span.setStatus({ code: telemetry.api.SpanStatusCode.OK });
+          } catch (err) {
+            telemetry.handleError(span, err);
+            throw err;
+          } finally {
+            span.end();
+          }
+        });
       },
 
       // Identifies the task corresponding to the given command line argument.
@@ -152,8 +186,9 @@ module.exports = {
 
       // Displays a usage message, including a list of available tasks,
       // and exits the entire program with a nonzero status code.
+      // Forward signal, span and error to the exit handler.
 
-      usage() {
+      usage(after, span, err) {
         // Direct use of console makes sense in tasks. -Tom
         console.error('\nThe following tasks are available:\n');
         for (const [ moduleName, module ] of Object.entries(self.apos.modules)) {
@@ -165,7 +200,26 @@ module.exports = {
         console.error('node app help groupname:taskname\n');
         console.error('To get help with a specific task.\n');
         console.error('To launch the site, run with no arguments.');
-        process.exit(1);
+        return self.exit(after, 1, span, err);
+      },
+
+      // Register error (if any) and close the current telemetry span;
+      // send a signal back to the bootstrap to exit the process with a given code.
+
+      exit(after, code, span, err) {
+        after.exit = code;
+        if (!span) {
+          return;
+        }
+
+        if (err) {
+          self.apos.telemetry.handleError(span, err);
+        } else if (code) {
+          span.setStatus({ code: self.apos.telemetry.api.SpanStatusCode.ERROR });
+        } else {
+          span.setStatus({ code: self.apos.telemetry.api.SpanStatusCode.OK });
+        }
+        span.end();
       },
 
       // Return a `req` object suitable for command line tasks

package/modules/@apostrophecms/template/index.js

@@ -31,6 +31,7 @@ const qs = require('qs');
 const Promise = require('bluebird');
 const path = require('path');
 const { stripIndent } = require('common-tags');
+const { SemanticAttributes } = require('@opentelemetry/semantic-conventions');
 
 module.exports = {
   options: { alias: 'template' },
@@ -631,91 +632,125 @@ module.exports = {
       // async function.
 
       async renderPageForModule(req, template, data, module) {
-        let scene = req.user ? 'apos' : 'public';
-        if (req.scene) {
-          scene = req.scene;
-        } else {
-          req.scene = scene;
-        }
+        const telemetry = self.apos.telemetry;
+        const spanName = `render:${self.__meta.name}:renderPageForModule`;
+        return telemetry.startActiveSpan(spanName, async (span) => {
+          span.setAttributes({
+            [SemanticAttributes.CODE_FUNCTION]: 'renderPageForModule',
+            [SemanticAttributes.CODE_NAMESPACE]: self.__meta.name
+          });
 
-        const aposBodyData = {
-          modules: {},
-          prefix: req.prefix,
-          sitePrefix: self.apos.prefix,
-          shortName: self.apos.shortName,
-          locale: req.locale,
-          csrfCookieName: self.apos.csrfCookieName,
-          tabId: self.apos.util.generateId(),
-          uploadsUrl: self.apos.attachment.uploadfs.getUrl(),
-          assetBaseUrl: self.apos.asset.getAssetBaseUrl(),
-          scene
-        };
-        if (req.user) {
-          aposBodyData.user = {
-            title: req.user.title,
-            _id: req.user._id,
-            username: req.user.username
+          let scene = req.user ? 'apos' : 'public';
+          if (req.scene) {
+            scene = req.scene;
+          } else {
+            req.scene = scene;
+          }
+          span.setAttribute(telemetry.Attributes.SCENE, scene);
+          span.setAttribute(telemetry.Attributes.TEMPLATE, template);
+
+          const aposBodyData = {
+            modules: {},
+            prefix: req.prefix,
+            sitePrefix: self.apos.prefix,
+            shortName: self.apos.shortName,
+            locale: req.locale,
+            csrfCookieName: self.apos.csrfCookieName,
+            tabId: self.apos.util.generateId(),
+            uploadsUrl: self.apos.attachment.uploadfs.getUrl(),
+            assetBaseUrl: self.apos.asset.getAssetBaseUrl(),
+            scene
+          };
+          if (req.user) {
+            aposBodyData.user = {
+              title: req.user.title,
+              _id: req.user._id,
+              username: req.user.username
+            };
+          }
+          await self.emit('addBodyData', req, aposBodyData);
+          self.addBodyDataAttribute(req, { apos: JSON.stringify(aposBodyData) });
+
+          // Always the last call; signifies we're done initializing the
+          // page as far as the core is concerned; a lovely time for other
+          // modules and project-level javascript to do their own
+          // enhancements.
+          //
+          // This method emits a 'ready' event, and also
+          // emits an 'enhance' event with the entire $body
+          // as its argument.
+          //
+          // Waits for DOMready to give other
+          // things maximum opportunity to happen.
+
+          const decorate = req.query.aposRefresh !== '1';
+
+          // data.url will be the original requested page URL, for use in building
+          // relative links, adding or removing query parameters, etc. If this is a
+          // refresh request, we remove that so that frontend templates don't build
+          // URLs that also refresh
+
+          const args = {
+            outerLayout: decorate ? '@apostrophecms/template:outerLayout.html' : '@apostrophecms/template:refreshLayout.html',
+            permissions: req.user && (req.user._permissions || {}),
+            scene,
+            refreshing: !decorate,
+            // Make the query available to templates for easy access to
+            // filter settings etc.
+            query: req.query,
+            url: unrefreshed(req.url)
           };
-        }
-        await self.emit('addBodyData', req, aposBodyData);
-        self.addBodyDataAttribute(req, { apos: JSON.stringify(aposBodyData) });
-
-        // Always the last call; signifies we're done initializing the
-        // page as far as the core is concerned; a lovely time for other
-        // modules and project-level javascript to do their own
-        // enhancements.
-        //
-        // This method emits a 'ready' event, and also
-        // emits an 'enhance' event with the entire $body
-        // as its argument.
-        //
-        // Waits for DOMready to give other
-        // things maximum opportunity to happen.
-
-        const decorate = req.query.aposRefresh !== '1';
-
-        // data.url will be the original requested page URL, for use in building
-        // relative links, adding or removing query parameters, etc. If this is a
-        // refresh request, we remove that so that frontend templates don't build
-        // URLs that also refresh
-
-        const args = {
-          outerLayout: decorate ? '@apostrophecms/template:outerLayout.html' : '@apostrophecms/template:refreshLayout.html',
-          permissions: req.user && (req.user._permissions || {}),
-          scene,
-          refreshing: !decorate,
-          // Make the query available to templates for easy access to
-          // filter settings etc.
-          query: req.query,
-          url: unrefreshed(req.url)
-        };
 
-        _.extend(args, data);
+          _.extend(args, data);
 
-        if (req.aposError) {
+          if (req.aposError) {
           // A 500-worthy error occurred already, i.e. in `pageBeforeSend`
-          return error(req.aposError);
-        }
-
-        try {
-          const content = await module.render(req, template, args);
+            telemetry.handleError(span, req.aposError);
+            span.end();
+            return error(req.aposError);
+          }
 
-          const filledContent = self.insertBundlesMarkup({
-            page: req.data.bestPage,
-            scene,
-            template,
-            content,
-            scriptsPlaceholder: req.scriptsPlaceholder,
-            stylesheetsPlaceholder: req.stylesheetsPlaceholder,
-            widgetsBundles: req.widgetsBundles
-          });
+          try {
+            const spanRenderName = `render:${module.__meta.name}:render`;
+            const content = await telemetry.startActiveSpan(spanRenderName, async (spanRender) => {
+              spanRender.setAttribute(SemanticAttributes.CODE_FUNCTION, 'render');
+              spanRender.setAttribute(SemanticAttributes.CODE_NAMESPACE, module.__meta.name);
+              spanRender.setAttribute(telemetry.Attributes.SCENE, scene);
+              spanRender.setAttribute(telemetry.Attributes.TEMPLATE, template);
+
+              try {
+                const content = await module.render(req, template, args);
+                spanRender.setStatus({ code: telemetry.api.SpanStatusCode.OK });
+                return content;
+              } catch (err) {
+                telemetry.handleError(spanRender, err);
+                throw err;
+              } finally {
+                spanRender.end();
+              }
+            }, span);
+
+            const filledContent = self.insertBundlesMarkup({
+              page: req.data.bestPage,
+              scene,
+              template,
+              content,
+              scriptsPlaceholder: req.scriptsPlaceholder,
+              stylesheetsPlaceholder: req.stylesheetsPlaceholder,
+              widgetsBundles: req.widgetsBundles
+            });
 
-          return filledContent;
-        } catch (e) {
+            span.setStatus({ code: telemetry.api.SpanStatusCode.OK });
+            return filledContent;
+          } catch (e) {
           // The page template threw an exception. Log where it
           // occurred for easier debugging
-          return error(e);
-        }
+            telemetry.handleError(span, e);
+            return error(e);
+          } finally {
+            span.end();
+          }
+        });
 
         function error(e) {
           self.logError(req, e);

package/modules/@apostrophecms/template/lib/custom-tags/component.js

@@ -1,5 +1,7 @@
 // Implements {% component 'moduleName:componentName' with dataObject %}
 
+const { SemanticAttributes } = require('@opentelemetry/semantic-conventions');
+
 module.exports = function(self) {
   return {
     // We need a custom parser because of the "with" syntax
@@ -27,29 +29,47 @@ module.exports = function(self) {
       if (!data) {
         data = {};
       }
-      const parsed = name.match(/^([^:]+):(.+)$/);
-      if (!parsed) {
-        throw new Error('When using {% component %} the component name must be a string like: module-name:componentName');
-      }
-      // eslint-disable-next-line no-unused-vars
-      const [ dummy, moduleName, componentName ] = parsed;
-      const module = self.apos.modules[moduleName];
-      if (!module) {
-        throw new Error(`{% component %} was invoked with the name of a module that does not exist. Hint:\nit must be a module that is actually live in your project, not a base class\nlike @apostrophecms/piece-type.\nModule name: ${moduleName} Component name: ${componentName}`);
-      }
-      if (!(module.components && module.components[componentName])) {
-        throw new Error(`{% component %} was invoked with the name of a component that does not exist.\nModule name: ${moduleName} Component name: ${componentName}`);
-      }
-      const result = await self.apos.util.recursionGuard(req, `component:${moduleName}:${componentName}`, async () => {
-        const input = await module.components[componentName](req, data);
-        return module.render(req, componentName, input);
+
+      const telemetry = self.apos.telemetry;
+      const spanName = `component:${name}`;
+      return telemetry.startActiveSpan(spanName, async (span) => {
+        span.setAttribute(telemetry.Attributes.TEMPLATE, name);
+
+        try {
+          const parsed = name.match(/^([^:]+):(.+)$/);
+          if (!parsed) {
+            throw new Error('When using {% component %} the component name must be a string like: module-name:componentName');
+          }
+          // eslint-disable-next-line no-unused-vars
+          const [ dummy, moduleName, componentName ] = parsed;
+          span.setAttribute(SemanticAttributes.CODE_FUNCTION, componentName);
+          span.setAttribute(SemanticAttributes.CODE_NAMESPACE, moduleName);
+          const module = self.apos.modules[moduleName];
+          if (!module) {
+            throw new Error(`{% component %} was invoked with the name of a module that does not exist. Hint:\nit must be a module that is actually live in your project, not a base class\nlike @apostrophecms/piece-type.\nModule name: ${moduleName} Component name: ${componentName}`);
+          }
+          if (!(module.components && module.components[componentName])) {
+            throw new Error(`{% component %} was invoked with the name of a component that does not exist.\nModule name: ${moduleName} Component name: ${componentName}`);
+          }
+          const result = await self.apos.util.recursionGuard(req, `component:${moduleName}:${componentName}`, async () => {
+            const input = await module.components[componentName](req, data);
+            return module.render(req, componentName, input);
+          });
+          span.setStatus({ code: telemetry.api.SpanStatusCode.OK });
+
+          if (result === undefined) {
+            // Recursion guard stopped it, nunjucks expects a string
+            return '';
+          } else {
+            return result;
+          }
+        } catch (err) {
+          telemetry.handleError(span, err);
+          throw err;
+        } finally {
+          span.end();
+        }
       });
-      if (result === undefined) {
-        // Recursion guard stopped it, nunjucks expects a string
-        return '';
-      } else {
-        return result;
-      }
     }
   };
 };

package/modules/@apostrophecms/ui/ui/apos/components/AposSelect.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="apos-input-wrapper">
+    <select
+      class="apos-input apos-input--select"
+      :disabled="disabled"
+      @change="change($event.target.value)"
+    >
+      <option
+        v-for="choice in choices"
+        :key="JSON.stringify(choice.value)"
+        :value="JSON.stringify(choice.value)"
+        :selected="choice.value === selected"
+      >
+        {{ $t(choice.label) }}
+      </option>
+    </select>
+    <AposIndicator
+      icon="menu-down-icon"
+      class="apos-input-icon"
+      :icon-size="20"
+    />
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'AposSelect',
+  props: {
+    icon: {
+      type: String,
+      default: 'menu-down-icon'
+    },
+    choices: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    selected: {
+      type: [ String, Number ],
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [ 'change' ],
+  methods: {
+    change(value) {
+      this.$emit('change', value);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apos-input-icon {
+  @include apos-transition();
+}
+</style>

package/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue

@@ -27,13 +27,26 @@
           :size="13"
         />
         <AposContextMenu
-          v-if="hasRelationshipSchema"
+          v-if="hasRelationshipEditor && more.menu.length"
           :button="more.button"
           :menu="more.menu"
           @item-clicked="$emit('item-clicked', item)"
           menu-placement="bottom-start"
           menu-offset="40, 10"
         />
+        <AposButton
+          class="apos-slat__editor-btn"
+          v-if="editorIcon && hasRelationshipEditor"
+          role="button"
+          :tooltip="{
+            content: editorLabel,
+            placement: 'bottom'
+          }"
+          :icon="editorIcon"
+          :icon-only="true"
+          :modifiers="['inline']"
+          @click="$emit('item-clicked', item)"
+        />
         <a
           class="apos-slat__control apos-slat__control--view"
           v-if="item._url || item._urls"
@@ -42,9 +55,16 @@
         >
           <eye-icon :size="14" class="apos-slat__control--view-icon" />
         </a>
-        <div v-if="item.attachment && item.attachment.group === 'images' && item.attachment._urls" class="apos-slat__media-preview">
+        <div
+          v-if="item.attachment &&
+            item.attachment.group === 'images' &&
+            item.attachment._urls"
+          class="apos-slat__media-preview"
+        >
           <img
-            :src="item.attachment._urls['one-sixth']"
+            :src="item.attachment._urls.uncropped
+              ? item.attachment._urls.uncropped['one-sixth']
+              : item.attachment._urls['one-sixth']"
             :alt="item.description || item.title"
             class="apos-slat__media"
           >
@@ -114,6 +134,14 @@ export default {
     hasRelationshipSchema: {
       type: Boolean,
       default: false
+    },
+    editorLabel: {
+      type: String,
+      default: null
+    },
+    editorIcon: {
+      type: String,
+      default: null
     }
   },
   emits: [ 'engage', 'disengage', 'move', 'remove', 'item-clicked', 'select' ],
@@ -128,10 +156,10 @@ export default {
           type: 'inline'
         },
         menu: [
-          {
-            label: 'Edit Relationship',
+          ...!this.editorIcon ? [ {
+            label: 'apostrophe:editRelationship',
             action: 'edit-relationship'
-          }
+          } ] : []
         ]
       }
     };
@@ -144,6 +172,12 @@ export default {
       } else {
         return `${(size / 1000000).toFixed(1)}MB`;
       }
+    },
+    hasRelationshipEditor() {
+      if (this.item.attachment && this.item.attachment.group === 'images') {
+        return this.hasRelationshipSchema && this.item.attachment._isCroppable;
+      }
+      return this.hasRelationshipSchema;
     }
   },
   methods: {
@@ -162,11 +196,8 @@ export default {
     },
     move(dir) {
       if (this.engaged) {
-        if (dir > 0) {
-          this.$emit('move', this.item._id, 1);
-        } else {
-          this.$emit('move', this.item._id, -1);
-        }
+        const direction = dir > 0 ? 1 : -1;
+        this.$emit('move', this.item._id, direction);
       }
     },
     remove(focusNext) {
@@ -259,6 +290,10 @@ export default {
     text-overflow: ellipsis;
   }
 
+  .apos-slat__editor-btn {
+    margin-right: 5px;
+  }
+
   .apos-slat__control {
     display: flex;
     align-content: center;