@fleetbase/solid-engine 0.0.2 → 0.0.3

package/addon/controllers/pods/index.js

@@ -0,0 +1,137 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+
+export default class PodsIndexController extends Controller {
+    @service hostRouter;
+    @service notifications;
+    @service filters;
+    @service modalsManager;
+    @service crud;
+    @tracked query = '';
+
+    columns = [
+        {
+            label: 'Pod',
+            valuePath: 'name',
+            width: '80%',
+            cellComponent: 'table/cell/anchor',
+            onClick: this.explorePod,
+        },
+        {
+            label: 'Size',
+            valuePath: 'size',
+            width: '5%',
+        },
+        {
+            label: 'Created At',
+            valuePath: 'created_at',
+            width: '15%',
+        },
+        {
+            label: '',
+            cellComponent: 'table/cell/dropdown',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: 'Pod Actions',
+            cellClassNames: 'overflow-visible',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            width: '10%',
+            actions: [
+                {
+                    label: 'Browse',
+                    fn: this.openPod,
+                },
+                {
+                    label: 'Backup',
+                    fn: this.backupPod,
+                },
+                {
+                    label: 'Re-sync',
+                    fn: this.resyncPod,
+                },
+                {
+                    separator: true,
+                },
+                {
+                    label: 'Delete',
+                    fn: this.deletePod,
+                },
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    @action reload() {
+        this.hostRouter.refresh();
+    }
+
+    @action openPod(pod) {
+        this.hostRouter.transitionTo('console.solid-protocol.pods.index.pod', pod);
+    }
+
+    @action explorePod(pod) {
+        this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', pod, { queryParams: { cursor: pod.id, pod: pod.id } });
+    }
+
+    @action createPod() {
+        this.modalsManager.show('modals/create-pod', {
+            title: 'Create a new Pod',
+            acceptButtonText: 'Create Pod',
+            pod: {
+                name: null,
+            },
+            confirm: () => {},
+        });
+    }
+
+    @action backupPod() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to create a backup?',
+            body: 'Running a backup will create a duplicate Pod with the same contents.',
+            acceptButtonText: 'Start Backup',
+            confirm: () => {},
+        });
+    }
+
+    @action resyncPod() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to re-sync?',
+            body: 'Running a re-sync will update all data from Fleetbase to this pod, overwriting the current contents with the latest.',
+            acceptButtonText: 'Start Sync',
+            confirm: () => {},
+        });
+    }
+
+    @action deletePod() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to delete this Pod?',
+            body: "Deleting this Pod will destroy this pod and all it's contents. This is irreversible!",
+            acceptButtonText: 'Delete Forever',
+            confirm: () => {},
+        });
+    }
+
+    @action deleteSelectedPods() {
+        const selected = this.table.selectedRows;
+
+        this.crud.bulkDelete(selected, {
+            modelNamePath: 'name',
+            acceptButtonText: 'Delete All',
+            onSuccess: () => {
+                return this.hostRouter.refresh();
+            },
+        });
+    }
+
+    @task({ restartable: true }) *search(event) {
+        yield timeout(300);
+        this.query = typeof event.target.value === 'string' ? event.target.value : '';
+    }
+}

package/addon/routes/account.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class AccountRoute extends Route {}

package/addon/routes/home.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class HomeRoute extends Route {}

package/addon/routes/pods/explorer/content.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class PodsExplorerContentRoute extends Route {
+    @service fetch;
+
+    model({ slug }) {
+        return this.fetch.get('pods', { slug }, { namespace: 'solid/int/v1' });
+    }
+}

package/addon/routes/pods/explorer.js

@@ -0,0 +1,44 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class PodsExplorerRoute extends Route {
+    @service fetch;
+    @service explorerState;
+
+    queryParmas = {
+        query: {
+            refreshModel: true,
+        },
+        pod: {
+            refreshModel: false,
+        },
+        cursor: {
+            refreshModel: false,
+        },
+    };
+
+    @action willTransition(transition) {
+        const pod = transition.to.queryParams.pod;
+        const cursor = transition.to.queryParams.cursor;
+        if (pod && cursor) {
+            this.explorerState.trackWithCursor(pod, cursor);
+        }
+    }
+
+    beforeModel(transition) {
+        const pod = transition.to.queryParams.pod;
+        const cursor = transition.to.queryParams.cursor;
+        if (pod && cursor) {
+            this.explorerState.trackWithCursor(pod, cursor);
+        }
+    }
+
+    model({ id, query }) {
+        return this.fetch.get('pods', { id, query }, { namespace: 'solid/int/v1' });
+    }
+
+    afterModel(model, transition) {
+        this.explorerState.track(transition.to.queryParams.pod, model);
+    }
+}

package/addon/routes/pods/index/pod.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class PodsIndexPodRoute extends Route {}

package/addon/routes/pods/index.js

@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class PodsIndexRoute extends Route {
+    @service fetch;
+    @service appCache;
+
+    queryParams = {
+        query: {
+            refreshModel: true,
+        },
+    };
+
+    model(params) {
+        return this.fetch.get('pods', params, { namespace: 'solid/int/v1' });
+    }
+
+    afterModel(model) {
+        this.appCache.set('solid:pods', model);
+    }
+}

package/addon/routes.js

@@ -1,3 +1,14 @@
 import buildRoutes from 'ember-engines/routes';
 
-export default buildRoutes(function () {});
+export default buildRoutes(function () {
+    this.route('home', { path: '/' });
+    this.route('account');
+    this.route('pods', function () {
+        this.route('explorer', { path: '/explorer/:id' }, function () {
+            this.route('content', { path: '/~/:slug' });
+        });
+        this.route('index', { path: '/' }, function () {
+            this.route('pod', { path: '/pod/:slug' });
+        });
+    });
+});

package/addon/services/explorer-state.js

@@ -0,0 +1,101 @@
+import Service from '@ember/service';
+import Evented from '@ember/object/evented';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+
+export default class ExplorerStateService extends Service.extend(Evented) {
+    @service appCache;
+
+    trackWithCursor(id, cursor) {
+        const segments = typeof cursor === 'string' ? cursor.split(':') : [];
+        const state = this.get(id);
+        this.update(
+            id,
+            state.filter((content) => {
+                return segments.includes(content.id);
+            })
+        );
+        this.clean(id);
+        return this;
+    }
+
+    track(id, content) {
+        if (id === content.id) {
+            this.initialize(id, content);
+        } else {
+            this.push(id, content);
+        }
+
+        this.clean(id);
+        return this;
+    }
+
+    initialize(id, content) {
+        const state = this.get(id);
+        if (isArray(state) && state.length === 0) {
+            state.pushObject(content);
+            this.update(id, state);
+        }
+
+        return this;
+    }
+
+    push(id, content) {
+        const state = this.get(id);
+        if (isArray(state) && this.doesntHave(id, content)) {
+            state.pushObject(content);
+            this.update(id, state);
+        }
+
+        return this;
+    }
+
+    pop(id) {
+        const state = this.get(id);
+        if (isArray(state)) {
+            state.pop();
+            this.update(id, state);
+        }
+
+        return this;
+    }
+
+    has(id, content) {
+        const state = this.get(id);
+        return state.findIndex((_) => _.id === content.id) >= 0;
+    }
+
+    doesntHave(id, content) {
+        return !this.has(id, content);
+    }
+
+    get(id) {
+        return this.appCache.get(`${id}:explorer:state`, []);
+    }
+
+    update(id, state = []) {
+        this.appCache.set(`${id}:explorer:state`, state);
+        this.trigger('change', id, state);
+        return this;
+    }
+
+    clean(id) {
+        const state = this.get(id);
+        if (isArray(state)) {
+            const seenIds = new Set();
+            this.update(
+                id,
+                state.filter((_) => {
+                    if (seenIds.has(_.id)) {
+                        return false;
+                    }
+
+                    seenIds.add(_.id);
+                    return true;
+                })
+            );
+        }
+
+        return this;
+    }
+}

package/addon/styles/solid-engine.css

@@ -27,3 +27,49 @@ body[data-theme='dark'] .solid-fleetbase-home-container a:not([class*='text-']),
 .solid-fleetbase-home-container a:hover {
     opacity: 0.5;
 }
+
+.pod-explorer-breadcrumb-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.pod-explorer-breadcrumb-container > .pod-explorer-breadcrumb:first-child {
+    border-top-left-radius: 0.75rem;
+    border-bottom-left-radius: 0.75rem;
+}
+
+.pod-explorer-breadcrumb-container > .pod-explorer-breadcrumb:last-child {
+    border-top-right-radius: 0.75rem;
+    border-bottom-right-radius: 0.75rem;
+}
+
+.pod-explorer-breadcrumb {
+    font-size: 0.85rem;
+    border: 1px #111827 solid;
+    padding: 0 0.75rem;
+    line-height: 1.75rem;
+    background-color: #1f2937;
+    color: #fff;
+}
+
+.pod-explorer-breadcrumb:hover {
+    opacity: 0.75;
+}
+
+.pod-explorer-breadcrumb.active-breadcrumb {
+    background-color: #2563eb;
+    color: #eff6ff;
+}
+
+body[data-theme='light'] .pod-explorer-breadcrumb {
+    border: 1px #e5e7eb solid;
+    background-color: #e5e7eb;
+    color: #1f2937;
+}
+
+body[data-theme='light'] .pod-explorer-breadcrumb.active-breadcrumb {
+    background-color: #3b82f6;
+    color: #eff6ff;
+    border-color: #2563eb;
+}

package/addon/templates/account.hbs

@@ -0,0 +1,42 @@
+<Layout::Section::Header @title="Your Account" />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container mx-auto h-screen">
+        <div class="max-w-3xl my-10 mx-auto">
+            <ContentPanel @title="Solid Identity" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <form class="flex flex-col md:flex-row" {{on "submit" (perform this.saveProfile)}}>
+                    <div class="w-32 flex flex-col justify-center mb-6 mr-6">
+                        <Image src={{this.user.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} class="w-32 h-32 rounded-md" />
+                        <FileUpload @name={{t "console.account.index.photos"}} @accept="image/*" @onFileAdded={{this.uploadNewPhoto}} @labelClass="flex flex-row items-center justify-center" as |queue|>
+                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default" disabled={{queue.files.length}}>
+                                {{#if queue.files.length}}
+                                    <div class="mr-1.5">
+                                        <Spinner />
+                                    </div>
+                                    <span>
+                                        {{t "common.uploading"}}
+                                    </span>
+                                {{else}}
+                                    <FaIcon @icon="image" class="mr-1.5" />
+                                    <span>
+                                        {{t "console.account.index.upload-new"}}
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                    <div class="flex-1">
+                        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+                            <InputGroup @name={{t "common.name"}} @value={{this.user.name}} />
+                            <InputGroup @name={{t "common.email"}} @type="email" @value={{this.user.email}} />
+                        </div>
+                        <div class="mt-3 flex items-center justify-end">
+                            <Button @buttonType="submit" @type="primary" @size="lg" @icon="save" @text={{t "common.save-button-text"}} @onClick={{perform this.saveProfile}} @isLoading={{not this.saveProfile.isIdle}} />
+                        </div>
+                    </div>
+                </form>
+            </ContentPanel>
+        </div>
+    </div>
+    <Spacer @height="500px" />
+</Layout::Section::Body>

package/addon/templates/application.hbs

@@ -1,15 +1,20 @@
-<Layout::Section::Container class="solid-fleetbase-home">
-    <Layout::Section::Header @title="Solid for Fleetbase" />
+<EmberWormhole @to="sidebar-menu-items">
+    <Layout::Sidebar::Item @route="console.solid-protocol.home" @icon="home">Home</Layout::Sidebar::Item>
+    <Layout::Sidebar::Item @route="console.solid-protocol.pods" @icon="folder-tree">Pods</Layout::Sidebar::Item>
+    {{!-- <Layout::Sidebar::Panel @open={{true}} @title="Pods">
+        <Layout::Sidebar::Item @route="console.solid-protocol.pods" @icon="folder-tree">All</Layout::Sidebar::Item>
+        {{#each this.pods as |pod|}}
+            <LinkTo @route="pods.explorer" @model={{pod}} @query={{hash id=pod.id pod=pod.id}} class="next-nav-item">
+                <div class="next-nav-item-icon-container">
+                    <FaIcon @icon="folder" @size="xs" />
+                </div>
+                <div class="truncate w-10/12 ">{{pod.name}}</div>
+            </LinkTo>
+        {{/each}}
+    </Layout::Sidebar::Panel> --}}
+    <Layout::Sidebar::Item @route="console.solid-protocol.account" @icon="user">Account</Layout::Sidebar::Item>
+</EmberWormhole>
 
-    <Layout::Section::Body class="solid-fleetbase-home-container">
-        <h1>Welcome to Solid for Fleetbase</h1>
-        <h2>Getting Started</h2>
-        <div class="mt-2">
-            <p>
-                <a href="#" {{on "click" (perform this.authenticate)}}>Sign up for an account</a> to get started with your own Pod and WebID. Once you are logged in you can begin to manage your pods and sync data directly from Fleetbase to your Pods.
-            </p>
-        </div>
-        {{!-- <Button @text="Click to Test" @icon="magic" @onClick={{perform this.getAccountIndex}} @wrapperClass="mt-4" /> --}}
-    </Layout::Section::Body>
+<Layout::Section::Container class="solid-fleetbase-home">
     {{outlet}}
 </Layout::Section::Container>

package/addon/templates/home.hbs

@@ -0,0 +1,11 @@
+<Layout::Section::Header @title="Solid for Fleetbase" />
+<Layout::Section::Body class="solid-fleetbase-home-container">
+    <h1>Welcome to Solid for Fleetbase</h1>
+    <h2>Getting Started</h2>
+    <div class="mt-2">
+        <p>
+            <a href="#" {{on "click" (perform this.authenticate)}}>Sign up for an account</a> to get started with your own Pod and WebID. Once you are logged in you can begin to manage your pods and sync data directly from Fleetbase to your Pods.
+        </p>
+    </div>
+    {{!-- <Button @text="Click to Test" @icon="magic" @onClick={{perform this.getAccountIndex}} @wrapperClass="mt-4" /> --}}
+</Layout::Section::Body>

package/addon/templates/pods/explorer/content.hbs

@@ -0,0 +1,19 @@
+<Overlay @isOpen={{true}} @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="600px" @isResizable={{true}}>
+    <Overlay::Header @title={{@model.name}} @hideStatusDot={{true}} @titleWrapperClass="leading-5">
+        <div class="flex flex-1 justify-end">
+            <Button @type="default" @icon="times" @helpText={{t "common.close"}} @onClick={{this.onPressClose}} />
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body>
+        <div class="p-4 space-y-2">
+            <div>ID: {{@model.id}}</div>
+            <div>Name: {{@model.name}}</div>
+            <div>Size: {{@model.size}}</div>
+            <div class="mt-2 rounded-md border border-gray-700 p-3 bg-gray-800">
+                <div class="font-semibold">Contents:</div>
+                <div></div>
+            </div>
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/templates/pods/explorer.hbs

@@ -0,0 +1,20 @@
+<ExplorerHeader @current={{@model.id}} @pod={{this.pod}} @onStateClicked={{this.viewContents}} @searchPlaceholder="Search Contents" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <Button @icon="arrow-left" @onClick={{this.back}} @helpText="Go Back" class="mr-2" />
+    <Button @icon="refresh" @onClick={{this.reload}} @helpText="Refresh" class="mr-2" />
+    {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.deleteSelected)}}>
+                        Delete Selected Items
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="Create new Something" class="mr-2" @onClick={{this.createSomething}} />
+</ExplorerHeader>
+<Layout::Section::Body>
+    <Table @rows={{@model.contents}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+</Layout::Section::Body>
+{{outlet}}

package/addon/templates/pods/index/pod.hbs

@@ -0,0 +1,11 @@
+<Overlay @isOpen={{true}} @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="600px" @isResizable={{true}}>
+    <Overlay::Header @title="Pod" @hideStatusDot={{true}} @titleWrapperClass="leading-5">
+        <div class="flex flex-1 justify-end">
+            <Button @type="default" @icon="times" @helpText={{t "common.close"}} @onClick={{this.onPressClose}} />
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body class="without-padding">
+        
+    </Overlay::Body>
+</Overlay>

package/addon/templates/pods/index.hbs

@@ -0,0 +1,19 @@
+<Layout::Section::Header @title="Pods" @searchPlaceholder="Search Pods by Keyword" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <Button @icon="refresh" @onClick={{this.reload}} @helpText="Refresh" class="mr-2" />
+    {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.deleteSelectedPods)}}>
+                        Delete Selected Pods
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="Create new Pod" class="mr-2" @onClick={{this.createPod}} />
+</Layout::Section::Header>
+<Layout::Section::Body>
+    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+</Layout::Section::Body>
+{{outlet}}

package/app/components/explorer-header.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/components/explorer-header';

package/app/components/modals/backup-pod.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/components/modals/backup-pod';

package/app/components/modals/create-pod.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/components/modals/create-pod';

package/app/components/modals/resync-pod.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/components/modals/resync-pod';

package/app/components/table/cell/pod-content-actions.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/components/table/cell/pod-content-actions';

package/app/components/table/cell/pod-content-name.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/components/table/cell/pod-content-name';

package/app/controllers/account.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/controllers/account';

package/app/controllers/home.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/controllers/home';

package/app/controllers/pods/explorer/content.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/controllers/pods/explorer/content';

package/app/controllers/pods/explorer.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/controllers/pods/explorer';

package/app/controllers/pods/index/pod.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/controllers/pods/index/pod';

package/app/controllers/pods/index.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/controllers/pods/index';

package/app/routes/account.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/routes/account';

package/app/routes/home.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/routes/home';

package/app/routes/pods/explorer/content.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/routes/pods/explorer/content';

package/app/routes/pods/explorer.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/routes/pods/explorer';

package/app/routes/pods/index/pod.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/routes/pods/index/pod';

package/app/routes/pods/index.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/routes/pods/index';

package/app/services/explorer-state.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/services/explorer-state';

package/app/templates/account.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/templates/account';

package/app/templates/home.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/templates/home';

package/app/templates/pods/explorer/content.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/templates/pods/explorer/content';

package/app/templates/pods/explorer.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/templates/pods/explorer';

package/app/templates/pods/index/pod.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/templates/pods/index/pod';

package/app/templates/pods/index.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/solid-engine/templates/pods/index';