From 7d93fe6903b88dbdb4a4b110e55441ef84329338 Mon Sep 17 00:00:00 2001
From: Faust1 <fdewas@aneo.fr>
Date: Mon, 27 May 2024 14:50:59 +0200
Subject: [PATCH] update docs according to formation

---
 .docs/components/global/Center.vue         |  4 +++
 .docs/components/global/HorizontalArea.vue | 35 ++++++++++++++++------
 .docs/content/2.layout.md                  |  4 +++
 .docs/content/4.Dashboard.md               |  6 ++--
 .docs/content/5.inspection-page.md         |  2 +-
 .docs/content/6.DataGrids/3.columns.md     | 10 +++++--
 .docs/content/7.Data/3.Sessions.md         |  4 +--
 .docs/content/7.Data/4.Tasks.md            |  2 +-
 .docs/content/8.Settings/0.navigation.md   | 30 +++++--------------
 9 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/.docs/components/global/Center.vue b/.docs/components/global/Center.vue
index 64a7214ff..e7076e24a 100644
--- a/.docs/components/global/Center.vue
+++ b/.docs/components/global/Center.vue
@@ -13,4 +13,8 @@ article {
   padding: none;
   margin: none;
 }
+
+article * {
+  margin: auto;
+}
 </style>
\ No newline at end of file
diff --git a/.docs/components/global/HorizontalArea.vue b/.docs/components/global/HorizontalArea.vue
index c515629a6..71d4a0558 100644
--- a/.docs/components/global/HorizontalArea.vue
+++ b/.docs/components/global/HorizontalArea.vue
@@ -1,9 +1,9 @@
 <template>
   <section>
-    <div :style="`width:${left}%`">
+    <div id="left">
       <slot name="left" />
     </div>
-    <div :style="`width:${right}%`">
+    <div id="right">
       <slot name="right" />
     </div>
   </section>
@@ -11,17 +11,24 @@
 
 <script setup>
 const props = defineProps({
-  left: Number,
-  right: Number,
+  left: String,
+  right: String,
+  justifyRight: String,
 });
 
-if (!props.left && !props.right) {
-  props.left = 50;
-  props.right = 50;
+const justifyRight = props.justifyRight || 'center';
+let right = 50;
+let left = 50;
+
+if (props.left && props.right) {
+  left = `${Number(props.left)}%`;
+  right = `${Number(props.right)}%`;
 } else if (!props.right) {
-  props.right = 100 - Number(props.left);
+  left = `${Number(props.left)}%`;
+  right = `${100 - Number(props.left)}%`;
 } else if (!props.left) {
-  props.left = 100 - Number(props.right);
+  right = `${Number(props.right)}%`;
+  left = `${100 - Number(props.right)}%`;
 }
 
 </script>
@@ -33,4 +40,14 @@ section {
   justify-content: space-between;
   align-items: center;
 }
+
+#left {
+  width: v-bind('left');
+}
+
+#right {
+  width: v-bind('right');
+  display: flex;
+  justify-content: v-bind('justifyRight');
+}
 </style>
\ No newline at end of file
diff --git a/.docs/content/2.layout.md b/.docs/content/2.layout.md
index 488de50ae..c8fce5555 100644
--- a/.docs/content/2.layout.md
+++ b/.docs/content/2.layout.md
@@ -2,7 +2,9 @@
 
 The layout of ArmoniK is quite simple. It is composed of a [header](#header), a [navigation bar](#navigation-bar) and the [main content](#main-content) of the page.
 
+::center
 ![\[Image\] ArmoniK GUI Dashboard Layout](/armonik-layout.png)
+::
 
 ## Main Content
 
@@ -10,7 +12,9 @@ Every page display its name at the top left of the screen. In the top right corn
 
 ## Header
 
+::center
 ![\[Image\] ArmoniK GUI Header](/armonik-header.png)
+::
 
 The left side of the header is purely informational. You can retrieve your profile name (`Anonymous`).
 
diff --git a/.docs/content/4.Dashboard.md b/.docs/content/4.Dashboard.md
index 887f7d6e2..f5ad1a1a1 100644
--- a/.docs/content/4.Dashboard.md
+++ b/.docs/content/4.Dashboard.md
@@ -1,18 +1,16 @@
 # Dashboard
 
-The Dashboard is the landing page of ArmoniK. It can be personnalized for a unique experience.
-
 ::alert{type="warning"}
 The Dashboard may change in future versions.
 ::
 
-## Organization
+The Dashboard is the landing page of ArmoniK. It allows the user to have a simple and personnalized view of the ArmoniK Cluster. Anyone can simply add or delete DataGrids to the Dashboard.
 
 ::horizontal-area
 #left
 The dashboard is organized into lines. By default, a line can receive a single [component](#components). A line can be splited in order to receive more components.
 
-Most of the magic relies on the **Dashboard configuration panel** at the bottom right of the screen. It will permit you to:
+Most of the magic relies on the **Dashboard configuration panel** at the bottom right of the page. It will permit you to:
 
 - Add a component.
 - Split the lines.
diff --git a/.docs/content/5.inspection-page.md b/.docs/content/5.inspection-page.md
index 77a33e41d..f7387026e 100644
--- a/.docs/content/5.inspection-page.md
+++ b/.docs/content/5.inspection-page.md
@@ -1,6 +1,6 @@
 # Inspection Pages
 
-Inspection pages are usefull when you want to display every information about a single item. They are available for [Partitions](./7.Data/2.Partitions.md), [Sessions](./7.Data/3.Sessions.md), [Tasks](./7.Data/4.Tasks.md) and [Results](./7.Data/5.Results.md) pages.
+Inspection pages are usefull when you want to display every information about a single item. They are available for [Partitions](./7.Data/2.Partitions.md), [Sessions](./7.Data/3.Sessions.md), [Tasks](./7.Data/4.Tasks.md) and [Results](./7.Data/5.Results.md).
 
 ::center
 ![[Image] Inspection Page example](/inspection-page.png)
diff --git a/.docs/content/6.DataGrids/3.columns.md b/.docs/content/6.DataGrids/3.columns.md
index d8cbd573d..cd06e6993 100644
--- a/.docs/content/6.DataGrids/3.columns.md
+++ b/.docs/content/6.DataGrids/3.columns.md
@@ -58,7 +58,7 @@ Statuses are **always sortable and filterable**.
 #left
 This column is only available to [Applications](../5.Data/1.Applications.md), [Partitions](../5.Data/2.Partitions.md) and [Sessions](../7.Data/3.Sessions.md) Datagrids, and display the number of tasks grouped by one or more status.
 
-You can click on one number to be redirected to the [Tasks](../7.Data/4.Tasks.md) page, filtered by the desired statuses.
+The tasks of a session, application or partition will be grouped by their statuses in this column. A "Status Group" can group many statuses. Clicking on a group will redirect you to the [Tasks Datagrid](../7.Data/4.Tasks.md), filtered by the desired statuses.
 
 You can edit the displayed statuses by clicking on the button next to `Tasks by Statuses` in the column header.
 
@@ -74,9 +74,13 @@ Tasks by Statuses columns are **not filterable and sortable**.
 
 ## Custom Columns
 
-The custom columns are available for [Sessions](../7.Data/3.Sessions.md) and [Tasks](../7.Data/4.Tasks.md) datagrids. They represent values that are not available by default in ArmoniK. They represent a field of the `Custom Data` object column. By adding a custom column, you can display a new column.
+Some data fields are not available in ArmoniK. Those fields are unique for each application and might contains important information about the run. Since they change from a user to another, the GUI cannot have them by default.
 
-You can add, edit or delete a custom columns via the button `Manage Custom Columns` in the `Options` actions in the top right corner of the toolbar.
+To display those data fields, you can use custom columns. Those columns will look for the data located in the `options.options` (displayed as the "Custom Data" column) field of a task or session.
+
+The custom columns are available for [Sessions](../7.Data/3.Sessions.md) and [Tasks](../7.Data/4.Tasks.md) datagrids. They represent values that are not available by default in ArmoniK.
+
+You can add, edit or delete a custom columns via the button `Manage Custom Columns` in the `Options` actions in the top right corner of the toolbar. You will then be able to indicate the field you want to add.
 
 ::alert{type="warning"}
 When adding custom columns, be careful to name them correctly. They are case sensitive, so a misplaced capital letter may break a column, and no data will be displayed.
diff --git a/.docs/content/7.Data/3.Sessions.md b/.docs/content/7.Data/3.Sessions.md
index 810042d77..1cd923956 100644
--- a/.docs/content/7.Data/3.Sessions.md
+++ b/.docs/content/7.Data/3.Sessions.md
@@ -32,7 +32,7 @@
 
 #### Badges explanation
 
-::horizontal-area{right=90}
+::horizontal-area{right='90' justifyRight='start'}
 #left
   :badge[Options]{type="info"}
 
@@ -40,7 +40,7 @@
 Fields with this badge are parts of the **Tasks Options** field.
 ::
 
-::horizontal-area{right=90}
+::horizontal-area{right='90' justifyRight='start'}
 #left
   :badge[Computed]{type="warning"}
 
diff --git a/.docs/content/7.Data/4.Tasks.md b/.docs/content/7.Data/4.Tasks.md
index 88d18164c..bc7877a48 100644
--- a/.docs/content/7.Data/4.Tasks.md
+++ b/.docs/content/7.Data/4.Tasks.md
@@ -44,7 +44,7 @@
 
 #### Badges explanation
 
-::horizontal-area{right=90}
+::horizontal-area{right=90 justifyRight='start'}
 #left
   :badge[Options]{type="info"}
 
diff --git a/.docs/content/8.Settings/0.navigation.md b/.docs/content/8.Settings/0.navigation.md
index e9b583591..20d184216 100644
--- a/.docs/content/8.Settings/0.navigation.md
+++ b/.docs/content/8.Settings/0.navigation.md
@@ -1,29 +1,15 @@
 # Navigation settings
 
-You can modify the navigation bar in the left area of the settings page. It is composed of pages and dividers (visual elements).
+You can modify the navigation bar in the left area of the settings page. It is composed of pages and dividers (visual separator).
 
-## Adding a page
+In the settings, the navigation bar is displayed as a list of elements. Every one of them is composed of an icon, a name and an action.
 
-Click on `+ Add a status` at the bottom of the list. If you want, you can have the same page twice.
+- You can **drag the icon** to **update the order** of the navigation bar list.
+- You can **click on the name** and **select a page** to directly change the page.
+- You can **open the action menu** and **click on remove** the remove the current element from the list.
 
-## Updating order
+To **add a new page**, click on `+ Add a status` at the bottom of the list. Nothing prevents you from displaying the same page twice.
 
-You can simply drag and drop an element by its **icon** of the list to another position.
+When you are **done modifying**, click on the `save` button to update the navigation bar.
 
-## Changing an element
-
-To change an element, click on its name. A list should appear. You can then update the element by another.
-
-## Removing an element
-
-To remove an element, open the actions menu by clicking on the dots right next to the element name, and click on `remove`.
-
-## Saving modification
-
-You can find a `save` button at the bottom of the page.
-
-## Reseting
-
-You can reset to your previously saved version of the navigation bar by clicking on `Reset`.
-
-You can also reset to the default values by clicking on `Reset to default`.
\ No newline at end of file
+If you want to reset to your last saved modification, click on `reset`. You can also reset to the default values by clicking on `Reset to default`.
\ No newline at end of file