Merge pull request #4214 from owid/cloudflare-images

🎉 Cloudflare images
owid · Dec 10, 2024 · dc8e075 · dc8e075
2 parents 0f5903e + bccff52
commit dc8e075
Show file tree

Hide file tree

Showing 58 changed files with 1,553 additions and 1,035 deletions.
diff --git a/Makefile b/Makefile
@@ -27,7 +27,7 @@ help:
 	@echo '  make down                   stop any services still running'
 	@echo '  make refresh                (while up) download a new grapher snapshot and update MySQL'
 	@echo '  make refresh.pageviews      (while up) download and load pageviews from the private datasette instance'
-	@echo '  make refresh.full           (while up) run refresh and refresh.pageviews and sync images from R2'
+	@echo '  make refresh.full           (while up) run refresh and refresh.pageviews'
 	@echo '  make migrate                (while up) run any outstanding db migrations'
 	@echo '  make test                   run full suite (except db tests) of CI checks including unit tests'
 	@echo '  make dbtest                 run db test suite that needs a running mysql db'
@@ -36,10 +36,10 @@ help:
 	@echo
 	@echo '  GRAPHER + CLOUDFLARE (staff-only)'
 	@echo '  make up.full                start dev environment via docker-compose and tmux'
-	@echo '  make sync-images            sync all images from the remote master'
 	@echo '  make update.chart-entities  update the charts_x_entities join table'
 	@echo '  make reindex                reindex (or initialise) search in Algolia'
 	@echo '  make bench.search           run search benchmarks'
+	@echo '  make sync-cloudflare-images sync Cloudflare Images with local DB'
 
 up: export DEBUG = 'knex:query'
 
@@ -149,24 +149,19 @@ refresh.pageviews: node_modules
 	@echo '==> Refreshing pageviews'
 	yarn refreshPageviews
 
-sync-images: sync-images.preflight-check
-	@echo '==> Syncing images to R2'
-	./devTools/docker/sync-s3-images.sh
-
-refresh.full: refresh refresh.pageviews sync-images
-	@echo '==> Full refresh completed'
-	@make bake-images
+sync-images:
+	@echo 'Task has been deprecated.'
 
 bake-images:
-	@echo '==> Baking images'
-	@yarn buildLocalBake --steps gdriveImages
+	@echo 'Task has been deprecated.'
 
-sync-images.preflight-check:
-	@echo '==> Checking for rclone'
-	@which rclone >/dev/null 2>&1 || (echo "ERROR: please install rclone -- e.g. brew install rclone"; exit 1)
-	@echo '==> Checking if rclone is configured'
-	@test -f ~/.config/rclone/rclone.conf || (echo "ERROR: please configure rclone -- e.g. rclone configure"; exit 1)
+# Only needed to run once to seed the prod DB with initially
+sync-cloudflare-images: node_modules
+	@echo '==> Syncing images table with Cloudflare Images'
+	@yarn syncCloudflareImages
 
+refresh.full: refresh refresh.pageviews
+	@echo '==> Full refresh completed'
 
 down:
 	@echo '==> Stopping services'

diff --git a/adminSiteClient/AdminApp.tsx b/adminSiteClient/AdminApp.tsx
@@ -44,6 +44,7 @@ import { GdocsStoreProvider } from "./GdocsStore.js"
 import { IndicatorChartEditorPage } from "./IndicatorChartEditorPage.js"
 import { ChartViewEditorPage } from "./ChartViewEditorPage.js"
 import { ChartViewIndexPage } from "./ChartViewIndexPage.js"
+import { ImageIndexPage } from "./ImagesIndexPage.js"
 
 @observer
 class AdminErrorMessage extends React.Component<{ admin: Admin }> {
@@ -175,6 +176,7 @@ export class AdminApp extends React.Component<{
                                     />
                                 )}
                             />
+                            <Route path="/images" component={ImageIndexPage} />
                             <Route
                                 exact
                                 path={`/${EXPLORERS_ROUTE_FOLDER}/:slug`}

diff --git a/adminSiteClient/AdminSidebar.tsx b/adminSiteClient/AdminSidebar.tsx
@@ -19,6 +19,7 @@ import {
     faHatWizard,
     faSitemap,
     faPanorama,
+    faImage,
 } from "@fortawesome/free-solid-svg-icons"
 
 import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
@@ -48,6 +49,11 @@ export const AdminSidebar = (): React.ReactElement => (
                     <FontAwesomeIcon icon={faFile} /> Google Docs
                 </Link>
             </li>
+            <li>
+                <Link to="/images">
+                    <FontAwesomeIcon icon={faImage} /> Images
+                </Link>
+            </li>
             <li>
                 <Link to="/explorers">
                     <FontAwesomeIcon icon={faCoffee} /> Explorers

diff --git a/adminSiteClient/GdocsMoreMenu.tsx b/adminSiteClient/GdocsMoreMenu.tsx
@@ -303,7 +303,7 @@ function DeleteModal({
                                     <Form.Item
                                         name="relatedLinkThumbnail"
                                         label="Thumbnail file name"
-                                        extra="The image must be already in Google Drive."
+                                        extra="The image must already be uploaded in the admin."
                                     >
                                         <Input type="text" />
                                     </Form.Item>