Nhub 38 (#28)

* add docker setup for local ui development * remove ports config * fix dump import * NHUB-38 Co-authored-by: Petr Jasek <jasekpetr@gmail.com>
superdesk · Dec 2, 2021 · f684b65 · f684b65
1 parent a4de1c7
commit f684b65
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -120,4 +120,4 @@ newsroom/static/dist
 .pytest_cache
 
 # data dumps
-dump
+dump
diff --git a/assets/styles/breakpoints.scss b/assets/styles/breakpoints.scss
@@ -50,25 +50,25 @@
 }
 
 @mixin small_phone {
-    @media only screen and (orientation: portrait) and (max-width: 375px), (orientation: landscape) and (max-width: 576px) {
+    @media only screen and (orientation: portrait) and (max-width: 374px), (orientation: landscape) and (max-width: 575px) {
         @content;
     }
 }
 
 @mixin phone {
-    @media only screen and (orientation: portrait) and (max-width: 576px), (orientation: landscape) and (max-width: 992px) {
+    @media only screen and (orientation: portrait) and (max-width: 575px), (orientation: landscape) and (max-width: 991px) {
         @content;
     }
 }
 
 @mixin tablet {
-    @media only screen and (orientation: portrait) and (min-width: 577px) and (max-width: 1440px), (orientation: landscape) and (min-width: 993px) and (max-width: 1440px) {
+    @media only screen and (orientation: portrait) and (min-width: 576px) and (max-width: 1439px), (orientation: landscape) and (min-width: 992px) and (max-width: 1439px) {
         @content;
     }
 }
 
 @mixin pc {
-    @media only screen and (orientation: landscape) and (min-width: 1441px) {
+    @media only screen and (orientation: landscape) and (min-width: 1440px) {
         @content;
     }
 }
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
@@ -1500,6 +1500,9 @@ article.list {
             margin-bottom: 0;
         }
     }
+    .wire-articles__item-headline-inner {
+        align-items: center;
+    }
     .wire-articles__item__versions-btn {
         @include md {
             margin-left: auto;
@@ -1815,6 +1818,7 @@ article.list {
     font-weight: 700;
     margin-bottom: 0;
     line-height: 1.3;
+    display: flex;
 
     @include sm {
         font-size: 1rem;
@@ -1825,6 +1829,13 @@ article.list {
         margin: 0 4px 0 2px;
     }
 }
+.wire-articles__item-headline-inner {
+    margin-bottom: 4px;
+    @include sm {    
+        display: flex;
+        margin-bottom: 0;
+    }
+}
 .wire-articles__item-headline--indent {
     display: inline-block;
     text-indent: 30px;
@@ -1887,10 +1898,12 @@ article.list {
     flex-wrap: nowrap;
     margin-bottom: 0;
     margin-top: 0;
+    margin-left: 32px;
 
     @include sm {
         flex-wrap: wrap;
         margin-top: 10px;
+        margin-left: 0;
     }
     @include lg {
         margin-top: 0;
@@ -2123,9 +2136,14 @@ article.list {
         font-size: 1rem !important;
     }
 }
-
-.wire-articles__item__versions-btn button {
-    cursor: pointer;
+.wire-articles__item__versions-btn {
+    margin-left: 24px;
+    @include sm {
+        margin-left: 0;
+    }
+    button {
+        cursor: pointer;
+    }
 }
 
 .wire-articles__item__versions-btn--open {

diff --git a/assets/wire/components/WireListItem.jsx b/assets/wire/components/WireListItem.jsx
@@ -143,7 +143,7 @@ class WireListItem extends React.Component {
         );
         const selectClassName = classNames('no-bindable-select', {
             'wire-articles__item-select-visible': !LIST_ANIMATIONS,
-            'wire-articles__item-select float-left float-sm-none': LIST_ANIMATIONS,
+            'wire-articles__item-select': LIST_ANIMATIONS,
         });
         const picture = getPicture(item);
         const videos = getVideos(item);
@@ -188,17 +188,19 @@ class WireListItem extends React.Component {
                                     <i></i>
                                 </label>
                             </div>
-                            {!isExtended && (
-                                <WireListItemIcons
-                                    item={item}
-                                    picture={picture}
-                                    videos={videos}
-                                    divider={false}
-                                />
-                            )}
-                            <Embargo item={item} />
-                            <UrgencyLabel item={item} listConfig={listConfig} />
-                            {item.headline}
+                            <div className="wire-articles__item-headline-inner">
+                                {!isExtended && (
+                                    <WireListItemIcons
+                                        item={item}
+                                        picture={picture}
+                                        videos={videos}
+                                        divider={false}
+                                    />
+                                )}
+                                <Embargo item={item} />
+                                <UrgencyLabel item={item} listConfig={listConfig} />
+                                {item.headline}
+                            </div>
                         </h4>
 
                         {isExtended && !isMarketPlace && (

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,20 +2,58 @@ version: "3.2"
 services:
     redis:
         image: redis:alpine
-        ports:
-            - "6379:6379"
+        networks:
+            - newsroom
 
     mongo:
         image: mongo:3.6
-        ports:
-            - "27017:27017"
-        tmpfs:
-            - /data/db
+        networks:
+            - newsroom
 
     elastic:
         image: docker.elastic.co/elasticsearch/elasticsearch:7.10.1
-        ports:
-            - "9200:9200"
+        networks:
+            - newsroom
         environment:
             - discovery.type=single-node
 
+    server:
+        build: ./docker/server
+        ports:
+            - "5050:5050"
+            - "5150:5150"
+        networks:
+            - newsroom
+        volumes:
+            - ./dump:/opt/newsroom/dump
+        depends_on:
+            - elastic
+            - redis
+            - mongo
+            - client
+        environment:
+            - WEB_CONCURRENCY=2
+            - WEBPACK_SERVER_URL=http://client:8080
+            - WEBPACK_ASSETS_URL=http://localhost:8080
+            - MONGO_URI=mongodb://mongo/newsroom
+            - CONTENTAPI_MONGO_URI=mongodb://mongo/newsroom
+            - ELASTICSEARCH_URL=http://elastic:9200
+            - ELASTICSEARCH_INDEX=newsroom
+            - CELERY_BROKER_URL=redis://redis:6379/1
+            - REDIS_URL=redis://redis:6379/1
+            - DEFAULT_TIMEZONE=Europe/Prague
+            - SECRET_KEY=newsroom
+            - NEWSROOM_DEBUG=true
+
+    client:
+        build: ./docker/client
+        ports:
+            - "8080:8080"
+        networks:
+            - newsroom
+        volumes:
+            - .:/opt/client/node_modules/newsroom-core
+
+networks:
+    newsroom:
+        driver: bridge
diff --git a/docker/client/Dockerfile b/docker/client/Dockerfile
@@ -0,0 +1,12 @@
+# BUILD
+FROM node:14
+
+# install client
+WORKDIR /opt/client
+
+COPY package.json .
+RUN npm install --no-audit --unsafe-perm
+
+COPY . .
+
+CMD ["npm", "run", "start"]
diff --git a/docker/client/package.json b/docker/client/package.json
@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --progress --colors --content-base dist --host 0.0.0.0",
+    "build": "webpack --progress --profile --colors"
+  },
+  "dependencies": {
+    "newsroom-core": "github:superdesk/newsroom-core#develop"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "webpack": "3.11.0",
+    "webpack-dev-server": "2.11.1"
+  }
+}
diff --git a/docker/client/webpack.config.js b/docker/client/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('newsroom-core/webpack.config')
diff --git a/docker/server/Dockerfile b/docker/server/Dockerfile
@@ -0,0 +1,41 @@
+FROM ubuntu:20.04
+
+ENV DEBIAN_FRONTEND=noninteractive 
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+python3 python3-dev python3-pip python3-venv git gcc mongo-tools mongodb-clients curl \
+# lxml
+libxml2-dev libxslt-dev \
+# PIL
+libjpeg-dev zlib1g-dev \
+# magic
+libmagic-dev \
+# windows
+dos2unix \
+&& rm -rf /var/lib/apt/lists/* 
+
+# setup venv
+ENV VIRTUAL_ENV=/opt/venv
+RUN python3 -m venv "$VIRTUAL_ENV"
+ENV PATH="$VIRTUAL_ENV/bin:$PATH"
+
+# update venv
+RUN python3 -m pip install -U pip wheel setuptools
+
+# install server
+WORKDIR /opt/newsroom/
+COPY requirements.txt .
+RUN python3 -m pip install -Ur requirements.txt
+
+ENV PYTHONUNBUFFERED=1
+ENV C_FORCE_ROOT=False
+ENV CELERYBEAT_SCHEDULE_FILENAME=/tmp/celerybeatschedule.db
+ENV TZ=Europe/London
+
+COPY . .
+
+# fix line endings when running docker on windows
+RUN dos2unix scripts/start.sh
+
+ENTRYPOINT ["bash", "/opt/newsroom/scripts/start.sh"]
+CMD ["honcho", "start", "-p 5050"]
diff --git a/docker/server/Procfile b/docker/server/Procfile
@@ -0,0 +1,4 @@
+web: gunicorn -b 0.0.0.0:$PORT -w 3 newsroom.web.app:app
+websocket: python -m newsroom.web.ws
+worker: celery -A newsroom.web.worker.celery -Q "${SUPERDESK_CELERY_PREFIX}newsroom" worker
+beat: celery -A newsroom.web.worker.celery beat --pid=
diff --git a/docker/server/manage.py b/docker/server/manage.py
@@ -0,0 +1,6 @@
+from newsroom.commands import * # noqa
+from newsroom.commands.manager import manager
+
+
+if __name__ == "__main__":
+    manager.run()
diff --git a/docker/server/requirements.txt b/docker/server/requirements.txt
@@ -0,0 +1 @@
+git+https://github.com/superdesk/newsroom-core.git@develop#egg=Newsroom-Core
diff --git a/docker/server/scripts/start.sh b/docker/server/scripts/start.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+
+cd /opt/newsroom/
+
+# wait for elastic to be up
+printf 'waiting for elastic.'
+until $(curl --output /dev/null --silent --fail "${ELASTICSEARCH_URL}"); do
+    printf '.'
+    sleep .5
+done
+echo 'done.'
+
+# wait for client 
+printf 'waiting for client.'
+until $(curl --output /dev/null --silent --fail "${WEBPACK_SERVER_URL}/manifest.json"); do
+    printf '.'
+    sleep .5
+done
+echo 'done.'
+
+# app init
+python3 manage.py create_user admin@localhost.com admin admin admin true
+python3 manage.py elastic_init
+
+if [[ -d dump ]]; then
+    echo 'installing demo data'
+    mongorestore -h mongo --gzip dump
+    python3 manage.py index_from_mongo --all
+fi
+
+exec "$@"
diff --git a/docker/server/settings.py b/docker/server/settings.py
@@ -0,0 +1,4 @@
+import pathlib
+
+SERVER_PATH = pathlib.Path(__file__).resolve().parent
+CLIENT_PATH = SERVER_PATH.parent.joinpath("client")