@fleetbase/fleetops-engine 0.4.16 → 0.4.18

package/addon/services/context-panel.js

@@ -1,8 +1,10 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { camelize } from '@ember/string';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
+import isObject from '@fleetbase/ember-core/utils/is-object';
 
 /**
  * Service for managing the state and interactions of the context panel.
@@ -103,6 +105,28 @@ export default class ContextPanelService extends Service {
                 componentArguments: [{ isResizable: true }, { width: '500px' }],
             },
         },
+        customField: {
+            editing: {
+                component: 'custom-field-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '500px' }],
+            },
+        },
+        activity: {
+            editing: {
+                component: 'activity-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '500px' }],
+            },
+        },
+        customEntity: {
+            editing: {
+                component: 'custom-entity-form-panel',
+                componentArguments: [{ isResizable: true }, { width: '500px' }],
+            },
+        },
+        orderConfigManager: {
+            component: 'order-config-manager-overlay',
+            componentArguments: [{ isResizable: true }, { width: '500px' }],
+        },
     };
 
     /**
@@ -142,18 +166,54 @@ export default class ContextPanelService extends Service {
      * @action
      */
     @action focus(model, intent = 'viewing', options = {}) {
+        // handle focus which is not based on a model resource
+        // this is purely intent
+        if (typeof model === 'string') {
+            if (isObject(intent)) {
+                options = intent;
+            }
+
+            const registry = this.registry[model];
+            const dynamicArgs = getWithDefault(options, 'args', {});
+            if (registry) {
+                this.currentContext = null;
+                this.currentContextRegistry = registry;
+                this.currentContextComponentArguments = this.createDynamicArgsFromRegistry(registry, model, dynamicArgs);
+                this.contextOptions = options;
+
+                return this;
+            }
+
+            throw new Error(`Unable to focus selected context: ${model}`);
+        }
+
         const modelName = getModelName(model);
-        const registry = this.registry[modelName];
+        const registry = this.getRegistryFromModelName(modelName);
         const dynamicArgs = getWithDefault(options, 'args', {});
-
         if (registry && registry[intent]) {
             this.currentContext = model;
             this.currentContextRegistry = registry[intent];
             this.currentContextComponentArguments = this.createDynamicArgsFromRegistry(registry[intent], model, dynamicArgs);
             this.contextOptions = options;
+
+            return this;
         }
     }
 
+    /**
+     * Get the correct registry from the modelName provided.
+     *
+     * @param {string} modelName
+     * @return {object}
+     * @memberof ContextPanelService
+     */
+    getRegistryFromModelName(modelName) {
+        if (typeof modelName === 'string' && modelName.includes('-')) {
+            modelName = camelize(modelName);
+        }
+        return this.registry[modelName];
+    }
+
     /**
      * Clears the current context and associated details.
      *
@@ -222,7 +282,9 @@ export default class ContextPanelService extends Service {
      */
     createDynamicArgsFromRegistry(registry, model, additionalArgs = {}) {
         // Generate dynamic arguments object
-        const dynamicArgs = {};
+        const dynamicArgs = {
+            [camelize(getModelName(model))]: model,
+        };
         const componentArguments = registry.componentArguments || [];
 
         componentArguments.forEach((arg, index) => {

package/addon/styles/fleetops-engine.css

@@ -165,3 +165,271 @@ body.fleetbase-console .next-content-overlay > .next-content-overlay-panel-conta
     background-color: inherit;
     border: 0;
 }
+
+.fleetops-pill-tabs > nav {
+    display: flex;
+    flex-direction: row;
+}
+
+.fleetops-pill-tabs > nav > a.ui-tab {
+    border-radius: 1rem;
+    border: 1px solid #374151;
+    background-color: #1f2937;
+    margin-right: 0.75rem;
+    padding: 0.15rem 1rem;
+    font-size: 0.85rem;
+}
+
+.fleetops-pill-tabs > nav > a.ui-tab.active {
+    background-color: #3b82f6;
+    border: 1px solid #2563eb;
+}
+
+.fleetops-pill-tabs > nav > a.ui-tab:hover {
+    opacity: 0.75;
+}
+
+body[data-theme='light'] .fleetops-pill-tabs > nav > a.ui-tab {
+    background-color: #e5e7eb;
+    border: 1px solid #d1d5db;
+}
+
+body[data-theme='light'] .fleetops-pill-tabs > nav > a.ui-tab.active {
+    background-color: #3b82f6;
+    border: 1px solid #2563eb;
+    color: #fff;
+}
+
+.next-view-section-subheader .next-view-section-subheader-actions button.btn.order-config-select-button,
+.btn.order-config-select-button {
+    padding-top: 0.265rem !important;
+    padding-bottom: 0.265rem !important;
+}
+
+.order-config-custom-field-type-pill {
+    max-width: 100px;
+}
+
+body[data-theme='light'] .flow-activity {
+    stroke: #e5e7eb;
+    fill: rgba(249, 250, 251, 50%);
+}
+
+body[data-theme='light'] .flow-activity:hover,
+body[data-theme='light'] .joint-type-fleetbase-activity:hover .flow-activity {
+    stroke: #2563eb;
+}
+
+body[data-theme='light'] .joint-type-fleetbase-activity text {
+    fill: #030712;
+}
+
+body[data-theme='light'] .flow-activity-status-pill {
+    fill: #f3f4f6;
+    stroke: #f3f4f6;
+}
+
+body[data-theme='light'] .flow-activity-status-pill text {
+    fill: #030712;
+}
+
+.flow-activity:hover,
+.flow-activity-add-button:hover,
+.joint-type-fleetbase-activity:hover .flow-activity {
+    stroke: #2563eb;
+}
+
+.flow-activity-add-button:hover {
+    fill: #3b82f6;
+}
+
+.joint-js-paper {
+    overflow: auto;
+}
+
+.activity-flow-graph-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.activity-flow-zoom-controls {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-left: 1.5rem;
+    padding-top: 1rem;
+    z-index: 99;
+}
+
+.activity-flow-zoom-controls > .btn-wrapper:first-child > .btn {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.activity-flow-zoom-controls > .btn-wrapper:last-child > .btn {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.activity-flow-zoom-controls > .btn-wrapper > .btn:hover {
+    opacity: 0.5;
+}
+
+.activity-logic-builder-conditions {
+    display: flex;
+    flex-direction: column;
+}
+
+.activity-logic-builder .activity-logic-builder-condition {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div .ember-basic-dropdown-trigger button.btn {
+    padding: 0.5rem;
+    border-radius: 0;
+    font-size: 0.8rem;
+    width: 5.5rem;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div > input,
+.activity-logic-builder .activity-logic-builder-condition > div .ember-basic-dropdown-trigger button.btn {
+    border: 0;
+    box-shadow: none;
+    font-size: 0.75rem;
+    height: 28px;
+}
+
+.activity-logic-builder .activity-logic-builder-condition .btn.btn-danger {
+    box-shadow: none;
+    font-size: 0.75rem;
+    height: 28px;
+    padding: 0.5rem;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div > input {
+    padding: 0.25rem 0.5rem;
+    width: 100%;
+    height: 28px;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div:first-child,
+.activity-logic-builder .activity-logic-builder-condition > div:last-child {
+    flex: 1;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div:first-child > input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div:last-child > input {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div:first-child {
+    border-right: 1px #1f2937 solid;
+}
+
+.activity-logic-builder .activity-logic-builder-condition > div:last-child {
+    border-left: 1px #1f2937 solid;
+}
+
+body[data-theme='light'] .activity-logic-builder .activity-logic-builder-condition > div:first-child {
+    border-right: 1px #f9fafb solid;
+}
+
+body[data-theme='light'] .activity-logic-builder .activity-logic-builder-condition > div:last-child {
+    border-left: 1px #f9fafb solid;
+}
+
+.activity-logic-builder .activity-logic-builder-logic {
+    border-top: 1px #374151 solid;
+    padding: 0.5rem;
+}
+
+.activity-logic-builder .activity-logic-builder-condition-type-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.activity-logic-builder button.activity-logic-builder-add-condition,
+.activity-logic-builder .activity-logic-builder-condition-type {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    color: #f9fafb;
+    background-color: #111827;
+    border: 1px #374151 solid;
+    border-radius: 0.25rem;
+    margin: 0.5rem 0;
+    font-size: 0.8rem;
+    align-self: flex-start;
+    flex: 0 1 auto;
+}
+
+.activity-logic-builder .activity-logic-builder-condition-type {
+    width: 5rem;
+}
+
+body[data-theme='light'] .activity-logic-builder .activity-logic-builder-condition-type {
+    color: #030712;
+    background-color: #f9fafb;
+    border: 1px #e5e7eb solid;
+    margin-bottom: 0.5rem;
+}
+
+.activity-event-selector .activity-event-selector-event {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px #374151 solid;
+    padding: 0.75rem 1.25rem;
+    font-size: 0.9rem;
+    font-family: monospace;
+}
+
+.x-fleetbase-file.custom-field-file {
+    max-width: 100%;
+    height: unset;
+}
+
+.x-fleetbase-file.custom-field-file > .x-fleetbase-file-wrapper {
+    width: 100%;
+    max-width: 100%;
+    height: unset;
+    padding: 0.35rem;
+}
+
+.x-fleetbase-file.custom-field-file > .x-fleetbase-file-wrapper > .x-fleetbase-file-actions + div.flex.flex-col {
+    flex-direction: row;
+    flex: none;
+    width: 100%;
+    justify-content: start;
+}
+
+.x-fleetbase-file.custom-field-file > .x-fleetbase-file-wrapper > .x-fleetbase-file-actions + div.flex.flex-col > .flex-1:not(.flex-col) {
+    flex: none;
+}
+
+.x-fleetbase-file.custom-field-file > .x-fleetbase-file-wrapper .x-fleetbase-file-preview {
+    margin-bottom: 0;
+    height: unset;
+    width: 2rem;
+    margin-right: 0.5rem;
+}
+
+.x-fleetbase-file.custom-field-file > .x-fleetbase-file-wrapper .x-fleetbase-file-name {
+    width: 100%;
+    text-align: left;
+    padding-left: 0.5rem;
+}
+
+.x-fleetops-input-height {
+    height: 38px;
+}

package/addon/templates/application.hbs

@@ -1,5 +1,5 @@
 <EmberWormhole @to="sidebar-menu-items">
-    <Layout::FleetOpsSidebar @visibilitySettings={{@model.visibilitySettings}} @onClickCreateOrder={{this.createOrder}} @onClickSettings={{this.toggleSettings}} />
+    <Layout::FleetOpsSidebar @controller={{this}} @visibilitySettings={{@model.visibilitySettings}} @onClickCreateOrder={{this.createOrder}} @onClickSettings={{this.toggleSettings}} />
 </EmberWormhole>
 
 <Layout::Section::Container>

package/addon/templates/operations/order-config.hbs

@@ -0,0 +1,55 @@
+<OrderConfigManager @tab={{this.tab}} @orderConfig={{this.config}} @context={{this.context}} @contextModel={{this.contextModel}} @onTabChanged={{this.onTabChanged}} @onConfigChanged={{this.onConfigChanged}} @onContextChanged={{this.onContextChanged}} as |Action Context|>
+    <Layout::Section::Header @title={{t "fleet-ops.component.order-config-manager.title"}}>
+        <DropdownButton class="order-config-select-button mr-2" @disabled={{not Context.configs}} @text={{if Context.currentConfig.name Context.currentConfig.name (t "fleet-ops.component.order-config-manager.select-order-config")}} @textClass="text-sm mr-2" @buttonClass="flex-row-reverse w-44 justify-between" @icon="caret-down" @iconClass="mr-0i" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
+            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                <div class="p-1">
+                    {{#each Context.configs as |orderConfig|}}
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd Context.selectConfig orderConfig)}}>
+                            <div class="flex-1 flex flex-row items-center">
+                                <div class="w-6">
+                                    <FaIcon @icon="cogs" />
+                                </div>
+                                <span>{{orderConfig.name}}</span>
+                            </div>
+                            <div>
+                                {{#if (eq Context.currentConfig.id orderConfig.id)}}
+                                    <FaIcon @icon="check" class="text-green-500" />
+                                {{/if}}
+                            </div>
+                        </a>
+                    {{/each}}
+                </div>
+            </div>
+        </DropdownButton>
+        <Action.NewOrderConfigButton />
+    </Layout::Section::Header>
+
+    <Layout::Section::Body class="h-full">
+        <div class="h-full w-full overflow-y-scroll">
+            {{#if Context.currentConfig}}
+                <div class="px-5 py-3">
+                    <div class="fleetops-pill-tabs">
+                        <nav>
+                            {{#each Context.tabs as |tab|}}
+                                <a href="javascript:;" class="ui-tab {{if (eq tab.slug Context.currentTab.slug) 'active'}}" {{on "click" (fn Context.onTabChanged tab.slug)}}>
+                                    <FaIcon @icon={{tab.icon}} class="mr-1" />
+                                    <span>{{tab.title}}</span>
+                                </a>
+                            {{/each}}
+                        </nav>
+                    </div>
+                </div>
+                <Context.content />
+                <Spacer @height="300px" />
+            {{else}}
+                <div class="h-full">
+                    <div class="flex flex-col items-center justify-center h-40">
+                        <h4 class="text-lg text-gray-400 mb-4">{{t "fleet-ops.component.order-config-manager.select-order-config-to-start"}}</h4>
+                        <Button @type="link" @text={{t "fleet-ops.component.order-config-manager.new-order-config"}} @onClick={{Context.onClickCreateOrderConfig}} class="text-blue-400" />
+                    </div>
+                </div>
+            {{/if}}
+        </div>
+    </Layout::Section::Body>
+</OrderConfigManager>
+{{outlet}}