Merge pull request #147 from raphaelrpl/b-1.0

Review Dockerfile setup and prepare to release 1.0 🚀

.dockerignore

@@ -0,0 +1,12 @@
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+.vscode
+
+data-cube-manager/node_modules/
+deploy/dist/
+data-cube-manager/src/assets/env.js

CHANGES.md

@@ -1,6 +1,19 @@
 # Changes
 
 
+## Version 1.0.0 (2023-05-29)
+
+- Fix cube creation and start cube when dealing with combined collections
+- Improvements on details cube - edit cube band info
+- Display repository version on page
+- Review compatibility table for multiple stac versions
+- Add way create data cube for local folder [`#125`](https://github.com/brazil-data-cube/dc-manager/issues/125)
+- Add way to customize bands on data cube creation
+- Fix bug related misspelled ``Cyclic`` and ``Continuous`` temporal composition
+- Improve check cube merges
+- Add support to customize base url at runtime [`#146`](https://github.com/brazil-data-cube/dc-manager/issues/146)
+
+
 ## Version 1.0.0a2 (2023-01-30)
 
 - Fix cube creation and start cube when dealing with combined collections

COMPATIBILITY.md

@@ -2,6 +2,12 @@
 
 The `Data Cube Manager` supports a number of [cube-builder] and [bdc-stac] releases.
 
+## NodeJS
+
+- **node** - >=13,<=16+. For versions 17+, make sure to use the following variable in order to launch application: ``NODE_OPTIONS=--openssl-legacy-provider``.
+- **npm** - 8+.
+
+
 ## Services supported
 
 The versions of web services compatible to be run with the `Data Cube Manager` are:

data-cube-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-cube-manager",
-  "version": "1.0.0a2",
+  "version": "1.0.0",
   "license": "GPLv3",
   "scripts": {
     "ng": "ng",

data-cube-manager/src/app/admin/components/reprocess-dialog/reprocess-dialog.component.ts

@@ -111,7 +111,7 @@ export class ReprocessDialogComponent implements OnInit {
         data.collections = !Array.isArray(collections) ? collections.split(',') : collections;
       }
 
-      data.datacube = data.datacube;
+      data.datacube = `${data.datacube}-${this.data.datacube_version}`;
       data.force = !!this.data.force;
 
       await this.service.start(data);

data-cube-manager/src/app/admin/pages/check-cube/check-cube.component.ts

@@ -84,8 +84,8 @@ export class CheckCubeComponent implements OnInit {
 
             if (this.cube.temporal_composition_schema) {
                 const data = {
-                    start_date: this.cube.start_date,
-                    last_date: this.cube.end_date,
+                    start_date: moment(this.cube.start_date).format(),
+                    last_date: moment(this.cube.end_date).format(),
                     ...this.cube.temporal_composition_schema
                 }
                 const respTimeline = await this.cbs.getTimeline(data);

data-cube-manager/src/app/admin/pages/details-cube/details-cube.component.html

@@ -34,9 +34,10 @@ <h4 class="card-title">{{ cube.title }}</h4>
                                 <tr style="border-bottom: 1px dotted #CCC; padding: 10px">
                                     <td class="text-success">Bands Quicklook:</td>
                                     <td>
-                                        <mat-chip-list>
-                                            <mat-chip *ngFor="let band of cube.quicklook">
-                                                {{ band }}</mat-chip>
+                                        <mat-chip-list *ngIf="cube.quicklook">
+                                            <mat-chip style="background-color: rgb(255, 114, 114);">{{ cube.quicklook[0] }}</mat-chip>
+                                            <mat-chip style="background-color: rgb(32, 200, 32);">{{ cube.quicklook[1] }}</mat-chip>
+                                            <mat-chip style="background-color: rgb(118, 159, 255);">{{ cube.quicklook[2] }}</mat-chip>
                                         </mat-chip-list>
                                     </td>
                                 </tr>

data-cube-manager/src/app/admin/pages/details-cube/details-cube.component.ts

@@ -174,7 +174,7 @@ export class DetailsCubeComponent implements OnInit {
         cloneCubeObject['metadata'] = cloneCubeObject._metadata;
         delete cloneCubeObject._metadata;
 
-        this.removeProperty(cloneCubeObject, ['grid_ref_sys_id', 'composite_function_id'])
+        this.removeProperty(cloneCubeObject, ['grid_ref_sys_id', 'composite_function_id', 'summary'])
 
         for (let band of cloneCubeObject.bands) {
             this.removeProperty(band, ['_metadata', 'id', 'collection_id']);

data-cube-manager/src/app/admin/pages/list-cubes/list-cubes.component.html

@@ -6,6 +6,41 @@
             message="You have no cubes created. Create your first now!"></app-alert>
 
         <div class="row">
+            <div class="col-md-12">
+                <form [formGroup]="form" *ngIf="filterSupported">
+                    <div class="search-box">
+                        <div class="row">
+                            <div class="col-lg-3 col-md-3 col-sm-6">
+                                <mat-form-field appearance="outline">
+                                    <mat-label>Search</mat-label>
+                                    <input matInput formControlName="cubeName" placeholder="Filter data cube by name" (change)="filterCubes()">
+                                    <button mat-icon-button matSuffix>
+                                        <mat-icon>search</mat-icon>
+                                    </button>
+                                </mat-form-field>
+                            </div>
+
+                            <div class="col-lg-3 col-md-3 col-sm-6">
+                                <mat-form-field appearance="fill">
+                                    <mat-label>Type</mat-label>
+                                    <select matNativeControl formControlName="collectionType" (change)="filterCubes()">
+                                        <option value="all">All</option>
+                                        <option value="cube">Cube</option>
+                                        <option value="mosaic">Mosaic</option>
+                                    </select>
+                                </mat-form-field>
+                            </div>
+                            <div class="col-lg-2 col-md-2 col-sm-4">
+                                <section style="padding-top: 15px">
+                                    <mat-checkbox formControlName="isPublic" (click)="filterCubes()">Public</mat-checkbox>
+                                </section>
+                            </div>
+                        </div>
+                    </div>
+                    <hr />
+                </form>
+            </div>
+
             <div class="col-md-3"
                 *ngFor="let cube of cubes">
                 <a [routerLink]="['/details-cube', getCubeFullName(cube)]">
@@ -20,7 +55,10 @@ <h4 class="card-title text-center">{{ cube.name }}-{{ cube.version }}</h4>
                         </div>
                         <div class="card-footer">
                             <div class="stats">
-                                <i class="material-icons">search</i> click here for more information
+                                <i class="material-icons">search</i>
+                                <mat-chip-list>
+                                    <mat-chip class="clickable">{{ cube.collection_type }}</mat-chip>
+                                </mat-chip-list>
                             </div>
                         </div>
                     </div>

data-cube-manager/src/app/admin/pages/list-cubes/list-cubes.component.scss

@@ -3,4 +3,21 @@
     margin: 10px auto;
     font-size: 1.5em;
     padding: 15px 20px!important;
+}
+
+.search-box {
+    padding: 20px 10px 0 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .row {
+        margin: 0;
+        width: 100%;
+    }
+
+    button {
+        margin-top: -20px;
+        margin-right: 10px;
+    }
 }

data-cube-manager/src/app/admin/pages/list-cubes/list-cubes.component.ts

@@ -3,6 +3,9 @@ import { showLoading, closeLoading } from 'app/app.action';
 import { Store } from '@ngrx/store';
 import { AppState } from 'app/app.state';
 import { CubeBuilderService } from 'app/services/cube-builder';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+import { environment } from '../../../../environments/environment'
 
 
 @Component({
@@ -12,14 +15,29 @@ import { CubeBuilderService } from 'app/services/cube-builder';
 })
 export class ListCubesComponent implements OnInit {
     public cubes;
+    public form: FormGroup;
+    public filterSupported: boolean = false;
 
     constructor(
         private cbs: CubeBuilderService,
-        private store: Store<AppState>) { }
+        private store: Store<AppState>,
+        private fb: FormBuilder) {}
 
     ngOnInit() {
         this.cubes = [];
+        this.form = this.fb.group({
+            cubeName: [''],
+            collectionType: ['all'],
+            isPublic: [true]
+        })
         this.getCubes();
+        this.cbs.getBuilderVersion()
+            .then((version) => {
+                const [major, minor, patch] = version.split(".");
+                if (major && parseInt(major) > 0) {
+                    this.filterSupported = true;
+                }
+            })
     }
 
     async getCubes() {
@@ -51,4 +69,21 @@ export class ListCubesComponent implements OnInit {
         return `${cube.name}-${cube.version}:${cube.id}`
     }
 
+    public async filterCubes() {
+        const { cubeName, collectionType, isPublic } = this.form.value;
+
+        try {
+            this.store.dispatch(showLoading());
+            const response = await this.cbs.getCubes(null, { collection_type: collectionType, public: isPublic, name: cubeName });
+            this.cubes = response.map(c => {
+                return { ...c, status: c.status.toLowerCase() === 'error' ? 'danger' : c.status }
+            })
+
+        } catch (err) {
+            this.cubes = [];
+        } finally {
+            this.store.dispatch(closeLoading());
+        }
+    }
+
 }

data-cube-manager/src/app/services/cube-builder.ts

@@ -1,6 +1,12 @@
 import { Injectable } from '@angular/core';
 import api from "./main";
 
+interface ICubesFilter {
+    name?: string;
+    public?: boolean;
+    collection_type?: 'all' | 'cube' | 'mosaic'
+}
+
 @Injectable({ providedIn: 'root' })
 export class CubeBuilderService {
 
@@ -26,12 +32,16 @@ export class CubeBuilderService {
     /**
      * get cube metadata
      */
-    public async getCubes(id = null): Promise<any> {
+    public async getCubes(id = null, params: ICubesFilter = null): Promise<any> {
         let urlSuffix = '/cubes'
         if (id) {
             urlSuffix += `/${id}`
         }
-        const { data } = await api.get(`${this.urlCubeBuilder}${urlSuffix}`);
+        if (params === null) {
+            params = {}
+        }
+
+        const { data } = await api.get(`${this.urlCubeBuilder}${urlSuffix}`, { params });
         return data;
     }
 
@@ -209,4 +219,10 @@ export class CubeBuilderService {
         const { data } = await api.post(`${this.urlCubeBuilder}${urlSuffix}`, infos);
         return data;
     }
+
+    public async getBuilderVersion() {
+        const urlSuffix = `/`;
+        const { data } = await api.get(`${this.urlCubeBuilder}${urlSuffix}`);
+        return data.version;
+    }
 }

data-cube-manager/src/env.txt

@@ -2,12 +2,12 @@
     window.__env = window.__env || {};
 
     // Environment Version (allow: 'cloud' or 'local')
-    window.__env.environmentVersion = ENVIRONMENT_VERSION;
+    window.__env.environmentVersion = DC_MANAGER_MODE;
 
     // Item prefix to be in merge scene
-    window.__env.itemPrefix = ITEM_PREFIX;
+    window.__env.itemPrefix = DC_MANAGER_ITEM_PREFIX;
 
     // Item base URL
-    window.__env.itemBaseUrl = ITEM_BASE_URL;
+    window.__env.itemBaseUrl = DC_MANAGER_ITEM_BASE_URL;
 
 }(this));

data-cube-manager/src/index.html

@@ -24,7 +24,7 @@
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons' rel='stylesheet' type='text/css'>
 
     <base href="/">
-    <link rel="shortcut icon" href="assets/images/icons/favicon.png" />
+    <link rel="shortcut icon" href="assets/img/favicon.png" />
 
     <script src="assets/env.js"></script>
 

deploy/Dockerfile

@@ -1,12 +1,62 @@
-FROM golang:1.15
+#
+# This file is part of Data Cube Manager.
+# Copyright (C) 2023 INPE.
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program. If not, see <https://www.gnu.org/licenses/gpl-3.0.html>.
+#
 
-RUN mkdir /usr/src/app
+ARG GIT_COMMIT
+ARG BASE_IMAGE=node:16-bullseye
+FROM ${BASE_IMAGE} AS node
 
-COPY dist /usr/src/app/dist
-COPY server.go /usr/src/app/
+LABEL "org.repo.maintainer"="Brazil Data Cube <brazildatacube@inpe.br>"
+LABEL "org.repo.title"="Docker image for Data Cube Builder GUI"
+LABEL "org.repo.description"="Docker image for Data Cube Builder Graphical User Interface."
+LABEL "org.repo.git_commit"="${GIT_COMMIT}"
+
+# Build arguments
+## Base URL for image. Defaults to "/"
+ARG DC_MANAGER_BASE_URL=/
+
+# Add sources into container and build
+COPY ./data-cube-manager /build/data-cube-manager
+
+WORKDIR /build/data-cube-manager
+
+RUN npm install && \
+    npm run build -- --prod --base-href ${DC_MANAGER_BASE_URL} --deploy-url ${DC_MANAGER_BASE_URL}
+
+
+# Final small image
+FROM python:3.11-alpine
+
+# Build arguments
+ARG DC_MANAGER_VERSION="1.0.0"
+ARG DC_MANAGER_INSTALL_PATH="/opt/dc-manager/${DC_MANAGER_VERSION}"
+ENV DC_MANAGER_BASE_URL="/"
+ENV DC_MANAGER_VERSION=${DC_MANAGER_VERSION}
+ENV DC_MANAGER_INSTALL_PATH=${DC_MANAGER_INSTALL_PATH}
+# Defaults to local mode (on-premise services). Use "cloud" for AWS setup.
+ENV DC_MANAGER_MODE=local
+
+COPY --from=node /build/deploy/dist ${DC_MANAGER_INSTALL_PATH}
+COPY ./deploy/app.py ${DC_MANAGER_INSTALL_PATH}
+
+WORKDIR ${DC_MANAGER_INSTALL_PATH}
+
+RUN pip install flask gunicorn beautifulsoup4 --no-cache-dir
 
-WORKDIR /usr/src/app
 EXPOSE 8080
 
-RUN go build -o main .
-CMD ["./main"]
+CMD ["gunicorn", "-w4", "--bind", "0.0.0.0:8080", "app:app", "--max-requests=256"]