refactoring solid client on server side, added UI in admin for managing solid server config, started UI for managing solid pods and synced data from fleetbase

Author: roncodes

.eslintignore

@@ -6,8 +6,18 @@
 
 # misc
 /coverage/
+/scripts/
 !.*
 .*/
 
 # ember-try
 /.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+#server
+/server
+/server_vendor

.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
         'ember/no-get': 'off',
         'ember/classic-decorator-no-classic-methods': 'off',
         'no-prototype-builtins': 'off',
-        'node/no-unpublished-require': [
+        'n/no-unpublished-require': [
             'error',
             {
                 allowModules: ['resolve', 'broccoli-funnel'],

.stylelintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+    extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
 };

.template-lintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     rules: {
         'no-invalid-interactive': 'off',
         'no-yield-only': 'off',
-        'no-down-event-binding': 'off',
+        'no-pointer-down-event-binding': 'off',
         'table-groups': 'off',
         'link-href-attributes': 'off',
         'require-input-label': 'off',

addon/components/admin/solid-server-config.hbs

@@ -0,0 +1,19 @@
+{{#if this.configLoaded}}
+    <ContentPanel @title="Solid Server Config" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800 mb-4">
+        <InputGroup @name="Server Host" @value={{this.host}} @placeholder="solid.myserver.com" />
+        <InputGroup @name="Server Port" @value={{this.port}} @placeholder="3000" />
+        <InputGroup>
+            <Toggle @isToggled={{this.secure}} @onToggle={{fn (mut this.secure)}}>
+                <span class="dark:text-gray-100 text-sm ml-2">Secure Server</span>
+            </Toggle>
+        </InputGroup>
+    </ContentPanel>
+
+    <div class="mt-3 flex items-center justify-end">
+        <Button @type="primary" @size="lg" @icon="save" @text={{t "common.save-changes"}} @onClick={{perform this.saveServerConfig}} @disabled={{not this.saveServerConfig.isIdle}} @isLoading={{not this.saveServerConfig.isIdle}} />
+    </div>
+{{else}}
+    <div class="flex items-center justify-center">
+        <Spinner @loadingMessage="Loading server config..." />
+    </div>
+{{/if}}

addon/components/admin/solid-server-config.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class AdminSolidServerConfigComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked configLoaded = false;
+    @tracked host;
+    @tracked port;
+    @tracked secure;
+
+    constructor() {
+        super(...arguments);
+        this.loadServerConfig.perform();
+    }
+
+    getConfig() {
+        return {
+            host: this.host,
+            port: this.port,
+            secure: this.secure,
+        };
+    }
+
+    setConfig(config) {
+        this.host = config.host;
+        this.port = config.port;
+        this.secure = config.secure;
+    }
+
+    @task *loadServerConfig() {
+        const config = yield this.fetch.get('server-config', {}, { namespace: 'solid/int/v1' });
+        if (config) {
+            this.setConfig(config);
+            this.configLoaded = true;
+        }
+    }
+
+    @task *saveServerConfig() {
+        try {
+            const config = yield this.fetch.post('server-config', { server: this.getConfig() }, { namespace: 'solid/int/v1' });
+            if (config) {
+                this.setConfig(config);
+                this.notifications.success('Solid server config udpated successfully.');
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

addon/components/solid-brand-icon.hbs

@@ -0,0 +1,9 @@
+<svg width={{this.width}} height={{this.height}} viewBox="0 0 352 322" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path d="M87.97296 282.3527L27.24133 177.02207c-5.62041-9.75765-5.62041-21.77908 0-31.53674L87.97296 40.2328c5.64643-9.78367 16.08061-15.79439 27.32143-15.79439h121.3852c11.26684 0 21.72704 6.01072 27.32143 15.7944l60.75765 105.30458c5.62041 9.75766 5.62041 21.77909 0 31.53674l-60.73163 105.33061c-5.64643 9.78367-16.08061 15.79439-27.32143 15.79439H115.37245c-11.31888-.05204-21.72704-6.08878-27.3995-15.84643z" fill="#111827" />
+        <path d="M93.15102 275.19708l-57.1148-99.0597c-5.30816-9.1852-5.30816-20.50408 0-29.66326l57.1148-99.08572c5.33418-9.21122 15.14388-14.85765 25.73418-14.85765h114.2296c10.5903 0 20.42602 5.64643 25.73418 14.85765l57.16684 99.03368c5.30816 9.1852 5.30816 20.50408 0 29.66326L258.875 275.2231c-5.33418 9.21122-15.14388 14.85765-25.73418 14.85765H118.93724c-10.64234 0-20.45204-5.67245-25.78622-14.88367z" fill="#7C4DFF" />
+        <path d="M118.46888 142.2328h117.53418c1.48316 0 2.65408-1.19695 2.65408-2.65409v-22.03928c0-14.6495-11.89132-26.54085-26.54081-26.54085h-70.56735c-20.5301-.026-37.15722 16.60105-37.15722 37.13115-.02594 7.83214 6.271 14.10306 14.07712 14.10306zM129.99592 239.60116H200.225c21.20663 0 38.43214-17.22551 38.43214-38.43214 0-7.07755-5.72449-12.82806-12.82806-12.82806H106.94184c-1.45715 0-2.55005 1.17091-2.55005 2.55v23.05408c-.02597 14.18112 11.47505 25.65612 25.60413 25.65612z" fill="#F7F7F7" />
+        <path d="M109.59592 139.3185l87.66275 87.66276c5.80255 5.80255 15.19592 5.80255 20.99847 0l15.19592-15.19592c5.80255-5.80255 5.80255-15.19591 0-20.99847l-87.63673-87.66275c-5.80255-5.80255-15.19592-5.80255-20.99847 0l-15.19592 15.19592c-5.8546 5.80255-5.8546 15.22194-.02602 20.99847z" fill="#F7F7F7" />
+        <path fill="#444" opacity=".3" d="M198.6898 228.46443l-51.4944-40.12347h11.39695zM144.35918 101.66698l40.56582 40.56581h13.7648z" />
+    </g>
+</svg>

addon/components/solid-brand-icon.js

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class SolidBrandIconComponent extends Component {
+    @tracked width = 19;
+    @tracked height = 19;
+    constructor(owner, { options }) {
+        super(...arguments);
+        const { width = 19, height = 19 } = options || {};
+        this.width = width;
+        this.height = height;
+    }
+}

addon/controllers/application.js

@@ -0,0 +1,27 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class ApplicationController extends Controller {
+    @service universe;
+    @service fetch;
+
+    constructor() {
+        super(...arguments);
+        this.universe.on('sidebarContext.available', (sidebarContext) => {
+            sidebarContext.hideNow();
+        });
+    }
+
+    @task *authenticate() {
+        const { authenticationUrl, identifier } = yield this.fetch.get('request-authentication', {}, { namespace: 'solid/int/v1' });
+        if (authenticationUrl) {
+            window.location.href = `${authenticationUrl}/${identifier}`;
+        }
+    }
+
+    @task *getAccountIndex() {
+        const response = yield this.fetch.get('account', {}, { namespace: 'solid/int/v1' });
+        console.log('[response]', response);
+    }
+}

addon/engine.js

@@ -3,6 +3,8 @@ import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import config from './config/environment';
 import services from '@fleetbase/ember-core/exports/services';
+import AdminSolidServerConfigComponent from './components/admin/solid-server-config';
+import SolidBrandIconComponent from './components/solid-brand-icon';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -14,7 +16,25 @@ export default class SolidEngine extends Engine {
         services,
         externalRoutes,
     };
-    setupExtension = function (app, engine, universe) {};
+    setupExtension = function (app, engine, universe) {
+        // register menu item in header
+        universe.registerHeaderMenuItem('Solid', 'console.solid-protocol', { iconComponent: SolidBrandIconComponent, iconComponentOptions: { width: 19, height: 19 }, priority: 5 });
+
+        // register admin settings -- create a solid server menu panel with it's own setting options
+        universe.registerAdminMenuPanel(
+            'Solid Protocol',
+            [
+                {
+                    title: 'Solid Server Config',
+                    icon: 'sliders',
+                    component: AdminSolidServerConfigComponent,
+                },
+            ],
+            {
+                slug: 'solid-server',
+            }
+        );
+    };
 }
 
 loadInitializers(SolidEngine, modulePrefix);