Document v3 custom partitions (influxdata#5309)

* WIP added storage engine diagram svg and info * WIP scaling strategy diagrams * WIP finished storage architecture doc * WIP added offset and time trim capbilities to current-date shortcode * WIP custom partitions * finalized define partitions doc * Apply suggestions from code review Co-authored-by: Jason Stirnaman <[email protected]> * updates to address PR feedback * various fixes * minor updates to storage architecture * ported custom partition content to clustered * fix incorrect menu key * influxctl 2.5.0 (influxdata#5339) * updated influxctl database create with partition info * added influxctl table create command * ported influxctl table create command to clustered * Apply suggestions from code review Co-authored-by: Jason Stirnaman <[email protected]> * fixed mentions of influx vs influxctl in v3 docs --------- Co-authored-by: Jason Stirnaman <[email protected]> * Add manage table task-based docs with partitioning info (influxdata#5340) * add manage table task-based docs with partitioning info * Apply suggestions from code review Co-authored-by: Jason Stirnaman <[email protected]> --------- Co-authored-by: Jason Stirnaman <[email protected]> * influxctl 2.5.0 release notes (influxdata#5343) * influxctl 2.5.0 release notes * Apply suggestions from code review Co-authored-by: Joshua Powers <[email protected]> --------- Co-authored-by: Joshua Powers <[email protected]> --------- Co-authored-by: Jason Stirnaman <[email protected]> Co-authored-by: Joshua Powers <[email protected]>
DG12 · Mar 4, 2024 · 9e4034d · 9e4034d
1 parent 1fa9432
commit 9e4034d
Show file tree

Hide file tree

Showing 46 changed files with 3,019 additions and 59 deletions.
diff --git a/assets/js/datetime.js b/assets/js/datetime.js
@@ -2,7 +2,18 @@ const monthNames = ["January", "February", "March", "April", "May", "June", "Jul
 var date = new Date()
 var currentTimestamp = date.toISOString().replace(/^(.*)(\.\d+)(Z)/, '$1$3') // 2023-01-01T12:34:56Z
 var currentTime = date.toISOString().replace(/(^.*T)(.*)(Z)/, '$2') + '084216' // 12:34:56.000084216
-var currentDate = date.toISOString().replace(/\d{2}\:\d{2}\:\d{2}\.\d*/, '00:00:00') // 2023-01-01T00:00:00Z
+
+function currentDate(offset=0, trimTime=false) {
+  outputDate = new Date(date)
+  outputDate.setDate(outputDate.getDate() + offset)
+
+  if (trimTime) {
+    return outputDate.toISOString().replace(/T.*$/, '') // 2023-01-01
+  } else {
+    return outputDate.toISOString().replace(/T.*$/, 'T00:00:00Z') // 2023-01-01T00:00:00Z
+  }
+}
+
 function enterpriseEOLDate() {
   var inTwoYears = date.setFullYear(date.getFullYear() + 2)
   earliestEOL = new Date(inTwoYears)
@@ -11,5 +22,9 @@ function enterpriseEOLDate() {
 
 $('span.current-timestamp').text(currentTimestamp)
 $('span.current-time').text(currentTime)
-$('span.current-date').text(currentDate)
-$('span.enterprise-eol-date').text(enterpriseEOLDate)
+$('span.enterprise-eol-date').text(enterpriseEOLDate)
+$('span.current-date').each(function() {
+  var dayOffset = parseInt($(this).attr("offset"))
+  var trimTime = $(this).attr("trim-time") === "true"
+  $(this).text(currentDate(dayOffset, trimTime))
+})
diff --git a/assets/styles/layouts/_article.scss b/assets/styles/layouts/_article.scss
@@ -208,7 +208,6 @@
   "article/warn";
 
 
-
   //////////////////////////////// Miscellaneous ///////////////////////////////
 
   .required,
@@ -227,17 +226,11 @@
       font-weight: $medium;
     }
 
-    &.blue {
-      color: $b-dodger;
-    }
-
-    &.green {
-      color: $gr-viridian;
-    }
-
-    &.magenta {
-      color: $p-comet;
-    }
+    &.normal {font-style: normal;}
+
+    &.blue {color: $b-dodger;}
+    &.green {color: $gr-viridian;}
+    &.magenta {color: $p-comet;}
   }
 
   h2,

diff --git a/assets/styles/layouts/article/_columns.scss b/assets/styles/layouts/article/_columns.scss
@@ -0,0 +1,39 @@
+div {
+  &.columns-wrapper {
+    container-type: inline-size;
+    container-name: columns;
+  }
+  &.columns-2 {columns: 2;}
+  &.columns-3 {columns: 3;}
+  &.columns-4 {columns: 4;}
+
+  &.columns-2,
+  &.columns-3,
+  &.columns-4 {
+    margin: 1.5rem 0 2.5rem;
+
+    > *:first-child {margin-top: 0}
+  }
+}
+
+///////////////////////////////// MEDIA QUERIES ////////////////////////////////
+
+@container columns (max-width: 780px) {
+  div {
+    &.columns-4 {columns: 3;}
+  }
+}
+@container columns (max-width: 550px) {
+  div {
+    &.columns-3,
+    &.columns-4 {columns: 2;}
+  }
+}
+@container columns (max-width: 350px) {
+  div {
+    &.columns-2,
+    &.columns-3,
+    &.columns-4 {columns: 1;}
+  }
+}
+
diff --git a/assets/styles/layouts/article/_html-diagrams.scss b/assets/styles/layouts/article/_html-diagrams.scss
@@ -424,6 +424,39 @@ table tr.point{
   }
 }
 
+/////////////////////////// Scaling strategy diagrams //////////////////////////
+
+.scaling-strategy {
+  margin: 2rem 0 3rem;
+
+  .node {
+    border: 2px solid $article-text;
+    border-radius: 6px;
+    height: 6rem;
+    width: 4rem;
+  }
+
+  .dashed {
+    border-style: dashed;
+    border-color: rgba($article-text, .5)
+  }
+
+  .outer {
+    height: auto;
+    width: fit-content;
+    position: relative;
+  }
+
+  .inner {
+    margin: 2rem 1.25rem -2px;
+  }
+
+  &.horizontal {
+    display: flex;
+    .node:not(:first-child) {margin-left: 1.25rem;}
+  }
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 ///////////////////////////////// MEDIA QUERIES ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////

diff --git a/assets/styles/layouts/article/_opacity.scss b/assets/styles/layouts/article/_opacity.scss
@@ -0,0 +1,19 @@
+em, span, strong {
+  &.op90 {opacity: .9;}
+  &.op85 {opacity: .85;}
+  &.op80 {opacity: .8;}
+  &.op75 {opacity: .75;}
+  &.op70 {opacity: .7;}
+  &.op65 {opacity: .65;}
+  &.op60 {opacity: .6;}
+  &.op55 {opacity: .55;}
+  &.op50 {opacity: .5;}
+  &.op45 {opacity: .45;}
+  &.op40 {opacity: .4;}
+  &.op35 {opacity: .35;}
+  &.op30 {opacity: .3;}
+  &.op25 {opacity: .25;}
+  &.op20 {opacity: .2;}
+  &.op15 {opacity: .15;}
+  &.op10 {opacity: .1;}
+}
diff --git a/assets/styles/layouts/article/_svgs.scss b/assets/styles/layouts/article/_svgs.scss
@@ -37,6 +37,51 @@ svg {
     &.full {path { &#left, &#center, &#right {fill:$fill-color; }}}
   }
 
+  ////////////////// InfluxDB v3 storage architecture diagram //////////////////
+
+  &#influxdb-v3-storage-architecture {
+    margin: 2rem 0 3rem;
+    max-width: 750px;
+
+    .shape {
+      fill:none;
+      stroke: $article-text;
+      stroke-width: 1.5;
+      stroke-miterlimit :10;
+
+      &.op70 {opacity: 0.7}
+      &.op50 {opacity: 0.5}
+      &.op25 {opacity: 0.25}
+
+      &.dashed {
+        stroke-width: 1;
+        stroke-dasharray:4,3;
+      }
+    }
+    .title {
+      fill: $product-enterprise;
+      font-weight: $medium;
+      font-size:20px;
+    }
+    .text {
+      fill: $article-text;
+      font-size: 18px;
+      &.small {font-size: 16px;}
+      &.bold {
+        font-weight: $medium;
+        color: $article-bold;
+      }
+      &.italic {font-style: italic;}
+    }
+    .diagram-line {
+      fill: none;
+      stroke: $nav-active;
+      stroke-width: 1.5;
+      stroke-miterlimit: 10;
+      &.dashed {stroke-dasharray:2,4;}
+    }
+    .arrow {fill: $nav-active;}
+  }
 }
 
 @include media(small) {