Merge pull request #178 from sasaki77/config-editor

ENH: remove gf-form appearances in ConfigEditor
sasaki77 · Nov 22, 2024 · ba32e7d · ba32e7d
2 parents cf13ea7 + 67e0ca3
commit ba32e7d
Show file tree

Hide file tree

Showing 3 changed files with 404 additions and 464 deletions.
diff --git a/src/components/ConfigEditor.tsx b/src/components/ConfigEditor.tsx
@@ -69,83 +69,71 @@ export class ConfigEditor extends PureComponent<Props> {
           onChange={onOptionsChange}
         />
         <h3 className="page-heading">Misc</h3>
-        <div className="gf-form-group">
-          <div className="gf-form-inline">
-            <InlineField
-              label="Use Backend"
-              labelWidth={LABEL_WIDTH}
-              tooltip="Checking this option will enable the data retrieval with backend. The archived data is retrieved and processed on Grafana server, then the data is sent to Grafana client."
-              interactive={true}
-            >
-              <InlineSwitch value={options.jsonData.useBackend ?? false} onChange={this.onUseBEChange} />
-            </InlineField>
-          </div>
-          <div className="gf-form-inline">
-            <InlineField
-              label="Default Operator"
-              labelWidth={LABEL_WIDTH}
-              interactive={true}
-              tooltip={
-                <p>
-                  Controls processing of data during data retrieval. Refer{' '}
-                  <a
-                    href="https://slacmshankar.github.io/epicsarchiver_docs/userguide.html"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Archiver Appliance User Guide
-                  </a>{' '}
-                  about processing of data. Special operator <code>raw</code> and <code>last</code> are also available.{' '}
-                  <code>raw</code> allows to retrieve the data without processing. <code>last</code> allows to retrieve
-                  the last data in the specified time range.
-                </p>
-              }
-            >
-              <Select
-                value={options.jsonData.defaultOperator}
-                options={operatorOptions}
-                onChange={this.onOperatorChange}
-                placeholder="mean"
-              />
-            </InlineField>
-          </div>
-          <div className="gf-form-inline">
-            <InlineField
-              label="Hide Invalid"
-              labelWidth={LABEL_WIDTH}
-              interactive={true}
-              tooltip={<p>Hide sample data whose severity is invalid with a null value.</p>}
-            >
-              <InlineSwitch value={options.jsonData.hideInvalid ?? false} onChange={this.onHideInvalidChange} />
-            </InlineField>
-          </div>
-          <div className="gf-form-inline">
-            <InlineField
-              label="Use live feature (Alpha)"
-              labelWidth={LABEL_WIDTH}
-              interactive={true}
-              tooltip="(Caution) This is a alpha feature. Live feature provides live updating with PVWS WebSocket server."
-            >
-              <InlineSwitch value={options.jsonData.useLiveUpdate ?? false} onChange={this.onUseLiveUpdateChange} />
-            </InlineField>
-          </div>
-          <div className="gf-form-inline">
-            <InlineField
-              label="PVWS URI (Alpha)"
-              labelWidth={LABEL_WIDTH}
-              interactive={true}
-              tooltip="URI for PVWS WebSocket server."
-            >
-              <input
-                type="text"
-                value={options.jsonData.liveUpdateURI}
-                className="gf-form-input max-width-15"
-                placeholder="ws://localhost:8080/pvws/pv"
-                onChange={this.onLiveUpdateURIChange}
-              />
-            </InlineField>
-          </div>
-        </div>
+        <InlineField
+          label="Use Backend"
+          labelWidth={LABEL_WIDTH}
+          tooltip="Checking this option will enable the data retrieval with backend. The archived data is retrieved and processed on Grafana server, then the data is sent to Grafana client."
+          interactive={true}
+        >
+          <InlineSwitch value={options.jsonData.useBackend ?? false} onChange={this.onUseBEChange} />
+        </InlineField>
+        <InlineField
+          label="Default Operator"
+          labelWidth={LABEL_WIDTH}
+          interactive={true}
+          tooltip={
+            <p>
+              Controls processing of data during data retrieval. Refer{' '}
+              <a
+                href="https://epicsarchiver.readthedocs.io/en/latest/user/userguide.html#processing-of-data"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Archiver Appliance User Guide
+              </a>{' '}
+              about processing of data. Special operator <code>raw</code> and <code>last</code> are also available.{' '}
+              <code>raw</code> allows to retrieve the data without processing. <code>last</code> allows to retrieve the
+              last data in the specified time range.
+            </p>
+          }
+        >
+          <Select
+            value={options.jsonData.defaultOperator}
+            options={operatorOptions}
+            onChange={this.onOperatorChange}
+            placeholder="mean"
+          />
+        </InlineField>
+        <InlineField
+          label="Hide Invalid"
+          labelWidth={LABEL_WIDTH}
+          interactive={true}
+          tooltip={<p>Hide sample data whose severity is invalid with a null value.</p>}
+        >
+          <InlineSwitch value={options.jsonData.hideInvalid ?? false} onChange={this.onHideInvalidChange} />
+        </InlineField>
+        <InlineField
+          label="Use live feature (Alpha)"
+          labelWidth={LABEL_WIDTH}
+          interactive={true}
+          tooltip="(Caution) This is a alpha feature. Live feature provides live updating with PVWS WebSocket server."
+        >
+          <InlineSwitch value={options.jsonData.useLiveUpdate ?? false} onChange={this.onUseLiveUpdateChange} />
+        </InlineField>
+        <InlineField
+          label="PVWS URI (Alpha)"
+          labelWidth={LABEL_WIDTH}
+          interactive={true}
+          tooltip="URI for PVWS WebSocket server."
+        >
+          <input
+            type="text"
+            value={options.jsonData.liveUpdateURI}
+            className="gf-form-input max-width-15"
+            placeholder="ws://localhost:8080/pvws/pv"
+            onChange={this.onLiveUpdateURIChange}
+          />
+        </InlineField>
       </>
     );
   }

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
@@ -195,7 +195,7 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource }: Props):
             <p>
               Controls processing of data during data retrieval. Refer{' '}
               <a
-                href="https://slacmshankar.github.io/epicsarchiver_docs/userguide.html"
+                href="https://epicsarchiver.readthedocs.io/en/latest/user/userguide.html#processing-of-data"
                 target="_blank"
                 rel="noopener noreferrer"
               >